使用Hexo+Next主题搭建自己的个人博客

我的个人博客就是使用Hexo博客框架+Next主题搭建而来的，之前也使用过CSDN、博客园等，最后都放弃了，因为一方面是广告多，另外一方面样式我也不是很喜欢，这个博客搭建以来我也来来回回也修改了很多次，最后也是改成了现在的样式，后面还会继续做一些小优化，下面我也来分享一下使用Hexo+Next搭建个人博客的教程，希望大家都可以搭建出自己喜欢的样式的博客~

博客原文链接：https://blog.bestzuo.cn/posts/blog-establish.html

我的其它博客：
hexo博客加入豆瓣读书/电影/游戏：https://www.jianshu.com/p/2c2726da64a3
hexo博客首页加入轮播图：https://www.jianshu.com/p/334ac1caba94

ps:懒癌患者慎入

image

一般来说大多数教程会教我们把搭建的博客放到Github Pages上面，其实这也是一个不错的选择，但是由于Github服务器毕竟还是在国外，在国内访问的话速度会比较慢，如果追求速度的话，可以把博客放到国内的Coding（码云）上面，也可以放到腾讯云对象存储上面（还有七牛云存储等等），但是都是各有各的限制，腾讯云存储的话需要域名已经备案（然而备案就是一件比较麻烦的事......）。

所以如果不是非常想折腾的话，还是推荐直接放到GithubPages上即可 ，而且GithubPages有一个比较方便的地方就是可以一键开启HTTPS，这样避免了大多数浏览器烦人的不安全连接问题。

环境准备

在安装hexo框架之前，我们需要先安装其依赖环境：

  1. Node.js
  2. Git

因为Hexo博客框架就是基于Node.js的，所以必须要先安装Node.js环境，我们可以去Node.js中文官网下载，如图

image

由于一般我们是在windows或者macOS环境下作为本机操作的，所以下载对应的安装包就可以了，下载好后一路点next就完成了，这个没什么问题。

然后我们需要安装一下Git，Git主要是帮助我们一键部署到Github仓库上面。

安装Git的话，如果是window系统，可以直接去windows的Git下载地址去下载，如果是macOS的话，也可以在这里下载。当这些环境都部署好之后，就可以开始我们的Hexo博客安装啦！

安装Hexo

本文安装环境为windows10，所以一下都以windows安装为例。

安装之前需要说明几个注意事项：

  1. 很多命令既可以使用windows的cmd命令行来完成，也可以使用刚才安装好的Git Bash来完成，但是部分命令会有一些问题，建议大家全部使用Git Bash来执行命令。
  2. Hexo不同版本差别比较大，要注意自己安装的版本是哪个版本（跟着本文走就没问题啦），如果修改样式的话注意网上教程的Hexo版本差异。
  3. Hexo安装好后有2种_config.xml文件，一个是hexo站点根目录下的全局_config.xml文件，还有一种是每个主题theme下的各自的_config.xml文件，注意区分二者，后面会详细说到。

然后说明一下，我们在安装过程种使用的命令大多数是npm 命令，而npm命令本身是很慢的（源在国外），我们可以使用淘宝的cnpm来替代npm命令，不过貌似网上也有很多人不推荐使用cnpm，这个也因人而异吧，至少我用着还行。

打开Git Bash，Git Bash可以在刚才安装好的Git下找到，然后在命令下安装cnpm：

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

上面-g表示全局安装，安装完成后会有提示，然后我们开始安装hexo。

1、安装hexo

依然是在GitBash中操作，输入一下命令：

$ cnpm install -g hexo

2、创建hexo文件夹

在电脑某个地方创建一个名为hexo的文件夹（当然名字可以随便取），比如我个人的就是E:\blog\hexo，由于这个文件夹是你以后存放博客代码和文章的地方，所以也最好不要乱放，然后我们在GitBash中cd到创建好的文件夹。

$ cd /e/blog/hexo

3、初始化hexo

在上面cd到创建的文件夹后，输入以下命令

$ hexo init

这个命令执行的时间非常长，主要是初始化hexo博客中的文件夹，包括hexo博客内置的各种node_modules组件等等，所以耐心的稍等一下！

初始化完成后，我们打开刚才创建的文件夹，会发现里面有如下文件夹：

image

注意，这个里面有一个_config.xml文件，这个我们叫做站点根目录配置文件，里面的初始内容如下：（附上中文介绍）

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 站点主配置
title: Hexo  # 网站标题
subtitle:    # 网站副标题
description:   # 网站描述
keywords:      # 可以不填写保持默认
author: John Doe  # 网站拥有者昵称
language:    # 网站语言设置，一般根据依赖的主题而定
timezone:    # 网站时区设置，一般不填写保持默认

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com   # 网站url设置
root: /                    # 网站根目录链接
permalink: :year/:month/:day/:title/   # 文章链接，默认是按照 /年/月/日/文章标题 设置的链接
permalink_defaults:                    # 默认链接形式

