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

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

  • 累计撰写 20 篇文章
  • 累计创建 35 个标签
  • 累计收到 105 条评论

目 录CONTENT

文章目录

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

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

这两天群友的博客中,增加了一个比较好看的大图功能,想来应该也不难,自己也动手实现(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

第五步:初始化大图插件

说明:本次版本不提供配置项修改打大图高度,和随机背景图片api配置,您需要在big-banner.min.css文件中找到如下代码自行修改:

  
.evan-big-banner {
    position: relative;
    width: 100%;
     /* PC端:大图的高度修改:任意值,比如  height: 50vh; 丨 height: 100vh; 等  */
    height: calc(50vh + 50px);
    display: flex;
    margin-top: -4rem;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: transparent;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    transition: height 1.6s ease-in-out;
     /* 背景图片地址修改:支持随机图片api和具体的图片链接 */
    background-image:url('https://blog.xccx.cc/api/tp/index.php');
}

@media (max-width: 768px) {
    .evan-big-banner {
        margin-top: 0;
        /* 移动端:大图的高度修改:任意值,比如  height: 50vh; 丨 height: 100vh; 等  */
        height: 40vh;
    }
    .evan-big-banner .infomation .title {
        font-size: 1.5rem;
    }
    .evan-big-banner .infomation .desctitle {
        font-size: 0.9rem;
    }
    .evan-big-banner .evan-big-banner_bottom .waves-svg {
        height: 3rem;
    }
}

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

// 以下配置参数均为默认值
new EvanBigBanner({
       followMode: false,                       // 跟随模式
       followTheme: false,                      // 跟随主题
       titlePrint: true,                        // 是否启用打字机效果
       titlePrintInterval: 300,                 // 打字机速度
       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 颜色是否跟随主题样式,颜色会跟随当前主题设置的颜色
titlePrint Boolean false 标题效果,是否在标题使用打字机效果(抖音效果二选一)
titlePrintInterval Number 300 打字机的打字速度
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

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

12

评论区