引言
折腾了一天半,这个个人博客也算大致搭建起来了,还是希望自己能坚持下去。
首先这个博客的整体搭建是参考这篇文章:https://godweiyang.com/2018/04/13/hexo-blog/
前面的内容基本没问题,后面的个性化主题设置不建议看,因为很多都过时了。
这里讲几个注意点:
1.Node.js不要下最新版会有一些问题,最好下稳定版。
2.如果只是想搭个个人博客的话,域名不一定要买。
3.关于主题,下面详述(我只放我亲测过的东西)。
Matery主题
下载
当你看到这里的时候,应该已经有一个自己的 Hexo 博客了。如果还没有的话,不妨使用 Hexo 和 Markdown 来写博客和文章。
点击 这里 下载 master
分支的最新稳定版的代码,解压缩后,将 hexo-theme-matery
的文件夹复制到你 Hexo 的 themes
文件夹中即可。
当然你也可以在你的 themes
文件夹下使用 Git clone
命令来下载:
git clone https://github.com/blinkfox/hexo-theme-matery.git
配置
切换主题
修改 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
文件,那么你就需要新建一个,命令如下:
hexo new page "categories"
编辑你刚刚新建的页面文件 /source/categories/index.md
,至少需要以下内容:
---
title: categories
date: 2021-04-03 19:00:00
type: "categories"
layout: "categories"
---
新建标签 tags 页
tags
页是用来展示所有标签的页面,如果在你的博客 source
目录下还没有 tags/index.md
文件,那么你就需要新建一个,命令如下:
hexo new page "tags"
编辑你刚刚新建的页面文件 /source/tags/index.md
,至少需要以下内容:
---
title: tags
date: 2021-04-03 19:00:00
type: "tags"
layout: "tags"
---
新建关于我 about 页
about
页是用来展示关于我和我的博客信息的页面,如果在你的博客 source
目录下还没有 about/index.md
文件,那么你就需要新建一个,命令如下:
hexo new page "about"
编辑你刚刚新建的页面文件 /source/about/index.md
,至少需要以下内容:
---
title: about
date: 2021-04-03 19:00:00
type: "about"
layout: "about"
---
新建 404 页
如果在你的博客 source
目录下还没有 404.md
文件,那么你就需要新建一个
hexo new page 404
编辑你刚刚新建的页面文件 /source/404/index.md
,至少需要以下内容:
---
title: 404
date: 2021-04-03 19:00:00
type: "404"
layout: "404"
description: "Oops~,我崩溃了!找不到你想要的页面 :("
---
菜单导航配置
配置基本菜单导航的名称、路径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
二级菜单配置方法
如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作
- 在需要添加二级菜单的一级菜单下添加
children
关键字(如:About
菜单下添加children
) - 在
children
下创建二级菜单的 名称name,路径url和图标icon. - 注意每个二级菜单模块前要加
-
. - 注意缩进格式
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-o
Friends:
url: /friends
icon: fas fa-address-book
Medias:
icon: fas fa-list
children:
- name: Music
url: /music
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
执行 hexo clean && hexo g
重新生成博客文件,然后就可以在文章中对应位置看到你用emoji
语法写的表情了。
代码高亮
从 Hexo5.0 版本开始自带了 prismjs
代码语法高亮的支持,本主题对此进行了改造支持。
如果你的博客中曾经安装过 hexo-prism-plugin
的插件,那么你须要执行 npm uninstall hexo-prism-plugin
来卸载掉它,否则生成的代码中会有 {
和 }
的转义字符。
然后,修改 Hexo 根目录下 _config.yml
文件中 highlight.enable
的值为 false
,并将 prismjs.enable
的值设置为 true
,主要配置如下:
highlight:
enable: false
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
enable: true
preprocess: true
line_number: true
tab_replace: ''
主题中默认的 prismjs
主题是 Tomorrow Night
,如果你想定制自己的主题,可以前往 prismjs 下载页面 定制下载自己喜欢的主题 css
文件,然后将此 css 主题文件取名为 prism.css
,替换掉 hexo-theme-matery
主题文件夹中的 source/libs/prism/prism.css
文件即可。
注意按照以上步骤只能支持部分语言的代码高亮,建议在刚才那个下载界面勾选自己所需的语言,下载js文件,将prism.js放到hexo-theme-matery
主题文件夹中的 source/js
中,再在source/layout/layout.ejs
文件中加上一段代码即可。
<script src="/js/prism.js">
搜索
本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索,安装命令如下:
npm install hexo-generator-search --save
在 Hexo 根目录下的 _config.yml
文件中,新增以下的配置项:
search:
path: search.xml
field: post
中文链接转拼音(可选的)
如果你的文章名称是中文的,那么 Hexo 默认生成的永久链接也会有中文,这样不利于 SEO
,且 gitment
评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。
安装命令如下:
npm i hexo-permalink-pinyin --save
在 Hexo 根目录下的 _config.yml
文件中,新增以下的配置项:
permalink_pinyin:
enable: true
separator: '-' # default: '-'
注:除了此插件外,hexo-abbrlink 插件也可以生成非中文的链接。
文章字数统计插件(可选的)
如果你想要在文章中显示文章字数、阅读时长信息,可以安装 hexo-wordcount插件。
安装命令如下:
npm i --save hexo-wordcount
然后只需在本主题下的 _config.yml
文件中,激活以下配置项即可:
wordCount:
enable: false # 将这个值设置为 true 即可.
postWordCount: true
min2read: true
totalCount: true
添加 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
文件,说明你已经安装成功了。
修改页脚
页脚信息可能需要做定制化修改,而且它不便于做成配置信息,所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs
文件中,包括站点、使用的主题、访问量等。
修改社交链接
在主题的 _config.yml
文件中,默认支持 QQ
、GitHub
和邮箱的配置,你可以在主题文件的 /layout/_partial/social-link.ejs
文件中,新增、修改你需要的社交链接地址,增加链接可参考如下代码:
<a href="https://github.com/blinkfox" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
<i class="fa fa-github"></i>
</a>
其中,社交图标(如:fa-github
)你可以在 Font Awesome 中搜索找到。以下是常用社交图标的标识,供你参考:
- Facebook:
fa-facebook
- Twitter:
fa-twitter
- Google-plus:
fa-google-plus
- Linkedin:
fa-linkedin
- Tumblr:
fa-tumblr
- Medium:
fa-medium
- Slack:
fa-slack
- 新浪微博:
fa-weibo
- 微信:
fa-wechat
- QQ:
fa-qq
注意: 本主题中使用的
Font Awesome
版本为4.7.0
。
修改打赏的二维码图片
在主题文件的 source/medias/reward
文件中,你可以替换成你的的微信和支付宝的打赏二维码图片。
配置音乐播放器(可选的)
要支持音乐播放,就必须开启音乐的播放配置和音乐数据的文件。
首先,在你的博客 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
配置文件中激活配置即可:
# 是否在首页显示音乐.
music:
enable: true
showTitle: false
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: # 列表最大高度
文章 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 | 无 | 文章标签,一篇文章可以多个标签 |
注意:
- 如果
img
属性不填写的话,文章特色图会根据文章标题的hashcode
的值取余,然后选取主题中对应的特色图片,从而达到让所有文章都的特色图各有特色,其中当前路径是主题下的source文件夹,也就是images与medias文件夹同级。date
的值尽量保证每篇文章是唯一的,因为本主题中Gitalk
和Gitment
识别id
是通过date
的值来作为唯一标识的。- 如果要对文章设置阅读验证密码的功能,不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值,还需要在主题的
_config.yml
中激活了配置。有些在线的 SHA256 加密的地址,可供你使用:开源中国在线工具、chahuo、站长工具。
示例
---
title: c_week4
top: false
cover: false
toc: true
mathjax: true
abbrlink: 38539
date: 2021-04-04 20:23:10
password:
summary:
tags: ['c/c++']
categories: ['程序设计']
img: /images/b.jpg
---
个人喜好配置
修改主题颜色
在主题文件的 /source/css/matery.css
文件中,搜索 .bg-color
来修改背景颜色:
/* 整体背景颜色,包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}
@-webkit-keyframes rainbow {
/* 动态切换背景颜色. */
}
@keyframes rainbow {
/* 动态切换背景颜色. */
}
修改 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
做同步修改。
取消主题的背景图遮罩颜色
定位到themes\hexo-theme-matery\source\css
中一个叫matery.css文件的大约600行代码,如下:
.bg-cover:before,
.bg-cover:after {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
display: block;
left: 0;
top: 0;
content: "";
}
只要将content属性注释掉即可,如下:
.bg-cover:before,
.bg-cover:after {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
display: block;
left: 0;
top: 0;
/* content: ""; */
}
增加看板娘
在source/layout/layout.ejs
文件中加上三行代码即可。
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
樱花特效
在 themes/matery/source/js
目录下新建 sakura.js
文件,打开这个网址传送门,将内容复制粘贴到 sakura.js 即可。
然后再 themes/matery/layout/layout.ejs
文件内添加1行代码:
<script src="/js/sakura.js">
动态标题
直接在themes/matery/layout/layout.ejs
文件中添加如下代码:
<script type="text/javascript">
var OriginTitile=document.title,st;
document.addEventListener("visibilitychange",function(){
document.hidden?(document.title="ヽ(●-`Д´-)ノ你要玩捉迷藏嘛",clearTimeout(st)):(document.title="(Ő∀Ő3)ノ好哦!",st=setTimeout(function(){document.title=OriginTitile},3e3))
})
</script>
添加动态诗词
采用的是今日诗词,每次返回一句诗词,根据时间、地点、天气、事件智能推荐。官网有API文档,可以去看一下,有多种安装方式,最简单的方式就是从官网获取代码,在themes/matery/layout/_partial/head.ejs
添加下面的一行代码:
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
然后再将themes/matery/layout/_partial/bg-cover-content.ejs
中的<%= config.description %>修改为
<%- '<span id="jinrishici-sentence">正在加载今日诗词....</span>' %>
这个使用前提是将主题配置文件的subtitle的值改为false。
总结
其实搭建个人博客不必急于求成,个人感受如果能够在摸一遍前端之后再回过头来说不定会发现也就这么回事。网络上其实也并不缺少教程,但是很多教程都过时了,因此还需自己慢慢探索。