Hexo 主题 Volantis (原 Material X) 简洁定制参考

2020-03-04 笔记本

最近制作了一款新主题:「Cards」,就是现在你们看到我博客使用的主题!


Hexo 主题 Volantis (原 Material X)是一款完成度很高的主题,简洁美观,比较符合我的审美。之前已经写过一篇关于它的配置教程了(当时还未改名)。后面由于修复了我提到过的关于「分词」的 Bug,我又决定更新了。

可是发现作者对主题配置文件格式进行了很大的调整,之前的描述相当一部分不再兼容。我决定重写这份教程,之前的那篇(按理只支持到 v.1.2.7)将整合过来。

Update 2020-03-16: Volantis 正式更新 v2.0 ,我也尝试了更新,尽管同配置下 CSS 体积缩小 20% ,但是新 UI 某些部分过分反直觉。所以我选择观望,当然本文非 less 方面的修改仍有参考意义。

方向 / 初心

首先说明一下本次配置的大方向。看上这款 Hexo 主题很大程度上是因为它的 简约强大

而我个人也比较喜欢偏「性冷淡」的风格。所以以下所有配置,本着:

  1. 性能至上:尽可能去除不必要组件,并使用 CDN 托管所有静态文件
  2. 风格简约:使用白色 / 淡灰色 作为主要配色,并且只使用一种点缀色

先上跑分,Google PageSpeed Insights 拿到 99/92 的分数,还算比较满意了。

当然如果您喜欢缤纷绚丽的网站,并且不是特别在乎速度,那么本文可能不太适合你。你可以考虑参考一下借助搜索引擎获取更想要的结果。

如果你决定看下去,谢谢你。那么我们开始吧!

配置文件部分

修改主题配置文件应该算是比较基础的定制了。无奈文档过于强大的同时免不了过于庞大,我在此记录下那些我觉得值得修改的,和我精简掉的部分。

主要包括:

  • 更改 CDN 库
  • 精简部分插件
  • 修改主题样式
  • 关闭幻灯片背景功能
  • 更改封面菜单
  • 更改导航栏菜单
  • 更改文章列表布局
  • 修改 meta 库并取消分享功能
  • 侧边栏部件配置和版权声明
  • 更改页脚(footer)信息
  • 添加 Valine 评论插件
  • 添加 RSS 配置

更改 CDN 库

由于我修改了博客的样式,作者提供的部分 CDN 就不再适用于我了。我们要将自己生成的 CSS 文件上传后调用自己的 CDN 库,修改才能生效。当然你也可以放弃使用 CDN 使修改生效,不过这样降低访问速度,就不介绍了(也没什么好介绍的,关掉就是了)。

这里要感谢 jsDelivr 提供的免费静态资源加速服务!

在配置文件最上方:「info - cdn - css - style」中将链接换成自己的源。如果不知道怎么上传的可以参考我之前写的一篇关于 jsDelivr 的 文章 。将资源发布到 GitHub 或者 npm 均可。

然后我将 Valine 评论插件的 CDN 换成官方而非作者提供的。

注意: 主题版本号大于 v1.2.6 的需要在博客根目录配置文件中添加 use_cdn: true 才会启用 CDN!

精简组件

在「plugins」下可以控制需要启用的组件。这里我只保留了 jQuery ,其他全部注释掉了。

作者在配置文件的注释中已经解释了每个组件的作用,大家根据需求开启。建议遵循最小化原则,不用的就别开。

修改主题样式

目前主题提供两种特效:毛玻璃和卡片阴影。

由于我不喜欢眼花缭乱的背景,黑白灰纯色比较适合我,所以我关闭了毛玻璃,然后开启卡片阴影。

不建议两者都开,不然感觉有点奇怪。

关闭幻灯片背景功能

理由同上,我关闭了默认开启的幻灯片背景功能,仅仅使用灰色底色。少加载一些图片还能获得额外的速度加成。

关闭方法也同样简单,在配置文件「backstretch - enable」调成 false ,后面的就不用管了。

更改封面菜单

