文章目录
Next主题的安装Next主题优化配置1.Next主题风格：2.添加博客自定义图标3.添加动态背景4.添加看板娘5.鼠标点击特效6.设置头像7.设置RSS订阅8.侧边栏社交小图标设置9.Tag 标签前图标修改10.访问量统计11.实现文章统计功能12.添加网页顶部进度加载条13.添加站内搜索14.Footer / 页脚设置15.Creative Commons / 文章版权16.设置阅读全文17.开启文章目录18.GitHub Fork Me19.bookmark20. 添加lazyload21.代码复制22.SEO支持23.显示当前浏览进度 第三方服务1.支持数学公式2.添加APlayer音乐播放器3.DaoVoice在线联系功能 自定义样式支持1.文章末尾统一添加“本文结束”标记2.主题及标题栏背景图3.修改主副标题字体颜色4.修改按钮，选择区域，代码块，表格等样式 速度优化托管 Hexo 博客到 Codinggulp 4.0实现静态资源压缩Next主题的安装
cd hexo_bloggit clone /theme-next/hexo-theme-next themes/next
然后设置站点配置文件_config.yml，Hexo博客主题替换为Next主题。
.
Next主题优化配置
1.Next主题风格：
Next提供了四中主题风格scheme，可以在主题配置文件blog/themes/next/_config.yml文件中进行选择，分别是Muse、Mist、Pisces、Gemini：
Next主题一般配置：
# Allow to cache content generation. Introduced in NexT v6.0.0.cache:enable: true #表示添加缓存功能，这样浏览器后续打开我们的博客网站会更快
menu:home: / || home#about: /about/ || usertags: /tags/ || tagscategories: /categories/ || tharchives: /archives/ || archive#schedule: /schedule/ || calendar#sitemap: /sitemap.xml || sitemap#commonweal: /404/ || heartbeat# Enable/Disable menu icons / item badges.menu_settings:icons: true #是否显示各个页面的图标badges: false #是否显示分类/标签/归档页的内容量
相应的站点配置blog/_config.yml文件的基本配置为：
2.添加博客自定义图标
选择或者创建相应大小的图标文件，放置在blog/themes/next/sources/images目录下，并在主题配置文件中进行如下配置，只需要设置small和medium两个就可以：
3.添加动态背景
打开 next/layout/_layout.swig
在 < /body>之前添加代码(注意不要放在< /head>的后面)
{% if theme.canvas_nest %}<script type="text/javascript" src="///canvas-nest.js/1.0.0/canvas-nest.min.js"></script>{% endif %}
修改配置文件，打开 /next/_config.yml,在里面添加如下代码：
.
4.添加看板娘
sudo npm install -save hexo-helper-live2d
下载模型
sudo npm install live2d-widget-model-wanko
5.鼠标点击特效
鼠标的点击红心特效
在/themes/next/source/js/src下新建文件clicklove.js ，接着把下面的代码拷贝粘贴到 love.js 文件中：
7.4 next没有src文件夹，先建一个src文件夹
!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文件末尾添加：
<!-- 页面点击小红心 --><script type="text/javascript" src="/js/src/clicklove.js"></script>
6.设置头像
在主题配置文件中设置头像，将其放置到 themes/next/source/images/avatar.png 路径，rounded是否设置成圆形，rotated是否设置成可旋转的。
7.设置RSS订阅
博客一般是需要 RSS 订阅的，如果要开启 RSS 订阅，这里需要安装一个插件，叫做 hexo-generator-feed，安装完成之后，站点会自动生成 RSS Feed 文件，安装命令如下：
npm install hexo-generator-feed --save
打开根目录配置文件_config.yml
# Extensions## Plugins: http://hexo.io/plugins/plugins: hexo-generate-feed
然后设置主题配置文件：
# 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
8.侧边栏社交小图标设置
打开主题配置文件_config.yml，command+f搜索 Social，将你有的社交账号前面的 # 号去掉。
9.Tag 标签前图标修改
文章标签的显示默认前面“#”号，可以通过设置将“#”换为图标。
tag_icon: true
10.访问量统计
打开themes/next/下的_config.yml，查找busuanzi# Show Views / Visitors of the website / page with busuanzi.# Get more information on http://ibruce.info//04/04/busuanzibusuanzi_count:enable: truetotal_visitors: truetotal_visitors_icon: usertotal_views: truetotal_views_icon: eyepost_views: truepost_views_icon: eye
当前版本的NexT集成的不蒜子，总访问人数和人次只是分别用icon来表示，故取消显示，自行改动
打开/themes/next/layout/_partials/footer.swig，在最后添加如下内容：
<span id="busuanzi_container_site_uv">本站访问次数：<span class="busuanzi-value" id="busuanzi_value_site_pv"></span></span>
11.实现文章统计功能
统计字数和阅读分钟数
安装 hexo-symbols-count-time，命令如下：
sudo npm install hexo-symbols-count-time --save
在站点配置文件 hexo _config.yaml添加：
symbols_count_time:symbols: true# 文章字数统计time: true # 文章阅读时长total_symbols: true# 站点总字数统计total_time: true # 站点总阅读时长exclude_codeblock: false# 排除代码字数统计
具体可查看：/theme-next/hexo-symbols-count-time
效果如下：
12.添加网页顶部进度加载条
下载安装Progress module，如下
git clone /theme-next/theme-next-pace source/lib/pace
编辑主题配置文件，command+F 搜索 pace，将其值改为 ture 就可以了。
13.添加站内搜索
安装 hexo-generator-search
sudo npm install hexo-generator-search --save
安装 hexo-generator-searchdb
sudo npm install hexo-generator-searchdb --save
编辑站点配置文件，添加以下内容
search:path: search.xmlfield: postformat: htmllimit: 10000
编辑主题配置文件，设置 local_search为 ture
14.Footer / 页脚设置
footer:# Specify the date when the site was setup. If not defined, current year will be used.#since: # Icon between year and copyright info.icon:# Icon name in Font Awesome. See: /v4.7.0/icons/# `heart` is recommended with animation in red (#ff0000).name: user# If you want to animate the icon, set it to true.## 图标的一个动画效果，类似于心跳animated: true# Change the color of icon, using Hex Code.# 图标颜色，可格局需要自行修改color: "#808080"# If not defined, `author` from Hexo `_config.yml` will be used.copyright:# Powered by Hexo 字样，不喜欢可以设置为 falsepowered:# Hexo link (Powered by Hexo).enable: true# Version info of Hexo after Hexo link (vX.X.X).version: true# 主题字样，不喜欢可以 falsetheme:# Theme & scheme info link (Theme - NexT.scheme).enable: true# Version info of NexT after scheme info (vX.X.X).version: true# Beian ICP and gongan information for Chinese users. See: http://www.beian., http://www.# 备案信息，如果网站有备案号，可以在这里填写备案号beian:enable: falseicp:
15.Creative Commons / 文章版权
# Creative Commons 4.0 International License.# See: /share-your-work/licensing-types-examples# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on creative_commons:license: by-nc-ndpost: truelanguage: deed.zh
在文章 .md 文件中的上部，添加 copyright: true。
16.设置阅读全文
打开主题配置文件，修改auto_excerpt:字段为true，length表示显示文本的长度
在想要隐藏的位置加入以下代码：
<!--more-->
17.开启文章目录
修改主题配置文件
# Table of Contents in the Sidebartoc: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
18.GitHub Fork Me
修改主题配置文件：
# `Follow me on GitHub` banner in the top-right corner.github_banner:enable: truepermalink: /Xiao-Hu-Ztitle: Follow me on GitHub
效果如下：
19.bookmark
Bookmark是一个插件，允许用户保存他们的阅读进度。用户只需单击页面左上角的书签图标即可保存滚动位置。当他们下次访问您的博客时，他们可以自动恢复每个页面的最后滚动位置。
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
20. 添加lazyload
对于图片进行延迟加载，访问到图片位置时才去请求图片资源，这样可以提高博客的访问速度，节省流量。
git clone /theme-next/theme-next-jquery-lazyload source/lib/jquery_lazyload
主题配置文件：
# Vanilla JavaScript plugin for lazyloading images.# For more information: /ApoorvSaxena/lozad.jslazyload: true
21.代码复制
# Add copy button on codeblockcopy_button:enable: true
22.SEO支持
SEO(Search Engine Optimization)意为搜索引擎优化,利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。
安装站点地图(sitemap)插件
npm install hexo-generator-sitemap --savenpm install hexo-generator-baidu-sitemap --save
站点配置文件修改/添加
# SEO sitemap: path: sitemap.xmlbaidusitemap:path: baidusitemap.xml
启用百度推送功能，博客会自动将网址推送到百度，这对搜索引擎优化非常有帮助。
主题配置文件修改 baidu_push: true
23.显示当前浏览进度
打开 themes/next/_config.yml ,搜索关键字 scrollpercent ,把 false 改为 true ，如下：
# Scroll percent label in b2t button.# # 是否显示页面浏览百分比scrollpercent: true
第三方服务
1.支持数学公式
可能在一些情况下我们需要写一个公式，makdown是支持的，next也支持。
Next 主题提供了两个渲染引擎，分别是 mathjax 和katex，后者相对前者来说渲染速度更快，而且不需要 JavaScript 的额外支持，但后者支持的功能现在还不如前者丰富，具体的对比可以看官方文档：https://theme-/docs/third-party-services/math-equations。
这里选择 mathjax ,通过修改配置即可启用：
sudo npm uninstall hexo-renderer-marked --savesudo npm install hexo-renderer-kramed --save
注意：使用的时候需要在 文章开头加上mathjax: true
2.添加APlayer音乐播放器
为博客添加音乐播放器功能
download
点击访问Aplayer源码：GitHub Aplayer。下载到本地，解压后将dist文件夹复制到themes\next\source文件夹下。
music.js
新建themes\next\source\dist\music.js文件，添加内容：
const ap = new APlayer({container: document.getElementById('aplayer'),fixed: true,autoplay: true,audio: [{name: "暗涌",artist: '王菲',url: '/down/52980.mp3',cover: 'http://p1./w8RFsMH8VJfPsBmVudYGsA==/109951163020569833.jpg?param=130y130',},{name: 'Wonderful U',artist: 'AGA',url: '/down/51181.mp3',cover: 'http://p1./Blb_Gi0AJTWIEBLr189F4A==/18791753232142320.jpg?param=130y130',},{name: '浮夸',artist: '陈奕迅',url: '/down/49639.mp3',cover: 'http://p1./Bl1hEdJbMSj5YJsTqUjr-w==/109951163520311175.jpg?param=130y130',}]});
源码参数解释APlayer 中文文档
audio对应的便是音频文件，所以音乐播放器需要播放的音乐是需要自己进行相关信息（如歌曲链接、歌词、封面等）的配置。这里放一个mp3音乐外链网站：/ ，搜索对应的音乐，然后复制url和右击封面图片链接粘贴到对应的位置上就行了。
_layout.swig
打开themes\next\layout_layout.swig文件,在 里面添加以下代码：
<link rel="stylesheet" href="/dist/APlayer.min.css"><div id="aplayer"></div><script type="text/javascript" src="/dist/APlayer.min.js"></script><script type="text/javascript" src="/dist/music.js"></script>
重新生成，访问页面，就能看到左下角的音乐播放器了。
3.DaoVoice在线联系功能
https://yfzhou.coding.me//08/08/Hexo-Next%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%EF%BC%88%E9%9B%86%E6%88%90DaoVoice%E5%9C%A8%E7%BA%BF%E8%81%94%E7%B3%BB%E5%8A%9F%E8%83%BD%EF%BC%89/
自定义样式支持
1.文章末尾统一添加“本文结束”标记
主题配置文件取消注释
custom_file_path:postBodyEnd: source/_data/post-body-end.swig
接着打开\themes\next\layout_macro\post.swig文件
<div>{% if not is_index %}{% include 'passage-end-tag.swig' %}{% endif %}</div>
在路径 /source/_data 下创建/修改 post-body-end.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>
2.主题及标题栏背景图
首先主题配置文件取消注释
custom_file_path:style: source/_data/styles.styl
在路径~/hexo_blog/source/_data创建/修改 styles.styl文件，并添加以下内容
// 添加背景图片body {background: url(/random/1600x900?wallpapers);//自己喜欢的图片地址background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-position: 50% 50%;}// 标题栏背景.site-meta {padding: 20px 0;color: #fff;background: $blue;background-repeat: no-repeat;background-attachment:fixed;background-position:center;background-size:cover;} // 修改主体透明度.main-inner{background: #fff;opacity: 0.95;}// 修改菜单栏透明度，会引起本地搜索菜单bug//.header-inner {// opacity: 0.95;//}// 主页文章添加阴影效果.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);}
3.修改主副标题字体颜色
继续在/source/_data/styles.styl文件中添加，帮你挑选颜色的网站： color-hex
//主标题颜色.brand{color: $white}//副标题颜色.site-subtitle {margin-top: 10px;font-size: 13px;color: #ffffff;}
4.修改按钮，选择区域，代码块，表格等样式
首先主题配置文件取消注释
custom_file_path:style: source/_data/variables.styl
在路径 /source/_data 下创建/修改 variables.styl文件（相当于修改主题文件 next/source/css/_variables/base.styl），并添加以下内容
// Buttons// --------------------------------------------------$btn-default-bg = white;$btn-default-color = #49b1f5;$btn-default-font-size= $font-size-small;$btn-default-border-width = 2px;$btn-default-border-color = #49b1f5;$btn-default-hover-bg = #49b1f5;$btn-default-hover-color = white;$btn-default-hover-border-color = #49b1f5;// Selection$selection-bg = #49b1f5;$selection-color = white;// Code & Code Blocks// --------------------------------------------------$code-font-family= $font-family-monospace;$code-border-radius = 3px;$code-foreground= $black-light;$code-background= #edf1ff;// Table// --------------------------------------------------$table-width= normal; //next默认100%$table-border-color = $gray-lighter;$table-font-size= $font-size-small;$table-content-alignment = left;$table-content-vertical = middle;$table-th-font-weight = 700;$table-cell-padding = 8px;$table-cell-border-right-color = $gainsboro;$table-cell-border-bottom-color = $gray-lighter;$table-row-odd-bg-color = #f9f9f9;$table-row-hover-bg-color = $whitesmoke;
速度优化
托管 Hexo 博客到 Coding
注意：coding账号注册时请选择个人版（如果注册了团队版，你会发现跟网上给的教程不太一样，而且，部署出来的网页地址无法修改成xxx.coding.me）。
创建项目
配置SSH公钥
首先点击右上角的头像-个人设置-SSH公钥-新增公匙-输入你自己的SSH公匙-永久有效(推荐)-确定即可。
对该配置进行修改如下(注意缩进)：修改站点配置文件
# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:type: gitrepo: github: /Xiao-Hu-Z/Xiao-Hu-Z.github.io.gitcoding: git@git.:Xiao-Hu-Z/Xiao-Hu-Z.coding.me.gitbranch: master
该配置指定了Coding仓库的地址，并通过HTTPS方式进行连接。同样我们也可以通过SSH方式。
安装完成后，开始项目的部署操作，用的是HTTPS方式，会弹出输入用户名密码的输入框，键入你的coding用户名密码即可。
gulp 4.0实现静态资源压缩
sudo npm install gulp
安装这些功能模块
sudo npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify --save
创建任务在站点根目录下新建gulpfile.js文件
var gulp = require('gulp');//Plugins模块获取var minifycss = require('gulp-minify-css');var uglify = require('gulp-uglify');var htmlmin = require('gulp-htmlmin');var htmlclean = require('gulp-htmlclean');//压缩cssgulp.task('minify-css', function () {return gulp.src('./public/**/*.css').pipe(minifycss()).pipe(gulp.dest('./public'));});//压缩htmlgulp.task('minify-html', function () {return gulp.src('./public/**/*.html').pipe(htmlclean()).pipe(htmlmin({removeComments: true,minifyJS: true,minifyCSS: true,minifyURLs: true,})).pipe(gulp.dest('./public'))});//压缩js 不压缩min.jsgulp.task('minify-js', function () {return gulp.src(['./public/**/*.js', '!./public/**/*.min.js']).pipe(uglify()).pipe(gulp.dest('./public'));});//4.0以前的写法//gulp.task('default', [// 'minify-html', 'minify-css', 'minify-js'//]);//4.0以后的写法// 执行 gulp 命令时执行的任务gulp.task('default', gulp.parallel('minify-html', 'minify-css', function() {// Do something after a, b, and c are finished.}));
参考：NexT主题进阶
Hexo Theme NexT 主题个性化配置最佳实践
Hexo+Coding搭建自己的博客网站系列4-加速Hexo博客
Hexo+Coding搭建自己的博客网站系列2-部署博客到Coding上
使用coding加快博客网站访问速度
托管 Hexo 博客到 Coding
hexo博客部署到coding该绕的坑
