日常bb
前一篇文章：2019-3.3_發燒停更
本來向發燒停更的，打算；還是不能休息，有罪惡感。貼上之前我hexo-next主題創建的博客文章。
目錄
1.前言
2.環境準備
3.大概步驟
4.初步實施
4.1安裝git,node.jsp軟件
4.2安裝hexo，創建hexo相關軟件
4.2.1實現效果
4.3初步部署next
4.3.1下載next
4.3.1.1實現效果
4.3.2部署next
4.3.2.1實現效果
5精修（重點來了）
5.1修改語言，title和作者名字
5.2修改導航欄->右邊
5.3修改默認主題
5.4自動更換背景圖片
5.5鼠標點擊效果
5.5.1點擊出現愛心效果
5.5.1.1效果圖
5.5.2點擊出現爆炸效果
5.5.2.1效果圖
5.5.3點擊出現富強民主富國公正···效果
5.5.3.1效果圖
5.6設置主圖頂部有一條黑線，去掉
5.6.1效果圖
5.7設置網站圖標
5.8修改作者頭像并旋轉
5.9設置點擊頭像返回主頁
5.10添加標簽，分類頁面等
5.11添加站內搜索功能
5.12統計訪客量和文章閱讀數
5.13統計網站底部字數統計
5.14網站底部版本主題顯示取消
5.15修改文章底部那個帶#的標簽
5.16統計字數和閱讀分鐘數
5.17添加文章訪問排名
5.18添加RSS
5.19添加社交圖標
5.20側欄添加建站運行時間
5.21底部顯示建站時間和圖標修改（變成跳動的紅心）
5.22首頁不顯示全文
5.23修改文章內鏈接文本樣式
5.24文章添加陰影效果
5.25文章末尾統一添加“本文結束”標記
5.26后臺admin登錄管理發布文章
5.27添加動態粒子背景和修改上一篇，下一篇的順序。
5.28在回到頂部按鈕里顯示閱讀百分比
5.29在categories和tags添加年月分割
5.30修改tagcloud的顏色
5.31文章摘要圖
5.32添加文章置頂
5.33在代碼段輸入“-”和“+“顯示不同的顏色
5.34實現評論
5.35自定義鼠標樣式
5.36文章加密訪問
5.37首頁的文章摘要圖片
5.38增加版權信息
5.39設置打賞效果和打賞不停的抽搐
前言
加油弄吧，有不會的地方希望大哥點評
環境準備
- 本人用的: windows10。
- git 官網: git
- 善于動腦子。
大概步驟
- github下載hexo-theme-next-master
主題地址：
https://github.com/theme-next/hexo-theme-next
初步實施
安裝git，node.jsp軟件
實現效果：
在新創建的hexo文件夾里面右鍵Git Bash Here
git --version
node -v
npm -v
image
安裝hexo，創建hexo相關文件
在創建的hexo文件夾里面右鍵Git Bash Here
npm i hexo -g
可能有點慢，耐心等待就行，不然你就開梯子。
hexo init
出現：
WARN Failed to install dependencies. Please run 'npm install' manually!
執行：
cnpm install
實現效果：
打開hexo文件夾：
image
初步部署next
下載next
主題github地址：
https://github.com/theme-next/hexo-theme-next
選擇:Clone or download->Download ZIP
下載好解壓到創建的hexo文件夾的themes文件夾中。
實現效果
image
部署next
修改配置文件：hexo_test_config.yml
ctrl+f:找到以下代碼修改
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
- theme: landscape
+ theme: hexo-theme-next-master
在hexo_test目錄下面（以下我允成為根目錄）打開Git Bash Here
hexo clean 清除緩存
hexo s 開啟服務
ctrl+c退出
本地瀏覽器輸入：
127.0.0.0:4000
實現效果
image
精修（重點來了）
修改語言，title和作者名字
在根目錄下_config.yml文件下
# Site
- title: Hexo
+ title: 曉
subtitle:
description:
keywords:
-author: John Doe
+author: 曉曉曉
-language: zh-Hans
+language: zh-CN
timezone:
然后在根目錄下面Git Bash here
hexo clean
hexo s
刷新127.0.0.1:4000頁面
修改導航欄->右邊
在主題目錄下_config.yml文件下
sidebar:
# Sidebar Position, available values: left | right (only for Pisces | Gemini).
#position: left
- position: left
+ position: right
刷新頁面
修改默認主題
在主題目錄下_config.yml文件下
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
4種主題，去掉注釋保存直接刷新頁面就可以看到效果
自動更換背景圖片
打開 hexo_test\themes\hexo-theme-next-master\source\css_custom\custom.styl
添加：
body {
background:url(https://source.unsplash.com/random/1600x900);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
}
保存直接刷新頁面就能看到背景（點擊或者刷新頁面會自動更換背景圖片）
因為要加載自動更換的圖片，所以可能會因為網速或者別的原因，網頁會刷得不那么快！ 應大哥的要求我們這里不使用自動更換的圖片。
我們網上找到一張圖，然后右擊“復制圖像地址”復制到url里面去。
body {
background:url(https://raw.githubusercontent.com/xiao222042/image/master/post-head.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
}
完美！！！
這里需要一個注意點
在選擇主題的時候有4個選擇！！！（你選擇“Pisces”和“Gemini”）可以不用看這里了。
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
在選擇前面兩個的時候，保存刷新頁面會出現頁面透明的效果。
修改文章透明度還在在custom.styl添加
.main-inner {
margin-top: 60px;
padding: 60px 60px 60px 60px;
background: #fff;
opacity: 0.8;
min-height: 500px;
}
保存刷新查看頁面。
再說一個注意點：
增加透明度這個辦法我只是百度到了使用與前兩個主題。使用后兩個主題增加了的話就會導致導航欄在文章后面去了，不能點到導航欄按鈕
鼠標點擊效果
點擊出現愛心效果
在 hexo_test\themes\hexo-theme-next-master\source\js\src創建文件clicklove.js
添加代碼：
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
打開hexo_test\themes\next\layout_layout.swig文件
添加代碼：
<!-- 頁面點擊小紅心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>
hexo clean
hexo s
刷新頁面，點擊出現愛心。
效果圖
image
點擊出現爆炸效果
和上面的愛心任選一吧
在 hexo_test\themes\hexo-theme-next-master\source\js\src創建文件fireworks.js
添加代碼：
"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};
打開hexo_test\themes\hexo-theme-next-master\layout_layout.swig
添加代碼：
{% if theme.fireworks %}
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script type="text/javascript" src="http://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript" src="/js/src/fireworks.js"></script>
{% endif %}
打開主題配置文件_config.yml
添加：
# Fireworks
fireworks: true
hexo clean
hexo s
刷新頁面點擊出現爆炸
效果圖
image
點擊出現富強明主富國公正~~~~效果
這個好像可以和爆炸一起選，效果還不錯。
這里就不重復寫了，自行添加吧。
效果圖
image
設置主題頂部有一條黑線，去掉
打開：hexo_test\themes\hexo-theme-next-master\source\css_custom\custom.styl
添加代碼：
.headband {display:none;}
保存刷新發現黑邊沒有了。
效果圖
前：
image
后：
沒有了唄。
設置網站圖標
自行ps修改一個32*32的圖標放在：hexo_test\themes\hexo-theme-next-master\source\images
自行命名
打開主題配置文件_config.yml
修改代碼：
small: /images/favicon-16x16-next.png
- medium: /images/favicon-32x32-next.png
+ medium: /images/L-32.png
保存刷新頁面查看頁面logo。
修改作者頭像并旋轉
修改主題配置文件_config.yml
修改代碼：
# 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:
+ url: https://raw.githubusercontent.com/xiao222042/image/master/10.png
這里做一下解釋，我把所有的圖片都放在我的github上面的，這樣就能保證源代碼文件的短小精悍。
打開hexo_test\themes\hexo-theme-next-master\source\css_common\components\sidebar\sidebar-author.styl
添加代碼：
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
/* 頭像圓形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;
/* 設置循環動畫 [animation: (play)動畫名稱 (2s)動畫播放時長單位秒或微秒 (ase-out)動畫播放的速度曲線為以低速結束
(1s)等待1秒然后開始動畫 (1)動畫播放次數(infinite為循環播放) ]*/
/* 鼠標經過頭像旋轉360度 */
-webkit-transition: -webkit-transform 1.0s ease-out;
-moz-transition: -moz-transform 1.0s ease-out;
transition: transform 1.0s ease-out;
}
img:hover {
/* 鼠標經過停止頭像旋轉
-webkit-animation-play-state:paused;
animation-play-state:paused;*/
/* 鼠標經過頭像旋轉360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
/* Z 軸旋轉動畫 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
hexo clean
hexo s
刷新頁面點擊頭像旋轉。
設置點擊頭像返回主頁
打開主題配置文件_config.yml
添加代碼：
+ <a href="/">
<img class="site-author-image" itemprop="image"
src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
alt="{{ theme.author }}" />
+ </a>
這里注意找到中間代碼，添加a標簽就行了，中間不用修改。
hexo clean
hexo s
刷新頁面點擊頭像返回主頁。
添加標簽，分類頁面等
打開主題配置文件_config.yml
修改：
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
用什么修改什么，也可以添加，后面添加文章排行的時候講添加。
這里去掉about（關于）tags（標簽）categories(分類)常用標簽。
保存刷新。
注意這里點擊about，tags，categories標簽，顯示錯誤
在根目錄下面打開Git Bash Here
創建about，tags，categories文件。
新建about代碼:
hexo new page about
新建tags代碼:
hexo new page tags
新建categories代碼:
hexo new page categories
問題又來了
重新打開，然后會發現頁面顯示about，tags，categories；about不用管，順便寫寫就行；tags，categories就不行了，不能實現功能。
修改tags：
打開hexo_test\source\tags\index.md
修改為：
---
title: 標簽
date: 2019-01-17 22:30:42
type: "tags"
comments: false
---
修改categories：
打開hexo_test\source\categories\index.md
修改為：
---
title: 分類
date: 2019-01-17 22:30:48
type: "categories"
commentes: false
---
添加站內搜索功能
在站點的根目錄下執行以下命令：
npm install hexo-generator-searchdb --save
打開根目錄配置文件_config.yml
添加代碼：
search:
path: search.xml
field: post
format: html
limit: 10000
打開主題配置文件_config.yml
修改代碼：
# Local search
local_search:
- enable: false
+ enable: true
刷新頁面出現搜索。
統計訪客量和文章閱讀數
打開主題配置文件_config.yml
修改代碼：
# Show Views/Visitors of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
- enable: false
+ enable: true
total_visitors: true
total_visitors_icon: user
total_views: true
total_views_icon: eye
post_views: true
post_views_icon: eye
刷新頁面。
統計網站底部字數統計
在根目錄下面右鍵Git Bash Here
npm install hexo-wordcount --save
打開文件：hexo_test\themes\hexo-theme-next-master\layout_partials\footer.swig
添加代碼：
<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>
網站底部版本主題顯示取消
打開主題配置文件_config.yml
修改成一下代碼：
# -------------------------------------------------------------
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
修改文章底部那個帶#的標簽
打開文件hexo_test\themes\hexo-theme-next-master\layout_macro\post.swig
修改代碼：
- rel="tag">#
+ rel="tag"><i class="fa fa-tag"></i>
hexo clean
hexo s
刷新頁面。
統計字數和閱讀分鐘數
在根目錄下面右鍵Git Bash Here
輸入代碼：
npm install hexo-symbols-count-time --save
打開根目錄配置文件_config.yml
添加代碼：
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
打開主題配置文件_config.yml
修改代碼成：
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 4
wpm: 275
添加文章訪問排名
打開主題配置文件_config.yml
修改代碼：
leancloud_visitors:
- enable: false
+ enable: true
app_id: fCUG1rTPRvlYmesaQpEUdlHi-xxxxxxxxx #<app_id>
app_key: 7V3sW2YiQcq0wlz3jvxxxx #<app_key>
app_id和app_key的添加在后面寫道。
在跟目錄右鍵打開Git Bash Here
輸入代碼：
hexo new page "top"
打開top文件夾下面的index.md
修改代碼為：
---
title: 閱讀量排行
comments: false
keywords: top,文章閱讀量排行榜
description: 博客文章閱讀量排行榜
---
<div id="top"></div>
<script src="http://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script>AV.initialize("app_id", "app_key");</script>
<script type="text/javascript">
var time=0
var title=""
var url=""
var query = new AV.Query('Counter');
query.notEqualTo('id',0);
query.descending('time');
query.limit(1000);
query.find().then(function (todo) {
for (var i=0;i<1000;i++){
var result=todo[i].attributes;
time=result.time;
title=result.title;
url=result.url;
var content="<a href='"+"https://reuixiy.github.io"+url+"'>"+title+"</a>"+"<br />"+"<font color='#555'>"+"閱讀次數："+time+"</font>"+"<br /><br />";
document.getElementById("top").innerHTML+=content
}
}, function (error) {
console.log("error");
});
</script>
<style>.post-description { display: none; }</style>
其中的app_id和app_key在后面寫上。
打開主題配置文件_config.yml
在menu處，添加代碼：
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
+ top: /top/ || signal
打開hexo_test\themes\hexo-theme-next-master\languages\zh-CN.yml
添加代碼：
menu:
home: 首頁
archives: 歸檔
categories: 分類
tags: 標簽
about: 關于
search: 搜索
schedule: 日程表
sitemap: 站點地圖
commonweal: 公益 404
+ top: 閱讀量排行
好了這里添加app_id和app_key
算了：懶得寫了。
轉csdn：NexT主題下，用Leancloud統計文章閱讀量
然后修改app_id和app_key
添加RSS
在根目錄下面打開Git Bash Here
輸入安裝插件：
npm install --save hexo-generator-feed
打開根目錄配置文件_config.yml
添加代碼：
feed: # RSS訂閱插件
type: atom
path: atom.xml
limit: 0
plugins: hexo-generate-feed
hexo clean
hexo s
刷新頁面。
添加社交圖標
打開主題配置文件_config.yml
去掉social和下面你需要的社交圖標的注釋。
或者是自定義你需要的圖標，然后再圖標庫里面搜索名稱，不需要下載下來。
圖標名稱寫到“||”的后面。
側欄添加建站運行時間
打開hexo_test\themes\hexo-theme-next-master\layout_custom\sidebar.swig
添加代碼：
<div id="days"></div>
<script>
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("01/20/2019 12:00:00");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="已運行 "+daysold+" 天 "+hrsold+" 小時 "+minsold+" 分 "+seconds+" 秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>
上面的date時間可以自己定義。
底部顯示建站時間和圖標修改（變成跳動的紅心）
打開主題配置文件_config.yml
修改代碼：
footer:
# Specify the date when the site was setup.
# If not defined, current year will be used.
-#since: 2015
+#since: 2019
# Icon between year and copyright info.
icon:
- name: user
- name: heart
打開文件：hexo_test\themes\hexo-theme-next-master\layout_partials\footer.swig
修改代碼：
- <span class="with-love" id="animate">
+ <span class="with-love" id="heart">
打開文件：hexo_test\themes\hexo-theme-next-master\source/css_custom\custom.styl
添加代碼：
// 自定義頁腳跳動的心樣式
@keyframes heartAnimate {
0%,100%{transform:scale(1);}
10%,30%{transform:scale(0.9);}
20%,40%,60%,80%{transform:scale(1.1);}
50%,70%{transform:scale(1.1);}
}
#heart {
animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
color: rgb(255, 113, 168);
}
刷新頁面。
首頁不顯示全文
打開主題配置文件_config.yml
修改代碼：
# Automatically Excerpt. Not recommend.
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
- enable: false
+ enable: true
length: 150
刷新頁面。
修改文章內鏈接文本樣式
默認不好看，自行體會吧，可以不修改。
打開：hexo_test\themes\next\source\css_common\components\post\post.styl
添加代碼：
// 文章內鏈接文本樣式
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}
文章添加陰影效果
打開文件：hexo_test\themes\hexo-theme-next-master\source\css_custom\custom.styl
添加代碼：
// 主頁文章添加陰影效果
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
刷新頁面。
文章末尾統一添加“本文結束”標記
打開文件：\layout_macro
新建文件：passage-end-tag.swig
添加代碼：
<div>
{% if not is_index %}
<div style="text-align:center;color: #555;font-size:14px;">-------------The End-------------</div>
{% endif %}
</div>
打開文件：\layout_macro\post.swig
添加代碼：
{ #####################}
{ ### END POST BODY ###}
{ #####################}
<div>
+ {% if not is_index %}
+ {% include 'passage-end-tag.swig' %}
+ {% endif %}
+ </div>
hexo clean
hexo s
刷新頁面。
打開主題配文件_config.yml
添加代碼：
# 文章末尾添加“本文結束”標記
passage_end_tag:
enabled: true
后臺admin登錄管理發布文章
在根目錄下右鍵Git Bash Here
輸入命令：
npm install hexo-admin --save
第一次登錄：localhost:4000\admin->settings->settings_Setup authentification here
然后按照說明設置賬戶密碼。
打開根目錄配置文件_config.yml
修改代碼：
修改成上面你設置的密碼。
添加動態粒子背景和修改上一篇，下一篇的順序。
打開hexo_test\themes\hexo-theme-next-master\layout_layout.swig
在body標簽中添加代碼：
{% if theme.canvas_nest %} <script type="text/javascript" src="http://cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"> </script> {% endif %}
打開主題配置文件_config.yml
修改代碼：
-canvas_next: false
+canvas_next: true
打開文件hexo_test\themes\hexo-theme-next-master\layout\_macro\post.swig
修改代碼：
{% if not is_index and (post.prev or post.next) %}
<div class="post-nav">
<div class="post-nav-next post-nav-item">
- {% if post.next %}
+ {% if post.prev %}
- <a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
+ <a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
- <i class="fa fa-chevron-left"></i> {{ post.next.title }}
+ <i class="fa fa-chevron-left"></i> {{ post.prev.title }}
</a>
{% endif %}
</div>
<span class="post-nav-divider"></span>
<div class="post-nav-prev post-nav-item">
- {% if post.prev %}
+ {% if post.next %}
- <a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
+ <a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
- {{ post.prev.title }} <i class="fa fa-chevron-right"></i>
+ {{ post.next.title }} <i class="fa fa-chevron-right"></i>
</a>
{% endif %}
</div>
</div>
{% endif %}
在回到頂部按鈕里顯示閱讀百分比
打開主題配置文件修改代碼：
scrollpercent: true
刷新頁面
在categories和tags添加年月分割
打開主題配置/layout/category.swig添加代碼
添加categories：
{% for post in page.posts %}
位置A
{{ post_template.render(post) }}
{% endfor %}
（略）
位置B（沒錯最后面）
位置a：
{# Show year #}
{% set year %}
{% set post.year = date(post.date, 'YYYY') %}
{% if post.year !== year %}
{% set year = post.year %}
<div class="collection-title">
<h2 class="archive-year motion-element" id="archive-year-{{ year }}">{{ year }}</h2>
</div>
{% endif %}
{# endshow #}
位置b：
{% block script_extra %}
{% if theme.use_motion %}
<script type="text/javascript" id="motion.page.archive">
$('.archive-year').velocity('transition.slideLeftIn');
</script>
{% endif %}
{% endblock %}
刷新頁面查看。
添加tags：打開文件tag.swig
修改和categories一樣。
修改tagcloud的顏色
默認的白底云標簽不好看，修改。
打開主題目錄下面的/layout/page.swig
修改對應參數值即可，參數說明見hexo官方文檔
{{ tagcloud({min_font: 13, max_font: 31, amount: 1000, color: true, start_color: '#9733EE', end_color: '#FF512F'}) }}
刷新頁面
文章摘要圖
它會展示在頁面，因此在每篇文章的文章摘要中加一張圖片，頁面看起來就很美觀。
在主題配置文件_config.yml修改代碼
# Automatically excerpt description in homepage as preamble text.
excerpt_description: false
# Automatically Excerpt. Not recommend.
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: false
length: 150
打開主題目錄文件/layout/_macro/post.swig添加代碼
{{ post.excerpt }}
位置a：
<!--noindex-->
位置a：
{% if post.image %}
<div class="out-img-topic">
<img src={{ post.image }} class="img-topic" />
</div>
{% endif %}
為了防止有的圖片寬度不夠導致風格不夠統一，頁面不美觀。
打開主題目錄文件/source/css/_custom/custom.styl添加代碼
// 自定義的文章摘要圖片樣式
img.img-topic {
width: 100%;
}
編輯相關文章在Front-matter（文件最上方以---分隔的區域）加上一行：
在文章中添加：
photos:
- "url"
添加文章置頂
移除默認安裝插件：
cnpm uninstall hexo-generator-index --save
安裝插件：
cnpm install hexo-generator-index-pin-top --save
打開主題目錄文件/layout/_macro/post.swig添加代碼
<div class="post-meta">
位置a：
位置a：
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置頂</font>
<span class="post-meta-divider">|</span>
{% endif %}
編輯相關文章在Front-matter（文件最上方以---分隔的區域）加上一行：
top: 1
注意：
設置1就是最置頂，然后是2，3等。
數字大的在前面。
在代碼段輸入“-”和“+“顯示不同的顏色
打開問主題目錄文件/source/css/_custom/custom.styl添加代碼
// 文章```代碼塊diff樣式
pre .addition {
background: #e6ffed;
}
pre .deletion {
background: #ffeef0;
}
在代碼段寫入
```diff
測試
實現評論
來必應需要域名，暫時不寫
https://linan.blog/2017/LiveReCommentsSystem/
