Update: Hexo 主题 material-x 已于 2020-02-22 正式更名为 Volantis

由于我并没有保持工具紧跟最新版本的习惯,仅当有我需要使用的功能或者修复了我无法忍受的 Bug 时我才会考虑主动更新工具。

而这次 Hexo 博客主题 material-x 更新到了版本 v1.2.7 ,修复了我曾在 issue 中反馈过的 markdown 引用语法内部的缩进问题和二级标题的段落间隔问题。针对这两点,我决定获取这次的更新。

但是当我 备份 - 创建 Git 仓库 - 绑定远程库 - git pull 的时候,由于之前对此主题进行过部分定制、更改,此时出现了大量的冲突,无奈只能一个个调整。借此机会顺便记录一下我更改了哪些内容,在此备忘,以供参考。

配置文件部分

修改主题配置文件算是常规的自定义了吧。我主要修改了:

  • 博客基本信息
  • 更改 CDN 库
  • 更改日期格式
  • 取消友链头像占位图
  • 更改封面菜单、导航栏菜单
  • 更改文章列表布局
  • 更改侧边栏部件配置
  • 更改社交信息
  • 关闭分享功能
  • 更改页脚(footer)信息
  • 添加 Valine 评论插件
  • 添加 RSS 配置

博客基本信息

博客最基本的信息,如在搜索框上方显示的名称,博主的社交信息等。

这些内容就不展开了。

更改 CDN 库

由于我调整了部分主题源码(后面会详细提及),所以主题作者提供的 CDN 肯定是不适用于我的了。我需要在主题配置文件中的 info.cdn (在主题配置文件最上方)条目下将 CSS 或 JS 文件的 CDN 路径修改为自己的。

在这里还要感谢 jsDelivr 提供的免费静态资源加速,感激!

注意:material-x 主题 v1.2.6 版本及以后需要在博客根目录配置文件中添加 use_cdn: true 才会启用 CDN,默认是关闭的。

更改日期格式

在显示文章发布、更新时间的地方会按照一定格式来表达。如文章发布时间的格式为 YYYY-MM-DD ,如 2020-02-10 这种形式;但是文章更新时间却是类似 Feb 10, 2020 的形式。这种不统一让我十分不舒服,所以我同意修改成后者的形式。

在主题配置文件中修改:

1
2
date_format: 'pub\li\s\h\e\d \a\t ll' # 使用反斜线转义,避免歧义
update_format: 'll'

具体规范可以参考:http://momentjs.com/docs/

取消友链头像占位图

原主题会给申请友链而不留下头像图片的朋友自动分配一张默认的占位图。但是我选择了一个粗暴的方法,直接不加载图片(加载一个空的路径)。

在主题配置文件中找到:

1
avatar_placeholder:

并将其注释掉或者将后面的内容留空。

更改封面菜单 / 导航栏菜单

封面菜单是指在封面(搜索框下方)显示的按钮菜单,目前我的配置是:Home (主页),Categories (分类页面),Tags (标签页面),About (关于页面)。

每个按钮必须包含:name (按钮显示名字),icon (名字旁边的图标,默认使用 FontAwesome 的免费版),url (按钮点击后跳转的 url 路径)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 主页封面菜单
features:
- name: Home
icon: fas fa-home
url: /
- name: Tags
icon: fas fa-tags
url: tags/
rel: nofollow
- name: Categories
icon: fas fa-folder-open
url: categories/
rel: nofollow
- name: About
icon: fas fa-address-card
url: about/
rel: nofollow

导航栏菜单有两部分,一部分是桌面端的上方导航条上显示的菜单,另一部分是移动端的右上角点击展开的菜单,目前我的这两项设置都是 Home, Tags, Categories, Archives, About 。

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
# 桌面端导航栏菜单
menu_desktop:
- name: Home
icon: fas fa-home
url: /
- name: Tags
icon: fas fa-tags
url: tags/
rel: nofollow
- name: Categories
icon: fas fa-folder-open
url: categories/
rel: nofollow
- name: Achives
icon: fas fa-archive
url: archives/
rel: nofollow
- name: About
icon: fas fa-address-card
url: about/
rel: nofollow

