手把手教你修改butterfly主题的样式

提要

很多小伙伴私信我，想让我谈谈主题样式如何修改，如何添加css和js。所以这里我特意写一文，进行说明，对主题修改主要以下两个方法：

1. 外部挂载代码（推荐）
2. 直接修改源码

我是推荐外部挂载代码的，原因是稳定性高，可以平滑升级，不到迫不得已不要修改源码

挂载方法

打开主题目录下的配置文件，找到以下代码

# inject
# 插入代码到头部</head>之前 和 尾部</body>之前
inject:
  head:
   - <link rel="stylesheet" href="挂载路径以及文件名">
  bottom:
   - <script src="挂载路径以及文件名"></script>

通常在head处挂载css代码，在bottom处挂载js代码

css代码通常放在\Butterfly\source\css目录下，js代码放在\Butterfly\source\js目录下

我的挂载配置如下，具体按照你的需求来

# inject
# 插入代码到头部</head>之前 和 尾部</body>之前
inject:
  head:
   # 背景
   - <link rel="stylesheet" href="/css/background.css">
   # 外挂插件
   - <link rel="stylesheet" href="/css/VolantisTags.css">
   # 阿里图标
   - <link rel="stylesheet" href="/css/iconfont.css">
  bottom:
   # 折叠
   - <script src="/js/classify.js"></script>
   # 背景
   - <script src="/js/background.js"></script>
   # 外挂插件
   - <script src="/js/VolantisTags.js"></script>

例子

以我的上一篇文章，butterfly外挂插件增强(超全)，为例，https://blog.csdn.net/howareyou2104/article/details/106361169

最后在主题配置文件中挂载即可，注意格式

# inject
# 插入代码到头部</head>之前 和 尾部</body>之前
inject:
  head:
   # 外挂插件的css
   - <link rel="stylesheet" href="/css/VolantisTags.css">
  bottom:
   # 外挂插件的js
   - <script src="/js/VolantisTags.js"></script>

学会了吗？