个人博客搭建第二步：站点主题优化

站点部分修改

1.网页中文乱码解决办法

所有配置文件都可以用记事本打开，如果输入中文后网页显示乱码，则需要将该文件另存为utf-8编码文件

即打开后点击左上角 文件—>另存为，然后在弹出的窗口下方有一个 编码 的下拉菜单，点击选择UTF-8选项，然后点击保存，会提示 是否替换，选择 是 即可。以后出现中文乱码问题都这样解决

2.设置next的显示样式

打开 主题配置文件，搜索 scheme 关键字，你会看到有几行 scheme 的配置，将想要启用的 scheme 前面注释 # 删掉即可。注意只能同时启用一个样式

例如选择 Gemini 样式，只需要像这样

#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

3.添加网页菜单和对应页

在 主题配置文件 中找到 menu，将自己需要的菜单标签前面的 # 删掉，即取消注释，并且各菜单的顺序可以任意调换，显示时会按从上到下的顺序依次显示，各单词的含义分别为

home：主页

categories：分类，显示所有类别

tags：标签，显示所有定义的标签

archives：归档，按时间线顺序显示文档

about：关于

commonweal：公益404

schedule：日程表

sitemap：站点地图

|| 后面的内容为图标名，注意每个关键字的冒号后面都要有空格

创建好菜单后，需要依次创建对应的初始页面，在站点目录下右键打开git bash，然后添加了哪个菜单，就输入例如

hexo new page categories

这样的命令

然后在站点目录的 source 目录下就会生成对应的文件夹，每个文件夹里都有一个index.md文件

编辑每个菜单目录里的index.md文件，按如下格式编辑

---
title: 关于
date: 2018-11-08 10:22:26
type: "about"
comments: true
---

双引号内的内容为对应的菜单类型
comments是控制该页面底部的评论功能是否开启

设置title为中文时保存后网页可能会出现乱码，更改文件编码方式为utf-8即可

4.增加站内搜索功能

在站点目录下右键打开git bush

输入命令 安装搜索服务

npm install hexo-generator-searchdb --save

等待安装完成后打开 站点配置文件

在最后一行增加以下内容

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑 主题配置文件

找到 local_search 字段，将 enable 改成 true 来启用搜索功能

5.设置侧边栏

打开 主题配置文件，搜索关键字sidebar，首先设置侧栏的位置，找到类似下面的代码

sidebar：
position： left
#position： right

只可以选择靠左或靠右，选择哪个就把哪个前面的#号删掉来取消注释即可

然后设置侧栏显示的时机，向下翻找到 Sidebar Display，各个选项的含义如下：

post - 默认行为，在文章页面（拥有目录列表）时显示
always - 在所有页面中都显示
hide - 在所有页面中都隐藏（可以手动展开）
remove - 完全移除

和之前一样，选择哪个就把下面的哪个display取消注释即可，如选择 post 就这样设置：

 display: post
 #display: always
 #display: hide
 #display: remove

6.增加侧边栏社交链接

打开 主题配置文件，找到social，然后把social前面的#删掉，代表启用这个功能，然后在设置要显示的链接，需要哪个就把哪个前面的#号删掉即可，记得把链接改成自己的，比如我只开启了github，就例如这样：

social:
  GitHub: https://github.com/codewaster || github
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #YouTube: https://youtube.com/yourname || youtube

其他用不到的链接就依旧保持注释状态。

7.设置侧边栏头像

将头像图片放在主题目录的source/images/目录下，尺寸是正方形即可，然后将照片改名为 avatar，或者其他后缀名的图片。
编辑 主题配置文件，找到关键字 avatar，删掉前面的 # 号，值设置成头像的链接地址，比如

avatar: /images/avatar.jpg

保存后可用hexo s打开本地服务器预览一下效果

8.增加RSS

什么是RSS？

自己搭建博客，如何写一篇新的博客就自动告诉读者你写了一篇新的博客？一个简单方法就是使用rss，RSS订阅是站点用来和其他站点之间共享内容的一种简易方式,即Really Simple Syndication(简易信息聚合)，使用这个东西就可以把自己写的博客推送给读者。

