很早之前就喜欢奇妙保罗大佬的 Single 主题，奈何当时只支持 Typecho 而没有 Hexo 版本的，只得作罢。令人惊喜的是，作者本人在2021年又将其移植到 Hexo 中，称为 Hingle。

一个简洁大气，含夜间模式的 Hexo 博客模板。

正如其简介所言，Hingle 主题就是那么简约干净，清清爽爽。另外，个人比较喜欢这款主题的配色（蓝色太好看了），还有可爱的二次元风格背景图。以下就是本人搭建好的博客页面，是不是挺简洁美观的~

Hingle博客预览

话不多说，下面就直接开换。さあ、始めよう!

前置工作

在使用这款主题之前，你应该首先安装 Node.js，然后将 Hexo 安装好，并且新建一个 Hexo 博客目录。

这部分参考一下 Hexo 的官方文档即可，这里不再赘述。下面简单贴下 Hexo 安装的命令：

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

引入主题

引入主题也比较简单，按照 Hingle 的官方文档一步一步来做：

首先将下载好的主题源码放进 Hexo 根目录的 themes 下，并将文件夹重命名为 hingle
```
git clone https://github.com/Dreamer-Paul/Hingle.git
mv Hingle themes/hingle
```
然后打开Hexo目录下的 _config.yml 文件，将里面的 theme 字段，更换成 hingle 即可
```
theme: hingle
```

现在运行 hexo g 和 hexo s 指令，然后在浏览器打开 http://localhost:4000/，可以看到主题已经引入成功了。

基本配置

以下是主题的基本配置过程，如没有特别说明，_config.yml 文件都指的是主题目录下的配置文件。

个人信息

将默认的信息改成你自己的就行，个人信息会在文章末尾显示。

author: 'Hingle' # 作者名称
author_avatar: 'https://sdn.geekzu.org/avatar/d22eb460ecab37fcd7205e6a3c55c228?s=200&r=X&d=' # 作者头像
author_text: '请在这里设置你的作者信息' # 作者信息

主页社交链接

icon 代表的是 font awesome 4 中的图标名

social: # 社交链接
  - title: 'Github'
    icon: 'github'
    link: 'https://github.com/cloudnzk'
  - title: '首页'
    icon: 'home'
    link: 'https://silentlight.vercel.app/'
  - title: '音乐'
    icon: 'music'
    link: 'https://music.163.com/#/user/home?id=81845106'

背景图

要启用背景图，去掉 background 前的注释即可。

background: 'https://api.paugram.com/wallpaper?source=gh' # 主题背景

关于页面

现在点击导航栏上的 关于我，会显示 404 not found，因为关于页面还没有被创建出来。

menu: # 页眉菜单项目
  '关于': /about
  '朋友们': /friends

创建一个关于的独立页面即可，但需要注意一下页面的路径，要跟 _config.yml 文件中 menu 配置的路径对应上。以下指令是在 about 路径下创建一个名为 index.md 的文件。

hexo new page --path about/index "About me"

favicon图标更换

找到 ~/blog/themes/hingle/source/static/img 路径下的 icon.png，替换成自己的即可。如果不显示新的 favicon 图标，可以强制刷新一下页面，或者清理一下浏览器的缓存。

至此，Hingle 主题的基本配置就完成了。

进阶配置

提高二次元浓度

注意：本节要对 Hingle 主题进行 DIY (~~大量魔改~~)，请谨慎使用

首页展示动漫经典语录
展示追番列表

动漫语录

进入主题目录，找到 layout 目录中的 layout.ejs文件，把以下代码加入到 </body> 标签之前：

<!-- 一言API Start-->
<script>
  fetch('https://v1.hitokoto.cn?c=a&c=b')
    .then(function (res){
    return res.json();
  })
  .then(function (data) {
    var hitokoto = document.getElementById('hitokoto');
    hitokoto.innerText = data.hitokoto + "《" + data.from + "》";
  })
  .catch(function (err) {
  	console.error(err);
  })
</script>
<!-- 一言API End-->

然后对同目录的 index.ejs 进行如下修改

<!-- <span><%= config.description %></span> -->
<!-- 一言 -->
<span id="hitokoto"></span>

追番列表

先安装 hexo-bilibili-bangumi 插件，并进行配置。配置过程省略，请参考文档。
配置完成后，记得先拉取番剧数据信息：hexo bangumi -u，然后再 hexo g ，最后会生成一个 bangumi.html 的静态文件。

