注意点:
- 下面的教程,每个教程点都是用水平线分割,防止混乱
- 教程针对NexT主题设置,此教程为进阶教程,基础配置主题的教程可以查阅相关资料,以下改变的效果可以到此博客预览
当前所在菜单下划线显示
效果图:
- 打开themes\next\layout_partials文件夹中的header.swig
- 在底部添加一个脚本
复制代码
- 重新部署发布即可 命令:hexo cl && hexo g && hexo d
统计站点的总访问量,即统计浏览了多少次;有多少人访问,在footer显示
- 找到站点的themes/next/layout/_partials目录下的footer.swig文件。插入代码如下
"busuanzi-count">
"site-uv">
"fa fa-user">
访问用户: "busuanzi-value" id="busuanzi_value_site_uv"> 人
"powered-by">
"site-uv">
"fa fa-eye">
访问次数: "busuanzi-value" id="busuanzi_value_site_pv"> 次
"site-pv">
"fa fa-pencil">
博客全站共: "post-count">{{ totalcount(site) }} 字
复制代码
效果如下:
关于博客获取文章阅读数量或者评论消息时获取失败这种情况不用担心,有时候所处的网络是机房或者一些有限制访问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 %}
{% 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;
复制代码
在底部增加运行时间
"timeDate">载入天数..."times">载入时分秒...
复制代码
效果如下:
底部跳动图标实现
- 注意点:需要到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);
}
复制代码
文章加密,对应的插件文档可以参考
github.com/MikeCoder/h…
- 在根目录中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,找到