0
果果小师弟 · 2020年02月06日

Github+Hexo博客搭建小白教程（三）

JavaScriptJavaNode.js学习分享

五、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。

一些站点配置文件的其他地方的修改：

  1. 语言选择：如果为中文用户，则在language:后添加值zh-CN，如果不修改，默认为英语；
  2. 网址修改：url:的值为你的网址名，如http://xxxx.github.io，如果有域名，则修改为你的域名即可，至于有关域名的修改解析，后面我会说到，这里先不说了。
  3. 站点配置文件有个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 中的一个|

注意:
  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示例。

示例

--- 
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()即可。

0 阅读 1.9k
推荐阅读
【3月19日鸿蒙公开课】鸿蒙开发之JS与Java的混合使用与交互 【灵魂拷问】你为什么要来学习Node.js呢？ 初识Node.js之Node与java作为后台服务器的对比 好书推荐 | 大学里，分享优质书籍，前端程序员学习Node.js需要哪些书籍？ Node.js之模块机制 Node.js之异步编程
...
果果小师弟
关注数
1559
文章数
49
个人网站：www.zhiguoxin.cn微信公众号：果果小师弟
关注作者 作者主页
目录
极术微信服务号
关注极术微信号
实时接收点赞提醒和评论通知
安谋科技学堂公众号
关注安谋科技学堂
实时获取安谋科技及 Arm 教学资源
安谋科技招聘公众号
关注安谋科技招聘
实时获取安谋科技中国职位信息