老猫的 Blog

修改 Hexo 的渲染器，让首页加载 html 代码

  • ~1.62K 字

图0-1 subtitle的位置
如图，箭头指向的是网站的副标题。
在 Hexo 根目录下_config.yml文件中，subtitle的值就是网页的副标题。
我的这个网站是这样写的：

1
2
3
4
5
6
7
8
# Site
title: 老猫的 Blog
subtitle: '养老养老（目前正在测试捏www）'
description: 'oldcat'
keywords:
author: oldcat
language: zh-Hans
timezone: 'Asia/Shanghai'

如果想要实现“每次打开网页，都会出现不同的一句话”或者引入“一言”的话，就需要把副标题改成一段 html 代码。但是，如果直接修改_config.yml文件，就会有以下效果：图0-2 错误的修改
所以我们要找到相关主题的渲染器，修改其中的代码，让它直接加载我们的 html 代码。

1. 查找主题的渲染器

一般来说，Hexo 主题渲染器的位置是在hexo\node_modules\[主题的名字]\layout
我用的是 kratos-rebirth 的主题，也就是在hexo\node_modules\hexo-theme-kratos-rebirth\layout。

在这个目录下面有一些.ejs文件，EJS 是用 JavaScript 代码生成 HTML 页面的模板语言，想要了解更加详细的资料可以查阅 EJS文档。
我们要改的是 header，就打开目录下_partial\header.ejs（其他主题同理）

2. 修改渲染器的 ejs 文件

Blog 主题的开发者会根据 Hexo API 提供的变量 api 来获取页面信息，进行开发。
下面是摘抄的一些全局变量：

变量 描述 类型
site 网站变量 object; 见 网站变量
page 针对该页面的内容以及 front-matter 中自定义的变量。 object; 见 页面变量
config 网站配置 object (站点的配置文件)
theme 主题配置。继承自网站配置。 object (主题配置文件)
path 当前页面的路径（不含根路径） string
url 当前页面的完整网址 string
env 环境变量 object

根据表格知“站点的配置文件”对应的是config，所以要改的副标题是config.subtitle。
按Ctrl+F定位至副标题处，把ejs的标签<%= config.title %>换成需要用的 html 即可。

3. 附加：个性化随机一言的代码

html:

1
<div id='as_title'></div><script type='text/javascript' src='/js/[js的文件名].js'></script>

JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
var all = 4 //条目的总数
tips = new Array(all);
//条目内容
tips[0] = '「空山新雨后，天气晚来秋」';
tips[1] = '「海内存知己，天涯若比邻」';
tips[2] = '';
tips[3] = '';

index = Math.floor(Math.random() * tips.length);
var radm
radm = Math.floor(Math.random() * 2);
document.getElementById("as_title").innerHTML = tips[index];

记得把 js 代码保存至hexo\public\js\内。