Hexo4.0+Next7.2.4主题优化配置

前言

本文主要介绍的是Next主题7.4版本的安装，优化，进阶配置。Next 是 Hexo 框架中最为流行的主题之一。精于心，简于形。Next 支持多种常见第三方服务，使用 第三方服务 来扩展站点的功能 。 由 Hexo 强力驱动 v4.0.0 |主题 – NexT.Gemini v7.4.1

Next主题的安装

注意：

blog/_config.yml：站点配置文件，一些全局配置

blog/themes/next/_config.：主题配置文件，关于当前Next主题的配置

首先进入到自己的博客目录，安装好Hexo，接着打开git，从远程download Next主题下来，进行Git Clone。

cd hexo_blog
git clone https://github.com/theme-next/hexo-theme-next themes/next

编辑站点配置文件blog/_config.yml，配置如下：：

theme: next

Next主题优化基础配置

Next主题风格

Next主题提供了四种主题风格，可以在主题配置文件themes/next/_config.yml文件中进行选择，分别是Muse，Mist，Pisces，Gemini，如下设置：

# Schemes主题风格
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

编辑主题配置文件theme/next/_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 #页面不存在的时候404

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true # 是否显示各个页面的图标
  badges: true # 是否显示分类/标签/归档页的内容量

添加博客自定义图标

选择或者创建相应大小的图标文件， 放置在blog/themes/next/sources/images目录下，并在主题配置文件themes/next/_config.yml中进行如下配置，只需要设置small和medium两个就可以，图标可以 阿里图标库去进行选择下载，设置如下：

# 博客图标
favicon:
  small: /images/java-16x16.png
  medium: /images/java-32x32.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg

添加动态背景：

next/layout/_layout.swig：在</body>之前添加代码（注意不要放在</head>的后面）

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

编辑主题配置文件theme/next/_config.yml，配置如下：

canvas_nest: # 网络背景
  enable: true
  onmobile: true # Display on mobile or not
  color: "0,0,0" # RGB values, use `,` to separate
  opacity: 0.5 # The opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 150 # The number of lines

鼠标点击特效

在next/source/js/src下新建文件clicklove.js，接着把下面的代码copy过去，7.4版本没有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);

在next/layout/_layout.swig文件末添加内容：

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

设置头像

在theme/next/_config.xml主题配置文件中设置头像，图标路径为next/source/images/中，rounded是否设置成圆形，rotated是否设置成可旋转的。 配置如下：

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: /images/author.jpg # 头像放在sources中的images
  # If true, the avatar would be dispalyed in circle.
  rounded: true #鼠标放在头像上时是否旋转
  opacity: 1 #头像放缩指数
  rotated: true #头像为圆形

设置RSS订阅

博客一般是需要Rss订阅的，如果需要开启RSS订阅，需要通过node.js安装插件， 安装完成之后，站点会自动生成 RSS Feed 文件，安装命令如下：

npm install hexo-generator-feed --save

编辑站点配置文件blog/_config.yml，配置如下：

plugins: hexo-generate-feed

然后编辑主题配置文件theme/next/_config.yml，配置如下：

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml # 设置RSS订阅

侧边栏设置社交小图标

编辑主题配置文件theme/next/_config.yml，配置如下：

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink.
# Value after `||` delimiter is the name of Font Awesome icon. If icon (with or without delimiter) is not specified, globe icon will be loaded.
social:
  GitHub: https://github.com/TateTang?tab=repositories || github 
  CSDN: https://blog.csdn.net/qq_39031310 || crosshairs
  #简书: https://www.jianshu.com/u/559ac1797b1b || heartbeat

支持数学公式

可能在一些情况下我们需要写一个公式，Markdown是支持的，Next也支持。

Next 主题提供了两个渲染引擎，分别是 mathjax 和katex，后者相对前者来说渲染速度更快，而且不需要 JavaScript 的额外支持，但后者支持的功能现在还不如前者丰富，具体的对比可以看官方文档，我们这里通过选择mathjax，通过安装插件即可启用，命令如下：

