Hexo：Butterfly主题引入自定义CSS与JS文件

原文链接：Hexo：Butterfly主题引入自定义CSS与JS文件 | Elvin

前言

• 第一主要是为了自己DIY一些主题配置，丰富现有主题表现，优化页面效果。说人话就是做的更好看

• 第二是因为如果你做优化是直接修改了主题的文件，那么你更新主题时会出问题（除非你不会再更新主题）

操作

1、创建文件夹

在你blog主目录下的source目录下(一定不要是themes目录下那个，那个是主题的source文件)分别创建好css、js、img文件夹，主要是用来存放你自己创建的css、js文件以及图片；这三个文件夹是基础需要的，还有其他的配置文件可以自己另行创建文件夹

我自己这里把这些自定义的配置文件都归档到了source/config下了

2、引入自定义的js、css文件

直接在主题配置文件中配置即可，我的主题配置文件为上图的_config.butterfly.yml

配置方法如下：在主题中找到配置inject

# Inject
# ps：引入自定义css、js
#     css文件在head引入，js文件在bottom里引入，有的js要求在head引入，不然无法生效
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# ps: 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head: #注入自定义css
      - <link rel="stylesheet" href="/css/style.css?v1">
    # - <link rel="stylesheet" href="/xxx.css">
  bottom: #注入自定义js
      - <script src="/js/script.js?v1"></script>
    # - <script src="/xxxx"></script>

引入多个文件则如下

bottom: #注入自定义js
      - <script src="/js/script.js?v1"></script>
      - <script src="/xxxx"></script>

⚠️：路径一定是/xx/xx，不能是./xx/xx

借鉴链接

Hexo博客添加 自定义css和js文件

---

更多知识持续更新中!!!

---

声明

借鉴部分均注明了原文出处，可在文章的借鉴链接处获取原文出处

文中若内容有涉及原版权，请邮件联系[email protected]，涉及的相关文章或内容将会及时更改或取消发布