这两天群友的博客中，增加了一个比较好看的大图功能，想来应该也不难，自己也动手实现（cv）了一下，也顺手简单封装了一下更方便使用，确实不错o(￣▽￣)ｄ。
功能描述
Joe大图效果，可在任意页面中使用
废话不多说，先来看看效果：
代码使用
第一步：下载文件
包含三个文件：
模板文件：big_banner.ftl
样式文件：big-banner.min.css
脚本文件：big-banner.min.js
第二步：引入css样式文件
引用css的方式有三种，分别如下：
第1种：主题设置-自定义-外部css链接 中填写 big-banner.min.css的文件地址，如图：
第2种：主题设置-自定义-自定义css 中拷贝 big-banner.min.css的文件内容粘贴到此处，如图：
第3种：
joe主题编辑，在 template/common/header.ftl文件中，加入css链接，如图：
第三步：引入js文件
在joe主题设置中，找到自定义，在 外部JS链接（head）配置中加入js链接，如图：
第四步：上传 big_banner.ftl 模板文件
上传第一步下载好的 big_banner.ftl模板文件到joe主题的template/common/ 文件夹中，如图：
第五步：初始化大图插件
在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：其他页面也可以同样引用生效）：
首页添加大图示例：
友情链接页面示例：
😎😎😎大功告成，欢迎各位大佬提出意见~
评论区