Github Pages + Hexo + Vercel 个人博客搭建(二)Matery 主题
下载
本主题推荐你使用 Hexo 5.0.0 及以上的版本。如果,你已经有一个自己的 Hexo 博客了,建议你将 Hexo 升级到最新稳定的版本。
点击 这里
下载 master
分支的最新稳定版的代码,解压缩后,将
hexo-theme-matery
的文件夹复制到你 Hexo 的
themes
文件夹中即可。
当然你也可以在你的 themes
文件夹下使用
git clone
命令来下载:
1 |
|
配置
切换主题
修改 Hexo 根目录下的 _config.yml
的 theme
的值:theme: hexo-theme-matery
_config.yml
文件的其它修改建议:
- 请修改
_config.yml
的url
的值为你的网站主URL
(如:http://xxx.github.io
)。 - 建议修改两个
per_page
的分页条数值为6
的倍数,如:12
、18
等,这样文章列表在各个屏幕下都能较好的显示。 - 如果你是中文用户,则建议修改
language
的值为zh-CN
。
新建分类 categories 页
categories
页是用来展示所有分类的页面,如果在你的博客
source
目录下还没有 categories/index.md
文件,那么你就需要新建一个,命令如下:
1 |
|
编辑你刚刚新建的页面文件
/source/categories/index.md
,至少需要以下内容:
1 |
|
新建标签 tags 页
tags
页是用来展示所有标签的页面,如果在你的博客
source
目录下还没有 tags/index.md
文件,那么你就需要新建一个,命令如下:
1 |
|
编辑你刚刚新建的页面文件
/source/tags/index.md
,至少需要以下内容:
1 |
|
新建关于我 about 页
about
页是用来展示关于我和我的博客信息的页面,如果在你的博客
source
目录下还没有 about/index.md
文件,那么你就需要新建一个,命令如下:
1 |
|
编辑你刚刚新建的页面文件
/source/about/index.md
,至少需要以下内容:
1 |
|
新建留言板 contact 页(可选的)
contact
页是用来展示留言板信息的页面,如果在你的博客
source
目录下还没有 contact/index.md
文件,那么你就需要新建一个,命令如下:
1 |
|
编辑你刚刚新建的页面文件
/source/contact/index.md
,至少需要以下内容:
1 |
|
注:本留言板功能依赖于第三方评论系统,请激活你的评论系统才有效果。并且在主题的
_config.yml
文件中,第19
至21
行的“菜单”配置,取消关于留言板的注释即可。
新建友情链接 friends 页(可选的)
friends
页是用来展示友情链接信息的页面,如果在你的博客
source
目录下还没有 friends/index.md
文件,那么你就需要新建一个,命令如下:
1 |
|
编辑你刚刚新建的页面文件
/source/friends/index.md
,至少需要以下内容:
1 |
|
同时,在你的博客 source
目录下新建 _data
目录,在 _data
目录中新建 friends.json
文件,文件内容如下所示:
1 |
|
新建 404 页
如果在你的博客 source
目录下还没有 404.md
文件,那么你就需要新建一个。编辑你刚刚新建的页面文件
/source/404.md
,至少需要以下内容:
1 |
|
菜单导航配置
配置基本菜单导航的名称、路径url和图标icon.
1.菜单导航名称可以是中文也可以是英文(如:Index
或主页
)
2.图标icon 可以在Font
Awesome 中查找
1 |
|
二级菜单配置方法
如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作
- 在需要添加二级菜单的一级菜单下添加
children
关键字(如:About
菜单下添加children
)
- 在
children
下创建二级菜单的 名称name,路径url和图标icon.
- 注意每个二级菜单模块前要加
-
.
- 注意缩进格式
1 |
|
代码高亮
从 Hexo5.0 版本开始自带了 prismjs
代码语法高亮的支持,本主题对此进行了改造支持。
如果你的博客中曾经安装过 hexo-prism-plugin
的插件,那么你须要执行 npm uninstall hexo-prism-plugin
来卸载掉它,否则生成的代码中会有 {
和
}
的转义字符。
然后,修改 Hexo 根目录下 _config.yml
文件中
highlight.enable
的值为 false
,并将
prismjs.enable
的值设置为
true
,主要配置如下:
1 |
|
主题中默认的 prismjs
主题是
Tomorrow Night
,如果你想定制自己的主题,可以前往 prismjs 下载页面
定制下载自己喜欢的主题 css
文件,然后将此 css
主题文件取名为 prism.css
,替换掉
hexo-theme-matery
主题文件夹中的
source/libs/prism/prism.css
文件即可。
搜索
本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索,安装命令如下:
1 |
|
在 Hexo 根目录下的 _config.yml
文件中,新增以下的配置项:
1 |
|
中文链接转拼音(建议安装)
如果你的文章名称是中文的,那么 Hexo
默认生成的永久链接也会有中文,这样不利于 SEO
,且
gitment
评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin
Hexo 插件使在生成文章时生成中文拼音的永久链接。
安装命令如下:
1 |
|
在 Hexo 根目录下的 _config.yml
文件中,新增以下的配置项:
1 |
|
注:除了此插件外,hexo-abbrlink 插件也可以生成非中文的链接。
文章字数统计插件(建议安装)
如果你想要在文章中显示文章字数、阅读时长信息,可以安装 hexo-wordcount插件。
安装命令如下:
1 |
|
然后只需在本主题下的 _config.yml
文件中,将各个文章字数相关的配置激活即可:
1 |
|
添加emoji表情支持(可选的)
本主题新增了对emoji
表情的支持,使用到了 hexo-filter-github-emojis
的 Hexo 插件来支持
emoji
表情的生成,把对应的markdown emoji
语法(::
,例如::smile:
)转变成会跳跃的emoji
表情,安装命令如下:
1 |
|
在 Hexo 根目录下的 _config.yml
文件中,新增以下的配置项:
1 |
|
执行 hexo clean && hexo g
重新生成博客文件,然后就可以在文章中对应位置看到你用emoji
语法写的表情了。
添加 RSS 订阅支持(可选的)
本主题中还使用到了 hexo-generator-feed
的 Hexo 插件来做 RSS
,安装命令如下:
1 |
|
在 Hexo 根目录下的 _config.yml
文件中,新增以下的配置项:
1 |
|
执行 hexo clean && hexo g
重新生成博客文件,然后在 public
文件夹中即可看到
atom.xml
文件,说明你已经安装成功了。
添加 DaoVoice 在线聊天功能(可选的)
前往 DaoVoice 官网注册并且获取
app_id
,并将 app_id
填入主题的
_config.yml
文件中。
添加 Tidio 在线聊天功能(可选的)
前往 Tidio 官网注册并且获取
Public Key
,并将 Public Key
填入主题的
_config.yml
文件中。
修改页脚
页脚信息可能需要做定制化修改,而且它不便于做成配置信息,所以可能需要你自己去再修改和加工。修改的地方在主题文件的
/layout/_partial/footer.ejs
文件中,包括站点、使用的主题、访问量等。
添加中文繁简转换
在主题的 _config.yml
文件中,开启 translate 为
enable。
开启中文繁简转换如下修改。默认不开启。 实例演示: 繁简转换 底下 footer 栏
1 |
|
修改社交链接
在主题的 _config.yml
文件中,默认支持
QQ
、GitHub
和邮箱等的配置,你可以在主题文件的
/layout/_partial/social-link.ejs
文件中,新增、修改你需要的社交链接地址,增加链接可参考如下代码:
1 |
|
其中,社交图标(如:fa-github
)你可以在 Font Awesome
中搜索找到。以下是常用社交图标的标识,供你参考:
- Facebook:
fab fa-facebook
- Twitter:
fab fa-twitter
- Google-plus:
fab fa-google-plus
- Linkedin:
fab fa-linkedin
- Tumblr:
fab fa-tumblr
- Medium:
fab fa-medium
- Slack:
fab fa-slack
- Sina Weibo:
fab fa-weibo
- Wechat:
fab fa-weixin
- QQ:
fab fa-qq
- Zhihu:
fab fa-zhihu
注意: 本主题中使用的
Font Awesome
版本为5.11.0
。
修改打赏的二维码图片
在主题文件的 source/medias/reward
文件中,你可以替换成你的的微信和支付宝的打赏二维码图片。
配置音乐播放器(可选的)
要支持音乐播放,在主题的 _config.yml
配置文件中激活music配置即可:
1 |
|
server
可选netease
(网易云音乐),tencent
(QQ音乐),kugou
(酷狗音乐),xiami
(虾米音乐),
baidu
(百度音乐)。
type
可选song
(歌曲),playlist
(歌单),album
(专辑),search
(搜索关键字),artist
(歌手)
id
获取方法示例: 浏览器打开网易云音乐,点击我喜欢的音乐歌单,浏览器地址栏后面会有一串数字,playlist
的id
即为这串数字。
添加note
Usage
1 |
|
[class]
: Optional parameter. Supported values: default | primary | success | info | warning | danger.[no-icon]
: Optional parameter. Disable icon in note.[summary]
: Optional parameter. Optional summary of the note.
All parameters are optional.
example
1 |
|
添加button
Usage
1 |
|
or
1 |
|
url
: Absolute or relative path to URL.text
: Button text. Required if no icon specified.icon
: Font Awesome icon name. Required if no text specified.[class]
: Optional parameter. Font Awesome class(es):fa-fw
|fa-lg
|fa-2x
|fa-3x
|fa-4x
|fa-5x
[title]
: Optional parameter. Tooltip at mouseover.
Examples
1 |
|
文章 Front-matter 介绍
Front-matter 选项详解
Front-matter
选项中的所有内容均为非必填的。但我仍然建议至少填写
title
和 date
的值。
配置选项 | 默认值 | 描述 |
---|---|---|
title | Markdown 的文件标题 |
文章标题,强烈建议填写此选项 |
date | 文件创建时的日期时间 | 发布时间,强烈建议填写此选项,且最好保证全局唯一 |
author | 根 _config.yml 中的 author |
文章作者 |
img | featureImages 中的某个值 |
文章特征图,推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如:
http://xxx.com/xxx.jpg |
top | true |
推荐文章(文章是否置顶),如果 top 值为
true ,则会作为首页推荐文章 |
hide | false |
隐藏文章,如果hide 值为true ,则文章不会在首页显示 |
cover | false |
v1.0.2 版本新增,表示该文章是否需要加入到首页轮播封面中 |
coverImg | 无 | v1.0.2 版本新增,表示该文章在首页轮播封面需要显示的图片路径,如果没有,则默认使用文章的特色图片 |
password | 无 | 文章阅读密码,如果要对文章设置阅读验证密码的话,就可以设置
password 的值,该值必须是用 SHA256
加密后的密码,防止被他人识破。前提是在主题的 config.yml
中激活了 verifyPassword 选项 |
toc | true |
是否开启 TOC,可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的
config.yml 中激活了 toc 选项 |
mathjax | false |
是否开启数学公式支持 ,本文章是否开启
mathjax ,且需要在主题的 _config.yml
文件中也需要开启才行 |
summary | 无 | 文章摘要,自定义的文章摘要内容,如果这个属性有值,文章卡片摘要就显示这段文字,否则程序会自动截取文章的部分内容作为摘要 |
categories | 无 | 文章分类,本主题的分类表示宏观上大的分类,只建议一篇文章一个分类 |
tags | 无 | 文章标签,一篇文章可以多个标签 |
keywords | 文章标题 | 文章关键字,SEO 时需要 |
reprintPolicy | cc_by | 文章转载规则, 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个 |
注意: 1. 如果
img
属性不填写的话,文章特色图会根据文章标题的hashcode
的值取余,然后选取主题中对应的特色图片,从而达到让所有文章的特色图各有特色。 2.date
的值尽量保证每篇文章是唯一的,因为本主题中Gitalk
和Gitment
识别id
是通过date
的值来作为唯一标识的。 3. 如果要对文章设置阅读验证密码的功能,不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值,还需要在主题的_config.yml
中激活了配置。有些在线的 SHA256 加密的地址,可供你使用:开源中国在线工具、chahuo、站长工具。 4. 您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则
以下为文章的 Front-matter
示例。
最简示例
1 |
|
最全示例
1 |
|
自定制修改
在本主题的 _config.yml
中可以修改部分自定义信息,有以下几个部分:
- 菜单
- 我的梦想
- 首页的音乐播放器和视频播放器配置
- 是否显示推荐文章名称和按钮配置
favicon
和Logo
- 个人信息
- TOC 目录
- 文章打赏信息
- 复制文章内容时追加版权信息
- MathJax
- 文章字数统计、阅读时长
- 点击页面的'爱心'效果
- 我的项目
- 我的技能
- 我的相册
Gitalk
、Gitment
、Valine
和disqus
评论配置- 不蒜子统计和谷歌分析(
Google Analytics
) - 默认特色图的集合。当文章没有设置特色图时,本主题会根据文章标题的
hashcode
值取余,来选择展示对应的特色图
我认为个人博客应该都有自己的风格和特色。如果本主题中的诸多功能和主题色彩你不满意,可以在主题中自定义修改,很多更自由的功能和细节点的修改难以在主题的
_config.yml
中完成,需要修改源代码才来完成。以下列出了可能对你有用的地方:
修改主题颜色
在主题文件的 /source/css/matery.css
文件中,搜索
.bg-color
来修改背景颜色:
1 |
|
修改 banner 图和文章特色图
你可以直接在 /source/medias/banner
文件夹中更换你喜欢的
banner
图片,主题代码中是每天动态切换一张,只需
7
张即可。如果你会 JavaScript
代码,可以修改成你自己喜欢切换逻辑,如:随机切换等,banner
切换的代码位置在 /layout/_partial/bg-cover-content.ejs
文件的 <script></script>
代码中:
1 |
|
在 /source/medias/featureimages
文件夹中默认有 24
张特色图片,你可以再增加或者减少,并需要在 _config.yml
做同步修改。
参考