在站点目录下打开git bash输入命令安装rss

npm install --save hexo-generator-feed

等待大概十几秒即可安装完成。然后打开 主题配置文件，找到rss，将其改为

rss: /atom.xml

保存后即可预览效果，会在侧栏出现一个红色的rss的按钮

9.增加fork me on github按钮

样式挑选链接：字条样式、图标样式
选好之后复制对应的代码，打开主题目录下的layout\layout.swig文件，搜索关键字container_class,找到这段代码

然后将复制的代码粘贴到下一行，并将开头的 https://your-url 改成你自己的 github 地址，然后保存即可。

10.更改页面加载动画

打开 主题配置文件，找到关键字pace，想要开启功能只需要改成下面这样

pace: true

各选项的个人描述如下

#pace-theme-big-counter 右上角显示一个淡蓝色的贼丑的数字百分比进度
#pace-theme-bounce 右上角有一个小蓝球跳动
#pace-theme-barber-shop 整个屏幕覆盖式的蓝色条纹进度条显示
#pace-theme-center-atom 屏幕中间一个球式的花环旋转，并有数字百分比进度显示
#pace-theme-center-circle 屏幕中间一个蓝色水平旋转的圆形，并有数字百分比显示
#pace-theme-center-radar 屏幕中间一个WiFi符号旋转
#pace-theme-center-simple 屏幕中间一个蓝色进度细条
#pace-theme-corner-indicator 右上角一个蓝色的贴边三角形，中间有两个环在转
#pace-theme-fill-left 整个屏幕覆盖式的淡蓝色条纹进度条显示，置于屏幕底部，不遮挡元素
#pace-theme-flash 右上角有一个蓝色小半圆转圈
#pace-theme-loading-bar 中间有一个略宽一点的蓝色进度条，并有数字百分比进度显示
#pace-theme-mac-osx 整个屏幕的透明白色波浪进度条，覆盖整个页面的元素
#pace-theme-minimal 最简洁的顶部黑条变蓝进度条，丝毫不显眼

可以自己一个个试一下，个人感觉这个动画功能不怎么好看，直接默认关掉了。

11.设置背景动画

打开 主题配置文件，搜索关键字canvas，这几个选项就是背景动画，用哪个就把哪个后面的 false 改成 true 即可,比如：

# Canvas-nest
canvas_nest: true

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

12.增加本站访客量阅读量显示

打开 主题配置文件，找到busuanzi_count，将 enable 的值改为 true。

当enable: true时，代表开启全局开关。若site_uv、site_pv、page_pv的值均为false时，不蒜子仅作记录而不会在页面上显示。

站点UV配置

当site_uv: true时，代表在页面底部显示站点的UV值，即访客数，统计的是人们访问你网站的总次数

site_uv_header和site_uv_footer为自定义样式配置，值留空时将不显示，显示顺序为[site_uv_header]UV值[site_uv_footer]。

例如：

# 效果：本站访客数：12345人
site_uv: true
site_uv_header: 本站访客数：
site_uv_footer: 人

其中，这行代码

是以定义的格式显示其中的文本，而且调用了一个图标，如果不需要可以删掉，如果想共同显示的话可以将中文加在里面或者的后面，例如这样：

site_uv: true
site_uv_header: 访客数：
site_uv_footer: 人

或者这样：

site_uv: true
site_uv_header: 访客数：
site_uv_footer: 人

注意冒号后面要有一个空格，然后再写值

站点PV配置

当site_pv: true时，代表在页面底部显示站点的PV值，即访问量，统计的是人们打开阅读你博客的总次数

site_pv_header和site_pv_footer为自定义样式配置，值留空时将不显示，显示顺序为[site_pv_header]PV值[site_pv_footer]。

# 效果：本站总访问量12345次
site_pv: true
site_pv_header: 本站总访问量
site_pv_footer: 次

修改方法和上一个基本相同

单文章PV配置

当page_pv: true时，代表在文章页面的标题下显示该页面的PV值（阅读数）。

page_pv_header和page_pv_footer为自定义样式配置，值留空时将不显示，显示顺序为[page_pv_header]PV值[page_pv_footer]。

