Hexo Next主题进阶详细教程

注意点：

下面的教程，每个教程点都是用水平线分割，防止混乱
教程针对NexT主题设置，此教程为进阶教程，基础配置主题的教程可以查阅相关资料，以下改变的效果可以到此博客预览

当前所在菜单下划线显示

效果图：

打开themes\next\layout_partials文件夹中的header.swig
在底部添加一个脚本

<script>window.onload = function(){var path = 'https://malizhi.cn'; //这里要改成你博客的地址var localhostItem = String(window.location).split(path)[1];var LiNode = document.querySelectorAll('#menu > li > a')for(var i = 0; i< LiNode.length;i++){var item = String(LiNode[i].href).split(path)[1];if(item == localhostItem && item != undefined){LiNode[i].setAttribute('style','border-bottom:1px solid black');}}};</script>

重新部署发布即可命令：hexo cl && hexo g && hexo d

统计站点的总访问量，即统计浏览了多少次；有多少人访问，在footer显示

找到站点的themes/next/layout/_partials目录下的footer.swig文件。插入代码如下

<!-- 新增访客统计代码 --><div class="busuanzi-count"><script async="" src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span class="site-uv"><i class="fa fa-user"></i>访问用户： <span class="busuanzi-value" id="busuanzi_value_site_uv"></span> 人</span><div class="powered-by"></div><span class="site-uv"><i class="fa fa-eye"></i>访问次数： <span class="busuanzi-value" id="busuanzi_value_site_pv"></span> 次</span><!-- 博客字数统计 --><span class="site-pv"><i class="fa fa-pencil"></i>博客全站共： <span class="post-count">{{ totalcount(site) }}</span> 字</span>
</div>
<!-- 新增访客统计代码 END-->

效果如下：

关于博客获取文章阅读数量或者评论消息时获取失败这种情况不用担心，有时候所处的网络是机房或者一些有限制访问leancloud的网络会造成访问不了leancloud，可以换一个网络试试。

访问不了时，网页显示错误如下：
api.leancloud.cn/1.1/classes/Comment:1 Failed to load resource:net::ERR_CONNECTION_RESET

如何让百度收录自己的bolg

在百度搜索引擎搜索自己的域名查看是否收录 site:malizhi.cn
如果没有收录，可以到此网站提交申请，验证网站，验证成功网站后，我们可以使用自动推送，让百度可以收录我们博客的所有网页
百度收录验证时如果选择第一种方式验证就是把 baidu_verify_6j6lLVHSN7.html放在blog的根目录

但是放在根目录会有一个问题，hexo会为此html自动渲染，添加了不必要的东西，此时，百度验证会不通过，我们要在此html中顶部添加以下内容，hexo才不会为此html自动渲染。

     ---layout: false---

验证成功后，打开你的hexo博客根目录，分别用下面两个命令来安装针对百度的插件

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

安装成功后hexo g，站点根目录中的public目录会自动生成sitemap配置文件，sitemap.xml baidusitemap.xml
在博客站点目录中，添加以下配置

# 自动生成sitemap
sitemap:path: sitemap.xml
baidusitemap:path: baidusitemap.xml

修改主题配置文件

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true

修改baidu_push.swig，位置是themes\next\layout_third-party\seo，添加以下代码（代码来自百度自动推送）：

{% if theme.baidu_push %}
<script>
(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if (curProtocol === 'https') {bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else {bp.src = 'http://push.zhanzhang.baidu.com/push.js';}var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);
})();
</script>
{% endif %}

这样子的话每次访问博客中的页面会自动向百度提交。

如何把www.xxx.cn或xxx.cn转换成https://xxx.cn

去到nginx的配置文件中，在80端口的server块中配置：

rewrite ^(.*) https://xxx.cn$1 permanent;   #重定向https访问

如何把https://www.xxx.cn转成https://xxx.cn

去到nginx的配置文件中，(前提是你的bolg已经有安全验证证书) 在配置文件中增加多一个server

