侧边栏壁纸
博主头像
小莫唐尼博主等级

为 API 生,为框架死,为 debug 奋斗一辈子丨talk is cheap,show me the code.

  • 累计撰写 15 篇文章
  • 累计创建 23 个标签
  • 累计收到 41 条评论

目 录CONTENT

文章目录

Joe美化(2):增加一个大图功能

小莫唐尼
2022-08-11 / 0 评论 / 2 点赞 / 71 阅读 / 1,139 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-08-27,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

这两天群友的博客中,增加了一个比较好看的大图功能,想来应该也不难,自己也动手实现(cv)了一下,也顺手简单封装了一下更方便使用,确实不错o( ̄▽ ̄)d。

功能描述

Joe大图效果,可在任意页面中使用

废话不多说,先来看看效果:
image-1660529484974

代码使用

第一步:下载文件

包含三个文件:
模板文件:big_banner.ftl
样式文件:big-banner.min.css
脚本文件:big-banner.min.js

第二步:引入css样式文件

引用css的方式有三种,分别如下:

第1种:主题设置-自定义-外部css链接 中填写 big-banner.min.css的文件地址,如图:

image-1660530381616

第2种:主题设置-自定义-自定义css 中拷贝 big-banner.min.css的文件内容粘贴到此处,如图:

image-1660530454036

第3种:

joe主题编辑,在 template/common/header.ftl文件中,加入css链接,如图:

image-1660530976196

第三步:引入js文件

在joe主题设置中,找到自定义,在 外部JS链接(head)配置中加入js链接,如图:

image-1660530541877

第四步:上传 big_banner.ftl 模板文件

上传第一步下载好的 big_banner.ftl模板文件到joe主题的template/common/ 文件夹中,如图:

image-1660533415125

第五步:初始化大图插件

在joe主题设置中,找到自定义,在 自定义JS(body)配置中加如下代码:

// 以下配置参数均为默认值
new EvanBigBanner({
       followMode: false,                       // 跟随模式
       followTheme: false,                      // 跟随主题
       height: "45vh",                          // 大图高度
       mobileHeight: "30vh",                    // 大图在移动端下显示的高度
       imgUrl: "",                              // 图片(支持api)
       cssUrls: [],                             // 样式文件地址
       wavesColor: "#fff",                      // 波浪效果颜色
       wavesHeight: "3rem",                     // 波浪高度
       titleTiktok: false,                      // 标题文字抖音效果
       titleText: "来自小莫唐尼的Joe首页大图",   // 标题文字
       titleColor: "#ffffff",                   // 标题文字颜色
       titleShadow: "-3px 2px 6px #1c1f21",     // 标题文字阴影
       hitokotoParams: {},                      // 一言参数,参考:https://developer.hitokoto.cn/sentence/#%E8%AF%B7%E6%B1%82%E5%8F%82%E6%95%B0
       hitokotoApi: "https://v1.hitokoto.cn",   // 一言API
       hitokotoColor: "#ffffff",                // 一言文字颜色
       hitokotoEnable: true,                    // 是否使用一言
       });
       
       // 以上配置均为默认值,可直接使用进行初始化
       // new EvanBigBanner();
参数说明:
参数名 参数类型 是否必填 默认值 说明
followMode Boolean false 颜色是否跟随主题模式,夜间和白天
followTheme Boolean false 颜色是否跟随主题样式,颜色会跟随当前主题设置的颜色
height String 45vh 大图在PC端的高度
mobileHeight String 30vh 大图在移动端的高度
imgUrl String “” 如果在big_banner.ftl模板中已设置background-image:url('图片地址');,则此处无需设置
cssUrls Array [ ] 如果在前面的css设置中,没有进行任何设置,可以在此处添加big-banner.min.css的文件路径
wavesColor String #fff 波浪效果颜色
wavesHeight String 3rem 波浪高度
titleTiktok Boolean false 标题效果,是否在标题使用抖音文字效果
titleText String “来自小莫唐尼的Joe首页大图” 标题文字,如果设置为空,则默认使用当前所在页面的标题
titleColor String #ffffff 标题颜色,若启用的标题效果,则失效
titleShadow String -3px 2px 6px #1c1f21 标题文字的阴影
hitokotoParams Object {} 一言参数, 可参考:链接
hitokotoApi String https://v1.hitokoto.cn 一言api地址
hitokotoColor String #ffffff 一言文字颜色
hitokotoEnable Boolean true 是否启用一言功能
第六步:修改 index.ftl 模板文件

编辑joe主题,找到index.ftl 首页文件,在首页文件中加入如下代码:
参数说明:title=当前页面的标题 type=当前页面的类型,按照图中箭头所指的对应的内容进行填充即可,该参数在第五步中的titleText参数设置为 titleText:""空时候生效

   <#import "template/common/big_banner.ftl" as bigBanner> 
    <@bigBanner.bigbanner title="首页" type="index"/> 

位置,如图所示(ps:其他页面也可以同样引用生效):

首页添加大图示例:

image-1660529869476

友情链接页面示例:

image-1660530182846

😎😎😎大功告成,欢迎各位大佬提出意见~

2

评论区