# 效果：本文总阅读量12345次
page_pv: true
page_pv_header: 本文总阅读量
page_pv_footer: 次

全部设置完后会出现这个功能和 leancloud 统计功能重复，所以两个选一个开启一个，我选择的是开启leancloud，关闭了这个

13.增加百度统计功能

首先注册百度统计站长版，登陆后点击 新增网站，然后直接输入你的博客地址例如： https://codewaster.github.io，网站域名 和 网站首页 都写这个，网站名称 可以填 我的博客，
行业类别： 博客—空间周边。

然后点击左侧菜单的 代码获取，找到

hm.src = "https://hm.baidu.com/hm.js?……"

问号后的这一段十六进制代码
复制下来，粘贴到 主题配置文件 中的baidu_analytics:后面，注意冒号和值之间要有一个空格，然后将该字段前面的#号删除代表启用此功能。保存后即可

14.去掉网页底部“强力驱动”字样和主题版本声明的“字样”

打开 主题目录 下的layout/_partials/footer.swig 找到以下代码直接删除或将代码注释掉

{% if theme.footer.powered %}
  
{#
  #}{{ __('footer.powered', 'Hexo') }}{#
#}
{% endif %}

{% if theme.footer.powered and theme.footer.theme.enable %}
  |
{% endif %}

{% if theme.footer.theme.enable %}
  
{#
  #}{{ __('footer.theme') }} — {#
  #}{#
    #}NexT.{{ theme.scheme }}{#
  #}{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}
{% endif %}

保存即可

15.右下角增加浏览文章时显示浏览进度插件

打开 主题配置文件，搜索 scrollpercent，将 false 改为 true 即可。

16.修改文章底部的#号标签样式

打开 主题目录 下的/themes/next/layout/_macro/post.swig，找到关键字 rel=“tag”>#，将#换成以下代码:

这个代码调用的是标签的图标，这样可以更美观；这样改好后保存即可

文章部分修改

1.增加文章字数统计功能

先在 站点目录 下打开git bash输入以下命令

npm install hexo-wordcount --save

等待十几秒后安装完成，然后编辑 主题配置文件，找到post_wordcount，将需要的功能后面的值进行更改即可。各选项的含义：

  item_text: 是否显示对应文字
  wordcount: 单篇文章字数
  min2read: 单篇文章阅读时长
  totalcount: 网站总字数
  separated_meta: 是否自动换行显示字数统计及阅读时长

然后打开 主题目录 下的layout/_macro/post.swig文件，注意更改文件编码方式为utf-8避免中文乱码

然后找到这段代码

    {{ wordcount(post.content) }}

更改为

    {{ wordcount(post.content) }}字

来为字数统计添加文字描述。

然后找到

    {{ min2read(post.content) }}

更改为

    {{ min2read(post.content) }} 分钟

来为阅读时长增加文字描述。

然后找到layout\_partials/footer.swig中的下面这行代码

{{ __('post.totalcount') }}:

将其改成

本站共

再找到

{##}{{ totalcount(site, '0,0.0a') }}{##}

将其改成

{##}{{ totalcount(site, '0,0.0a') }} 字{##}

其中:代表的就是冒号

{{__('post.totalcount')}}

这段代码调用的就是默认的英文描述

{{totalcount(site,'0,0.0a')}}

这个用来统计字数。

并且在网页非最大化的时候会隐藏数字前面的字符，只显示多少字，具体效果可自己对比查看

2.增加文章浅色边框显示

打开 主题目录 下的source\css\ _custom\custom.styl
添加以下代码

.post {
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 25px;
	-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
	-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

完成

3.更改内容区域的宽度

个人认为设置边框之后中间的内容就显得有点狭窄了，所以。。打开主题目录下的source/css/_variables/custom.styl，在任意地方添加以下代码：

// 修改成你期望的宽度
$content-desktop = 700px

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

以上为默认值

4.设置代码高亮主题

打开 主题配置文件，找到highlight_theme，
NexT 默认使用的是白色的 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties，具体效果可自己尝试。

更改 highlight_theme 字段，将值设定为喜欢的高亮主题即可

5.增加博文置顶功能

在 站点目录 下找到文件node_modules/hexo-generator-index/lib/generator.js将里面的代码替换为：

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

然后在发布文章的时候添加 top 值，数值越大文章越靠前，如

title: 解决Charles乱码问题
date: 2017-05-22 22:45:48
tags: 技巧
categories: 技巧
copyright: true
top: 100

6.增加阅读量统计功能

注册一个 LeanCloud 账号（可以直接通过github注册）

然后点击 创建应用，

然后 新应用名称可以任意输入，且以后是可以更改的，不勾选复选框，直接点击 创建

然后点击新创建的应用，网页跳转后点击 创建class，命名为Counter，用来专门保存我们博客的访问量等数据。然后在 设置数据条目的默认ACL权限 选择 无限制，然后点击创建class

创建完成后，在最左侧的侧边栏点 设置，在 基本信息下面那里点击 应用key，可以看到APP ID和APP KEY

这时候打开 主题配置文件，找到leancloud_visitors，将代码改为

leancloud_visitors:
  enable: true

然后在下面的

app_id: 
app_key: 

后面填上之前看到的id和key即可，注意冒号后面要有一个空格。

需要特别说明的是：记录文章访问量的唯一标识符是文章的发布日期以及文章的标题，因此请确保这两个数值组合的唯一性，如果你更改了这两个数值，会造成文章阅读数值的清零重计。

因为AppID以及AppKey是暴露在外的，因此如果一些别用用心之人知道了之后用于其它目的是得不偿失的，为了确保只用于我们自己的博客，建议开启Web安全选项，这样就只能通过我们自己的域名才有权访问后台的数据了，可以进一步提升安全性。

回到LeanCloud点击 应用key 下面的 安全中心，然后在WEB安全域名中填写我们自己的博客域名，填好后点击 保存 即可。

7.设置首页显示文章缩略，点击后阅读全文

在首页显示一篇文章的部分内容，并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式。 也就是说，在首页显示文章的摘录并显示 阅读全文 按钮，可以通过以下方法：

1. 在文章中使用以下代码手动进行截断，Hexo 提供的方式 推荐

2. 在文章的 front-matter 中添加 description，并提供文章摘录
3. 自动形成摘要，在 主题配置文件 中添加：

auto_excerpt:
  enable: true
  length: 150

默认截取的长度为150字符，可以根据需要自行设定

建议使用第一种方式，除了可以精确控制需要显示的摘录内容以外，这种方式也可以让Hexo中的插件更好的识别。

8.设置打赏功能

将打赏码图片重命名为wechatpay放到主题目录下
打开 主题配置文件，搜索wechatpay，将对应的代码改为：

# Reward
reward_comment: 坚持技术分享，您的支持将鼓励我继续创作！
wechatpay: /images/wechatpay.png
#alipay: /images/alipay.jpg
#bitcoin: /images/bitcoin.png

保存即可

增加第三方功能

1.增加百度统计功能

先打开百度统计官网，注册一个站长版账号，登陆后点击新增网站，直接输入你的博客网址，比如 http://codewaster.github.io

网站域名和网站首页都写这个，网站名称可以填：我的博客 也可以随便起。行业类别选择：博客—>空间周边

然后点击左侧菜单的代码获取，找到

hm.src = “https://hm.baidu.com/hm.js?……”

问号后的一段十六进制代码，复制下来，粘贴到 主题配置文件 中的

baidu_analytics:

后面，冒号和值之间要有一个空格

保存后，用命令

hexo g

配置静态页面，这时候百度统计代码就生效了

2.增加网页底部评论系统

评论系统我用的是来比力，韩国的一个评论系统插件，其他评论系统请参照官方安装教程

先去官网注册一个来必力账户，注册完成后点击左上角的菜单栏图标展开菜单，点击安装，然后点击获取免费版

然后点击一般网站，
将代码第二行

data-uid=后面引号里的字符复制出来，然后打开打开 主题配置文件，编辑livere_uid字段，删除字段前面的#，然后将 your uid 替换成之前复制的字符，注意冒号后面要有空格

其他

任何问题欢迎在文章下方评论区给我留言，我也是个新手，希望能和大家一起探讨，共同学习！