封面就是最上方的那个板块,目前仅支持搜索框,后期会纳入更多支持。在「cover」下调整。

我选择半屏显示,展示 logo 。注意 logo 和 title 只能二选一!

# 封面
cover:
scheme: search # 后期将会提供多种封面布局方案
height: half # full: 首页封面占据整个第一屏幕,其他页面占半个屏幕高度, half: 所有页面都封面都只占半个屏幕高度
title:
subtitle:
logo: https://cdn.jsdelivr.net/npm/chrdnx@1.0.4/img/title.png # logo和title只显示一个,若同时设置,则只显示logo
search: 'Search...'
# 主页封面菜单
features:
- name: Home
icon: fas fa-home
url: /
- name: Tags
icon: fas fa-tags
url: /tags/
- name: Categories
icon: fas fa-folder-open
url: /categories/
- name: Archive
icon: fas fa-archive
url: /archives/

下面的 features 是展示在搜索框下的按钮,按照「名称 / 图标 (fontawesome) / 链接」的格式填写。

更改导航栏菜单

导航栏是最上方的保留白条区域,可以显示(从左往右依次是)站点名称、按钮、搜索框。

注意要区分桌面端和移动端的按钮菜单。桌面端会直接展示在站点名称(如果有)的左侧,而移动端由于空间布局因素,改为右侧单独一个抽屉按钮打开按钮菜单。

格式和上面一致,就不赘述了。

# 导航栏
navbar:
# 左侧logo区
logo:
# 显示图片,使用图片时将不会显示icon和title
img:
# 显示图标
icon:
# 显示标题
title: ChrAlpha 的幻想乡
# logo后面的导航菜单
menu:
# 在桌面端显示的导航菜单
on_desktop:
- name: Home
icon: fas fa-home
url: /
- name: Tags
icon: fas fa-tags
url: /tags/
- name: Categories
icon: fas fa-folder-open
url: /categories/
- name: Achives
icon: fas fa-archive
url: /archives/
- name: Portfolio
icon: fas fa-align-justify
url: https://ichr.me/
target: _self
# 手机端导航菜单(从右上角的按钮点击展开)
on_mobile:
- name: Home
icon: fas fa-home
url: /
- name: Tags
icon: fas fa-tags
url: /tags/
- name: Categories
icon: fas fa-folder-open
url: /categories/
- name: Achives
icon: fas fa-archive
url: /archives/
- name: Portfolio
icon: fas fa-align-justify
url: https://ichr.me/
search: Search... # 搜索框文字

更改文章列表布局

先拿官方文档的一张图:

首先我在 meta 中添加了文章的分类标签,让读者更加清晰的了解到这篇文章的类型。然后是关闭了文章的更新时间显示,只保留发布时间。

之后是添加了 copyright 声明,然后添加了几个自定义组件。

# 布局
layout:
# 文章列表多列布局
multiple_columns: false # 部分浏览器不兼容,谨慎使用
# 文章列表(主页、自定义的列表)布局
on_list:
# 列表中每一篇文章的meta信息
meta: [title, author, date, category, top]
# 列表类页面的侧边栏
sidebar: [guide, hitokoto, notice-board, category, tagcloud, post-share]
# 文章页面布局
on_page:
# 文章页面主体元素,你也可以在页面的Front-matter中设置
body: [article, comments]
# 默认的meta信息,文章中没有配置则按照这里的配置来显示,设置为false则不显示
# 其中,title只在header中有效,music和thumbnail无需在这里设置,文章中有则显示
# 如果tags放置在meta.header中,那么在post列表中不显示(因为卡片下方已经有了)
meta:
header: [title, author, date, category, top]
footer: [btns, updated, category, tags]
# 文章页脚,自动在每一篇文章末尾添加
footer: [copyright]
# 文章页面的侧边栏
sidebar: [toc, guide, notice-board, category, tagcloud, post-share]
# 其他的页面布局暂时等于文章列表

修改 meta 库

可能看到这里你会不理解这个「meta 库」是个什么东西?其实你可以理解为存放一些声明的地方,像是文章默认作者,日期格式,分类标签这些内容。

