hexo博客搭建及主题优化(一)

crysw

已于 2022-02-17 09:53:02 修改

阅读量1.3k

点赞数 1

分类专栏： Hexo博客文章标签： node.js git hexo

于 2021-09-12 15:05:34 首次发布

本文链接：https://blog.csdn.net/u013044713/article/details/120250802

版权

Hexo博客专栏收录该内容

4 篇文章 0 订阅

订阅专栏

个人博客

个人博客: https://www.crystalblog.xyz/

备用地址: https://wang-qz.gitee.io/crystal-blog/

HexoBlog

个人博客

下篇hexo博客搭建及主题优化(二)

介绍

个人博客
github地址 https://wang-qz.github.io/
gitee地址 https://wang-qz.gitee.io/crystal-blog/
域名地址 https://www.crystalblog.xyz/

软件架构

基于hexo框架, hexo-theme-matery主题搭建的个人博客网站, 其他主题选择请进入hexo-theme查看.

安装教程

1. 安装`js`, `hexo`,`git`

网上很多环境安装教程, 此处省略…, 参考Easy Hexo

2. 设置npm全局下载目录

npm config set prefix "D:\softwareInstalled\nodeJs\node_global"
npm config set cache "D:\softwareInstalled\nodeJs\node_cache"

3. cnpm安装

cnpm读取的是国内的镜像站, 比国外镜像站访问快很多.

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v

4 .安装hexo(两种方式)

npm install -g hexo-cli
cnpm install -g hexo-cli
##查看hexo版本
hexo -v

5. hexo初始化

创建MyBlog博客目录, 进入目录进行hexo初始化:

cd MyBlog
hexo init

6. 清除博客缓存

会清除博客public目录下生成的html等静态文件

hexo clean

7. md文件生成html页面

hexo g
hexo generate

8. 本地部署hexo

部署后访问http://localhost:4000, 就可以进入搭建的博客主页.

hexo s
hexo serve

9. 新建分类`categories` 页

categories 页是用来展示所有的分类，如果 source 目录下还没有 /categories/index.md 文件，那么就需要新建一个，命令如下：

hexo new page "categories"

10. 新增标签`tags`页

会生成 /source/tags/index.md , 其他page页也是一样的新增.

hexo new page "tags"

11. 新增博客

创建一个博客文章, 就可以写文章了, 文章的一些属性设置详见Front-matter

hexo new 'myblog'

12. 发布到远程仓库

需要先安装插件hexo-deployer-git

cnpm install --save hexo-deployer-git

hexo根目录下面_config.yml关联仓库文件配置

deploy:
  type: git
  repository: git@gitee.com:wang-qz/crystal-blog.git
#  repository: git@github.com:wang-qz/wang-qz.github.io.git
  branch: master

开启域名url, 在博客根目录 _config.yml 文件中:

## 自定义域名, 目前是部署到gitHub上面解析自定义域名的, gitee个人版不支持自定义域名
#url: https://www.crystalblog.xyz
## gitee
url: https://wang-qz.gitee.io/crystal-blog/
## github
#url: https://wang-qz.github.io/

发布到远程仓库

hexo d
hexo deploy

13. 切换主题

博客根目录下配置文件_config.yml配置:

## landscape matery next butterfly sakura yilia
theme: hexo-theme-matery

14. 博客站点相关信息

在博客根目录下的 _config.yml 配置文件中:

# Site
title: 王子的博客 #网站标题
subtitle: be yourself, be better #网站副标题
#网站描述description 主要用于5E0，告诉搜索引擎一个关于您站点的简单描述
description: 本网站是个人兴趣爱好，总结分享经验，记录生活点滴的平台
 #网站的关键词。使用半角逗号“，”分隔多个关键词
keywords: [王子的博客,HTML, CSS, JavaScript, JQuery, java, linux等]
author: 王子 #您的名字
language: zh-CN #网站使用的语言。建议修改为zh-CN
timezone: Asia/Shanghai #网站时区。Hexo默认使用您电脑的时区。