# 手机端导航菜单(从右上角的按钮点击展开)
menu_mobile:
- name: Home
icon: fas fa-home
url: /
- name: Tags
icon: fas fa-tags
url: tags/
rel: nofollow
- name: Categories
icon: fas fa-folder-open
url: categories/
rel: nofollow
- name: Achives
icon: fas fa-archive
url: archives/
rel: nofollow
- name: About
icon: fas fa-address-card
url: about/
rel: nofollow

更改文章列表布局

列表布局再分为主页部分的和文章页面部分的。主页中可以定制每一篇文章在主页显示的 meta 信息,和主页的侧边栏内容;文章页面中可以定制主内容(文章内容和评论区),顶部(header)显示的内容,底部(footer)显示的内容,和侧边栏内容。

每部分具体配置就不展开来讲了,代码里面有解释的,请看。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
layout:
# 文章列表(主页、自定义的列表)布局
posts:
# 列表中每一篇文章的meta信息
meta: [title, author, date, updated, categories, top]
# 列表类页面的侧边栏
sidebar: [grid, plain, category, tagcloud, list]
# 文章页面布局
article:
# 文章页面主体元素,你也可以在页面的Front-matter中设置
body: [article, comments]
# 默认的meta信息,文章中没有配置则按照这里的配置来显示,设置为false则不显示
# 其中,title只在header中有效,music和thumbnail无需在这里设置,文章中有则显示
# 如果tags放置在meta.header中,那么在post列表中不显示(因为卡片下方已经有了)
header: [title, author, date, updated, categories, top]
footer: [date, updated, categories, tags, share]
# 文章页面的侧边栏
sidebar: [toc, grid, plain, categories, tagcloud, list, related_posts]
# 其他的页面布局暂时等于文章列表

更改侧边栏配置

修改自己的侧边栏部件,先说明一下,侧边栏部件定义了不代表就会显示在侧边栏,需要在上一步 layout 布局中开启侧边栏指定字段的部件才会显示。

我在原来的基础上删除了 author 部件,新增了一个 hitokoto·一言 的 plain 部件,新增一个通知板的 plain 部件。新增了一个手动设置的列表 list 部件。

默认显示顺序是先按照 layout 中调用的顺序再按照每个部件定义的顺序。目前暂时只支持一次性调用整个字段的部件,不支持调用单个部件。

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
45
46
47
48
49
50
51
52
53
54
- widget: toc
- widget: grid
icon: fas fa-map-signs
title: MyBlog
rows:
- name: RSS
icon: fas fa-rss
url: /atom.xml
rel: nofollow
- name: Achives
icon: fas fa-archive
url: archives/
rel: nofollow
- name: Friends
icon: fas fa-users
url: friends/
rel: nofollow
- widget: plain
title: "Hitokoto · 一言"
icon: fa fa-paragraph
body: '<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/ChrAlpha/[email protected]/js/hitokoto.min.js"></script><div><p class="hitokoto"></p>

<i class="from"></i></div>'
- widget: plain
title: 'Note Board'
icon: fas fa-bullhorn
body: '**新年快乐,百毒不侵!**'
- widget: category
more:
icon: fas fa-expand-arrows-alt
url: categories/
rel: nofollow
- widget: tagcloud
icon: fas fa-tags
more:
icon: fas fa-expand-arrows-alt
url: tags/
rel: nofollow
- widget: list
icon: fas fa-thumbs-up
title: Posts
rows:
- name: xxx
url: /xxx/xxxx
- name: xxx
url: /xxx/xxxx
- name: xxx
url: /xxx/xxxx
- name: xxx
url: /xxx/xxxx
- name: xxx
url: /xxx/xxxx
- name: xxx
url: /xxx/xxxx

详细格式信息可以参照 Wiki

更改社交信息

在侧边栏 author 部件中和页面底部的 footer 中会有显示作者社交信息的地方,可以根据自己情况修改,当然也可以删除。

