¶创建文件

为了实现魔改和美化网站，添加自定义文件是一个不可或缺的步骤。接下来，我将详细说明如何创建和引入 CSS 和 JS 文件，其他类型的文件处理方式类似。

首先，我们需要定位到博客的根目录下，找到 source 文件夹。虽然主题的 source 文件夹也可以进行操作，但不推荐这样做。接下来，请按照以下步骤进行：

创建文件夹：在 source 文件夹内，我们可以创建 js 和 css 文件夹，以便于管理和存放我们的自定义样式和脚本。此外，你还可以根据需要创建其他文件夹，比如：
- img 文件夹：用于存放图片资源。
- font 文件夹：用于存放字体文件。
添加自定义 CSS 和 JS 文件：在 css 文件夹中创建自定义的 CSS 文件，例如 custom.css；在 js 文件夹中创建自定义的 JS 文件，例如 custom.js。这些文件将用于覆盖或增强现有的样式和功能。
引入 CSS 和 JS 文件：要使浏览器加载我们新创建的 CSS 和 JS 文件，需要在主题的模板文件中进行引入。一般来说，这些引入代码应该放在 <head> 标签内（对于 CSS）和 </body> 标签之前（对于 JS）。示例如下：

Hexo-Butterfly主题添加自定义css和js文件-1.webp

¶引入文件

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

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

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文件 | Leonus

Custom Beautify | Akilarの糖果屋