• 欢迎访问风色博客,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入风色群 QQ群
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏风色博客吧

Markdown 点击下载效果

分类三 fengse 2个月前 (07-24) 89次浏览 已收录 0个评论

butterfly 主题的引入方法

效果就在页脚,是不是很想要?这里简述 butterfly 主题的引入方法,其他主题类似,实在不行建议更换 butterfly 主题

!!!不要修改源码,若已修改请恢复原样
在主题配置的 inject 引入 js: https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fishes.js 即可

- <script src="https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fishes.js"></script>

调整页脚阴影透明度 themes\butterfly\source\css\_layout\footer.styl

background-color: alpha($dark-black, .1)

文章页页脚宽度多余导致出现横向滚动条,新建 xxx.css,添加以下 css 引入 inject 即可(若设置了全局背景去掉固定高度 height: 160px 引入即可)

/* 鱼塘固定宽度 */
canvas:not(#ribbon-canvas), #web_bg {
    margin-bottom: -0.5rem;
    display: block;
    width: 100%;
    height: 160px
}

修改源码实现方法(其它主题可参考此处)

  1. 先将扒来的 code 转为 pugMarkdown 点击下载效果写进 \themes\butterfly\layout\includes\footer.pug 末尾
    #jsi-flying-fish-container.container
       script(src='js/fish.js')
    style.
       
           @media only screen and (max-width: 767px){
           #sidebar_search_box input[type=text]{width:calc(100% - 24px)}
        }
  2. 然后在 inject 引入 js: https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fish.js
    - <script src="https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fish.js"></script>
  3. 引入之后效果如下,页脚太高,themes\butterfly\source\css\_layout\footer.styl 调整下 css 即可 (补充:调整页脚阴影透明度为 0.1)
    Markdown 点击下载效果页脚跳动的鱼

    #footer-wrap
       position: absolute
       padding: 1.2rem 1rem 1.4rem
       color: $light-grey
       text-align: center
       left: 0
       right: 0
       top:0
       bottom: 0
       
       #footer
         if hexo-config('footer_bg') != false
           &:before
           position: absolute
           width: 100%
           height: 100%
           background-color: alpha($dark-black, .1)
           content: ''
  4. 另外,还是会出现报错,
    Markdown 点击下载效果报错引用 JS 报错 Uncaught ReferenceError: $ is not defined
    原因一:未引用 jquery 库 jquery.min.js 文件,或者说路径错误;解决办法:
    很简单,引用 jquery-X.X.X.min.js 这个 js 路径文件到当前页面即可。

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    建议将 js 保存到本地引用

    <script src="你的路径/jquery.min.js"></script>

    原因二:忽略了 HTML 中


极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Markdown 点击下载效果
支付宝扫码打赏 微信打赏

如果文章对您有帮助,欢迎移至上方按钮打赏本站

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址