日常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="//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="//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="//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/