server {listen 443;server_name www.xxx.cn;rewrite ^(.*) https://xxx.cn$1 permanent;   #重定向https访问}

然后在原来验证bolg的443端口后面增加一小段代码default_server ssl

   server {listen 443 default_server ssl;

在底部增加运行时间

<!-- 在网页底部添加网站运行时间 -->
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>var now = new Date();function createtime() {var grt= new Date("07/21/2018 00:00:00");//此处修改你的建站时间或者网站上线时间now.setTime(now.getTime()+250);days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}document.getElementById("timeDate").innerHTML = "Run for "+dnum+" Days ";document.getElementById("times").innerHTML = hnum + " Hours " + mnum + " m " + snum + " s";}
setInterval("createtime()",250);
</script>

效果如下：

底部跳动图标实现

注意点：需要到next\layout_partials下的footer.swig文件中，在你所需要调动的图标所对应的span中增加对应的ID
去到主体的css文件（next\source\css_variables） 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);}
}//图标所对应的span中的ID
#heart {animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {color: rgb(255, 113, 113);
}

文章加密，对应的插件文档可以参考

https://github.com/MikeCoder/hexo-blog-encrypt/blob/master/ReadMe.md

在根目录中package.json中添加依赖：

 "hexo-blog-encrypt": "2.0.*"

在站点配置文件中开启，没有则添加：

# Security
encrypt:enable: true

在文章中的头部信息中添加对应的信息即可

---
title: testPass
date: 2018-07-26 00:00:00
password: 123456
abstract: 这是一篇加密的文章。
message: enter password to read.
---

文章置顶：

修改 hero-generator-index 插件，把文件：node_modules/hexo-generator-index/lib/generator.js 内的代码替换为：

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){var config = this.config;var posts = locals.posts;posts.data = posts.data.sort(function(a, b) {if(a.top && b.top) { // 两篇文章top都有定义if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排else return b.top - a.top; // 否则按照top值降序排}else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面return -1;}else if(!a.top && b.top) {return 1;}else return b.date - a.date; // 都没定义按照文章日期降序排});var paginationDir = config.pagination_dir || 'page';return pagination('', posts, {perPage: config.index_generator.per_page,layout: ['index', 'archive'],format: paginationDir + '/%d/',data: {__index: true}});
};

添加置顶标志：去到next\layout_macro下的post.swig，找到<div class="post-meta"> ，在下面添加对应代码

<div class="post-meta">{% if post.top==100 %}<i class="fa fa-thumb-tack"></i><font color=808080>置顶</font><span class="post-meta-divider">|</span>{% endif %}......

效果：

减少背景线条（默认线条数可以看官方插件）

https://github.com/hustcc/canvas-nest.js

对应的js在next\source\lib\canvas-nest下，修改js的count数量即可，默认是99条

在头部菜单中，显示有多少篇数

在next\layout_partials\header.swing 修改对应的代码
找到对应的位置

.......
{{ __('menu.' + name) | replace('menu.', '') }}
.......

可以按照我这种方法添加篇数

效果：

添加文章阴影

去到next\source\css_custom下，修改Custom styles文件，增加一下代码
阴影的透明度、大小等可以在代码中自由调节

 // Custom styles.
// 主页文章添加阴影效果.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);}

效果图：

修改网页加载进度条颜色

到next\source\lib\pace，找到自己加载条对应的样式，进行修改即可

底部小心心增加点击动画功能

确保你拥有一个以NexT为主题的Hexo博客版本大概任意orz
下载hexo-next-bottomheart.js（可以把链接复制到下载工具中或者直接新建文件然后复制粘贴），并把它保存在/themes/next/source/js/src/目录下。
使用文本编辑器打开/themes/next/layout/_layout.swig，在尾部上方新增一行（line 5），修改后的文件如下

...
{% include '_components/algolia-search/assets.swig' %}<script type="text/javascript" src="/js/src/hexo-next-bottomheart.js"></script>
</body>
</html>

使用文本编辑器打开/themes/next/layout/_partials/footer.swig，在

<span itemprop="copyrightYear">{{ current }}</span>
<span class="with-love"><i class="fa fa-{{ theme.authoricon }}"></i>
</span>
<span class="author" itemprop="copyrightHolder">{{ config.author }}</span>

line5处，修改line 5为

<div id="bottomheart" style="cursor:pointer;"><i class="fa fa-{{ theme.authoricon }}"></i></div>

这时候，重新部署你的博客，就可以疯狂点击小心心啦

效果：

相册功能

效果图:

因为篇幅较长，另起一篇文章说明，文章地址：https://malizhi.cn/HexoAlbum/

如何利用 Gulp 来压缩你的 Hexo 博客的静态文件（ html / css / js ），达到提高访问速度的目的

在blog站点目录下打开git
首先安装gulp $ npm install gulp
继续安装依赖包
- $ npm install --save-dev babel-cli
- $ npm install --save-dev babel-preset-es2015
- $ npm install gulp-minify-css gulp-babel gulp-uglify gulp-htmlmin gulp-htmlclean --save-dev
在博客的根目录创建文件 gulpfile.js，代码如下：

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var babel = require('gulp-babel');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');gulp.task('minify-css', function () {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});gulp.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'))
});gulp.task('minify-js', function () {
return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
.pipe(babel({ presets: ['es2015'] }))
.pipe(uglify())
.pipe(gulp.dest('./public'));
});gulp.task('default', ['minify-html', 'minify-css', 'minify-js']);

