next主题配置与优化

前言

next主题是Github上star最多的主题，被很多人采用。这篇
博客用来记录next主题的配置与优化过程

一：next主题的配置

1.Git Bash Here打开对应文件夹

git clone https://github.com/theme-next/hexo-theme-next themes/next

2.设置站点配置文件_config.yml。
注意有两个_config.yml，一个是在根目录下也就是我们要找的站点配置文件，D:\blog\myblog\themes\next目录下的_config.yml是主题配置文件

修改主题为next

theme: next

3.检验，输入以下命令后登陆http://localhost:4000/即可查看配置Next主题是否成功

hexo clean   //清理缓存

hexo g && hexo s  

二：优化主题

1.找到site

# Site
title: RedeeMi の个人站
subtitle: Welcome
description: you can enjoy a grander sight，if you climb to a greater height
keywords:
author: RedeeMi
language: zh-Hans
timezone: 

2.打开D:\blog\myblog\themes\next目录下的_config.yml主题配置文件

3.主题

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

4.增加动态效果
打开 next/layout/_layout.swig，在 < /body>之前添加代码(注意不要放在< /head>的后面)

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

修改配置文件，打开 /next/_config.yml,在里面添加如下代码：(可以放在最后面)

# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true

其中
color ：线条颜色, 默认: ‘0,0,0’；三个数字分别为(R,G,B)
opacity: 线条透明度（0~1）, 默认: 0.5
count: 线条的总数量, 默认: 150
zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1

5.侧边社交小图标
打开主题配置文件（_config.yml），搜索social_icons:,在图标库找小图标，并将名字复制在如下位置，效果图
6.统计访问量
打开\themes\next\layout_partials\footer.swig文件,在copyright前输入以下代码

<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

在这里有两中不同计算方式的统计代码：
pv的方式，单个用户连续点击n篇文章，记录n次访问量

<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

uv的方式，单个用户连续点击n篇文章，只记录1次访客数

<span id="busuanzi_container_site_uv">
  本站总访问量<span id="busuanzi_value_site_uv"></span>次
</span>

7.更多内容不再列举，参考主题配置

三.参考

主题配置Hexo设置主题以及Next主题个性设置
Hexo博客优化与Next主题美化
主题配置