It has been 830 days since the last update, the content of the article may be outdated.

【Hexo】添加自定义 css 和 js 文件

如果你还没阅读过官方文档强烈建议去过一遍官方文档，能解决很多别人看起来很弱智的问题。
为别人好也为自己好。Butterfly 官方文档

1 创建文件

如果想魔改和美化，添加自定义文件是不可避免的。下面来详细说一下 css 和 js 文件的创建和引入，其他文件同理。

我们找到博客根目录下的 source 文件夹（主题的 source 虽然也可以，但是不推荐）
在里面创建 js 和 css 文件夹，也可以创建其他文件夹，例如存放图片的 img 文件夹，存放字体的 font 文件夹等等。

2 引入文件

一般来说，我们都是在主题配置文件（_config.butterfly.yml）里面的 inject 引入。（不知道这个文件的去看文档）
css 文件一般在 head 引入，js 文件一般在 bottom 里引入，特殊情况除外。

例如引入 css 文件夹里面的 style.css 和 js 文件夹里面的 script.js，可以这样写:

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

注意：路径最前面是斜杠，而不是点斜杠，即 /xx/xxx.js，而不是./xx/xxx.js。