在第 2 步会出现 hexo g 失败的情况。因为追番页面没有发表时间，所以page.date 为 undefined，调用unix() 方法会出错。根据报错提示，删掉~/blog/themes/hingle/layout 目录下，page.ejs 与 post.ejs 的以下代码可以得到解决。

// 删除以下代码
<% if (moment().unix() - page.date.unix() >= 15552000) { %>
	<blockquote>这篇文章上次修改于 <%= Math.ceil((moment().unix() - page.date.unix()) / 86400) %> 天前，可能其部分内容已经发生变化，如有疑问可询问作者。
	</blockquote>
<% } %>

完成以上两步后，此时我们对追番页的 想看、在看、看过 进行切换时，会默认打开一个新窗口，这是因为 Hingle 默认将文章的所有链接都设置成外链了：

// 自动添加外链
this.links = function () {
    var l = content.getElementsByTagName("a");
    if(l){
    	ks.each(l, function (t) {
      	t.target = "_blank";
    	});
    }
};

因此，只需要排除掉追番页的链接即可。打开 ~/blog/themes/hingle/source/static/ 下的 hingle.js 文件，进行如下修改：

// 自动添加外链
this.links = function () {
    var l = content.getElementsByTagName("a");
    // 排除追番页
    if(l && l.className.indexOf('bangumi') === -1){
    	ks.each(l, function (t) {
      	t.target = "_blank";
    	});
    }
};

默认夜间模式

编辑 themes/hingle/layout/ 文件夹下的 layout.ejs，在 <body> 标签上添加 dark-theme 的 CSS 样式即可

现在 Hingle 的夜间模式切换有点问题，等作者啥时候有空修复一下吧

博客部署

下面提供了我的整套白嫖方案，具体的步骤可搜索网络的教程解决，在此不再赘述

首先将博客托管到 vercel 上。在 vercel 的 Dashboard 中导入 GitHub 中的博客仓库，并一键部署

vercel部署

遗憾的是，vercel 现在的域名在国内无法访问。因此需要在 Freenom 上申请一个免费域名
然后在 Cloudflare 上配置一下域名的 DNS 解析。这样 DNS 解析时就通过Cloudflare 做了一层代理，使我们的域名能够在国内访问
```
A记录地址：76.76.21.98
CNAME 记录地址：cname-china.vercel-dns.com
```

谷歌、百度收录

让谷歌、百度收录你的网站，让别人能搜索到你的文章

谷歌

生成 sitemap.xml 站点地图
```
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
```
在 Hexo 根目录下的 _config.yml 文件中加入以下配置
```
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml
```
然后用 hexo g 即可生成站点地图，可以看到 public 目录下多出了两个 XML 文件：sitemap.xml 和 baidusitemap.xml
到Google Search Console进行验证，选择网址前缀验证，输入 vercel 分配的博客域名，点击继续
将下载好的 HTML 文件放到主题的 source 目录下
提交 sitemap.xml 站点地图

百度

到百度搜索资源平台添加博客域名，然后验证，验证方式跟上面谷歌的差不多
将下载好的 HTML 文件放到主题的 source 目录下
提交 baidusitemap.xml 站点地图

SEO优化

在 Hexo 根目录下的 _config.yml 文件中配置 description 和 keywords 选项。以我的配置为例：

# Site
title: Silentlight's blog
subtitle: '正视自己的弱小，方能变得更加强大'
description: 'Silentlight的个人小站：一个基于Hexo搭建、使用Hingle主题的静态博客；主要记录我的前端、科研笔记，生活所思所想等'
keywords: 前端,生活,科研,笔记
author: Silentlight
language: zh-CN
timezone: 'Asia/Shanghai'

bug 修复

以下两个bug，作者均已修复，可更新到最新版本使用

font-awesome 图标丢失

2022.11月回来看自己的博客，发现博客的图标全部消失了。F12 打开 Chrome 开发者工具看了下，博客的图标是使用的是 font-awesome，于是推测是引入方面出了问题。

经过一步步排查，原来是 font-awesome 的 CDN 无效了，需要更新 CDN 链接。

解决办法：编辑 themes/hingle/layout/_partial 文件夹下的 head.ejs，修改 font-awesome 的 CDN 链接为 https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

标签页显示“没有标题”解决

打开 ~/blog/themes/hingle/layout/_partial 下的 head.ejs 文件，找到下面几行

else if(is_post() && page.title){
	title = page.title;
}

然后在后面加上以下代码，增加对独立页面的判断与标题赋值

else if(is_page() && page.title){
	title = page.title;
}

Hexo Hingle 主题基础配置&进阶配置