五、hexo博客主题安装以及一些个性化修改
主题特性
1. 主题下载与安装
点击 主题 下载 master
分支的最新稳定版的代码,解压缩后,将hexo-theme-matery
的文件夹复制到你Hexo的themes
文件夹中即可。
当然你也可以在你的站点目录文件夹下使用git clone
命令来下载:直接在站点根目录下执行下面的命令,即可进行主题的下载,主题有两个版本,稳定版本和最新版本(不定期更新优化),自主选择版本。
git clone https://github.com/blinkfox/hexo-theme-matery themes/matery # 稳定版
git clone -b develop https://github.com/blinkfox/hexo-theme-matery themes/matery #最新版(不定期进行优化更新)
2. 主题配置
2.1 切换主题
注意:首先需要明白什么是站点配置文件,什么是主题配置文件,站点配置文件就是根目录下的配置文件,比如我的博客文件在D:\blog
下,那么站点配置文件就是D:\blog\_config.yml
,主题配置文件就是D:\blog\themes\matery\_config.yml
。
另外注意,配置文件中的标点符号不要出现中文格式的标点符号,不然运行会出错。
主题下载完成后,将站点配置文件中的theme
值修改为你下载主题的文件名,此处为matery
,那么值就修改为theme: matery
。
一些站点配置文件的其他地方的修改:
- 语言选择:如果为中文用户,则在language:后添加值zh-CN,如果不修改,默认为英语;
- 网址修改:url:的值为你的网址名,如
http://xxxx.github.io
,如果有域名,则修改为你的域名即可,至于有关域名的修改解析,后面我会说到,这里先不说了。 - 站点配置文件有个per_page属性,建议修改为6的倍数,这样网站在适应设备时,有较好的显示效果。
2.2 新建标签 tags 页面
tags
页是用来展示所有标签的页面,如果在你的博客source
目录下还没有tags/index.md
文件,那么你就需要新建一个,命令如下:
hexo new page "tags"
编辑你刚刚新建的页面文件/source/tags/index.md
,至少需要以下内容:
---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---
2.3 新建分类 categories 页面
categories
页是用来展示所有分类的页面,如果在你的博客source
目录下还没有 categories/index.md
文件,那么你就需要新建一个,命令如下:
hexo new page "categories"
编辑你刚刚新建的页面文件/source/categories/index.md
,至少需要以下内容:
---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---
2.4 新建关于我 about 页面
about
页是用来展示关于我和我的博客信息的页面,如果在你的博客source
目录下还没有1about/index.md
文件,那么你就需要新建一个,命令如下:
hexo new page "about"
编辑你刚刚新建的页面文件/source/about/index.md
,至少需要以下内容:
---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---
2.5 新建留言板 contact 页面 (可选)
contact
页是用来展示留言板信息的页面,如果在你的博客source
目录下还没有 contact/index.md
文件,那么你就需要新建一个,命令如下:
hexo new page "contact"
编辑你刚刚新建的页面文件/source/contact/index.md
,至少需要以下内容:
---
title: contact
date: 2018-09-30 17:25:30
type: "contact"
layout: "contact"
---
注:本留言板功能依赖于第三方评论系统,请激活你的评论系统才有效果。并且在主题的_config.yml
文件中,第19
至21
行的“菜单”配置,取消关于留言板的注释即可。
2.6 新建友情链接 friends 页面 (可选)
friends
页是用来展示友情链接信息的页面,如果在你的博客source
目录下还没有 friends/index.md
文件,那么你就需要新建一个,命令如下:
hexo new page "friends"
编辑你刚刚新建的页面文件/source/friends/index.md
,至少需要以下内容:
---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---
同时,在你的博客source
目录下新建_data
目录,在_data
目录中新建 friends.json
文件,文件内容如下所示:
[{
"avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
"name": "码酱",
"introduction": "我不是大佬,只是在追寻大佬的脚步",
"url": "http://luokangyuan.com/",
"title": "前去学习"
}, {
"avatar": "http://image.luokangyuan.com/4027734.jpeg",
"name": "闪烁之狐",
"introduction": "编程界大佬,技术牛,人还特别好,不懂的都可以请教大佬",
"url": "https://blinkfox.github.io/",
"title": "前去学习"
},{
"name": "过客~励む",
"avatar": "https://yafine-blog.cn/medias/avatar.jpg",
"url": "https://yafine-blog.cn",
"introduction": "你现在的努力,是为了以后有更多的选择",
"title": "前去学习"
},{
"name": "小师弟",
"avatar": "http://q44yjzgew.bkt.clouddn.com/果果小师弟.jpg",
"url": "https://liuyao-blog.cn",
"introduction": "一个喜欢嵌入式的小码农",
"title": "前去学习"
}]
2.7 菜单导航配置
2.7.1. 配置基本菜单导航的名称、路径url和图标icon.
1.菜单导航名称可以是中文也可以是英文(如:Index
或主页
)
2.图标icon 可以在Font Awesome 中查找
menu:
Index:
url: /
icon: fas fa-home
Tags:
url: /tags
icon: fas fa-tags
Categories:
url: /categories
icon: fas fa-bookmark
Archives:
url: /archives
icon: fas fa-archive
About:
url: /about
icon: fas fa-user-circle
Friends:
url: /friends
icon: fas fa-address-book
2.7.2. 二级菜单配置方法
如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作
1.在需要添加二级菜单的一级菜单下添加children
关键字(如:About
菜单下添加children
)
2.在children
下创建二级菜单的 名称name,路径url和图标icon.
3.注意每个二级菜单模块前要加 -.
4.注意缩进格式
menu:
Index:
url: /
icon: fas fa-home
Tags:
url: /tags
icon: fas fa-tags
Categories:
url: /categories
icon: fas fa-bookmark
Archives:
url: /archives
icon: fas fa-archive
About:
url: /about
icon: fas fa-user-circle
Contact:
url: /contact
icon: fas fa-comments
Friends:
url: /friends
icon: fas fa-address-book
二级菜单写法如下
Medias:
icon: fas fa-list
children:
- name: Musics
url: /musics
icon: fas fa-music
- name: Movies
url: /movies
icon: fas fa-film
- name: Books
url: /books
icon: fas fa-book
- name: Galleries
url: /galleries
icon: fas fa-image
2.8 添加emoji表情支持(可选的)
本主题新增了对emoji
表情的支持,使用到了hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成,把对应的markdown emoji
语法(::,例如:smile:
)转变成会跳跃的emoji
表情,安装命令如下:
npm install hexo-filter-github-emojis --save
在 Hexo 根目录下的_config.yml
文件中,新增以下的配置项:
githubEmojis:
enable: true
className: github-emoji
inject: true
styles:
customEmojis:
执行hexo clean && hexo g
重新生成博客文件,然后就可以在文章中对应位置看到你用emoji
语法写的表情了。
2.9 代码高亮
由于 Hexo 自带的代码高亮主题显示不好看,所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮,安装命令如下:
npm i -S hexo-prism-plugin
然后,修改 Hexo 根目录下_config.yml
文件中highlight.enable
的值为 false
,并新增prism
插件相关的配置,主要配置如下:
prism_plugin:
mode: 'preprocess' # realtime/preprocess
theme: 'tomorrow'
line_number: false # default false
custom_css:
2.10 搜索
本主题中还使用到了hexo-generator-search 的Hexo插件来做内容搜索,安装命令如下:
npm install hexo-generator-search --save
在 Hexo 根目录下的_config.yml
文件中,新增以下的配置项:
search:
path: search.xml
field: post
2.11 中文链接转拼音(可选的)
如果你的文章名称是中文的,那么 Hexo 默认生成的永久链接也会有中文,这样不利于 SEO
,且gitment
评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。
安装命令如下:
npm i hexo-permalink-pinyin --save
在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:
permalink_pinyin:
enable: true
separator: '-' # default: '-'
注:除了此插件外,hexo-abbrlink 插件也可以生成非中文的链接。
2.12 文章字数统计插件(可选的)
如果你想要在文章中显示文章字数、阅读时长信息,可以安装hexo-wordcount插件。
安装命令如下:
npm i --save hexo-wordcount
然后只需在本主题下的_config.yml
文件中,激活以下配置项即可:
wordCount:
enable: false # 将这个值设置为 true 即可.
postWordCount: true
min2read: true
totalCount: true
2.13 添加 RSS 订阅支持(可选的)
本主题中还使用到了hexo-generator-feed 的Hexo插件来做RSS
,安装命令如下:
npm install hexo-generator-feed --save
在 Hexo 根目录下的_config.yml
文件中,新增以下的配置项:
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
执行hexo clean && hexo g
重新生成博客文件,然后在public
文件夹中即可看到atom.xml
文件,说明你已经安装成功了。
2.14 添加 DaoVoice 在线聊天功能(可选的)
前往DaoVoice 官网注册并且获取app_id
,并将 app_id
填入主题的_config.yml
文件中
2.15 添加 Tidio 在线聊天功能(可选的)
前往Tidio 官网注册并且获取Public Key
,并将 Public Key
填入主题的_config.yml
文件中。
2.16 修改页脚
页脚信息可能需要做定制化修改,而且它不便于做成配置信息,所以可能需要你自己去再修改和加工。修改的地方在主题文件的/layout/_partial/footer.ejs
文件中,包括站点、使用的主题、访问量等。
2.17 修改社交链接
在主题的_config.yml
文件中,默认支持QQ、GitHub
和邮箱等的配置,你可以在主题文件的/layout/_partial/social-link.ejs
文件中,新增、修改你需要的社交链接地址,增加链接可参考如下代码
<% if (theme.socialLink.github) { %>
<a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
<i class="fab fa-github"></i>
</a>
<% } %>
其中,社交图标(如: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
。
2.18 修改打赏的二维码图片
在主题文件的source/medias/reward
文件中,你可以替换成你的的微信和支付宝的打赏二维码图片。
2.19 配置音乐播放器(可选的)
要支持音乐播放,就必须开启音乐的播放配置和音乐数据的文件。
首先,在你的博客source
目录下的_data
目录(没有的话就新建一个)中新建 musics.json
文件,文件内容如下所示:
[{ "name": "五月雨变奏电音",
"artist": "AnimeVibe",
"url": "http://xxx.com/music1.mp3",
"cover": "http://xxx.com/music-cover1.png"
}, {
"name": "Take me hand",
"artist": "DAISHI DANCE,Cecile Corbel",
"url": "/medias/music/music2.mp3",
"cover": "/medias/music/cover2.png"
}, {
"name": "Shape of You",
"artist": "J.Fla",
"url": "http://xxx.com/music3.mp3",
"cover": "http://xxx.com/music-cover3.png"
}]
注:以上 JSON 中的属性:name、artist、url、cover
分别表示音乐的名称、作者、音乐文件地址、音乐封面。
然后,在主题的_config.yml
配置文件中激活配置即可:
# Whether to display the musics.
# 是否在首页显示音乐.
music:
enable: true
showTitle: true
title: 听听音乐
fixed: false # 开启吸底模式
autoplay: false # 是否自动播放
theme: '#42b983'
loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none'
order: 'list' # 音频循环顺序, 可选值: 'list', 'random'
preload: 'auto' # 预加载,可选值: 'none', 'metadata', 'auto'
volume: 0.7 # 默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效
listFolded: false # 列表默认折叠
listMaxHeight: #列表最大高度
3. 文章 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
,则会作为首页推荐文章|
|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|无|文章标签,一篇文章可以多个标签|
|date|无|文章转载规则, 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个|
注意:
- 如果
img
属性不填写的话,文章特色图会根据文章标题的hashcode
的值取余,然后选取主题中对应的特色图片,从而达到让所有文章都的特色图各有特色。 date
的值尽量保证每篇文章是唯一的,因为本主题中Gitalk
和Gitment
识别id
是通过date
的值来作为唯一标识的。- 如果要对文章设置阅读验证密码的功能,不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值,还需要在主题的
_config.yml
中激活了配置。有些在线的 SHA256 加密的地址,可供你使用:开源中国在线工具、chahuo、站长工具。 - 您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则
以下为文章的Front-matter
示例。
示例
---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 赵奇
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password:8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容,如果这个属性有值,文章卡片摘要就显示这段文字,否则程序会自动截取文章的部分内容作为摘要
categories: Markdown
tags:
- Typora
- Markdown
---
4. 自定制修改
4.1 修改主题颜色
在主题文件的 /source/css/matery.css 文件中,搜索 .bg-color 来修改背景颜色
/* 整体背景颜色,包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}
/*如果想去掉banner图的颜色渐变效果,请将以下的css属性注释掉或者删除掉即可*/ @-webkit-keyframes rainbow{
/* 动态切换背景颜色. */
}
@keyframes rainbow{
/* 动态切换背景颜色. */
}
4.2 修改 banner 图和文章特色图
你可以直接在 /source/medias/banner
文件夹中更换你喜欢的 banner
图片,主题代码中是每天动态切换一张,只需 7
张即可。如果你会 JavaScript
代码,可以修改成你自己喜欢切换逻辑,如:随机切换等,banner
切换的代码位置在 /layout/_partial/bg-cover-content.ejs
文件的 <script></script>
代码中:
$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
在 /source/medias/featureimages
文件夹中默认有 24
张特色图片,你可以再增加或者减少,并需要在 _config.yml
做同步修改。
如果想改为每小时或者每分钟切换banner
图的话,需要将getDay()
改为getHours()
或者getMinutes()
即可。