hexo优化

cnpm

本节参考自　淘宝 NPM 镜像

这是一个完整 npmjs.org 镜像，你可以用此代替官方版本（只读），同步频率目前为 10 分钟 一次以保证尽量与官方服务器同步。在 npm 无法同步时提供帮助。

打开命令行窗口安装：npm install -g cnpm --registry=https://registry.npm.taobao.org

指令

安装模块

从 registry.npm.taobao.org 安装所有模块。当安装的时候发现安装的模块还没有同步过来，淘宝 NPM 会自动在后台进行同步，并且会让你从官方 NPM registry.npm.taobao.org 进行安装。下次你再安装这个模块的时候，就会直接从 淘宝 NPM 安装了。

$ cnpm install [name]

同步模块

直接通过 sync 命令马上同步一个模块, 只有 cnpm 命令行才有此功能:

$ cnpm sync connect

当然, 你可以直接通过 web 方式来同步: /sync/connect

$ open https://npm.taobao.org/sync/connect

其它命令

支持 npm 除了 publish 之外的所有命令, 如:

$ cnpm info connect

InstantClick

本节参考自　刘兴刚博客

Next 主题 现已集成 quicklink

通常，我们为了减少 DNS 的查询时间，使用 dns prefetch 为该页面中的链接做解析，提升页面的加载速度。类似的，我们可以在鼠标滑到链接上到点击的时间间隙去加载这个页面，通常这个间隙有几百毫秒，利用 InstantClick，我们可以充分利用这几百毫秒，让网站能够瞬间显示新页面，几乎没有延迟。

但是 InstantClick 并不能滥用，许多 js 无法与它兼容，如谷歌分析、百度统计以及 fancybox。

初始化并解决部分 js 无法加载的问题：

打开　\hexo-theme-next\layout\_partials\head.njk

添加

<script src="\js\custom\instantclick.min.js" data-no-instant></script>
   <script data-no-instant>
   InstantClick.on('change', function(isInitialLoad) {
   if (isInitialLoad === false) {
     if (typeof MathJax !== 'undefined') // support MathJax
     MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
     if (typeof prettyPrint !== 'undefined') // support google code prettify
     prettyPrint();
     if (typeof _hmt !== 'undefined')  // support 百度统计
     _hmt.push(['_trackPageview', location.pathname + location.search]);
     if (typeof ga !== 'undefined')  // support google analytics
       ga('send', 'pageview', location.pathname + location.search);
   }
   });
   InstantClick.init();
</script>

下载　 instantclick.min.js

打开　\hexo-theme-next\source\js\custom\

放置　instantclick.min.js

这时候对于所有链接都开启预加载模式，但可以把部分链接加入黑名单：
<a href="\blog\" data-no-instant>Blog</a>

压缩

5.1. Gulp

本节参考自　蝉時雨

gulp.js 是基于流的自动化构建工具，我们可以使用 Gulp 为 Hexo 压缩文件

在 \blog\ 打开命令行窗口

安装

npm install gulp --save

再根据需要安装以下模块

npm install gulp-minify-css --save
npm install gulp-uglify --save
npm install gulp-htmlmin --save
npm install gulp-htmlclean --save
npm install gulp-imagemin --save

打开　\blog\

新建　gulpfile.js

添加

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');

// 压缩html文件
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'))
});
// 压缩css文件
gulp.task('minify-css', function() {
  return gulp.src('./public/**/*.css')
  .pipe(minifycss())
  .pipe(gulp.dest('./public'));
});
// 压缩js文件
gulp.task('minify-js', function() {
  return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
  .pipe(uglify())
  .pipe(gulp.dest('./public'));
});
// 压缩 public/images 目录内图片
gulp.task('minify-images', function() {
  gulp.src('./public/images/**/*.*')
  .pipe(imagemin({
     optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
     progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
     interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染
     multipass: false, //类型：Boolean 默认：false 多次优化svg直到完全优化
  }))
  .pipe(gulp.dest('./public/uploads'));
});
// 默认任务 gulp 4.0 适用的方式
gulp.task('default', gulp.parallel('minify-html', 'minify-css', 'minify-js', 'minify-images'
 //build the website
));

依照格式，删除未安装模块的代码部分

