Hexo&NexT的相关配置

发表于 | 更新于: | 分类于 |
字数统计: 6.7k 字 | 阅读时长 ≈ 34 分钟

如何安装hexo博客框架与next主题，还有如何把博客静态资源部署到远端github上，请参考这位大神的个人博客：http://gonghonglou.com/2016/02/03/firstblog/

接下来所介绍的是安装完hexo之后的具体配置。

Hexo与NexT的配置

注意：每次对hexo和next作出修改时，都要执行：

1
2
3
4
hexo clean
hexo g
hexo s  //本地部署
hexo d  //远端部署

没有部署到远端的（比如github或者coding）童鞋，使用hexo s开启服务在本地进行测试，无需执行hexo d。

如果出现了端口正在运行无法使用的情况

FATAL Port 4000 has been used. Try other port instead.
FATAL Something’s wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Error: listen EADDRINUSE: address already in use :::4000

可以这样解决：

  • sudo lsof -i :4000

    [shang@11:06:24]~/blog$ sudo lsof -i :4000
    COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME
    node 13676 root 36u IPv6 0x783f5ae0b80a0c4b 0t0 TCP *:terabase (LISTEN)

  • sudo kill -9 13676

这样端口4000下的进程就被杀死了。

如果上传到远端出现这种情况:

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
FATAL Something’s wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Error: Spawn failed
at ChildProcess. (/Users/mac/blog/node_modules/hexo-util/lib/spawn.js:52:19)
at ChildProcess.emit (events.js:198:13)
at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)

是因为缺少xcode的组件,安装一下就好了

1
xcode-select --install

创建博客

hexo new "test"
之后就会在/blog/source/_posts/建立一个名为 test.md 的文件
开始编写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
title: 个人简介
date: 2019-08-20 23:11:27
tags: 
      - 简介
      - 尚先森

categories: 个人介绍
---

# 个人介绍

##基本资料

  姓名：尚用正
  性别：男
  年龄：保密
  居住地：天津
  所在学校：内蒙古农业大学

跳转页面配置

基本配置请参考：https://theme-next.iissnan.com/getting-started.html
增加完各个选项后直接点击的话会报错，原因是找不到文件，那么如何添加跳转的页面呢？
在blog目录下执行（举个例子）：

1
hexo n page tags

之后就会在/blog/source/tags/index.md下建立一个index文件
继续编辑index.md文件
修改title名称为’标签’

title: 标签

比如加上：

type: “tags”

头像配置

在/blog/themes/next/_config.yml文件下，搜索 avatar 这个关键字

avatar: https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1804160177,2244151847&fm=26&gp=0.jpg
图片可以是本地，也可以是网络上的图片

增加侧边栏地址链接

在/blog/themes/next/_config.yml文件下，搜索 social 这个关键字
例如：

1
2
3
social:
    GitHub: https://github.com/shang-code || github
    E-Mail: mailto:syz15822409222@126.com || envelope

添加友情链接

在/blog/themes/next/_config.yml文件下，搜索 links 这个关键字

1
2
3
4
5
6
links_icon: link
links_title: 学习社区
links_layout: block
#links_layout: inline
links:
  菜鸟: http://www.runoob.com/

与上面相似，不再赘述。

显示阅读全文

在/blog/themes/next/_config.yml文件下，搜索 auto_excerpt 这个关键字

1
2
3
auto_excerpt:
      enable: true
      length: 150

或者可以在md文件的任意地方输入：<!-- more -->
下面的内容就会不见，只有点击阅读全文才可以看到下面的内容

增加打赏功能

在/blog/themes/next/_config.yml文件下，搜索 rew 这个关键字

1
2
3
reward_comment: 喜欢的朋友可以打个赏^ _ ^
wechatpay: /images/weixin.png
alipay: /images/zhifubao.png

注：下面所有需要用到的图片放在 /blog/themes/next/source/images 下

增加个人二维码

在/blog/themes/next/_config.yml文件下，搜索 wechat 这个关键字

1
2
3
4
wechat_subscriber:
    enabled: true
    qcode: /images/syz.png
    description: 有任何问题可以扫描上方二维码私聊我哦😊

设置头像可旋转