首先你要将「meta - author」下的作者信息改为自己的。

接着我调整了日期格式,直接使用数字看起来也更直观。

然后是我彻底关闭了分享功能。这些按钮过于集中,不便操作,移动端更甚。全部移除还能使页面更加简洁。

# meta库配置
meta:
# 文章标题
title: # 暂无配置
# 默认文章作者(可在front-matter中覆盖)
author:
name: ChrAlpha
url: https://chralpha.com
# 文章创建日期
date:
icon: fas fa-edit
title: ''
format: 'YYYY-MM-DD' # 日期格式 http://momentjs.com/docs/
# 文章更新日期
updated:
icon: fas fa-save
title: '最后更新于:'
format: 'YYYY-MM-DD' # 日期格式 http://momentjs.com/docs/
# 文章分类
category:
icon: fas fa-folder-open
# 文章置顶
top:
icon: fas fa-angle-double-up
# 文章浏览计数
counter:
icon: fas fa-eye
# 文章字数和阅读时长
wordcount:
icon_wordcount: fas fa-keyboard
icon_duration: fas fa-hourglass-half
# 文章标签
tags:
icon: fas fa-tag
# 分享
share:
#- id: qq
# name: QQ好友
# img: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/logo/128/qq.png
#- id: qzone
# name: QQ空间
# img: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/logo/128/qzone.png
# - id: qrcode # 当id为qrcode时需要安装插件 npm i -S hexo-helper-qrcode
# name: 微信
# img: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/logo/128/wechat.png
#- id: weibo
# name: 微博
# img: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/logo/128/weibo.png
#- id: qrcode # 当id为qrcode时需要安装插件 npm i -S hexo-helper-qrcode
# name: QRcode
# img: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/logo/128/qrcode.png
# 链接
btns:

侧边栏部件配置

这次重写很大程度上是因为部件的声明形式变了。现在可以根据部件名称很方便的调用和排序,不像以前只能根据类别排序。

侧边栏我选择仅保留站内导航、通知板、分类和标签。桌面端多了一个一言插件。而移动端的由于带宽有限,而且部件还在在最下方,所以不打算展示。

还有就是版权声明的格式,可以参照我的来设置。

注意以下部件均需要在前文 layout 中调用了才会起作用!

widget:
# ---------------------------------------
# 博主信息小部件配置
blogger:
class: blogger
display: [desktop] # [desktop, mobile]
avatar: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png
# title: 标题
# subtitle: 副标题
jinrishici: true # 今日诗词。可以设置字符串,加载失败时会显示占位字符串。
social: true
# ---------------------------------------
# 目录小部件配置(仅在文章中有效)
toc:
class: toc
display: [desktop, mobile] # [desktop, mobile]
header:
icon: fas fa-list
title: TOC
list_number: false # 是否显示章节
min_depth: 2 # H1建议用作网页或者文章的标题,章节从H2开始。
max_depth: 5 # 由于宽度有限,主题没有针对所有层级进行布局优化,建议文章最多分为:H2/H3/H4/H5四个层级
# ---------------------------------------
# 文章分类小部件配置
category:
class: category
display: [desktop, mobile] # [desktop, mobile]
header:
icon: fas fa-folder-open
title: Categories
url: /categories/
# ---------------------------------------
# 标签云小部件配置
tagcloud:
class: tagcloud
display: [desktop] # [desktop, mobile]
header:
icon: fas fa-tags
title: Tags
url: /tags/
min_font: 14
max_font: 24
color: true
start_color: '#999'
end_color: '#555'
# ---------------------------------------
# 相关文章小部件配置
related_posts:
class: related_posts # 需要安装插件 npm i -S hexo-related-popular-posts
display: [desktop, mobile] # [desktop, mobile]
header:
icon: fas fa-bookmark
title: 相关文章
# ---------------------------------------
# 版权说明小部件(仅用于文章中)
copyright:
class: copyright
display: [desktop, mobile] # [desktop, mobile]
blockquote: true # 是否把内容放到blockquote中
permalink: '本文链接:' # 显示文章永久链接
content:
- '本文作者:ChrAlpha'
- '博客默认采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank">CC BY-NC-SA 4.0</a> 协议进行许可。转载和引用请注意遵守协议!'
- permalink
# ---------------------------------------
# 二维码小部件(可用于文章中的打赏,只显示图片,无其他功能)
qrcode:
class: qrcode
display: [desktop] # [desktop, mobile]
header:
icon: fas fa-mobile
title: 手机观看
height: #64px # 不设置则自动高度
fancybox: #true # 是否允许点击放大
images:
- https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/wiki_volantis.png
# ---------------------------------------
# ---------------------------------------
# ---------------------------------------
# 自定义组件,仿照如下写法(下面这些如果不需要可以删除)
guide:
class: grid
display: [desktop, mobile] # [desktop, mobile]
header:
icon: fas fa-map-signs
title: Myblog
rows:
- name: RSS
icon: fas fa-rss
url: /atom.xml
- name: Friends
icon: fas fa-users
url: /friends/
- name: Portfolio
icon: fas fa-align-justify
url: https://ichr.me/
target: _self