# Directory  网站主要目录，这里一般不做改动
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing  网站文章设置，同样一般不做改动
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
  
# Home page setting  主页设置，一般不做改动
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
# Category & Tag  分类设置，一般不做改动
default_category: uncategorized
category_map:
tag_map:

# Date / Time format  日期设置，一般不做改动
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination  导航页，一般不做改动
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions  使用的主题名称，会在这里切换
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next  # 此处切换主题名称

# Deployment  部署，一般选择部署到Github上
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

其实到这里来说，我们的hexo博客已经做好了！不信？我们执行下面命令看看：

//cd到根目录执行
$ hexo g
$ hexo s

然后我们打开浏览器，输入http://localhost:4000，是不是惊奇的发现已经完成了？

image

等....等一下，页面怎么是英文的？？？！

别慌，上面提到配置文件的时候已经说到是语言没有修改了，我们可以打开hexo目录下的themes文件夹，发现里面有一个landscape文件夹，没错，你刚才看到的默认主题就是这个名叫landscape的主题，是不是内心吐槽了一句好丑啊.....当然啊，不然我们怎么会使用其他主题呢？

别慌，我们先来分析一下这个landscape文件夹

image

注意这里面有一个_config.xml配置文件，其实上面已经一再强调过，这个跟前面的站点根目录下配置文件同名，那么这个配置文件我们就叫做<font color="red">主题配置文件</div>。

里面的初始内容我们暂时不管（因为不同主题的配置文件内容不一样，反正我们又不使用这个主题~）。

先来看看上面的languages文件夹，一看就懂，都知道这就是网站语言配置文件，好，我们进去看一下，噢~里面的zh-CN和zh-TW可不就是中文吗。其中zh-CN指的是简体中文，zh-TW（湾湾）是繁体中文，欧克。然后我们再去站点根目录下，注意这里是站点根目录下的配置文件中，就是最上面提到的，将这里：

# Site 站点主配置
title: sanarous教你搭建Hexo博客  //网站标题修改
subtitle: so easy~  //副标题修改
description: 
keywords:      
author: Sanarous   //此处填写你自己的昵称  
language: zh-CN    //这里改成上面在主题配置文件中看到的语言名字
timezone:

更改完后，我们回到GitBash命令行，输入以下命令：

$ hexo g && hexo s

再重新打开浏览器刷新，是不是页面语言变成中文的了！

image

好吧，现在再说一下上面的hexo s hexo g是什么东西，hexo s是启动hexo服务的，而hexo g是重新生成public文件夹，那么public文件夹是什么呢？

别慌，我们回头看一下hexo文件夹目录：

image

看到这个public文件夹吗，这个里面就是生成的所有静态文件，包括html，css，js文件以及图片等，稍微懂点前端的人都知道其中代表的什么意思。简单点来说如果在本地修改了什么文件内容，可以使用hexo g 命令重新生成一下public文件夹，然后再hexo s启动服务就可以看到变化了，当然hexo s本身就具有在线调试的功能，如果hexo s无法刷新页面修改内容，那么使用hexo g && hexo s就可以看到更改内容啦~

上面就是搭建hexo博客的基本内容。

将Hexo博客部署到Github上

为什么要部署到Github上呢，当然是有以下原因：

  1. 因为Hexo博客都是静态文件，访问速度快。
  2. 免费方便，不用花一分钱就可以自己搭建一个自由的个人博客，并且没有服务器没有后台。
  3. 可以随意绑定自己的域名，并且可以一键开启HTTPS，很方便。
  4. 数据绝对安全，github可以恢复任意版本。
  5. 博客内容可以轻松打包、转移以及发布到其它平台。
  6. ....

所以在部署到Github之前，我们需要准备好自己的Github账号。

1、创建Github仓库

首先我们需要在Github上创建一个repository，注意名字必须为你的Github用户名.github.io，如下图：

image

不能设置为其它名字，只能用这个仓库名。这样设置以后，我们在不绑定域名的前提下，可以直接使用http://Sanarous.github.io来访问自己的个人博客，这样就比较方便。

2、配置SSH key

如果是第一次在自己的本机上使用Git上传到Github上，那么必须配置SSH key，表示Github允许这台机器有权限使用Git上传代码。