在 /blog/themes/next/source/css/_common/components/sidebar/sidebar-author.styl中进行编辑

1
2
3
4
5
6
7
8
9
10
11
12
13
.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: 50%;
transition: 2s all;
}
.site-author-image:hover{
transform: rotate(360deg);
}

设置动态背景

在/blog/themes/next/_config.yml文件下，搜索canvas 这个关键字

想要使用哪个，把哪个改为 ture

1
2
3
4
5
6
7
8
9
10
11
# Canvas-nest
canvas_nest: false

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: true

设置 fork github

链接样式一：https://blog.github.com/2008-12-19-github-ribbons/
链接样式二：http://tholman.com/github-corners/

在 /blog/themes/next/layout/_layout.swig打开文件
找到第23行
在这一行的下面输入：

1
<a href="https://github.com/shang-code/" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

开头的 href 改为自己的github地址即可

修改内链接样式

在/blog/themes/next/source/css/_common/components/post/post.styl打开文件
在最下边增加以下内容：

1
2
3
4
5
6
7
8
.post-body p a{
  color: #EEDC82;
  border-bottom: none;
  &:hover{
    color: #FFC125;
    font-size: 20px;
  }
}

更改标签图标

图标网址：https://www.easyicon.net/1158252-tag_icon.html
在/blog/themes/next/layout/_macro/post.swig打开文件
找到359行：

1
<a href="{{ url_for(tag.path) }}" rel="tag"><img src="/images/tag.png"> {{ tag.name }}</a>

评论一：添加valine评论功能（简洁）

网址：https://leancloud.cn/dashboard/applist.html#/apps

创建应用
创建完成后会有一个小齿轮（设置），进入之后点击应用key
复制App ID 与 App key

然后分别粘贴到下面文件中的对应位置

在/blog/themes/next/_config.yml文件下，搜索 valine 这个关键字

1
2
3
4
5
6
7
8
9
10
valine:
      enable: true
      appid: hU7o1mDSLSyDeK4wE4hDgcIG-gzGzoHsz # your leancloud application appid
      appkey: SezjNE3ljsOzb5og8uQs51FR # your leancloud application appkey
      notify: false # mail notifier , https://github.com/xCss/Valine/wiki
      verify: false # Verification code
      placeholder: Just go go # comment box placeholder
      avatar: mm # gravatar style
      guest_info: nick,mail,link # custom comment header
      pageSize: 10 # pagination size

具体配置参考：https://valine.js.org

评论二：增加来必力评论（加载慢）

网址：https://www.livere.com

注册登陆后，点击首页上的安装
点击免费安装
输入https://shang-code.cn地址等
就会出现一个有代码的界面
复制里面的data-uid

在/blog/themes/next/_config.yml文件下，搜索 livere 这个关键字
在对应的位置进行粘贴

1
livere_uid: MTAyMC80NjE5Ni8yMjcwNw==

增加搜索功能

网址：https://theme-next.iissnan.com/getting-started.html

点击首页的 第三方服务
找到搜索服务

在/blog下执行

1
npm install hexo-generator-searchdb --save

在/blog/_config.yml文件下添加

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

在/blog/themes/next/_config.yml文件下，搜索 local_search 这个关键字

1
2
3
# Local search
local_search:
  enable: true

增加不蒜子统计功能

网址：https://theme-next.iissnan.com/getting-started.html

点击首页的 第三方服务
找到不蒜子统计
参照上面的内容，在下面的文件中分别进行填写

在/blog/themes/next/_config.yml文件下，搜索 busuanzi_count 这个关键字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: 本站访问数<i class="fa fa-user"></i>
  site_uv_footer: 人次
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: 本站总访问量<i class="fa fa-eye"></i>
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: 本文总阅读数<i class="fa fa-file-o"></i>
  page_pv_footer: 次

问题：如果无法显示数字:

解决办法：

先找到NexT下引用不蒜子统计的方法。文件路径为/theme/next/layout/_third-party/analytics/busuanzi-counter.swig文件。
替换链接部分即可。替换为”https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"

增加内容分享服务

我配置这个有问题，日后再做分析吧！

网址：https://theme-next.iissnan.com/getting-started.html