hitokoto:
class: text
display: [desktop] # [desktop, mobile]
header:
icon: fa fa-paragraph
title: "Hitokoto · 一言"
url: https://hitokoto.cn/
content:
- '<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chrdnx@1.0.4/js/hitokoto.min.js"></script>'
- '<div><p class="hitokoto"></p></div>'
- '<div><i class="from"></i></div>'

notice-board:
class: text
display: [desktop, mobile]
header:
icon: fas fa-bullhorn
title: Note Board
content:
- ''

post-share:
class: list
display: [desktop, mobile]
header:
icon: fas fa-thumbs-up
title: Posts
rows:
- name: xxx
url: xxxx

更改网站页脚(footer)

现在 footer 支持自定义字段了,记得要在「footer - layout」中调用,不然不生效。

我关闭了播放器,添加了全站版权声明,和个人主页链接。

# 网站页脚
footer:
# 网站页脚布局,默认支持 aplayer/social/license/info/copyright
layout: [social, power, license, copyright]
# APlayer配置 https://github.com/metowolf/MetingJS
aplayer:
# 是否启用,注释此项则不加载服务
enable: false
# 必选参数
server: netease # netease, tencent, kugou, xiami, baidu
type: playlist # song, playlist, album, search, artist
id: 3175833810 # song id / playlist id / album id / search keyword
# 可选参数
fixed: false # enable fixed mode
theme: '#1BCDFC' # main color
autoplay: false # audio autoplay
order: list # player play order, values: 'list', 'random'
loop: all # player loop play, values: 'all', 'one', 'none'
volume: 0.7 # default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
list_max_height: 340px # list max height
list_folded: true
# 社交信息配置
social:
- icon: xxx
url: xxxx
copyright: 'Copyright © 2019-2020 [ChrAlpha 的幻想乡](/). All rights reserved'
# 可自己增加任意属性,支持markdown,例如:br: '<br>'
power: 'Powered & Made by [@ChrAlpha](https://ichr.me)<br>'

社交信息一定要改为自己的,只用传 图标 / 链接 这两个参数。

Valine 评论插件

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

img

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

img

然后配置「valine」下面的:

#valine配置
valine:
enable: true # 如果你想用Valine评论系统,请设置enable为true
# 还需要在根目录配置文件中添加下面这三行内容
# leancloud:
# app_id: 你的appId
# app_key: 你的appKey
# valine_path: 全站采用同一个path(共用同一个评论框数据)
guest_info: nick,mail,link #valine comment header info
placeholder: 填写邮箱方便收到动态通知哦~ # valine comment input placeholder(like: Please leave your footprints )
avatar: '' # gravatar style https://valine.js.org/avatar
pageSize: 10 # comment list page size
verify: true # valine verify code (true/false)
notify: true # valine mail notify (true/false)
lang: zh-cn
highlight: true
visitor: false # 阅读统计,按照官网文档接入了,但是依然不能用。

