前言

如果你还没阅读过官方文档，强烈建议先去过一遍 Butterfly官方文档，能解决很多问题。

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

创建文件

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

目录结构大致如下：

1
2
3
4
5
6
7
source/
├── css/
│   └── style.css
├── js/
│   └── script.js
├── _posts/
└── ...

引入文件

一般来说，我们都是在主题配置文件（_config.butterfly.yml）里面的 inject 引入。

  • css 文件一般在 head 引入
  • js 文件一般在 bottom 引入（特殊情况除外）

例如引入 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?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

参考

🔗 站外链接，请注意甄别
Leonus
Hexo博客添加自定义css和js文件