主题优化

1. 代码高亮配置

安装hexo代码高亮插件

cnpm i -S hexo-prism-plugin

修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：

highlight:
  enable: false

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

2. 添加搜索功能

安装hexo-generator-search 搜索插件

cnpm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

search:
  path: search.xml
  field: post

3. 社交链接修改

在主题的 _config.yml 文件中，默认支持 QQ、GitHub 和邮箱的配置，

# 首页 banner 中的第二行个人信息配置，留空即不启用
socialLink:
  github:  #https://github.com/wang-qz
  wechat:    #实际替换为cdn路径
  qq: 1848276756
  email: wang-qz@foxmail.com
  gitee: https://gitee.com/wang-qz
  csdn: https://blog.csdn.net/u013044713
  facebook: # https://www.facebook.com/xxx
  twitter: # https://twitter.com/xxx
  weibo: # https://weibo.com/xxx
  zhihu: # https://www.zhihu.com/xxx
  rss: true # true、false

可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改需要的社交链接地址，增加链接可参考如下代码：

<% if (theme.socialLink.gitee) { %>
    <a href="<%= theme.socialLink.gitee %>" class="tooltipped" target="_blank" 
       data-tooltip="码云" data-position="top" data-delay="50">
        <i class="fab fa-github-alt"></i>
    </a>
<% } %>