压缩方法：执行完hexo g 产生编译文件后，执行gulp
看到以下信息代表压缩成功，接下来使用hexo d 发布到服务器即可，可发现访问速度有了改善

建议与帮助

有小伙帮有好的建议或者其他问题可以及时联系我

邮箱：lizhi_ma@foxmail.com

Hexo Next主题进阶详细教程相关推荐

GitHub+Hexo 搭建个人网站详细教程
原文链接 GitHub+Hexo 搭建个人网站详细教程前言: 随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交网站让用户分享信息更加便捷.然后,如果你是一个不甘寂寞的程序猿(媛),是否也想要搭建 ...
Android24 怎么添加整体布局背景,更新安卓10可用设置valerie透明主题美化详细教程（2020.2.24）...
本帖最后由神兽叫馒头于 2020-2-24 13:16 编辑最近很多加油问我如何设置的背景,我就不一一回复了,给大家一个详细教程,对你有帮助请回复顶贴其实以前已经有人发过类似的贴子了,只是不太详 ...
使用GitHub Pages+Hexo 搭建个人网站详细教程
文章目录 -GitHub Pages和Hexo的介绍 -安装Node.js -安装Git -验证是否安装成功 -点击Git Bash -点击鼠标右键 -安装Hexo -Hexo 初始化配置 -查看网站 ...
Hexo Next主题进阶教程
注意点: 下面的教程,每个教程点都是用水平线分割,防止混乱教程针对NexT主题设置,此教程为进阶教程,基础配置主题的教程可以查阅相关资料,以下改变的效果可以到此博客预览当前所在菜单下划线显示效果 ...
zblog php建站教程_zblogphp视频站主题使用详细教程
天兴工作室:zblogphp视频站主题(可发布电影.电视剧.娱乐新闻等)已经上架,由于這个主题专门针对视频站的,所以专门写了本文来详细介绍下使用此主题的方法. 主题自带seo功能:标题关键词描述的用法 ...
GitHub-Hexo-搭建个人博客史上最详细教程
GitHub+Hexo 搭建个人网站详细教程更多精彩内容欢迎访问我的个人博客皮皮猪:http://www.zhsh666.xyz或者http://www.zh66.club期待您的光临哦!我是皮皮猪 ...
Windows下使用GitHub Pages搭建hexo博客详细教程以及Next主题超全配置
根据下面的教程搭建的博客见这里前言马上要进入研究生了,不能再过浑浑噩噩的日子了,搭建一个小网站,用于记录自己所学的东西.其实,之前在腾讯云1元乞丐版上也搭建过博客,但是呢,只用来扯淡了.这次使用 ...
hexo yilia主题添加评论系统详细教程
文章目录序言添加相关代码 1. config.yml 2. yilia\layout\_partial\article.ejs 3.valine.ejs 安装评论序言其实网上关于Hexo的博客 ...
hexo之next主题个性化配置详细教程
hexo之next主题个性化配置详细教程 1.在右上角或者左上角实现fork me on github 实现的效果图具体实现方法点击传送门>> 挑选自己喜欢的样式,并复制代码. 例如, ...