首先我们可以再GitBash中使用$ cd ~/.ssh来查看本机已经存在的ssh密钥，如果是第一次使用那就是显示No such file or directory啦。

然后输入

$ ssh-keygen -t rsa -C "邮件地址"

上面的邮件地址就是你的Github注册邮箱地址，连续回车之后，最终会生成一个文件在C盘用户目录下面

image

打开这个.ssh文件，里面存放了密钥，然后我们打开自己的Github个人主页，进入个人设置 -> SSH and GPG keys -> New SSH key

image

上面的Titie可以任意填写，下面的key注意要打开.ssh文件，将密钥复制进去。

3、测试是否成功

使用如下命令：

$ ssh -T git@github.com # 注意邮箱地址不用改

如果提示Are you sure you want to continue connecting (yes/no)?点击yes，会显示

Hi Sanarous! You've successfully authenticated, but GitHub does not provide shell access.

看到这个信息就说明SSH已经配置成功！

4、配置Git提交的用户信息

上面配置成功后，我们就可以设置Git的全局用户信息了

使用以下命令：

$ git config --global user.name "Sanarous" // 你的github用户名，非昵称
$ git config --global user.email  "xxx@qq.com" // 填写你的github注册邮箱

配置完成后以后提交代码都是使用的这个用户信息进行提交的。

5、将Hexo博客部署到Github上

首先打开hexo站点的配置文件，找到deloy并填写如下配置：

deploy:
  type: git
  repository: git@github.com:Sanarous/Sanarous.github.io.git # 用户名改成你自己的
  branch: master

注意不要写成：

deploy:
  type: github
  repository: https://github.com/Sanarous/Sanarous.github.io.git
  branch: master

后面一种写法是hexo2.x的写法，现在已经不行了，无论是哪种写法，此时直接执行hexo d的话一般会报如下错误： Deployer not found: github 或者 Deployer not found: git

原因是还需要安装一个插件：npm install hexo-deployer-git --save

然后我们可以通过hexo clean && hexo g && hexo deploy来完成博客部署到Github上啦。

安装Next主题

由于默认的主题landscape界面比较丑（当然魔改也是可以的），我们可以使用Hexo官方推荐的主题：https://hexo.io/themes ，如果喜欢这里面的某些主题，可以直接去上面主题对应的界面中的Github中下载（下载方式与稍后介绍的下载Next主题一样）。

目前在Github上star数量比较多的有Next主题、yillia主题等，Next主题基本占据了Hexo博客的半壁江山。因此我下面只介绍Next主题的使用方式。

首先我们可以打开Github，全局搜索hexo-next，我们会发现是有两个star数量比较高的

image

其中第一个是Next5版本的，而第二个是Next6版本的

注意上面说的版本关系，在Next6版本上其实增加了很多Next5需要手动配置的东西，并且Next5已经停止维护了，如果不太喜欢自己手动去配置的话，建议使用Next6版本。当然本博客使用的仍然是Next5版本，如果需要我的个性化设置的话也可以留言。

下面我们来安装Next主题。

1、下载Next主题

以下均以Next6版本为例，Next5版本操作基本一样。

image

我们安装Next6版本的话，有两种方式：

  1. 在GitBash中cd到博客根目录下，然后使用git clone命令将Next仓库克隆到hexo目录下的themes/next，即命令是git clone https://github.com/theme-next/hexo-theme-next.git themes/next
  2. 直接在Github页面上选择绿色的按钮Clone or Download，点击下载zip压缩包。

如果第一种方式比较慢的话，可以选择第二种方式直接下载，然后将下载好的压缩包直接放在E:\blog\hexo\themes\下面，git clone的话也是在这个下面，下载好后的名字可以任取。

2、设置hexo博客为Next主题

在站点根目录下，设置以下代码：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-next   #此处填入你在themes目录下的next主题文件名

3、测试Next主题

在GitBash中输入

$ hexo clean && hexo g && hexo s

等待启动完成在浏览器中输入http://localhost:4000即可查看安装好的Next主题！

配置Next主题

下面介绍一下如何配置Next主题的配置文件

首先还是打开上面下载或者克隆好的Next主题目录，即在hexo/themes/next下面，然后打开其_config.xml主题配置文件。我们一一修改。

由于配置文件是yml，如果对yml语法不太熟的小伙伴，注意每个配置之间都必须有空格，不然报错。如override: false，注意:后面有一个空格，所有yml语法都是这样。

1、网站图标设置

使用notepad++、editplus或者sublime打开配置文件后，使用Ctrl+F搜索favicon

favicon:
  small: /images/favicon-16x16-next.png  # 即为网站图标
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

