2019-3.3_hexo-next主题创建个人博客

2019-03-03 本文已影响0人晓小小小晓

日常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软件

git官网：git
node.js官网：node.js

实现效果：

在新创建的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/

2019-3.3_hexo-next主题创建个人博客

日常bb

前言

环境准备

大概步骤

初步实施

安装git，node.jsp软件

实现效果：

安装hexo，创建hexo相关文件

实现效果：

初步部署next

下载next

实现效果

部署next

实现效果

精修（重点来了）

修改语言，title和作者名字

修改导航栏->右边

修改默认主题

自动更换背景图片

鼠标点击效果

点击出现爱心效果

效果图

点击出现爆炸效果

效果图

点击出现富强明主富国公正~~~~效果

效果图

设置主题顶部有一条黑线，去掉

效果图

设置网站图标

修改作者头像并旋转

设置点击头像返回主页

添加标签，分类页面等

添加站内搜索功能

统计访客量和文章阅读数

统计网站底部字数统计

网站底部版本主题显示取消

修改文章底部那个带#的标签

统计字数和阅读分钟数

添加文章访问排名

添加RSS

添加社交图标

侧栏添加建站运行时间

底部显示建站时间和图标修改（变成跳动的红心）

首页不显示全文

修改文章内链接文本样式

文章添加阴影效果

文章末尾统一添加“本文结束”标记

后台admin登录管理发布文章

添加动态粒子背景和修改上一篇，下一篇的顺序。

在回到顶部按钮里显示阅读百分比

在categories和tags添加年月分割

修改tagcloud的颜色

文章摘要图

添加文章置顶

在代码段输入“-”和“+“显示不同的颜色

实现评论

自定义鼠标样式

文章加密访问

首页的文章摘要图片

增加版权信息

设置打赏效果和打赏不停的抽搐

猜你喜欢

热点阅读