目录
01
—
成品预览
02
—
准备工作
2.1 基础环境
基于上一篇已搭建好基本的项目。(详细请看链接:hexo搭建blog神器)
2.2 项目配置文件
项目根目录下的 _config.yml 文件(非themes的)就是该项目的配置文件,上一篇文章中只是涉及到修改其中的 delpoy部分的内容(即将文章推送到github上)。
详细配置内容如下(参见:https://hexo.io/zh-cn/docs/configuration):
# Site 站点配置
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''
# URL 网站url配置
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks
# Directory 目录
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing 写文章的配置
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
enable: true # Open external links in new tab
field: site # Apply to the whole site
exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
# Home page setting 首页文章排序
index_generator:
path: ''
per_page: 10
order_by: -date
# Category & Tag 分类和标签
default_category: uncategorized
category_map:
tag_map:
# Extensions 本篇重点,使用的主题
theme: landscape
ps: 配置内容还是相对简单的,其他的一些配置就没有列出来了
复制
03
—
Themes 准备
在hexo官网的主题页面(https://hexo.io/themes/),可以看到有很多的主题可供下载使用(目前显示有311个可供使用)。
本次要演示的例子是上篇中展示的,主题名称是:Matery。
3.1 Themes下载
主题github地址:https://github.com/blinkfox/hexo-theme-matery
(1)进入项目目录下的 themes文件夹,将仓库clone下来
git clone https://github.com/blinkfox/hexo-theme-matery.git
ps: 这个步骤是真的慢,可以先去睡一觉
复制
(2)在项目的配置文件中将 themes
由原本默认的 theme: landscape
改为 theme: hexo-theme-matery
# 项目中的 _config.yml
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-matery
复制
(3)清空原本生成的静态文件,生成新的静态页面文件
# hexo clean 清除静态文件
# hexo generate 生成新的静态文件
hexo clean && hexo generate
复制
(4)启动服务器
hexo server
复制
04
—
配置 Themes
至上一步,搭建切换至matery
主题后,任需要一些配置操作,才能完成blog的定制化。
4.1 新建menu页
分别新建categories、tags、about、contact、friends页面,对应博客最上方的多个标签。
# 新建命令分别为以下几个
hexo new page "categories" # 用作展示所有分类
hexo new page "tags" # 用作展示所有标签
hexo new page "about" # 用作展示关于自我介绍的内容
hexo new page "contact" # 用作展示所有留言信息
hexo new page "friends" # 用作展示友情链接
ps:
(1) 在source目录下新建 _data目录,并新建 friends.json文件,用作友情链接的数据源
(2) 需要在source目录下新建404页面文件,即 404.md
复制
# 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": "前去学习"
}, {
"avatar": "http://image.luokangyuan.com/avatar.jpg",
"name": "ja_rome",
"introduction": "平凡的脚步也可以走出伟大的行程",
"url": "https://me.csdn.net/jlh912008548",
"title": "前去学习"
}]
# 404 页面文件内容(至少)
# 注意:使用md编辑器粘贴下方内容的时候(如:Typora),
# 请保证编辑器不会生成新的格式(Typora会在外部生成 ``` ```),
# 应当在源码模式下粘贴(指的是使用Typora)
---
title: 404
date: 2018-09-30 17:25:30
type: "404"
layout: "404"
description: "Oops~,我崩溃了!找不到你想要的页面 :("
---
复制
创建完毕,会在source文件夹下生成对应的子文件夹,每一个子文件夹内生成一个index.md
文件。
4.2 第三方插件安装
此处安装的第三方插件,一般为已安装的插件或者theme方推荐的插件,也可选用其他替代插件,详细的替换方法可去theme github查看:https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md
4.2.1 代码高亮
matery主题中使用hexo-prism-plugin
插件来做代码高亮。
npm i -S hexo-prism-plugin
复制
需要改项目 _config.yml
(非theme)文件中的代码高亮配置。
# 添加时注意缩进与空格
highlight:
enable: false
prism_plugin:
mode: 'preprocess' # realtime/preprocess
theme: 'tomorrow'
line_number: false # default false
custom_css:
复制
4.2.2 内容搜索
matery主题中使用 hexo-generator-search
插件作为内容搜索。
npm install hexo-generator-search --save
复制
需要在项目 _config.yml
(非theme)文件中添加。
# 添加时注意缩进与空格
search:
path: search.xml
field: post
复制
4.2.3 中文链接转拼音
如果文章名称是中文的,生成的永久链接也会有中文,官方给的说法是:不利于 SEO
(对于这一块没有深入研究),且 gitment
评论对中文链接也不支持。
npm i hexo-permalink-pinyin --save
复制
需要在项目 _config.yml
(非theme)文件中新增配置。
permalink_pinyin:
enable: true
separator: '-' # default: '-'
复制
4.2.4 文章字数统计
这个文章字数统计和阅读时长这样的信息,应该是从公众号开始兴起的吧,反正加上了会给人一种高level的感觉。
npm i --save hexo-wordcount
复制
需要在Matery主题下的 _config.yml
(非项目)文件中激活配置。
postInfo:
date: true
update: false
wordCount: false # 设置文章字数统计为 true.
totalCount: false # 设置站点文章总字数统计为 true.
min2read: false # 阅读时长.
readCount: false # 阅读次数.
复制
4.2.5 添加emoji表情支持
表情所传达的信息,很多时候是文字所表达不出的,所以自从知道了emoji之后,好多时候都不自觉的插个表情玩一玩,因此强烈建议安装😏😏😏。
npm install hexo-filter-github-emojis --save
复制
需要在项目 _config.yml
(非theme)文件中新增配置。
githubEmojis:
enable: true
className: github-emoji
inject: true
styles:
customEmojis:
复制
注:其他的配置信息,可自行查阅官方文档和Theme文档内容进行调整。
05
—
总结
整体的配置流程相对固定,按照流程操作完就可以了,过程中出现的问题也都不难解决。完成上面的配置内容后,就可以开始创作大业了。
