butterfly魔改记录
butterfly魔改记录
摘星记录魔改
导航栏部分
准备工作
在
BLOG\themes\butterfly\source\css
创建nav-menus.css
文件在
BLOG\themes\butterfly\source\js
创建nav-menus.js
文件
导航栏最开始的样子
本地搜索功能
- 安装插件
1 | npm install hexo-generator-search --save |
- 主题配置文件
_config.butterfly.yml
:
1 | # Local search |
分离搜索栏与菜单栏
关于Butterfly的导航栏的一些教程 | Ariasakaの小窝 (yisous.xyz)
这里我发现第一段不能改,一改导航栏就会显示不见,可能是因为主题更新后的原因
这里附上我的BLOG\themes\Butterfly\layout\includes\header\nav.pug代码
1 | nav#nav |
导航栏居中
关于Butterfly的导航栏的一些教程 | Ariasakaの小窝 (yisous.xyz)
注意
这里是在自定义css文件里添加的,不知道的可以看这篇文章
https://b.leonus.cn/2022/custom.html
去掉导航栏项目底下的蓝色长条
关于Butterfly的导航栏的一些教程 | Ariasakaの小窝 (yisous.xyz)
子菜单横向布局
关于Butterfly的导航栏的一些教程 | Ariasakaの小窝 (yisous.xyz)
网站标题返回主页动画(鼠标放在上面会出现家的图标)
关于Butterfly的导航栏的一些教程 | Ariasakaの小窝 (yisous.xyz)
这里要注意你的site name是id标签还是class标签!
1 | .site-name::before{ |
顶栏常驻
关于Butterfly的导航栏的一些教程 | Ariasakaの小窝 (yisous.xyz)
显示标题
关于Butterfly的导航栏的一些教程 | Ariasakaの小窝 (yisous.xyz)
修改BLOG\themes\Butterfly\layout\includes\header\nav.pug
1 | nav#nav |
彩色图标
Hexo中Buttefly主题美化进阶(八) | 偷掉月亮 (moonshuo.cn)
选择图标
可以选择阿里的图标官网,里面有很多好看的图标
在里面找到需要的图标后,加入购物车
点击右上角的购物车图标,然后点击添加至项目
项目可以自己自建
添加至项目后,会自动跳转到这个页面,如果要彩色的图标的话,还需要点击项目设置,把彩色勾上。
下载图标并移入博客文件夹
然后点击下载至本地
进入文件夹会发现这些文件,然后我们只需要把下面框柱的文件移到\themes\butterfly\source\css下。
为了以后更好的管理,可以在css文件下新建一个font文件夹,专门来存放图标的文件。
添加图标样式
打开主题butterfly的config文件,在里面找到inject标签,添加样式
1 | # Inject |
修改图标
上述都做完后,我们就可以去修改图标了,例如导航栏的图标:
iconfont 后面的名字要与css文件里的名字对应上,否则不生效
图标大小修改
如果图标的大小不合适的话,可以在css文件里进行修改。
效果
导航栏天气
一图流背景
Butterfly主题 一图流背景与顶部图修改 | 边缘矩阵
如果不想要底部透明的,可以不修改这个,默认是false
1 | # Footer Background |
然后去BLOG\themes\butterfly\source\css\_layout\footer.styl
里把这个删掉,就没有那个蓝色背景了。
引入外挂标签
- 安装插件
1 | npm install hexo-butterfly-tag-plugins-plus --save |
考虑到hexo自带的markdown渲染插件hexo-renderer-marked
与外挂标签语法的兼容性较差,建议您将其替换hexo-renderer-kramed
1 | npm uninstall hexo-renderer-marked --save |
- 添加配置文件,以下为写法示例
在主题配置文件_config.butterfly.yml
中添加
1 | # tag-plugins-plus |
基于 Butterfly 的外挂标签引入 - 笔记 | 鸟不拉诗 (niaobulashi.com)
- 外挂标签的使用
生成永久链接
Hexo 中permalink使用 Hexo-abbrlink生成唯一永久文章链接及小优化_lessCoder的博客-CSDN博客
1 | permalink: :year/:month/:day/:title/ #这是原有的 |
缺陷:title本身如果更改,那么原有的链接就将失效,所有的引用就无效了。
!!!abbrlink一旦生成,即使修改title,其内容也不会再更改了,除非将abbrlink字段手动删除,然后hexo会重新根据title自动生成。
宽屏适配
Hexo Butterfly宽屏适配指北 | Ariasakaの小窝 (yisous.xyz)
- 修改边栏卡片大小
- 分页适配
- 友链界面适配
外链权重
hexo-filter-nofollow 会为你的博客中的外链自动添加 rel=”external nofollow noreferrer” 属性,从而 改善你的网站的安全性和 SEO。
1 | npm i hexo-filter-nofollow --save |
打开hexo的配置文件_config.yml,注意是hexo而不是主题。
1 | nofollow: |
解决hexo引入图床,手机和web不显示图片的问题
在blog\themes\butterfly\layout\includes目录下有一个head.pug文件,修改该文件的meta信息,会使生成的所有页面都带有该head。在head.pug文件中添加如下内容
1 | meta(name="referrer" content="no-referrer") |