创建文件

如果想魔改和美化,添加自定义文件是不可避免的。下面来详细说一下 css 和 js 文件的创建和引入,其他文件同理。
我们找到博客根目录下的 source 文件夹(主题的 source 虽然也可以,但是不推荐)
在里面创建 js 和 css 文件夹,也可以创建其他文件夹,例如存放图片的 img 文件夹,存放字体的 font 文件夹等等。

引入文件

在主题配置文件(_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。
参考链接:https://blog.leonus.cn/2022/custom.html