更多详细的内容可以访问我的个人博客时莫如初
首先选择一个自己喜欢的主题:https://hexo.io/themes/
本文主要以hexo-theme-matery这个主题介绍。先上图。
1. 更改主题
1.1. 下载主题
点这里下载hexo-theme-matery,当然你也可以在你的 themes 文件夹下使用 git clone 命令来下载。
git clone https://github.com/blinkfox/hexo-theme-matery.git
1.2. 修改配置文件
修改 Hexo 根目录下的 _config.yml 的 theme 的值:theme: hexo-theme-matery 也就是你主题文件的文件夹名。
修改完成后 执行hexo clean && hexo g && hexo s
即可在本地看到一个赏心悦目的主题了。
_config.yml 文件的其它修改建议:
- 请修改 _config.yml 的 url 的值为你的网站主 URL(如:http://xxx.github.io)。如果还没有就不用管。
- 建议修改两个 per_page 的分页条数值为 6 的倍数,如:12、18 等,这样文章列表在各个屏幕下都能较好的显示。
- 如果你是中文用户,则建议修改 language 的值为 zh-CN
2. 新建页面
2.1. 新建分类页
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.2. 新建标签页
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. 新建关于我页
about 页是用来展示关于我和我的博客信息的页面,如果在你的博客 source 目录下还没有 about/index.md 文件,那么你就需要新建一个,命令如下:
hexo new page "about"
编辑你刚刚新建的页面文件 /source/about/index.md,至少需要以下内容:
---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---
2.4. 新建留言板页(可选的)
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.5. 新建友情链接页(可选的)
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": "前去学习"
}, {
"avatar": "http://image.luokangyuan.com/avatar.jpg",
"name": "ja_rome",
"introduction": "平凡的脚步也可以走出伟大的行程",
"url": "https://me.csdn.net/jlh912008548",
"title": "前去学习"
}]
2.6. 新建 404 页
如果在你的博客 source 目录下还没有 404.md 文件,那么你就需要新建一个
hexo new page 404
编辑你刚刚新建的页面文件 /source/404/index.md,至少需要以下内容:
---
title: 404
date: 2018-09-30 17:25:30
type: "404"
layout: "404"
description: "Oops~,我崩溃了!找不到你想要的页面 :("
---
3. 菜单导航配置
配置基本菜单导航的名称、路径url和图标icon.
- 菜单导航名称可以是中文也可以是英文(如:Index或主页)
- 图标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
3.1. 二级菜单配置方法
如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作
- 在需要添加二级菜单的一级菜单下添加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
4. 代码高亮
从 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 文件即可。
5. 搜索
本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索,安装命令如下:
npm install hexo-generator-search --save
在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:
search:
path: search.xml
field: post
6. 中文链接转拼音(建议安装)
如果你的文章名称是中文的,那么 Hexo 默认生成的永久链接也会有中文,这样不利于 SEO,且 gitment 评论对中文链接也不支持。我们可以用hexo-permalink-pinyinHexo 插件使在生成文章时生成中文拼音的永久链接。
安装命令如下:
npm i hexo-permalink-pinyin --save
在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:
permalink_pinyin:
enable: true
separator: '-' # default: '-'
注:除了此插件外,hexo-abbrlink 插件也可以生成非中文的链接。
7. 文章字数统计插件(建议安装)
如果你想要在文章中显示文章字数、阅读时长信息,可以安装 hexo-wordcount插件。
安装命令如下:
npm i --save hexo-wordcount
然后只需在本主题下的 _config.yml 文件中,将各个文章字数相关的配置激活即可:
postInfo:
date: true
update: false
wordCount: false # 设置文章字数统计为 true.
totalCount: false # 设置站点文章总字数统计为 true.
min2read: false # 阅读时长.
readCount: false # 阅读次数.
8. 添加emoji表情支持(可选的)
本主题新增了对emoji表情的支持,使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成,把对应的markdown emoji语法(::,例如:😄)转变成会跳跃的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语法写的表情了。
9. 添加 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 文件,说明你已经安装成功了。
10. 修改页脚
页脚信息可能需要做定制化修改,而且它不便于做成配置信息,所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中,包括站点、使用的主题、访问量等。
11. 修改社交链接
在主题的 _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。
12. 修改打赏的二维码图片
在主题文件的 source/medias/reward 文件中,你可以替换成你的的微信和支付宝的打赏二维码图片。
13. 配置音乐播放器(可选的)
要支持音乐播放,在主题的 _config.yml 配置文件中激活music配置即可:
- 是否在首页显示音乐
music:
enable: true
title: # 非吸底模式有效
enable: true
show: 听听音乐
server: netease # require music platform: netease, tencent, kugou, xiami, baidu
type: playlist # require song, playlist, album, search, artist
id: 503838841 # require song id / playlist id / album id / search keyword
fixed: false # 开启吸底模式
autoplay: false # 是否自动播放
theme: '#42b983'
loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none'
order: 'random' # 音频循环顺序, 可选值: 'list', 'random'
preload: 'auto' # 预加载,可选值: 'none', 'metadata', 'auto'
volume: 0.7 # 默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效
listFolded: true # 列表默认折叠
-
server可选netease(网易云音乐),tencent(QQ音乐),kugou(酷狗音乐),xiami(虾米音乐),baidu(百度音乐)。
-
type可选song(歌曲),playlist(歌单),album(专辑),search(搜索关键字),artist(歌手)
-
id获取方法示例: 浏览器打开网易云音乐,点击我喜欢的音乐歌单,浏览器地址栏后面会有一串数字,playlist的id即为这串数字。
14. 修改主题颜色和滚动条样式
- 在主题文件的 /source/css/matery.css 文件中,搜索 .bg-color 来修改背景颜色:
/* 整体背景颜色,包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}
@-webkit-keyframes rainbow {
/* 动态切换背景颜色. */
}
@keyframes rainbow {
/* 动态切换背景颜色. */
}
- 滚动条样式
在themes\Matery\source\css\matery.css样式添加如下:
/* 滚动条 */
::-webkit-scrollbar-thumb {
background-color: #0ee1b3;
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
border-radius: 3em;
}
::-webkit-scrollbar-track {
background-color: rgb(218, 202, 255);
border-radius: 3em;
}
::-webkit-scrollbar {
width: 8px;
height: 15px;
}
15. 修改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/matery/source/css/matery.css 文件,查找下面的代码块,然后将其注释即可。如下:
.bg-cover:after {
-webkit-animation: rainbow 60s infinite;
animation: rainbow 60s infinite;
}
或者是找到如下代码,将其注释掉即可:
/*如果想去掉banner图的颜色渐变效果,请将以下的css属性注释掉或者删除掉即可*/
@-webkit-keyframes rainbow {
/* 动态切换背景颜色. */
}
@keyframes rainbow {
/* 动态切换背景颜色. */
}
上面的两段代码是有关联的,将.bg-cover:after 这段代码注释掉,上面的代码就不会起作用了。
16. 点击页面的’爱心’效果
在主题的 _config.yml 文件中激活即可
# Whether to activate the 'love' effect of clicking on the page.
# 是否激活点击页面的'爱心'效果,默认激活.
clicklove:
enable: true
17. 樱花飘落效果
先看效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5uf6TKpn-1619179376159)(https://z3.ax1x.com/2021/04/22/cLXra6.md.gif)]
在 themes/matery/source/js 目录下新建 sakura.js 文件,打开这个网址传送门,将内容复制粘贴到 sakura.js 即可。
然后再 themes/matery/layout/layout.ejs 文件内添加下面的内容:
<script type="text/javascript">
//只在桌面版网页启用特效
var windowWidth = $(window).width();
if (windowWidth > 768) {
document.write('<script type="text/javascript" src="/js/sakura.js"><\/script>');
}
</script>
18. 添加 ArtiTalk 说说模块
18.1. 注册LeanCloud
- 前往LeanCloud 国际版,注册账号。
- 注册完成之后根据 LeanCloud 的提示绑定手机号和邮箱。
- 绑定完成之后点击创建应用,应用名称随意,接着在结构化数据中创建 class,命名为 shuoshuo。
- 在你新建的应用中找到结构化数据下的用户。点击添加用户,输入想用的用户名及密码。
- 回到结构化数据中,点击 class 下的 shuoshuo。找到权限,在 Class 访问权限中将 add_fields 以及 create 权限设置为指定用户,输入你刚才输入的用户名会自动匹配。为了安全起见,将 delete 和 update 也设置为跟它们一样的权限。
- 然后新建一个名为atComment的class,权限什么的使用默认的即可。
- 点击 class 下的 _User 添加列,列名称为 img,默认值填上你这个账号想要用的发布说说的头像url,这一项不进行配置,说说头像会显示为默认头像 —— Artitalk 的 logo。
- 在最菜单栏中找到设置-> 应用 keys,记下来 AppID 和 AppKey ,一会会用。
- 最后将 _User 中的权限全部调为指定用户,或者数据创建者,为了保证不被篡改用户数据已达到强制发布说说。
18.2. 开始使用
首先添加说说页面
hexo new page artitalk
编辑你刚刚新建的页面文件 /source/categories/index.md,至少需要以下内容:
---
title: 说说
date: 2021-04-19 15:20:40
type: artitalk
layout: 'artitalk'
---
在你的主题目录下的/layout文件夹下新建artitalk.ejs文件,添加一下内容
<%- partial('_partial/bg-cover') %>
<!-- 引用 artitalk -->
<script type="text/javascript" src="https://unpkg.com/artitalk"></script>
<!-- 存放说说的容器 -->
<div id="artitalk_main"></div>
<script>
new Artitalk({
erverURL: 'www.liyunxu.work',
appId: 'TlcjJxlA42zXpmWVpVuLOSzf-MdYXbMMI', // Your LeanCloud appId
appKey: 'qowKtq39ClDaUYHnJKV3fzf0', // Your LeanCloud appKey
avatarPla: 'https://z3.ax1x.com/2021/04/20/c7sE0U.jpg',
})
</script>
18.3. 测试使用
如果上面的配置没有问题,打开你的页面,点击页面右下角的登录输入用户密码后,在输入框中输入说说,点击发布即可。
18.4. 说说内容的删除
登录后点击说说内容框右上角的 x,点击确定删除即可。
18.5. 说说内容的修改
点击想要修改的那条说说的头像,会自动跳转到只有一条提示语以及输入框的界面,在输入框中编辑完之后点击保存即可
注:说说内容的修改与删除在 LeanCloud 后台也可进行操作
18.6. 评论的使用
点击每条说说右下角的评论图标即可查看针对本条说说的评论或者对本条说说发起评论,再次点击会刷新页面已达到返回的作用
填写邮箱以获得 gravatar 的头像