Skip to content

Butterfly主题美化教程

基于 Hexo^7.3.0 + butterfly^5.3.5 的美化教程合集

魔改效果

原生Butterfly:Butterfly

按照本教程全部改完即可实现博主一样的效果:Xdogの小岛

修改方法

建议直接修改主题源码,兼容性好,但后续升级需要自己对比 Butterfly更新日志 手动升级。

教程默认给出的样式是 CSS 源代码,新手不会看Butterfly更新日志手动升级也可以通过挂载 CSS、JS 的方法修改主题。

butterfly 主题挂载 CSS、JS 方法:

在主题配置文件的inject配置项挂载,挂载的文件全局生效,themes\butterfly\source为根目录

示例:

yml
inject:
  head: # 头部 </head> 之前,如 CSS 或者 jquery 这种需要提前加载的文件
    - <link rel="stylesheet" href="/css/xdog.css">
    - <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  bottom: # 底部 </body> 之前,页面加载完成后才生效的 js 代码
    - <script src="/js/xdog.js"></script>

参考