- 博客搭建14
Hexo中Buttefly主题配置(二)
注意git中粘贴为shift+insert键,而复制为ctrl+insert
原文地址:Hexo中Buttefly主题配置(二) | 偷掉月亮 (moonshuo.cn)
大家好,我是阿硕,专注与后端,略懂前端的一个菜鸟程序猿,今天将为大家讲述Butterfly的安装与主题配置。
Butterfly安装执行以下命令,安装稳定版本,这是国内的gitee,速度比较快
1git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly
安装成功
安装重要的插件,由于butterfly主题与其他的主题使用的渲染方式不同,现在我们需要重新安装一个新的渲染插件,执行以下命令,等待完成
1npm install hexo-renderer-pug hexo-renderer-stylus --save

## 更改主题,尝试启动
此时进 ...
Hexo中Buttefly主题功能增强(九)
原文链接,阅读效果更佳:Hexo中Buttefly主题功能增强(九) | 偷掉月亮 (moonshuo.cn)
大家好,我是阿硕,专注与后端,略懂前端的一个菜鸟程序猿,今天将为大家讲述Butterfly主题的一些功能增强,今天讲述的是添加日历的操作,大家有什么疑问可以去原文进行提问,有邮件通知,博主可以更快回复!!
添加日历效果
添加pug在下面的路径中新建文件card_calendar.pug,并复制下面的代码,而里面的文章写作日历,可以更改为自己喜欢的名字
…\themes\butterfly\layout\includes\widget\card_calendar.pug
1234567if theme.aside.card_calendar.enable .card-widget.card-calendar .card-content .item-headline i.fas.fa-calendar span= _p('文章写作日历') div#calendar.widget
index引入,在同级的 ...
Hexo中Buttefly主题Valine评论系统配置以及美化(七)
Valine系统的设置原文链接:Hexo中Buttefly主题Valine评论系统配置以及美化(七) | 偷掉月亮 (moonshuo.cn)
大家好,我是阿硕,专注与后端,略懂前端的一个菜鸟程序猿,今天教大家Hexo中valine评论的设置。
介绍之所以选择valine是因为操作简单,而且页面的变化的美化我们都可以进行配置,简单功能比较强大,而且快速安全,不要后端
更改配置123456comments: use: Valine #,Disqus # 可实现单评论、双评论(最多两个) text: true # 是否显示评论服务商的名字 lazyload: true # 是否为评论开启lazyload,开启后,只有滚动到评论位置时才会加载评论所需要的资源(开启lazyload后,评论数将不显示) count: true # 是否在文章顶部显示评论数,livere、Giscus 和 utterances 不支持评论数显示 card_post_count: false # 是否在首页文章卡片显示评论数,gitalk、livere 、Giscus 和 utterances 不支持评论 ...
Hexo中Buttefly主题公告栏设置与适配(十二)
原文地址,阅读效果更佳:Hexo中Buttefly主题美化进阶续篇(十一) | 偷掉月亮 (moonshuo.cn)
大家好,我是阿硕,专注与后端,略懂前端的一个菜鸟程序猿,今天将为大家讲述Butterfly主题公告栏的设置。
原作者链接:Butterfly 主题首页增加公告 | realwds’s blog
作者的魔改:
适配了双栏的布局
增加了超链接设置,点击对应的公告即可进入到相应的文章
美化了一些样式,更改了与一些插件的冲突
轮播公告栏设置声明:如果使用这个效果的公告栏,大家对于轮播组件就需要做出更改,Swiper Bar | Akilarの糖果屋大佬的插件就不能使用了(否则公告栏会出现在轮播组件下面),要使用旧版源码魔改方案,但是博主的版本是4.5.0也可以使用旧版的方案
关于公告栏的设置,由于博主使用的双栏配置,而现在很多网上的教程都是关于单栏的,会出现兼容的问题,看来好久的源代码,终于改正过来,同时为了公告的可用性增强,所以重新花了一点时间学习了pug的语法,现在的公告可以点击对应的公告,就可以超链接到相应的文章
建立公告页效果
建立themes/butter ...