这个问题其实官方文档有提到过，但是很多人可能就是看一眼也忘记了，没有去留意这件事，在这里我再说一下

文件的存放位置

如果想魔改和美化，添加自定义 css 和 js 文件是不可避免的。

添加css js 和 添加Page 差不多，都是在 博客根目录下 的 source 文件夹中创建新的文件夹然后存放

image-20250519105448777

我这里 scripts文件夹 就是存放 js 文件的，css文件夹就是存放 css 的

文件的引入

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

主题文档对这个yml标签的说法如下：

如想添加额外的 js/css/meta 等等东西，可以在 Inject 里添加，支持添加到 head( 标签之前)和 bottom(

标签之前)。

请注意：以标准的 html 格式添加内容

例如

1
2
3
4
5
6
inject:
  head:
  	- <link rel="stylesheet" href="/self.css">
  bottom:
  	- <script src="xxxx"></script>

留意: 如果你的网站根目录不是’/’,使用本地图片时，需加上你的根目录。 例如：网站是https://yoursite.com/blog,引用css/xx.css，则设置为<link rel="stylesheet" href="/blog/css/xx.css">

所以说，css文件一般在head引入，js文件一般在bottom里引入

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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。

部分引用自 Hexo博客添加自定义css和js文件