关于我的butterfly主题配置文件的一些修改
本文适用于没有Hexo基础的童鞋,这里我会介绍我主题配置文件所有的修改
准备工作
首先是下载butterfly主题,在博客根目录下
1 | git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly |
如果出现克隆失败,把上面的https
改成git
即可,克隆完成之后根目录下的/themes中就会出现butterfly的主题文件夹,然后要把博客根目录下的_config.yml
中的theme
属性改成butterfly,注意要有一个空格缩进
,改完之后:
1 | hexo clean |
在本地打开是否主题,这里很容易出现一大串数字没有界面这种情况需要安装pug以及 stylus 的渲染器,回到博客根目录下输入;
1 | npm install hexo-renderer-pug hexo-renderer-stylus --save |
安装完成之后再次重复上面的那三个操作,然后出现下面这个图就表示主题配置成功了
这里强烈建议把主题下面的配置文件放到根目录下面,即把/themes/butterfly下的_config.yml
文件改名为_config.butterfly.yml
.这样主要是为了防止升级以后主题配置文件会被更换,当然如果不升级的话可以忽略,并且当他和博客的主题配置文件都存在时,主题配置文件优先级会更高
修改记录
当我们的主题更换好之后,除了写文章之外我们还会关心网站的样式,因为现在连导航栏都还没有,因此需要先了解hexo博客的一些必要概念:首先是首页菜单栏的添加,找到主题配置文件
中最上方的menu
属性,#在markdown文件中属于注释,把前面#删除进行修改:
1 | Home: / || fas fa-home |
其中/xxx/
表示该页面的路径,后面的为Font Awesome的小图标,可以自己DIY,分享我修改后的文件为:
1 | menu: |
修改完之后记得要创建对应的界面:根目录下hexo new page xxx
,xxx
为你这里要添加的页面名称,修改menu最好复制,自己手写容易出错.md
文件缩进很重要,
代码样式
依然是主题配置文件
1 | highlight_theme: mac |
代码复制
依然是主题配置文件
1 | highlight_copy: true |
代码块默认展开/关闭
依然是主题配置文件
1 | highlight_shrink: false |
代码换行
依然是主题配置文件
1 | code_word_wrap: true |
代码高度限制
依然是主题配置文件
1 | highlight_height_limit: 200 |
社交图标
这里我没有选择使用Font Awesome的小图标,如果想要使用它里面的小图标,直接在主题配置文件
找到social进行修改即可,但是它里面的小图标数量有限,所以我选择了阿里巴巴矢量库来引用小图标,效果展示:
修改方法为:->引用阿里巴巴矢量库iconfont修改社交图标
顶部图
我的顶部图设置情况,依然是主题配置文件
:
1 | # The banner image of home page |
emm这里就不展示具体的图了 总之修改顶部图可以在这里修改 图片路径可以为本地路径也可以是网络路径或者是这种渐变色的写法
Footer
可以看到我的页脚是可以自由飞舞的小鱼,这个设置主要是参考了花猪老哥的博客,但是他有一些小细节没有处理好,所以我又单独写了一份,应该是比较完善的。
指路:->页脚设置游动的小鱼
评论
评论区域的添加耽误了我不少的时间,一开始设置的时候出现了各种问题,后来多方百度搜索最终决定使用valine
,效果如图:
修改方法:->添加valine评论
在线聊天
我使用的是daovoice
工具,也踩了不少坑,效果如图:
修改方法:->添加在线聊天工具Daovoice
本地搜索
- 根目录下输入
npm install hexo-generator-search
下载需要的插件 - 修改主题配置文件:这样就可以看到菜单栏多了一个搜索可以进行本地搜索:
1
2local_search:
enable: true
鼠标点击效果
直接修改主题配置文件
即可
1 | fireworks: |
效果:
标题前的小图标
修改主题配置文件
1 | beautify: |
field
表示在全站(site)还是文章页(post)生效title-prefix-icon
为你想要修改的图标样式,可以在Font Awesome中找到喜欢的小图标,例如进行修改即可
title-prefix-icon-color
为小图标的样式
效果:
网站副标题
修改主题配置文件
1 | subtitle: |
会先显示source
里的内容,然后再展示sub
中自己编辑的内容
效果:
snackbar弹窗
修改主题配置文件
1 | snackbar: |
其实只是在边上显示了 开不开都无所谓
Pjax
据说是可以复加载相同的资源(css/js), 从而提升网页的加载速度。我修改的页面为:
1 | pjax: |
网站图标
主题配置文件
的修改:
1 | # Favicon(網站圖標) |
友链魔改
这里我参考的花猪的文章:->传送门
添加说说
这里我参考了小嘉的部落格
->传送门
留言板
同样参考了小嘉的部落格
->传送门
写在最后
该文章只是展示了我的博客修改了哪些内容,当然还有一些很琐碎的东西像头像修改啦之类的没有详细说明,如果你想都详细的改的话可以参考官方文档,我的很多也都是参考他的文档,最后有任何问题欢迎在评论区告诉我(^▽^)