点击首页的 第三方服务
找到内容分享服务

在/blog/themes/next/_config.yml文件下，搜索 jiathis 这个关键字

1
2
jiathis: true
  ##uid: Get this uid from http://www.jiathis.com/

增加加载效果

在/blog/themes/next/_config.yml文件下，搜索 pace 这个关键字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-bounce

pace_theme的参数在上面随便选择一个即可，不唯一

设置点击爆炸效果

参考网址：https://blog.csdn.net/qq_38332436/article/details/82724672

首先在themes/next/source/js/src里面建一个叫fireworks.js的文件，代码如下：

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)}"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)};

打开themes/next/layout/_layout.swig,在</body>上面写下如下代码：

1
2
3
4
5
{% 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 %}

在/blog/themes/next/_config.yml文件，在里面最后写下：

1
2
# Fireworks
fireworks: true

增加点击出现小红心效果

在/themes/next/source/js/src下新建文件love.js，并复制粘贴如下代码

1
!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);

在\themes\next\layout\_layout.swig文件的<body>标签最后添加

1
2
<!-- 页面点击小红心，在末尾添加，避免找不到 -->
<script type="text/javascript" src="/js/src/love.js"></script>

解决来必力加载慢问题

我们打开/blog/themes/next/layout/_partials/comments.swig

将这段代码

1
2
3
<div class="comments" id="comments">
  <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
</div>

改成

1
<iframe title="livere"   src="https://was.livere.me/comment/city?id=city&refer={{page.permalink}}&uid={{theme.livere_uid}}&site={{page.permalink}}&title={{page.title}}" scrolling="" frameborder="0" id="lv-comment-399" style="min-width: 100%; width: 100px; min-height: 400px; overflow: auto; border: 0px; z-index: 124212; height: 800px;" ></iframe>

添加live2D

参考网址：https://sevencho.github.io/archives/cb206c67.html

在/blog下执行：

1
npm install --save hexo-helper-live2d

如果不想使用、想彻底卸载，命令如下：

1
npm uninstall hexo-helper-live2d

对应的模块下载:https://github.com/xiazeyu/live2d-widget-models

动画模型效果:https://huaji8.top/post/live2d-plugin-2.0/

手动下载完成之后将packages里面的所有文件拷贝到博客根目录的node_moduels文件夹下

打开博客根目录的配置文件_config.yml，添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Live2D
## https://github.com/xiazeyu/live2d-widget.js
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
  model:
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
    use: live2d-widget-model-tororo // 下载的动画模型名称
  display:
    superSample: 2
    width: 120
    height: 200
    position: left // 模型在网页显示位置
    hOffset: 20
    vOffset: 50
  mobile:
    show: true  // 移动设备是否显示
    scale: 0.5
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.2

如果你想发布自己的Live2D动画模型包，可以参考如下步骤：
新建一个目录, 在终端下切换目录到新建的目录中，执行 npm init, 包名推荐格式如：live2d-widget-model-xxx。
在刚刚创建的目录下创建 assets 子目录, 把你的模型文件放进去.
在live2d-widget-model-xxx目录下执行 npm publish 命令来发布.
此时就在/blog目录下使用 npm install --save live2d-widget-model-xxx 来安装自定义的模型包了。
安装完成后就可以在配置文件_config.yml中 model:use 修改包名来使用了.

在文章末尾增加版权声明

参考网址：https://www.jianshu.com/p/93170e7413e9

