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主題美化
主題配置