自定义样式和脚本

John Doe 2025-03-03 22:13:41
Categories： Tags：

您可以在 Hexo 项目根目录下的 source 文件创建您的自定义 CSS 或 JS 文件，然后通过 path 指定文件路径引入界面。

为了保证您能够正常更新主题，我们并不推荐您在主题目录的 source 文件下创建自定义 CSS 或 JS 文件，因为这可能会在主题同步时丢失。

_config.node-tree.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#------------------------------------------------------
# 自定义 CSS 和 JS
#------------------------------------------------------
custom:
  css:
    # css 文件路径列表
    path:
  js:
    # 只在初次页面加载的脚本
    base:
      # 是否异步加载
      async: true
      # js文件路径列表
      path:
    # 页面更新时将会重新加载的脚本
    reload:
      # 是否异步加载
      async: true
      # js文件路径列表
      path:

自定义样式

您可以编写多个样式文件，然后通过 custom.css.path 引入样式文件。

如果您只需要引入单个样式文件，您可以直接为 custom.css.path 指定一个路径

_config.node-tree.yml
1
2
3
custom:
  css:
    path: /css/custom.css

如果您有多个样式文件，您按照以下方式配置：

_config.node-tree.yml
1
2
3
4
5
custom:
  css:
    path:
      - /css/foo.css
      - /css/bar.css

自定义脚本

本主题的脚本分为了基本脚本和重载脚本两种，基本脚本只会在界面初次加载时执行，重载脚本在每次文章无感加载后重新执行。

类型 执行时机 执行次数
基本脚本 界面初次加载时执行 一次
重载脚本 每次文章无感加载后重新执行 多次

基本脚本

基本脚本没有任何限制，但您可以控制脚本是否异步加载，该设置默认关闭。当脚本异步加载时，不会阻塞界面的渲染，但可能在界面渲染之前完成执行。

如果您只需要引入单个脚本文件，您可以直接为 custom.js.base.path 指定一个路径。

_config.node-tree.yml
1
2
3
4
5
custom:
  js:
    base:
      async: false
      path: /js/custom.js

如果您有多个基本脚本，请按照以下方式配置：

_config.node-tree.yml
1
2
3
4
5
6
7
custom:
  js:
    base:
      async: false
      path:
        - /js/foo.js
        - /js/bar.js

重载脚本

如果您在重载脚本中使用 let 或 const，那么在脚本重载时，将会导致界面错误。我们建议您在重载脚本中只使用 var 声明您的变量。或着，您可以将重载脚本放入自执行函数中，对变量的作用域进行隔离。

同时，您也可以控制脚本是否异步加载，该设置默认关闭。当脚本异步加载时，不会阻塞界面的渲染，但可能在界面渲染之前完成执行。

如果您只需要引入单个重载脚本，您可以直接在 custom.js.reload.path 中指定文件路径。

_config.node-tree.yml
1
2
3
4
5
6
custom:
  js:
    reload:
      async: true
      path:
        - /js/custom.js

如果您有多个重载脚本，请按照以下方式配置：

_config.node-tree.yml
1
2
3
4
5
6
custom:
  js:
    reload:
      async: true
      path:
        - /js/custom.js
自定义样式和脚本
https://exisi.github.io/hexo-theme-node-tree/zh-CN/配置/自定义样式和脚本/index.html
作者
发布于
2025年3月3日
许可协议
网页图标
顶部菜单