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


crystalBlog

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

介绍

个人博客, 站点地址 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 文件中,默认支持 QQGitHub 和邮箱的配置,

# 首页 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) { %>
    
<% } else { %>
    
<% } %>

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 选项中的所有内容均为非必填的。但仍然建议至少填写 titledate 的值。

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

文章作者: 王子
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 王子 !
评论
  目录