前言

因为写了几篇关于 hexo 博客的文章，基本都涉及到自定义 css 和 js。然后就有很多人问怎么用，在哪添加等等等等。
一看就是没好好读文档！
官方文档链接放下面了，晚会去看，先看我的，我说的详细。
Butterfly 主题官方文档：https://butterfly.js.org/

超前总结

很多人迷茫无外乎不知道在哪创建，创建了不知道在哪引入。
文件夹创建位置：source 目录下面，也就是和_post目录同级
在哪引入：如果是全站css/js 的话，可以在主题配置文件里的 inject 下的 head 和 bottom 里引入，如果是某一页的，可以在该页里面直接引入。

详细教程

创建文件夹

我们找到 source 文件夹
在里面创建 js 和 css 文件夹，如果你有其他需求，也可以在这里创建文件夹，例如存放图片的 img 文件夹，存放字体的 font 文件夹等等。
不要直接在主题目录下面创建文件夹，虽然这样也可以，但是主题更新没做转移的话就 GG 了

引入文件

一般来说，我们都是在主题配置文件（_config.butterfly.yml）里面的 inject 引入。
css 文件在 head 引入，js 文件在 bottom 里引入，有的 js 要求在 head 引入，不然无法生效。
例如引入 css 里面的 style.css 和 js 文件夹里面的 script.js 文件夹，可以这样写:

1
2
3
4
5
6
7
8
9
10
11
12

inject:
  head:
    # 自定义css
    - <link rel="stylesheet" href="/css/style.css?v1">
    # 静态文件后面加个  ?任意内容  可以在每次更新之后用户自动重新请求.
    # 例如添加 ?1 ,在修改此文件后改成 ?2 ,用户访问你的网站时,不会使用本地的缓存,而是请求新的内容。没修改的话就不用动。
  bottom:
    # 自定义js
    - <script src="/js/script.js?v1"></script>
    # 引入多个文件就直接往下复制一行改一下文件名即可，如下：
    - <script src="/js/script1.js?v1"></script>
    - <script src="/js/script2.js?v1"></script>

注意：路径要添加 /xxx，不能添加 ./xxx。
如果有其他问题请评论区留言