每个按钮只需要包含 icon (图标) 和 url (跳转的位置)。

1
2
3
4
5
6
7
8
9
social:
- icon: fas fa-rss
url: /atom.xml
- icon: fas fa-envelope
url: /email
- icon: xxx
url: xxxx
- icon: xxx
url: xxxx

关闭分享功能

分享功能由于之前存在 Bug,且按钮较小较集中,不变点按,到移动端情况更严重,所以我决定彻底关闭分享功能,隐去了这些按钮还获得了一定的美观加成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 分享按钮
# 当id为qrcode时需要安装插件 npm i -S hexo-helper-qrcode
share:
# - id: qq
# name: QQ
# img: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/logo/128/qq.png
# - id: qzone
# name: QQ Zone
# img: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/logo/128/qzone.png
# - id: wechat
# name: WeChat
# img: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/logo/128/wechat.png
# - id: weibo
# name: Weibo
# img: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/logo/128/weibo.png
# - id: qrcode
# name: QRcode
# img: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/logo/128/qrcode.png

直接全部注释掉!

更改页脚信息

在页脚做一个版权声明(当然你也可以放其他),在:

1
footer: 'Copyright © 2019 - 2020 [ChrAlpha 的幻想乡](/). All rights reserved.'

效果:

添加 Valine 评论插件

以前使用 Gitalk,可是并不是所有的同学都有 GitHub 账号,所以就换为不用登陆、门槛更低的 Valine 评论插件。Valine 是基于 leancloud 的评论插件,leancloud 的开发版 (免费) 已经完全够我们用了,去官网注册后,新建一个应用。

Tips: 海外版不用备案,具体方法自行摸索。

然后在 应用 - 设置 - 应用keys 里将 AppID 和 AppKey 复制到主题配置的相应位置

并将 enable 调成 ture

其中:

  • placeholder 为在评论框中的话

  • avator 是头像,详情参照官网。

  • verify 是验证

  • notify 通知 (要在 leancloud 里另外设置)

  • pagesize 是每页评论数

  • guest_info 是评论者需要填写的信息

  • comment_count 是评论统计

RSS 配置

简单说明下开启 RSS 的方法。

安装插件 (Hexo 根目录下):

1
npm install hexo-generator-feed --save

根目录配置文件中加入:

1
2
3
4
5
6
plugin:
- hexo-generator-feed
feed:
type: atom
path: atom.xml
limit: 20

主题配置中添加:

1
rss: /atom.xml

重新 Generate 即可。

主题源码部分

接下来我要介绍的就是通过修改主题源代码来定制的部分了。先说明,没有任何代码基础或调试能力的同学谨慎使用下满介绍的方法,以免出现问题无法自查。

目前主要修改了:

  • meta 向搜索引擎声明 noindex 不收录
  • 多种样式 logo 支持
  • footer 仅显示博客授权协议和支持
  • 在标题上方添加文章头图
  • 修改配色
  • 修改字体大小和缩进

meta 标签声明 noindex

如果一个页面不想被搜索引擎收录,我们可以给这个页面打上 noindex 的 meta 元标记。

在主题文件夹下的 layout/_partial/head.ejs 合适的地方插入:

1
2
3
<% if (page.noindex) { %>
<meta name="robots" content="noindex,nofollow">
<% } %>

注意不要插入在 <head></head> 范围外!

然后就只需要在你不想被收录页面的 Front-matter (文章文件最上方以 --- 分隔的部分) 中添加:

1
noindex: true

即可。

多种样式 Logo 支持

主题默认只提供一个 Logo 接口,就只能添加一种 Logo,但是不同地方可能需要使用不同样式的 Logo,如 16x16,32x32 等不同规格的 Logo,我们可以手动给我们的博客添加支持。

我们在 Hexo 主题文件夹下的 layout/_partial/head.ejs 中插入:

1
2
3
<% if (config.favicon) { %>
<link rel="shortcut icon" type='image/x-icon' href="<%- url_for(config.favicon) %>">
<% } %>

这样就只需要在 博客根目录配置文件 中添加:

