Hexo yilia 主题优化方案

Hexo 虽然好用，但配置主题时遇到的坑确实是挺多的，网上大部分的回答都是复制粘贴、良莠不齐，所以把自己优化 yilia 主题的过程整理了一下，希望后来的人可以少走弯路。

Hexo 主题优化

修改 Hexo 配置文件

配置根目录下的 _config.yml ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# Site
title: eW1z4rd 树屋  # 网页标题
subtitle: 左手程式，右手诗  # 侧边菜单栏描述
author: eW1z4rd  # 作者名

# URL
url: https://eW1z4rd.github.io  # 网站链接
root: /  # 网站根目录
permalink: :year/:month/:day/:title/  # 文章路径格式

# Writing
post_asset_folder: true  # 生成资源文件夹
highlight:  # 代码高亮
  enable: true
  line_number: true
  auto_detect: false

# Extensions
theme: yilia  # 使用的主题

# Deployment
deploy:  # 部署到 Github Page
  type: git
  repo: git@github.com:eW1z4rd/eW1z4rd.github.io.git
  branch: master

修改 yilia 配置文件

配置 yilia 文件夹下的 _config.yml（hexo/themes/yilia/_config.yml）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
# Header
menu:  # 主页左侧菜单
  主页: /
  归档: /archives

# SubNav
subnav:  # 子导航
  github: "https://github.com/eW1z4rd/"
  mail: "mailto:chill_wizard@foxmail.com"

# Content
excerpt_link: 阅读全文  # 文章截断按钮文字
show_all_link: false  # 文章卡片右下角常驻链接

# 目录
toc: 2  # 目录常显
toc_empty_wording: '暂无目录…'  # 目录为空时的提示

# 是否有快速回到顶部的按钮
top: true  

# Miscellaneous
baidu_analytics: 'f307e**********9239b6cfc3'  # 百度统计 API
favicon: /img/favicon.ico  # ico 图标

# 作者头像
avatar: /img/portrait.jpg  

# 样式定制
style:
  header: '#4d4d4d'  # 头像上面的背景颜色
  slider: 'linear-gradient(200deg,#ccc,#000)'  # 右滑板块背景

# 智能菜单
smart_menu:
  innerArchive: '所有文章'
  friends: false
  aboutme: '关于我'

# 个人描述
aboutme:
  <br>
  evil or weakness
  <br>

配置缺失模块

  • 确保 node 版本大于 6.2
  • 在根目录执行：npm install hexo-generator-json-content --save
  • 在根目录下的 _config.yml插入以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

在 Hexo 中添加本地图片

  • 把根目录下 _config.yml 中的 post_asset_folder 选项设置为 true
  • 在根目录下执行命令：npm install hexo-asset-image --save
  • 之后再运行 hexo n "xxxx" 新建博文时，/source/_posts 文件夹内除了 xxxx.md 文件还会有一个同名的文件夹，可以将想引入的图片先复制到这个文件夹中，在按照 markdown 的格式引入即可：![img](xxxx/图片名.jpg)

修改代码块样式

原始的代码块的确不堪入目，我们可以改变配色，使它看起来舒服一些。

  • 直接修改编译好的文件（theme/yilia/source/main.0cf68a.css）：
  • 修改代码块背景色，搜索 .article-entry .highlight,，修改background，推荐色值：#333333
  • 修改代码字体颜色，搜索 .article-entry .highlight .line，修改color，推荐色值：#f8f8ff
  • 修改行号颜色，搜索 .article-entry .highlight .gutter pre .line，修改color，推荐色值：#5686bf

访问量的统计和显示

在 themes/yilia/layout/_partial/after-footer.ejs 中引入脚本：

