前言

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

提前总结

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

详细教程

创建文件夹

我们找到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。

如果有其他问题请留言