在命令行内输入 $ gulp 即可运行

一键同步代码参照　7. 批处理脚本自动创建文章及一键部署

把因删除空格缩小的间距调整回来：

打开　\blog\source\_data\styles.styl

添加

// gulp 间距调整
span.leancloud-visitors-count, span.post-comments-count.valine-comment-count {
  padding-left: 2px;
}
i.fa.fa-ravelry {
  padding-left: 5px;
}

5.2. hexo-neat

本节参考自　Hexo瞎折腾系列(5) - 使用hexo-neat插件压缩页面静态资源

已知 BUG：

• 压缩 md 文件会使 markdown 语法的代码块消失
• 会删除全角空格

安装　npm install hexo-neat --save

打开　\blog\_config.yml

添加

# hexo-neat
# 开关
neat_enable: true
# 压缩 html
neat_html:
  enable: true
  exclude:
    - '**/*.md'
# 压缩 css
neat_css:
  enable: true
  exclude:
  - '**/*.min.css'
# 压缩 js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
  - '**/*.min.js'
  - '**/jquery.fancybox.pack.js'
  - '**/index.js'

Service Worker

教程　Hexo 部署 Service Worker

Service workers 本质上充当 Web 应用程序与浏览器之间的代理服务器，为了适应越来越多的网页应用而产生。

它可以通过拦截并修改访问和资源请求，缓存特定的网页资源，并可以将网页做到离线可用；

同时 Service Workers 也能做到定期后台同步与信息推送。

部署成功后，您可以节省用户流量、提升页面二次加载速度等。

批处理脚本自动创建文章及一键部署

打开　\blog\

新建　新建文章.bat

添加

set "a=%date:~,4%"
set "b=%date:~5,2%"
set "c=%date:~8,2%"
hexo new "%a%-%b%-%c%"

命名格式为　年-月-日.md

部署可写为　hexo clean & hexo g -d

若使用 gulp 则写为　hexo clean & hexo g && gulp & hexo deploy

添加标题底部横线

本节参考自　跬步

打开　\blog\source\_data\styles.styl

添加

h1, h2, h3, h4, h5, h6 {
  border-bottom: 2px solid #8c8c8c;
  padding: 0 5% 2px 0;
}

阅读进度条

本节参考自　I sudo X

比自带的更好看。

打开　\blog\source\_data\header.njk

添加

<div class="top-scroll-bar"></div>

打开　\blog\source\_data\styles.styl

添加

//顶部阅读进度条
.top-scroll-bar {
  position: fixed;
  height: 3px;
  top: 0;
  left: 0;
  transition-duration: 0.7s,0.7s;
  transiton-property: width,background;
  z-index: 99999;
  display: none;
  background: #37C6C0;
}

打开　\hexo-theme-next\source\js\custom\custom.js

添加

//阅读进度条
$(document).ready(function () {
  $(window).scroll(function(){
  $(".top-scroll-bar").attr("style", "width: " + ($(this).scrollTop() / ($(document).height() - $(this).height()) * 100) + "%; display: block;");
  var s=$(window).scrollTop();
  var a=$(document).height();
  var b=$(window).height();
  var result=parseInt(s/(a-b)*100);
  $(".top-scroll-bar").css("width",result+"%");
  if(result>=0&&result<=19)
  $(".top-scroll-bar").css("background","#cccccc");
  if(result>=20&&result<=39)
  $(".top-scroll-bar").css("background","#50bcb6");
  if(result>=40&&result<=59)
  $(".top-scroll-bar").css("background","#85c440");
  if(result>=60&&result<=79)
  $(".top-scroll-bar").css("background","#f2b63c");
  if(result>=80&&result<=99)
  $(".top-scroll-bar").css("background","#FF0000");
  if(result==100)
  $(".top-scroll-bar").css("background","#f58ca1");
  });
});

在线阅读pdf

参考：如何在hexo博客中在线阅读pdf | 冰山一树Sankey (gitee.io)

图片懒加载

添加二级菜单功能#

https://sunhwee.com/posts/65d7181d.html

双部署分流操作#

www.purethought.cn/74d17cc3.html

远程部署#

应用腾讯CloudStudio进行远程部署hexo。这样的好处是获得了集成化开发环境和全网化开发化境，只要有电脑有网络的地方都可以部署博客了。