app_idapp_key 需要追加到博客根目录配置文件中。

添加 RSS 配置

RSS 的方便性不必多说。简单介绍下博客支持 RSS 的方法。

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

npm install hexo-generator-feed --save

根目录配置文件中加入:

plugin:
- hexo-generator-feed
feed:
type: atom
path: atom.xml
limit: 20

主题配置中添加:

rss: /atom.xml

重新 Generate 即可。

主题源码部分

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

目前主要修改了:

  • 封面 Logo 取消 lazyload
  • meta 向搜索引擎声明 noindex 不收录
  • 多种样式 logo 支持
  • 在标题上方添加文章头图
  • 文章分享卡片
  • 修改配色
  • 修改字体大小和缩进

封面 Logo 取消 lazyload

由于我有使用 lazyload 插件,可是每次封面的 Logo 都会有从占位图到 Logo 的转变。且不提窗口抖动,美观度都大打折扣。既然是每个页面都有显示的,给他加一个标记,让 lazyload 插件跳过封面 Logo。

再主题文件夹下 layout/_cover/search.ejs 中,找到以下部分:

<% if (theme.cover.logo) { %>
<img class='logo' src='<%- url_for(theme.cover.logo) %>'/>
...

将第二行的 img 后面追加一个 no-lazy 标记,具体根据你的插件而定,我使用的是 hexo-lazyload-image 。

meta 标签声明 noindex

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

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

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

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

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

noindex: true

即可。

多种样式 Logo 支持

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

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

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

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

favicon: {url of your icon}

就可以成功添加图标了。

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

<!--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">
<% } %>

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

标题上方添加头图

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

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

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

在下面紧跟:

<% if (post.thumbnail) { %>
<a href='<%- url_for(post.path) %>'><img src="<%- url_for(post.thumbnail) %>"></a>
</br>
<% } %>

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

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

thumbnail: {url of your image}

文章分享卡片

也许你有注意到,有些博客在 Twitter 和 Telegram 上粘贴链接会自动生成包含封面图和简介的分享卡片。其实这是经过特殊配置的。

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

<meta name="twitter:card" content="summary_large_image">
<meta property="og:site_name" content="<%- config.title %>">
<meta property="og:type" content="website">
<meta property="og:title" content="<%- page.title %> | <%- config.title %>">
<% if (page.description && config.description){ %>
<meta property="og:description" content="<%- page.description %>">
<% } else if (page.description) { %>
<meta property="og:description" content="<%- page.description %>">
<% } else if (config.description) { %>
<meta property="og:description" content="<%- config.description %>">
<% } %>
<meta property="og:image" content="<%- page.thumbnail %>">

然后重新部署,这样就能适配 Twitter, Facebook, Telegram 等主流国外平台的展示了。

修改主题色

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

@theme_main: #FFB90F;

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

修改字体大小和缩进

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

// 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.1;
@fontsize_h6: @fontsize_base * 1.05;

接着我调高了行高,这样读起来感觉压力小很多,也是在 source/less/_fonts.less 中修改:

@lineheight_base: 1.8;

还有文章页标题大小:

// 文章列表中的标题
@fontsize_list_title: @fontsize_base * 1.5;
// 文章页的标题
@fontsize_article_title: @fontsize_h1;
@fontsize_article_title_phone: @fontsize_h1;

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

// H2标题高度
@height_h2: 1.0em;
// H3标题高度
@height_h3: 1.0em;

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

以上便是我自己对博客主题的部分定制了,虽然可能对各路大神来说还是十分浅层次的自定义,可能有些人会认为比较简陋……

但无论如何都希望你能早日将博客打磨成自己满意的模样!

本文作者:ChrAlpha

文章默认使用 CC BY-NC-SA 4.0 协议进行许可,使用时请注意遵守协议。

本文链接: https://blog.ichr.me/post/hexo-theme-volantis-diy-configuration/

笔记本

评论

您所在的地区可能无法访问 Disqus 评论系统,请切换网络环境再尝试。