注意图片需要放到你的next主题下面的source/images目录下面。

2、网站页脚小心心定义

搜索footer，设置如下，就可以在页脚看到跳动的小心心啦

footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  #since: 2015

  # Icon between year and copyright info.
  icon:
    # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons
    # `heart` is recommended with animation in red (#ff0000).
    name: heart
    # If you want to animate the icon, set it to true.
    animated: true
    # Change the color of icon, using Hex Code.
    color: "#ff0000"

3、关闭底部由hexo强力驱动

还是在上面footer中，如下配置全部设置为false

  powered:
    # Hexo link (Powered by Hexo).
    enable: false
    # Version info of Hexo after Hexo link (vX.X.X).
    version: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: false

4、菜单栏设置

搜索menu，找到如下：

menu:
  home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

# Enable/Disable menu icons.
menu_icons:
  enable: true  #表示是否显示菜单图标icons
  badges: false  # 显示每个菜单下面有多少个内容

其中后面||后面表示的fontawesome中的图标名称，如果想要修改图标，可以去FontAwesome官网找自己喜欢的图标样式。

5、Next主题四种风格设置

搜索schema，找到如下代码：

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

四种风格样式可以自己进行切换，喜欢哪个就选哪个吧~

6、社交链接设置

搜索social，找到如下代码：

#social:
  #GitHub: https://github.com/yourname || github
  #E-Mail: mailto:yourname@gmail.com || envelope
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

后面的yourname改成你自己在对应网站的ID即可。然后将前面的#注释去掉即可。

7、友情链接设置

搜索links，找到如下配置

# Blog rolls
links_icon: link
links_title: Links
links_layout: block
#links_layout: inline
#links:
  #Title: http://example.com/

这里可以添加你想要的友情链接，比如可以添加百度链接：

# Blog rolls
links_icon: link
links_title: Links
links_layout: block
#links_layout: inline
links:
  Baidu: https://www.baidu.com/
  Github: https://github.com/

8、侧边栏设置

搜索sidebar，找到如下配置

sidebar:
  # Sidebar Position, available value: left | right (only for Pisces | Gemini).
  # 此处设置只适用于Pisces或者Gemini风格
  position: left
  #position: right

  # 侧边栏如何展示
  display: post    # 侧边栏在打开文章的时候显示
  #display: always  # 侧边栏不管在哪都显示
  #display: hide    # 隐藏侧边栏
  #display: remove  # 移除侧边栏

  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12

  # 设置返回页面顶部设置，只适用于Pisces或者Gemini风格，建议开启
  b2t: true

  # 显示浏览百分比，建议开启
  scrollpercent: true

  # Enable sidebar on narrow view (only for Muse | Mist).
  onmobile: false

9、文章开启阅读更多按钮

搜索auto_excerpt，找到如下：

auto_excerpt:
  enable: true
  length: 150

默认是关闭的，也就是首页上默认显示整篇文章，而为了显示阅读更多按钮，我们可以开启这个服务。

10、文章元数据设置

元数据就是显示在home页的文章创建于、更新于、阅读次数之类的数据，搜索post_meta，找到如下配置：

post_meta:
  item_text: true
  created_at: true
  updated_at:
    enabled: false
    # If true, show updated date label only if `updated date` different from 'created date' (post edited in another day than was created).
    # And if post will edited in same day as created, edited time will show in popup title under created time label.
    # If false show anyway, but if post edited in same day, show only edited time.
    another_day: true
  categories: true

上面应该已经说明的很详细了吧~

11、文章字数统计设置

搜索post_wordcount，找到如下配置：

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275

注意开启上述设置必须要添加hexo-symbols-count-time模块依赖，即在hexo站点根目录下使用

npm install hexo-symbols-count-time --save命令安装模块。

12、侧边栏头像设置

搜索avatar，找到如下配置

# Sidebar Avatar
avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url:  # 此处是头像的地址
  # If true, the avatar would be dispalyed in circle. 
  rounded: true   # 设置头像是否为圆形
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1    # 设置不透明度，1为完全不透明，0为完全透明
  # If true, the avatar would be rotated with the cursor.
  rotated: true   # 设置鼠标放到头像上是否旋转

13、代码块设置

搜索codeblock，找到如下配置：

codeblock:
  # Manual define the border radius in codeblock
  # Leave it empty for the default 1
  border_radius: 8   # 按钮圆滑度
  # Add copy button on codeblock
  copy_button:  # 设置是否开启代码块复制按钮
    enable: true
    # Show text copy result
    show_result: true  # 是否显示复制成功信息

14、开启文章打赏按钮

搜索reward，找到如下配置：