npm install hexo-renderer-kramed --save

编辑主题配置文件theme/next/_config.yml，配置如下：

  mathjax:
    enable: false #是否开启mathjax
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

Tag标签前图标修改

文章设置标签后默认显示的是“#”号，可以通过设置将#替换成图标，在主题配置文件中配置即可，编辑主题配置文件theme/next/_config.yml，配置如下：

# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: true

访问量统计

访问量统计使用的busuanzi统计功能，编辑主题配置文件theme/next/_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: true  #是否开启busuanzi统计功能
  total_visitors: true #是否统计总访客数
  total_visitors_icon: user #访客数图标为人像
  total_views: true #是否统计总访问数
  total_views_icon: eye #访问数图标为眼睛
  post_views: false #是否统计文章访问数
  post_views_icon: eye #访问数图标为眼睛

当前版本的NexT集成的不蒜子，总访问人数和人次只是分别用icon来表示，故取消显示，自行修改，打开next/layout/_partials/footer.swig，在最后添加如下内容：

<span id="busuanzi_container_site_uv">
  本站访问次数：<span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
</span>

实现文章统计功能

统计文章字数和阅读分钟数，安装插件命令如下：

 npm install hexo-symbols-count-time --save

在站点配置文件blog/_config.yml中配置如下：

#博客文字统计
symbols_count_time:
  symbols: true # 是否启用
   time: true                 # 估计阅读时间
   total_symbols: true        # 页脚部分中所有帖子字数
   total_time: true           # 页脚部分中所有帖子的估计阅读时间
  exclude_codeblock: false

在主题配置文件theme/next/_config.yml中配置如下：

symbols_count_time:
  separated_meta: true #分隔符|
  item_text_post: true #是否统计站点总字数
  item_text_total: false #是否统计文章总字数
  awl: 4 #平均每个字符的长度
  wpm: 275 #words per minute

具体使用可查看官方文档，效果图如下：

添加网页顶部进度加载条

首先需要安装插件，如下，在Hexo根目录，从GitHub clone插件即可

git clone https://github.com/theme-next/theme-next-pace source/lib/pace

编辑主题配置文件theme/next/_config.yml，配置如下：

# For more information: https://github.com/HubSpot/pace
pace:
  enable: true #开启进度条
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: bounce #替换更换样式 flash  center-atom 

添加站内搜索

在目录下可以进行站内搜索功能，安装 hexo-generator-search

sudo npm install hexo-generator-search --save

安装 hexo-generator-searchdb

sudo npm install hexo-generator-searchdb --save

编辑站点配置文件blog/_config.yml，配置如下：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑主题配置文件theme/next/_config.yml，配置如下：

local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1 #每篇文章中显示的搜索数量
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

在文章底部增加版权信息

编辑主题配置文件theme/next/_config.yml，但是在侧边栏社交小图标下面回家时by-nc-sa的图标，如果介意，可以不开启博客版权功，配置如下：

creative_commons: # 开启博客版权功能
  license: by-nc-sa
  sidebar: true
  post: true
  language:

在文章 .md 文件中的上部，添加 copyright: true。 即可开启文章版权，copyright: false取消文章版权。

Footer/页脚设置

编辑主题配置文件theme/next/_config.yml，配置如下：

footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  since: 2019 #建站时间
  # Icon between year and copyright info.
  icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/v4.7.0/icons/
    # `heart` is recommended with animation in red (#ff0000).
    name: heart   #作者图标 默认是author人像
    # If you want to animate the icon, set it to true.
    animated: true #是否闪动
    # Change the color of icon, using Hex Code.
    color: "#ff0000"
  #字体
  # If not defined, `author` from Hexo `_config.yml` will be used.
  copyright: TateTang #别填bool型，最后显示的东西是copyright || author，即左边没有设置的话就显示作者

  powered:
    # Hexo link (Powered by Hexo).
    enable: false #是否显示 powerdby hexo
    # Version info of Hexo after Hexo link (vX.X.X).
    version: false #是否显示hexo版本

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false #是否显示主题信息
    # Version info of NexT after scheme info (vX.X.X).
    version: false #是否显示主题版本

  # Beian ICP and gongan information for Chinese users. See: http://www.beian.miit.gov.cn, http://www.beian.gov.cn
  beian:
    enable: false #是否显示网站备案信息
    icp:
    # The digit in the num of gongan beian.
    gongan_id:
    # The full num of gongan beian.
    gongan_num:
    # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
    gongan_icon_url:

设置阅读全文

编辑主题配置文件theme/next/_config.yml，配置如下：

auto_excerpt:
  enable: true #自动截取一定程度的摘要
  length: 100  #长度

在.md文章中加入<!--more-->即可隐藏掉不显示的内容

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

在next/layout/_macro中 中新建 passage-end-tag.swig 文件,并添加以下内容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

接着打开next/layout/_macro/post.swig文件，引入passage-end-tag.swig文件，在<footer class="post-footer">标签之前添加代码，添加内容如下：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

然后编辑主题配置文件theme/next/_config.yml，配置如下：

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

开启文章目录

编辑主题配置文件theme/next/_config.yml，配置如下：

toc: #侧栏中的目录
  enable: true #是否自动生成目录
  # Automatically add list number to toc.
  number: true #目录是否自动产生编号
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: true #标题过长是否换行
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: false
  # Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` in Front-matter.
  max_depth: 6 #最大标题长度

Follow me on GitHub

编辑主题配置文件theme/next/_config.yml，配置如下：

# #添加右上角github绑定
github_banner:
  enable: true
  permalink: https://github.com/TateTang?tab=repositories
  title: Follow me on GitHub

阅读书签

Bookmark是一个插件，允许用户保存他们的阅读进度。用户只需单击页面左上角的书签图标即可保存滚动位置。当他们下次访问您的博客时，他们可以自动恢复每个页面的最后滚动位置。 编辑主题配置文件theme/next/_config.yml，配置如下：

bookmark:	
  enable: true
  # Customize the color of the bookmark.	
  color: "#222"	
  # If auto, save the reading progress when closing the page or clicking the bookmark-icon.	
  # If manual, only save it by clicking the bookmark-icon.	
  save: auto

阅读进度

Next支持页面滚动阅读进度指示器。

编辑主题配置文件theme/next/_config.yml，配置如下：

reading_progress:
  enable: true
  color: "#37c6c0"
  height: 2px

图标懒加载

对于图片进行延迟加载，访问到图片位置时才去请求图片资源，这样可以提高博客的访问速度，节省流量。 命令如下：

git clone https://github.com/theme-next/theme-next-jquery-lazyload source/lib/jquery_lazyload

编辑主题配置文件theme/next/_config.yml，配置如下：

# Vanilla JavaScript plugin for lazyloading images.
# For more information: https://github.com/ApoorvSaxena/lozad.js
lazyload: true

代码复制

编辑主题配置文件theme/next/_config.yml，配置如下：

# Add copy button on codeblock
copy_button:
  enable: true

DaoVoice在线联系功能

添加DaoVoice在线联系功能：参考地址

SEO支持

SEO(Search Engine Optimization)意为搜索引擎优化,利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。

安装站点地图(sitemap)插件，命令如下：

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

编辑站点配置文件blog/_config.xml，配置如下：

# SEO 
sitemap: 
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

启用百度推送功能，博客会自动将网址推送到百度，这对搜索引擎优化非常有帮助。
编辑主题配置文件theme/next/_config.yml，配置如下：

baidu_push: true 

显示当前浏览进度