1
favicon: {url of your icon}

就可以成功添加图标了。

当然你也可以设置很多种图标样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--icon-->
<% if (config.faviconsc) { %>
<link rel="shortcut icon" type='image/x-icon' href="<%- url_for(config.faviconsc) %>">
<% } %>
<% if (config.favicon32) { %>
<link rel="icon" sizes="32x32" typt="image/png" href="<%- url_for(config.favicon32) %>">
<% } %>
<% if (config.favicon16) { %>
<link rel="icon" sizes="16x16" typt="image/png" href="<%- url_for(config.favicon16) %>">
<% } %>
<% if (config.favicon180) { %>
<link rel="apple-touch-icon" sizes="180x180" typt="image/png" href="<%- url_for(config.favicon180) %>">
<% } %>
<% if (config.favicon192) { %>
<link rel="icon" sizes="192x192" typt="image/png" href="<%- url_for(config.favicon192) %>">
<% } %>
<% if (config.faviconmask) { %>
<link rel="mask-icon" href="<%- url_for(config.faviconmask) %>" color="#fafafa">
<% } %>

然后在博客配置中相应添加即可。

默认在 footer 中显示主题来源感觉有点累赘,我将其删去,并添加了「支持」部分。

在主题文件夹下 layout/_partial/footer.ejs 中删除 footer.use 的整个 <div> 块,并可以在里面以 html 格式添加你的内容。如果你不是很习惯 html 语法,你也可以在语言文件(language/...)中的 footer 下添加一个比如名为 power 的条目:

1
power: 'Made with & powered by [ChrAlpha](https://ichr.me)'

然后在在主题文件夹下 layout/_partial/footer.ejs 中合适的地方添加:

1
<div><%- markdown(__('footer.power')) %></div>

这样就可以使用 markdown 语法编辑了。

效果:

标题上方添加头图

由于 material-x 目前不支持添加文章头图,我只好用一种稍微粗暴的方式给文章添加头图了。

首先在主题文件夹下 layout/_partial/meta.ejs 中找到:

1
<div class="meta" id="header-meta">

在下面紧跟:

1
2
3
4
<% if (post.headimg) { %>
<a href='<%- url_for(post.path) %>'><img src="<%- url_for(post.headimg) %>"></a>
</br>
<% } %>

当然你也可以选择这段代码插入的位置来调整头图显示的位置。

这样来就只需要在你想添加头图的文章 Front-matter 中添加:

1
headimg: {url of your image}

修改主题色

material-x 默认主题色为蓝色,我在自己的主题里将其修改为黄色。仅仅在主题文件夹下 source/less/_color.less 中更改了这一行:

1
@theme_main: #FFB90F;

你也可以修改其他细节进行更深度的定制。

修改字体大小和缩进

我将二级标题的字体大小稍微减小了一点,将五级、六级标题的大小稍微增大了一点。详见主题文件夹下 source/less/_fonts.less 中:

1
2
3
4
5
6
7
// title
@fontsize_h1: @fontsize_base * 1.5;
@fontsize_h2: @fontsize_base * 1.4;
@fontsize_h3: @fontsize_base * 1.3;
@fontsize_h4: @fontsize_base * 1.2;
@fontsize_h5: @fontsize_base * 1.15;
@fontsize_h6: @fontsize_base * 1.1;

然后默认一级、二级标题的段落缩进是默认的 1.5 倍,我认为这样设置有点突兀,终于在 v1.2.7 版本里支持了修改。在主题文件夹下 source/less/_layout.less 中:

1
2
3
4
// H2标题高度
@height_h2: 1.0em;
// H3标题高度
@height_h3: 1.0em;

将 H2 标题高度重新设为 1.0 倍。

以上便是我自己对博客主题的部分定制了,虽然可能对各路大神来说还是十分浅层次的自定义,但是对我来说已经达到比较满意的一个程度了。

这篇文章是会长期维护的,之后的一些细节修改如果写了 post 都会收并到这里来,有兴趣的同学也可以关注一下,算是对小站的一点支持,感谢!


 Comments