# Reward
reward_comment: <p style="font-size:14px; color:#34495e; margin:0 0 5px 0;">赞赏一下吧～ 还可以关注公众号订阅最新内容</p>
wechatpay: # 微信收款图片地址
alipay:  # 支付宝收款图片地址
#bitcoin: /images/bitcoin.png

15、开启相关文章推荐功能

搜索related_posts，找到如下配置：

# Related popular posts
# Dependencies: https://github.com/tea3/hexo-related-popular-posts
related_posts:
  enable: false
  title: # custom header, leave empty to use the default one
  display_in_home: false
  params:
    maxCount: 5
    #PPMixingRate: 0.0
    #isDate: false
    #isImage: false
    #isExcerpt: false

开启相关文章推荐需要安装hexo-related-popular-posts模块，即在hexo站点根目录下使用npm install hexo-related-popular-posts --save安装模块，然后开启上面的相关文章功能就可以啦~

16、开启文章版本信息

搜索post_copyright，找到配置

post_copyright:
  enable: false
  license: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a>

设置为true可以打开，后面的license可以使用BY-NC-SA 4.0协议噢~

17、代码块风格设置

搜索highlight_theme，有以下多种风格：

# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties

可以自己修改上面 normal 、night 、 night eighties 、 night blue 、night bright风格看一下喜欢哪种。

18、添加valine评论系统

搜索valine，找到如下配置：

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true
  appid:   # your leancloud application appid
  appkey:  # your leancloud application appkey
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: 留下邮箱，有回复时你将收到提醒，邮箱不会被公开。 # comment box placeholder
  avatar: wavatar # gravatar style https://valine.js.org/avatar/
  guest_info: nick,mail # custom comment header default: nick,mail,link
  pageSize: 10 # pagination size

注意由于valine是第三方插件，因此要先去https://leancloud.cn 网站注册，获取到appid和appkey后放到这里就ok了。其中avatar是设置默认头像，可以去https://valine.js.org/avatar 选择默认头像，然后在这里设置名字即可。

19、开启百度分享或者needmoreshare分享按钮

百度分享的对国内网站来说更友好一些，搜索baidushare，找到如下代码：

# Baidu Share
# Available value:
#    button | slide
# Warning: Baidu Share does not support https.
baidushare:
  type: button  # 设置分享按钮的风格，有button何slide形式

将注释去掉打开即可，虽然说是默认不支持https格式，但是网上有解决方案。

如果要开启needmoreshare的话，可以搜索needmoreshare2，找到如下代码：

needmoreshare2:
  enable: false
  postbottom:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

注意needmoreshare2是依赖theme-next-needmoreshare2模块的，可以去https://github.com/theme-next/theme-next-needmoreshare2 找到使用方法。

20、设置文章阅读量

搜索leancloud_visitors，并进行如下配置：

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: 
  app_key: 
  # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
  # If you don't care about security in lc counter and just want to use it directly
  # (without hexo-leancloud-counter-security plugin), set the `security` to `false`.
  security: false
  betterPerformance: true

注意这个appid和appkey跟上面开启valine评论使用的leanCloud是一样的。

21、开启不蒜子统计功能

搜索busuanzi_count，可以配置如下，也可以使用默认设置。

# Show Views/Visitors of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  enable: true
  site_uv: true #total visitors
  site_uv_icon:  #user-circle
  site_uv_header: 你是来访的第
  site_uv_footer: 位小伙伴
  site_pv: false #total views
  site_pv_icon: eye
  site_pv_header: 访问次数：
  site_pv_footer: 次
  post_views: false
  post_views_icon: eye

注意其中的post_views与上面的leanCloud_visitors冲突，两者都是显示文章阅读量，只开启一个就可以了。

22、开启本地博客搜索功能

搜索local_search，设置代码如下：

# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # unescape html strings to the readable one
  unescape: false

注意该搜索功能需要依赖hexo-generator-searchdb插件，依然还是使用命令npm install hexo-generator-searchdb --save来进行安装。然后 在hexo站点根目录的末尾，加入以下代码即可。

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

23、修改加载特效

搜索pace，找到如下代码：

# Progress bar in the top during page loading.
pace: false
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#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
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-center-radar #默认设置，可以修改为上述任何一个

可以自己修改后使用hexo s本地调试挑选自己喜欢的加载样式。

24、开启3D背景

配置文件中代码如下：

# Canvas-nest
canvas_nest: false

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

默认为false，可以自己逐一设置为true然后在本地调试查看效果。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,324评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,303评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,192评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,555评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,569评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,566评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,927评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,583评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,827评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,365评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,941评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2赞 342