在目录 themes/next/layout/_macro/ 下添加 my-copyright.swig ，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  
  <!-- JS库 sweetalert 可修改路径 -->
  <script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
  <script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">

  <p><span>本文标题:</span>{{ page.title }}</a></p>
  <p><span>文章作者:</span>{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    clipboard.on('success', $(function(){
      $(".fa-clipboard").click(function(){
        swal({   
          title: "",   
          text: '复制成功',   
          html: false,
          timer: 500,   
          showConfirmButton: false
        });
      });
    }));  
</script>
{% endif %}

在目录 themes/next/source/css/_common/components/post/ 下添加 my-post-copyright.styl，内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #333333; // title color
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #0593d3; // link color
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

修改 themes/next/layout/_macro/post.swig，如下：
修改前：

1
2
3
4
5
{% if theme.wechat_subscriber.enabled and not is_index %}
    <div>
        {% include 'wechat-subscriber.swig' %}
    </div>
{% endif %}

修改后：

1
2
3
4
5
<div>
    {% if not is_index %}
        {% include 'my-copyright.swig' %}
    {% endif %}
</div>

打开 themes/next/source/css/_common/components/post/post.styl 文件，在最后一行增加代码：

1
@import "my-post-copyright"

设置新建文章自动开启 copyright ，即新建文章自动显示自定义的版权声明，设置 /bolg/scaffolds/post.md 文件，如下：

1
2
3
4
5
---
title: {{ title }}
date: {{ date }}
copyright: true #新增,开启
---

增加RSS插件

在 /blog下执行：

1
npm install hexo-generator-feed --save

在/blog下的_config.yml下添加：

1
2
3
4
5
6
7
8
# Extensions
plugins:
    hexo-generator-feed
#Feed Atom
feed:
    type: atom
    path: atom.xml
    limit: 20

在/blog/themes/next/_config.yml文件找到rss

1
rss: /atom.xml

隐藏底部强力驱动

在/blog/themes/next/layout/_partials/下打开footer.swig文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- {% if theme.footer.powered %}
  <div class="powered-by">{#
  #}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>
{% endif %}

{% if theme.footer.powered and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span>
{% endif %}

{% if theme.footer.theme.enable %}
  <div class="theme-info">{#
  #}{{ __('footer.theme') }} &mdash; {#
  #}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
    #}NexT.{{ theme.scheme }}{#
  #}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>
{% endif %} -->

将这一段用 <!-- -->扩起来

字数统计与阅读时长

在/blog/themes/next/下的_config.yml文件中搜索post_wordcount字段

1
2
3
4
5
6
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
  totalcount: false
  separated_meta: true

为了让效果好一点，修改/blog/themes/next/layout/_macro/post.swig文件

修改字数统计，找到如下代码：

1
2
3
<span title="{{ __('post.wordcount') }}">
  {{ wordcount(post.content) }}
</span>

添加 “字” 到 

1
{{ wordcount(post.content) }}

后面，修改后为：

1
2
3
<span title="{{ __('post.wordcount') }}">
  {{ wordcount(post.content) }} 字
</span>

同理，我们修改阅读时长，修改后如下：

1
2
3
<span title="{{ __('post.min2read') }}">
  {{ min2read(post.content) }} 分钟
</span>

效果图如下：

wordcount

如果出现没有数字的情况，尝试执行下面这条（安装）命令：

1
npm i --save hexo-wordcount

添加背景图

在themes/next/source/css/_custom/custom.styl文件中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body {
background: url(https://source.unsplash.com/random/1600x900?wallpapers);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}

// 修改主体透明度
.main-inner {
  background: #fff;
  opacity: 0.9;
}

// 修改菜单栏透明度
.header-inner {
  opacity: 0.9;
}

background: url() 中填写的是背景图片的 url 地址, 这里调用了 Unsplash 的 API, 随机选用该网站的高清美图作为博客背景.
opacity 指定了对应元素的透明度, 这里是 “0.8”, 可以按需更改.

修改行内代码块样式

打开 themes\next\source\css\_custom\custom.styl，添加如下样式：

1
2
3
4
5
6
7
/* 行内代码块的自定义样式 */
code {
    color: #d500fc;
    background: rgba(78, 240, 233, 0.42);
    margin: 2px;
    border: 1px solid #d6d6d6;
}

去掉图片边框

NexT主题默认会有图片边框，不太好看，我们可以把边框去掉。打开 themes\next\source\css\_custom\custom.styl，添加如下CSS代码：

1
2
3
4
5
6
7
8
/* 去掉图片边框 */
.posts-expand .post-body img {
    border: none;
    padding: 0px;
}
.post-gallery .post-gallery-img img {
    padding: 3px;
}

修改鼠标样式

打开themes/next/source/css/_custom/custom.styl,在里面写下如下代码

1
2
3
4
5
6
7
// 鼠标样式
  * {
      cursor: url("https://www.easyicon.net/api/resizeApi.php?id=1124585&size=24"),auto!important
  }
  :active {
      cursor: url("https://www.easyicon.net/api/resizeApi.php?id=1124585&size=24"),auto!important
  }

修改网页底部的图标

还是打开themes/next/layout/_partials/footer.swig，找到：

1
2
3
<span class="with-love">
...
</span>

把中间内容删除，在中间添加如下代码：

1
<img src="https://www.easyicon.net/api/resizeApi.php?id=1200645&size=16">

点开文章在新的标签页打开

打开 themes\next\layout\_macro\post-collapse.swig

找到如下区域代码：

1
2
3
4
5
6
7
<a class="post-title-link" href="{{ url_for(post.path) }}" itemprop="url">
  {% if post.type === 'picture' %}
    {{ post.content }}
  {% else %}
    <span itemprop="name">{{ post.title | default(__('post.untitled')) }}</span>
  {% endif %}
</a>

接着打开 themes\next\layout\_macro\post.swig

找到如下区域代码：

1
2
3
<a class="post-title-link" href="{{ url_for(post.path) }}" itemprop="url">{#
   #}{{ post.title | default(__('post.untitled'))}}{#
 #}</a>

在两个文件的如上两个位置的class属性后添加 target="_blank"

添加DaoVoice 实现在线联系

参考网址：https://blog.csdn.net/weixin_43998150/article/details/84861684#修改顶部菜单与下方信息栏的间隙大小

本功能可以实现在线留言，作者会收到邮件，如果绑定了微信，作者还会收到微信通知。
首先到http://dashboard.daovoice.io注册一个Daovioce账号。
注册完成后会进到DaoCloud，重新访问连接即可。进到Daovoice面板，点击左侧边栏的应用设置– 安装到网站。在下方的代码中会看到app_id: “xxxx”字样。

daovoice_app_id

复制这个app_id

打开 themes/next/layout/_partials/head/head.swig 文件中最下方加入如下代码：

1
2
3
4
5
6
7
8
9
{% if theme.daovoice %}
  <script>
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}

在主题配置文件 _config.yml，添加如下代码：

1
2
3
# DaoVoice 
daovoice: true
daovoice_app_id: 这里输入前面获取的app_id

回到Daovoice控制面板，点击聊天设置可以对聊天图标的颜色及位置进行设置。
themes_daovoice

修改主题背景色

打开hexo/themes/next/source/css/_variables/base.styl找到Colors代码段，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Colors
// colors for use across theme.
// --------------------------------------------------
  $whitesmoke   = #f5f5f5
  $gainsboro    = #eee  //这个是边栏头像外框的颜色，
  $gray-lighter = #ddd  //文章中插入图片边框颜色
  $grey-light   = #ccc  //文章之间分割线、下划线颜色
  $grey         = #bbb  //页面选中圆点颜色
  $grey-dark    = #999
  $grey-dim     = #666 //侧边栏目录字体颜色
  $black-light  = #555 //修改文章字体颜色
  $black-dim    = #333
  $black-deep   = #495a80  //修改主题的颜色
  $red          = #ff2a2a
  $blue-bright  = #87daff
  $blue         = #0684bd
  $blue-deep    = #262a30
  $orange       = #F39D01 //浏览文章时，目录选中的颜色

修改Pisces主题的宽度

在source/css/_schemes/Picses/_layout.sty⽂件末尾添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 以下为新增代码！！
header{ width: 90% !important; }
header.post-header {
  width: auto !important;
}
.container .main-inner { width: 90%; }
.content-wrap { width: calc(100% - 260px); }
.header {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}
.container .main-inner {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}
.content-wrap {
  +tablet() {
    width: 100% !important;
  }
  +mobile() {
    width: 100% !important;
  }
}

本文标题:Hexo&NexT的相关配置

文章作者:尚先森

发布时间:2019年08月22日 - 00:28:09

最后更新:2023年02月20日 - 18:08:17

原始链接:https://imauu.gitee.io/2019/08/22/Hexo-NexT的相关配置/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

尚先森 wechat
有任何问题可以扫描上方二维码私聊我哦😊
您的支持是我创作的最大动力^_^