右下角显示文章当前浏览进度，提供意见置顶功能，编辑主题配置文件theme/next/_config.yml，配置如下：

back2top:
  enable: true #是否提供一键置顶 
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true # 是否显示当前阅读进度

Next主题优化进阶配置

网页标题搞怪特效

在theme/next/source/js/src中创建activetitle.js，内容如下：

var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
  if (document.hidden) {
    document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
    clearTimeout(titleTime);
  }
  else {
    document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitle;
    titleTime = setTimeout(function () {
      document.title = OriginTitle;
    }, 2000);
  }
});

在themes/next/layout/_layout.swig文件末尾添加内容：

<!--动态title-->
<script type="text/javascript" src="/js/src/activetitle.js"></script>

背景动画

Next主题支持多种背景动画，导入插件并且修改主题配置文件即可，根据GitHub上面的教程即可简单的完成背景动画的配置。

顶部加载栏: pace
3D库: three
流动线条: canvas_nest
彩带: canvas_ribbon

文章阅读次数统计

配置 leancloud 官方使用文档 来进行文章阅读次数统计，具体配置参考

修复Next的LeanCloud计数器的安装插件

插件安装

npm install hexo-leancloud-counter-security --save

编辑主题配置文件blog/_config.yml，配置如下：

leancloud_counter_security:
  enable_sync: true
  app_id: <<your app id>>
  app_key: <<your app key>>
  username: <<your username>> # 部署时会询问是否留空
  password: <<your password>> # 建议留空。部署时会询问是否留空

编辑主题配置文件theme/next/_config.yml，配置如下：

 leancloud_visitors:
   enable: true
   app_id: <<your app id>>
   app_key: <<your app key>>
   security: true
   betterPerformance: false

控制台命令：在Leancloud数据库中注册用户以进行权限控制

hexo lc-counter register <<username>> <<password>>

参考

相关热门帖子

Next主题使用LeanCloud添加热度排行，首先需要配置好LeanCloud，记录相关的APPID和KEY

在博客终端输入命令，建立page top

hexo new page top

打开生成的source/top/index.md文件，内容如下：

---
title: 文章热度排行
comments: false
---
<div id="top"></div>
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
<script>AV.initialize("n8GGQ6GcEiBjctFbtvfLswbn-gzGzoHsz", "CbONq8NhdsHuf2QFLynGjoyj");</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="<span class='post-time'><span class='post-temp'>"+"热度</span>"+time+"℃</span>"
      +"<a href='"+"http://localhost:4000"+url+"'>"+title+"</a>"+"<br />";
      document.getElementById("top").innerHTML+=content
    }
  }, function (error) {
    console.log("error");
  });
</script>

<style>.post-description { display: none; }</style>

其中，App-ID 以及 App-Key 换成自己的 AppID 以及 AppKey即可，将自定义的样式加入，编辑主题配置文件theme/next/_config.yml，配置如下：

custom_file_path:
  #head: source/_data/head.swig 
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

然后在source/_data/文件夹下面新建或者修改styles.styl文件，内容如下：

//设置热度排行的标签样式
.post-time {
  padding: 5px 5px 5px 0;
  background-color: #fc6423;
  color: #fff;
  margin-right: 10px;
  border-radius: 5px;
}
.post-temp {
  padding: 5px;
  margin-right: 5px;
  background-color: #5e85d1;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

打开主题配置文件，找到 leancloud_visitors 字段：

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: <App ID>
  app_key: <App Key>

添加自己的 AppID 以及 AppKey 。

然后找到 menu 字段，新增 top 页面：

menu:
  home: / || home
  ...
  top: /top/ || signal

打开 next/languages/zh-CN.yml 文件，找到 menu 字段，在最后添加

top: 热度排行

文章加密

编辑主题配置文件theme/next/_config.yml，配置如下：

custom_file_path:
  head: source/_data/head.swig

在/source/_data下创建或者修改head.swig文件，内容如下：

<script> 
 (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>