<% if (theme.socialLink.csdn) { %>
    <a href="<%= theme.socialLink.csdn %>" class="tooltipped" target="_blank" 
       data-tooltip="关注我的CSDN" data-position="top" data-delay="50">
        <i class="fab fa-csdn">C</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
Linkedin: fab fa-linkedin
Slack: fab fa-slack
新浪微博: fab fa-weibo
微信: fab fa-wechat 或 fab fa-weixin
QQ: fab fa-qq
知乎: fab fa-zhihu

5. 打赏二维码修改

在主题文件的 source/medias/reward 文件中，可以替换成你的的微信和支付宝的打赏二维码图片。

主题目录下的_config.yml文件中打赏设置

# 是否激活文章末尾的打赏功能，默认激活
#（你替换为的你自己的微信、支付宝二维码图片、或者使用网络图片也可以）.
reward:
  enable: true
  title: 你的赏识是我前进的动力
  wechat: /medias/reward/wechatPay.jpg
  alipay: /medias/reward/alipay.jpg

6. 文章链接转静态短地址

如果文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用hexo-permalink-pinyin插件生成文章时生成中文拼音的永久链接，或者用hexo-abbrlink 生成静态文章链接。以下结合hexo-abbrlink生成类似 /yyyy/mmdd+随机数.html 的文章链接地址。

npm install hexo-permalink-pinyin --save
npm install hexo-abbrlink --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

在 Hexo 根目录下的 _config.yml 文件中，修改 permalink: ，并在文件末尾新增 abbrlink:配置项：

permalink: :year/:month:day:abbrlink.html
abbrlink: 
  alg: crc16 #算法选项：crc16丨crc32
  rep: dec #输出进制：dec为十进制，hex为十六进制

7. 文章字数统计插件

如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。

npm i --save hexo-wordcount

然后只需在本主题下的 _config.yml 文件中，激活以下配置项即可：

postInfo:
  date: true # 发布日期
  update: true # 更新日期
  wordCount: true # 文章字数统计
  totalCount: true # 站点总文章字数
  min2read: true # 文章阅读时长
  readCount: true # 文章阅读次数

8. 添加 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 文件，说明已经安装成功了。

9. 导航栏/标签页/尾页颜色修改

主题目录 /source/css/matery.css文件中修改:

/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
    /**background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);**/
    background-image: linear-gradient(to right, #7371BC 0%, #284D95 100%);
}

10. 主题背景颜色修改

在主题文件的 /source/css/matery.css 文件中：

@-webkit-keyframes rainbow {
   /* 动态切换背景颜色.即滤镜颜色，不想要可以全部注释，或者换成你喜欢的颜色 */
}
@keyframes rainbow {
    /* 动态切换背景颜色.，不想要可以全部注释，或者换成你喜欢的颜色 */
}

11. banner 图和文章特色图修改

可以直接在/source/medias/banner文件夹中更换喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果会 JavaScript 代码，可以修改成自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs文件的<script></script> 代码中：

<% if (theme.banner.enable) { %>
    <script>
        // 每天切换 banner 图.  Switch banner image every day. 可以修改切换逻辑
        var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/') %>" + 
       new Date().getDay() + '.jpg';
        $('.bg-cover').css('background-image', 'url(' + bannerUrl + ')');
    </script>
<% } else { %>
    <script>
        $('.bg-cover').css('background-image', 'url(<%- theme.jsDelivr.url %><%- url_for('/medias/banner/0.jpg') %>)');
    </script>
<% } %>

12. 整体布局的背景图设置

在主题目录下的/layout/layout.ejs文件中, 找到下面的代码就是设置背景图的地方:

<% if (theme.background.enable) { %>
    <%- partial('_partial/background') %>
<% } %>

上面代码会加载主题目录下的背景图设置文件/layout/_partial/background.ejs:

<style>
    body {
        /*background-image: url(<%- theme.background.url %> );*/
       /*我将background.url配置为数组,配置了多个背景图,在navigate.ejs中做了随机切换背景图*/
        background-image: url(<%- theme.background.url[0]%>);
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }
</style>

13. 取消背景色蒙版特效

默认情况下banner图上面感觉覆盖了一层雾色 ,其实是给banner部分设置了背景色变化, 给人朦胧的特效感觉 , 在主题目录下的/source/css/matery.css 文件中可以取消朦胧特效设置，搜索 .bg-cover:after 注释它：

/**注释后, 取消背景色蒙版特效**/
.bg-cover:after {
   /* -webkit-animation: rainbow 60s infinite;
    animation: rainbow 60s infinite;*/
}

14. 添加emoji表情支持

Matery 主题新增了对emoji表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成，把对应的markdown emoji语法（::,例如：:smile:）转变成会跳跃的emoji表情，安装命令如下：

npm install hexo-filter-github-emojis --save

15. 站点侧边配置音乐播放器

音乐播放器的代码在主题目录下的/layout/_widget/music.ejs文件中.

要支持音乐播放，在主题目录下的 _config.yml 配置文件中激活music配置即可：

# Whether to display the musics.
# 是否在首页显示音乐.
music:
  enable: true
  title: #非吸底模式有效
    enable: true
    show: 听听音乐
  autoHide: true    # hide automaticaly
  server: netease   #require   music platform: netease, tencent, kugou, xiami, baidu
  type: playlist    #require song, playlist, album, search, artist
  id: 2888085740     #require  song id / playlist id / album id / search keyword
  fixed: false       # 开启吸底模式  true 播放器会在站点侧边,点击会出现
  autoplay: false   # 是否自动播放
  theme: '#42b983'
  loop: 'all'       # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'random'   # 音频循环顺序, 可选值: 'list', 'random'
  preload: 'auto'   # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7       # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
  listFolded: true  # 列表默认折叠
  hideLrc: true     # 隐藏歌词

server可选netease（网易云音乐），tencent（QQ音乐），kugou（酷狗音乐），xiami（虾米音乐）， baidu（百度音乐）。 type可选song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手） id获取示例: 打开手机版网易云音乐，选择喜欢的歌单，然后点击分享.

我这里随便选了一个歌单，分享后的文字长这样：

分享真咸鱼饼干的歌单《青年节：致逐梦人，有志者事竟成》http://music.163.com/playlist/4965675848/1548006936/?userid=120124365 (@网易云音乐)

4965675848 这就是歌单的id，文件里默认设置的歌单其实也还不错，歌挺多的，所以如果没什么特殊要求，使用默认歌单也不错。

然后博客是在主题目录下的/layout/index.ejs文件中引用了/layout/_widget/music.ejs音乐文件:

<div id="indexCard" class="index-card">
        <div class="container ">
            <div class="card">
                <div class="card-content">
                    <% if (theme.dream.enable) { %>
                        <%- partial('_widget/dream') %>
                    <% } %>

                    <% if (theme.music.enable && !theme.music.fixed) { %>
                        <%- partial('_widget/music') %>
                    <% } %>

                    <% if (theme.recommend.enable) { %>
                    <div id="recommend-sections" class="recommend">
                        <%- partial('_widget/recommend') %>
                    </div>
                    <% } %>
                </div>
            </div>
        </div>
    </div>

上面代码中的recommend是主页的文章推荐, dream是我的梦想, 在主题目录下的_config.yml文件中配置是否激活启用, 在编写MD博客时设置top属性为true即可在主页看到文章推荐.

16. 主页网站标题及副标题

在博客根目录下的 _config.yml 配置文件中:

# Site
title: 王子的博客 #网站标题
subtitle: be yourself, be better #网站副标题
description: 本网站是个人兴趣爱好，总结分享经验，记录生活点滴的平台，希望在以后的学习旅途中，走出自己的风景 #网站描述description 主要用于5E0，告诉搜索引擎一个关于您站点的简单描述
keywords: [王子的博客,HTML, CSS, JavaScript, JQuery, java, linux等] #网站的关键词。使用半角逗号“，”分隔多个关键词
author: 王子 #您的名字
language: zh-CN #网站使用的语言。建议修改为zh-CN
timezone: Asia/Shanghai #网站时区。Hexo默认使用您电脑的时区。

17. 主页网站副标题及打字效果

在博客根目录 _config.yml 文件维护的副标题下方的打字效果, 在主题的 _config.yml 配置文件中配置如下:

# 打字效果副标题.
# 如果有符号 ‘ ，请在 ’ 前面加上 \
subtitle:
  enable: true
  loop: true # 是否循环
  showCursor: true # 是否显示光标
  startDelay: 300 # 开始延迟
  typeSpeed: 100 # 打字速度
  backSpeed: 50 # 删除速度
  sub:
    - 从来没有真正的绝境, 只有心灵的迷途.
    - Never really desperate, only the lost of the soul.
    - 如果放弃太早，你永远都不知道自己会错过什么.
    - 没有伞的孩子必须努力奔跑！
    - 花开不是为了花落，而是为了开的更加灿烂.
    - 没有礁石，就没有美丽的浪花；没有挫折，就没有壮丽的人生.

获取sub打字内容的js代码在主题目录下/layout/_partial/bg-cover-content.ejs

<div class="description center-align">
    <% if (theme.subtitle.enable) { %>
        <span id="subtitle"></span>
        <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
        <script>
            var typed = new Typed("#subtitle", {
                strings: [
                    <% theme.subtitle.sub.forEach(function(item){ %>
                    "<%= item %>",
                    <% }) %>
                ],
                startDelay: <%= theme.subtitle.startDelay %>,
                typeSpeed: <%= theme.subtitle.typeSpeed %>,
                loop: <%= theme.subtitle.loop %>,
                backSpeed: <%= theme.subtitle.backSpeed %>,
                showCursor: <%= theme.subtitle.showCursor %>
            });
        </script>
    <% } else { %>
        <%= config.description %>
    <% } %>
</div>

打字效果, 打印位置在根目录设置的副标题下面轮播打印主题目录设置的sub值

副标题打字效果

18. 副标题打字效果改为展示今日诗词

修改主题配置文件_config.yml, 将副标题的动态打字enable改为false

# 打字效果副标题.
# 如果有符号 ‘ ，请在 ’ 前面加上 \
subtitle:
  enable: false
  loop: true # 是否循环
  showCursor: true # 是否显示光标
  startDelay: 300 # 开始延迟
  typeSpeed: 100 # 打字速度
  backSpeed: 50 # 删除速度
  sub:
    - 从来没有真正的绝境, 只有心灵的迷途.
    - Never really desperate, only the lost of the soul.
    - 如果放弃太早，你永远都不知道自己会错过什么.
    - 没有伞的孩子必须努力奔跑！
    - 花开不是为了花落，而是为了开的更加灿烂.
    - 没有礁石，就没有美丽的浪花；没有挫折，就没有壮丽的人生.

在/themes/hexo-theme-matery/layout/_partial/bg-cover-content.ejs文件中将<%= config.description %>改为:

<span id="jinrishici-sentence">正在加载今日诗词....</span>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

参考今日诗词接口官方资料

19. 推荐文章设置

主题目录下的_config.yml 配置文件中:

# 是否显示推荐文章的标题
recommend:
  enable: true
  showTitle: true
  useConfig: false # 是否使用配置文件, 在 _data/recommends.json 下配置推荐文章, false则会走主题配置的 top 属性

top 属性配置详见Front-matter

20. 设置文章阅读密码

主题目录_config.yml配置如下:

# 阅读文章的密码验证功能，如要使用此功能请激活该配置项，并在对应文章的Front-matter中写上'password'的键和加密后的密文即可.
# 请注意：为了保证密码原文不会被泄露到网页中，文章的密码必须是通过'SHA256'加密的，这样就不会被破解.
verifyPassword:
  enable: true
  promptMessage: 请输入访问本文章的密码
  errorMessage: 密码错误，将返回主页！

在博客文章中指定加密后的密文密码password , 博客文件密码属性设置详情见Front-matter

SHA256 加密的地址: 开源中国在线工具、chahuo、站长工具、TTmd5

主题优化进阶看上篇hexo博客搭建及主题优化(二)

Front-matter

Front-matter 选项详解

Front-matter 选项中的所有内容均为非必填的。但仍然建议至少填写 title 和 date 的值。

配置选项	默认值	描述
title	`Markdown` 的文件标题	文章标题，强烈建议填写此选项
date	文件创建时的日期时间	发布时间，强烈建议填写此选项，且最好保证全局唯一
author	根 `_config.yml` 中的 `author`	文章作者
img	`featureImages` 中的某个值	文章特征图
top	`true`	推荐文章（文章是否置顶），如果 `top` 值为 `true`，则会作为首页推荐文章
cover	`false`	表示该文章是否需要加入到首页轮播封面中
coverImg	无	表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
password	无	文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 `password` 的值，该值必须是用 `SHA256` 加密后的密码，防止被他人识破。前提是在主题的 `config.yml` 中激活了 `verifyPassword` 选项
toc	`true`	是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 `config.yml` 中激活了 `toc` 选项
mathjax	`false`	是否开启数学公式支持，本文章是否开启 `mathjax`，且需要在主题的 `_config.yml` 文件中也需要开启才行
summary	无	文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部
tags	无	文章标签，一篇文章可以多个标签
categories	无	文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
keywords	文章标题	文章关键字，SEO 时需要
reprintPolicy	cc_by	文章转载规则，可以是 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-mater中指定reprintPolicy来给单个文章配置转载规则.

最全示例

---
title: 基于Hexo的hexo-theme-matery主题搭建博客并优化
date: 2019-10-03 14:25:00
author: 悟尘
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories: 工具
tags:
  - blog
  - hexo
---

crysw

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
hexo博客搭建及主题优化(一)

crystalBlog下篇hexo博客搭建及主题优化(二)介绍个人博客, 站点地址 https://wang-qz.gitee.io/crystal-blog/软件架构基于hexo框架, hexo-theme-matery主题搭建的个人博客网站, 其他主题选择请进入hexo-theme查看.安装教程1. 安装js, hexo,git网上很多环境安装教程, 此处省略…, 参考Easy Hexo2. 设置npm全局下载目录npm config set prefix "D:\softwar
复制链接

扫一扫