1
2
// 添加不蒜子统计
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  • 统计网站访问总量
    修改 themes/yilia/layout/_partial/footer.ejs，添加本站总访问量和本站总访客数：

    1
    2
    3
    4
    5
    # PV 方式，单个用户连续点击 n 篇，记录 n 次访问值
    <span id="busuanzi_container_site_pv"> Pageviews: <span id="busuanzi_value_site_pv"></span> times </span>              
    # UV 方式，单个用户连续点击 n 篇，记录 1 次访问值
    <span class="post-meta-divider">|</span>
    <span id="busuanzi_container_site_uv"> Total Visitors: <span id="busuanzi_value_site_uv"></span> persons </span>

  • 单篇文章点击量
    在 themes/yilia/layout/_partial/article.ejs 的 <%- partial('post/title', {class_name: 'article-title'}) %> 处插入代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <% if (!index && post.comments){ %>
    	<br/>
    	<a class="cloud-tie-join-count" href="javascript:void(0);" style="color:gray;font-size:14px;">
    	<span class="icon-sort"></span>
    	<span id="busuanzi_container_page_pv" style="color:gray;font-size:14px;">
    		阅读数：<span id="busuanzi_value_page_pv"></span>次
    	</span>
    	</a>
    <% } %>

百度统计配置

  • 申请账号：百度统计官网
  • 在 yilia 文件夹下的 _config.yml 中找到 baidu_analytics，填入 key 即可。

设置网站 ico

  • 先到 小智LOGO 制作在线 logo
  • 再到 比特虫 用做好的 logo 生成 icon 图标（favicon.ico）
  • 把 icon 图标放到 themes/yilia/source/img 文件夹下，再在 yilia/_config.yml 下引用 favicon: /img/favicon.ico 即可。

设置 404 页面

使用 腾讯公益404，在根目录 source 文件夹下新建 404.html 文件，并添加以下代码：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>404</title>
	</head>
	<body>
	<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="https://ew1z4rd.github.io" homePageName="回到我的主页"></script>
	</body>
</html>

添加评论系统

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="gitalk-container"></div>
<div id="gitalk-container" style="padding: 0px 30px 0px 30px;"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>

<script>
if(<%=theme.gitalk.enable%>){
   var gitalk = new Gitalk({
   clientID: '<%=theme.gitalk.ClientID%>',
   clientSecret: '<%=theme.gitalk.ClientSecret%>',
   repo: '<%=theme.gitalk.repo%>',
   owner: '<%=theme.gitalk.githubID%>',
   admin: ['<%=theme.gitalk.adminUser%>'],
   id: md5(window.location.pathname),
   distractionFreeMode: '<%=theme.gitalk.distractionFreeMode%>'
})
gitalk.render('gitalk-container')
}
</script>
  • 在 /theme/yilia/layout/_partial/article.ejs 文件中最后一行 <% } %> 之前添加以下内容：
1
2
3
4
5
6
7
<% if(theme.gitalk.enable && theme.gitalk.distractionFreeMode){ %>
	<%- partial('gitalk', {
    key: post.slug,
  	title: post.title,
    url: config.url+url_for(post.path)
	}) %>
<% } %>
  • 在 yilia 的配置文件 _config.yml 中 gitment 下面添加以下配置文件：
1
2
3
4
5
6
7
8
9
# Gitalk
gitalk: 
  enable: true
  clientID: '690107f290505440a443'  #  Github 生成
  clientSecret: 'a05e41d3ce002564284f3615e37fec2ea2b0cd51'  #  Github 生成
  repo: 'ew1z4rd.github.io'  # 用户名.github.io
  owner: 'ew1z4rd'  # 用户名
  admin: 'ew1z4rd'  # 用户名
  distractionFreeMode: true

关于 litten.me:9005

主题作者为了更好地完善这个主题，有时会收集用户的客户端信息，目前作者关闭了服务器，这个脚本会导致博客持续加载，解决方法是将 themes/yilia/source/main.0cf68a.js 里面的 //litten.me:9005/badjs/ 注释掉，详情见：https://github.com/litten/hexo-theme-yilia/issues/580

Hexo 使用

标签

tag 对应的是文章的标签，在需要标识多个标签时，使用如下语法：tags: [tag1, tag2, tag3]

截断

如果不使用文章截断，会默认在主页显示整篇文章，可以在 md 文件中需要做截断的地方使用 <!--more--> 标记。

常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
hexo new "postName"  # 新建文章
hexo new page "pageName"  # 新建页面
hexo clean  # 清除缓存文件和静态文件（public）
hexo generate  # 生成静态页面至 public 目录
hexo server  # 在本地服务器运行
hexo deploy  # 将.deploy_git 目录部署到 GitHub

# 简写：
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

# 常用复合命令：
hexo d -g
hexo s -g