私有仓库#

默认情况下github的仓库是公有的，仓库的内容会被所有人看见，因此先建立个私有化仓库存储源码。
在github上新建一个Private仓库，如：Blog

上传源码#

删除第三方主题下的.git文件夹；
配置.gitignore文件：

Copy.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

上传源码到私有仓库

Copygit init  //初始化本地仓库
git remote add origin 私有仓库的git地址  //添加远程仓库
git pull origin master
git add . //添加本地所有文件到仓库        
git commit -m "blog源文件" //添加commit
git push -u origin master

CloudStudio#

申请CloudStudio账号，并新建工作空间
先选择运行环境，hexo
然后来源选其他git仓库，填写私有仓库的git地址 ，并将PUblishKey添加到github里
等个三五分钟，就会看到CloudStudio工作站了
这样就可以使用CloudStudio部署博客了，例如使用hexo g测试一下先。

流程图#

安装

npm install --save hexo-filter-flowchart

用法

` ` `flow
st=>start: Start|past:>https://www.baidu.com[blank]
e=>end: End:>https://www.baidu.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>https://www.baidu.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
` ` `
st=>start: Start|past:>https://www.baidu.com[blank]
e=>end: End:>https://www.baidu.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>https://www.baidu.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

SEO优化

-

• 基于Hexo的matery主题搭建博客并深度优化 | 天弈初心 (tianyichuxin.com)

amp优化

博客-hexo-matery主题改造笔记 - 多弗朗强哥 - 博客园 (cnblogs.com)

hexo-generator-amp

静态资源加速，jsdelivr的替代品

静态资源加速，寻找jsdelivr的替代品 - 江风引雨の小po站 (luzy.top)

静态资源加速，寻找jsdelivr的替代品 - 江风引雨の小po站 (luzy.top)

文末结束标记

本节参考自　务虚笔记

自定义内置标签

博客-hexo-matery主题改造笔记 - 多弗朗强哥 - 博客园 (cnblogs.com)

在themes/主题 下新建scripts文件夹，hexo会自动执行此文件夹的内容。
在scripts文件夾下新建block.js

Copyhexo.extend.tag.register('r', function(args, content){
  var className =  args.join(' ');
  return '<div class="uk-alert uk-alert-danger"><i class="fa fa-warning"></i> ' + content + '</div>';
}, {ends: true});

hexo.extend.tag.register('g', function(args, content){
  var className =  args.join(' ');
  return '<div class="uk-alert uk-alert-success"><i class="fa fa-check-circle"></i> ' + content + '</div>';
}, {ends: true});

hexo.extend.tag.register('y', function(args, content){
  var className =  args.join(' ');
  return '<div class="uk-alert uk-alert-warning"><i class="fa fa-exclamation-circle"></i> ' + content + '</div>';
}, {ends: true});

在themes/主题/source/css/my.css內添加

Copy
.uk-alert {
  margin-bottom: 15px;
  padding: 10px;
  background: #ebf7fd;
  color: #2d7091;
  border: 1px solid rgba(45, 112, 145, 0.3);
  border-radius: 4px;
  text-shadow: 0 1px 0 #ffffff;
}

/* Modifier: `uk-alert-success`
 ========================================================================== */
.uk-alert-success {
  background: #f2fae3;
  color: #659f13;
  border-color: rgba(101, 159, 19, 0.3);
}
/* Modifier: `uk-alert-warning`
 ========================================================================== */
.uk-alert-warning {
  background: #fffceb;
  color: #e28327;
  border-color: rgba(226, 131, 39, 0.3);
}
/* Modifier: `uk-alert-danger`
 ========================================================================== */
.uk-alert-danger {
  background: #fff1f0;
  color: #d85030;
  border-color: rgba(216, 80, 48, 0.3);
}

然後就可以使用了。
用法：

参考文章

• Hexo 优化汇总 | 千灵 (qianling.pw)

• Hexo博客主题安装和优化（二）_hexo matery设置雪花飘落-CSDN博客

• Hexo进阶之各种优化 | Sky03我的薰衣草

• 博客-hexo-matery主题改造笔记 - 多弗朗强哥 - 博客园 (cnblogs.com)