博客放映厅页面制作教程
前言刚弄好这个页面的时候，我就兴奋的在博客看了一晚的电影，哈哈哈，在博客里看电影😎是真的爽快！ 预览效果如下: 放映厅页面跳转至本博客中的放映厅页面查看页面效果。 新建pug模板新建themes\butterfly\layout\includes\page\video.pug文件，内容如下： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 ...
博客电玩城页面制作教程
前言我觉得游戏页面是个很有趣的页面，相信大多数小伙伴都会喜欢这个页面，希望这个教程能让小伙伴们有所收获。 预览效果如下: 电玩城页面跳转至本博客中的电玩城页面查看页面效果。 新建pug模板新建themes\butterfly\layout\includes\page\game.pug文件，内容如下： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152 ...
目录跳转不准确
前言这个问题很早就发现了，一直没有去理会，今天周末，刚好捣鼓了一下，解决了这个点击目录跳转不准确的问题。分享一下解决方法，希望能帮助到有需要的小伙伴。 问题现象当点击文章中的目录时，跳转到的地方并不是目录所指向的标题，而是感觉在随便乱跳转。 问题分析因为懒加载要浏览到那个位置才加载那个位置的图片，然后我文章中有图片，所以点击目录跳转的时候，因为下面有些没有浏览到的图片还没有加载，所以页面的高度计算会有误差，我长的文章都是点击目录跳转有问题的（博客中的问题已修复）。 解决方案关闭懒加载功能即可，修改 _config.butterfly.yml 主题配置文件，修改内容如下： 12345678# Lazyload (圖片懶加載)# https://github.com/verlok/vanilla-lazyloadlazyload:- enable: true+ enable: false field: site # site/post placeholder: blur: true Hexo三连1hexo clean && hexo g && h ...
添加设置面板与导航栏设置按钮
前言起初是看到heo佬做的控制面板，扒过来之后想起右下角有悬浮按钮，应该可以整合到一起，结果弄着弄着，直接就将右下角的按钮弄成一个面板了，这个就叫设置面板，控制面板就被设置面板代替了。 预览效果如下图： 修改pug模板添加设置面板，找到themes\butterfly\layout\includes\rightside.pug文件，因为修改的东西过多，直接将下面的代码覆盖全文即可： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384- const { readmode, translate, darkmode, aside, chat_btn } = thememixin rightsideItem(array) each item in array case item when ...
侧边栏微信公众号美化
前言这个效果我很喜欢，所以专门写一篇美化教程，希望能帮到一样喜欢这种效果的小伙伴们。鸣谢安知鱼大佬的指导！ 预览效果如下图： 修改主题配置文件找到主题配置文件 _config.butterfly.yml ，开启侧边栏微信，修改如下： 1234567891011 card_announcement: enable: false content: Welcome to my blog !!! </br> Here you can find some help documents about my open source projects. card_weixin:- enable: false+ enable: true card_recent_post: enable: true limit: 5 # if set 0 will show all sort: updated # date or updated sort_order: # Don't modify the setting unless you ...
个人信息卡片美化
前言有小伙伴问我用的个人信息卡片怎么做的，今天刚好周末，修复完bug就过来写一篇教程。 预览效果如下图： 新建pug模板找到themes\butterfly\layout\includes\widget\card_author.pug文件，因为修改的地方很多，所以直接整个文件都换成如下代码： 123456789101112131415161718192021222324252627if theme.aside.card_author.enable .animate__fadeIn.card-info.card-widget.wow( data-wow-delay="0" data-wow-duration="" data-wow-iteration="" data-wow-offset="" style="visibility: visible; animation-name: fadeIn;" ) .author-info-top .c ...
Hexo博客添加自定义css和js文件
前言就算再简单的教程，也要坚持发布，不要因为简单而忽略，不积硅步无以成江河~希望能帮到有需要的小伙伴呀~！ 如何引入自己写的js脚本在source文件夹下，新建 js 文件夹，在js文件夹中新建js脚本，编写自己的custom.js脚本，写完后，在主题配置文件 _config.butterfly.yml 中引入刚刚新建的custom.js自定义脚本，添加内容如下： 12345678910# Inject# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)# 插入代码到头部 </head> 之前 和 底部 </body> 之前inject: head: # 自定义css bottom: # 自定义js - <script async data-pjax src="/js/custom.js"></script> #添 ...
页脚美化
前言因为有挺多小伙伴问我页脚的美化问题，所以在这里特意出一篇文章，希望能帮助到有需要的小伙伴们~！ 预览效果如下图： 修改pug修改文件themes\butterfly\layout\includes\footer.pug，因为修改的地方过多，所以将下面的内容覆盖文件全文即可： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384#footer_deal a.deal_link(href="mailto:shine.yulingle@gmail.com" title="mail") svg.icon.footer-mail.iconfont.icon-youjian(onclick=`mailto:shine.yulingle@gmail.com`,title="ma ...
页脚的随机友链
前言 需要先更换成新美化的页脚再往下看，因为挺多小伙伴问我这个功能是怎么实现的，所以今天把bug修的差不多了，我就来写一遍小教程，希望能帮助到有需要的小伙伴们。鸣谢Leonus大佬提供的脚本代码😁!!! 预览效果如下图： 添加js功能1. 生成友链数据的功能实现博客项目的根目录下新建link.js文件，用于生成友链数据，文件代码如下： 无友链范围限制有友链范围限制1234567891011const YML = require('yamljs')const fs = require('fs')let ls = [], data = YML.parse(fs.readFileSync('source/_data/link.yml').toString().replace(/(?<=rss:)\s*\n/g, ' ""\n'));data.forEach((e, i) => { ls = ls.concat(e.link_list) //获取link ...
