npm速度优化

玩hexo的，肯定经常和npm打交道，但是npm的下载速度着实是有点慢。

由于下面内容会安装较多的插件，建议先更改npm仓库地址，以便能更快的安装插件

  • 阿里的淘宝团队在国内做了个跟npm仓库一样的镜像叫cnpm。
  • 淘宝镜像与npm官方包的同步频率目前为10分钟一次，来保证尽量与官方服务同步。
  • 所以二者可以说是一样，不用担心有什么差别。

通过改变地址来使用淘宝镜像（推介）

  • npm的默认仓库地址是 https://registry.npmjs.org/

  • 可以使用以下命令查看当前npm的仓库地址

    1
    npm config get registry

    可以使用以下命令来改变默认下载地址，从而达到不安装cnpm就能采用淘宝镜像的目的，然后使用上面的get命令查看是否设置成功。

1
npm config set registry https://registry.npm.taobao.org

安装CNPM

  • 安装cnpm，命令：

    1
    npm install -g cnpm --registry=https://registry.npm.taobao.org

    安装后，使用以下命令测试是否安装成功：

1
cnpm -v
  • 成功后，以后都使用 cnpm 代替以前 npm 来执行命令！

访问速度优化

图片加载优化

在做优化之前，让我们先了解什么是预加载 和 懒加载（废话时间）。

什么是预加载

预加载就是进入项目前提前加载资源，避免在项目中加载缓慢，影响用户体验

  • 缺点：会增加服务器压力

什么是懒加载

懒加载一般是当图片滚动进可视窗口内才加载图片，可视窗口之外的图片则不加载

  • 优点：对服务器有一定的缓解压力作用

我用的 matery主题 整体采用预加载模式，这样可以在我们访问其他页面的时候会稍微快点。我们可以在这个基础上对图片进行懒加载，这样做效果就是html、css、js加载之后，图片再加载。既保证了网页的打开速度，也不会因图片的庞大体积而拖累了整个页面的加载。

开始操作

首先安装图片懒加载插件： hexo-lazyload-image

在Hexo根目录执行

1
npm install hexo-lazyload-image --save

然后在Hexo配置文件末尾加入以下代码

1
2
3
4
lazyload:
  enable: true 
  onlypost: false  # 是否只对文章的图片做懒加载
  loadingImg: # eg ./images/loading.gif

到这里就配置完了，执行hexo cl&&hexo g&&hexo s就有效果了，以后博客上的图片就都是懒加载了，以上步骤理论上任何主题都可以用

一般情况下懒加载会和gallery插件会发生冲突，结果可能就是点开图片，左翻右翻都是loading image。matery主题的解决方案是：

修改 /themes/matery/source/js 中的 matery.js文件

在第108行加上：

1
2
3
$(document).find('img[data-original]').each(function(){
    $(this).parent().attr("href", $(this).attr("data-original"));
});

做完这步之后，还有点小Bug，首页的logo点击会直接打开logo图，而不是跳到首页。

伪解决方案：打开 /themes/matery/layout/_partial/header.ejs文件，

在img和span的两个头加个div：

1
2
3
4
5
6
7
8
9
10
<div class="brand-logo">
    <a href="<%- url_for() %>" class="waves-effect waves-light">
        <div>
            <% if (theme.logo !== undefined && theme.logo.length > 0) { %>
            <img src="<%= theme.logo %>" class="logo-img" alt="LOGO">
            <% } %>
            <span class="logo-span"><%- config.title %></span>
        </div>
    </a>
</div>

自定义loading图片

hexo-lazyload-image 插件提供了自定义loading图片的选项

方法就是在 loadingImg 后配置图片的路径就好了

Like this：

1
2
3
4
lazyload:
  enable: true 
  onlypost: false  # 是否只对文章的图片做懒加载
  loadingImg: /medias/loading.gif # eg ./images/loading.gif

懒加载优化

经过以上操作就已经很完美了，以下内容可做可不做

  • 其实第一次加载后本地都是有缓存的，如果每次都把loading显示出来就不那么好看

  • 所以我们需要对插件进行魔改，让图片稍微提前加载，避开加载动画

  • 打开 Hexo根目录>node_modules > hexo-lazyload-image > lib > simple-lazyload.js 文件

  • 第9行修改为：

    1
    && rect.top <= (window.innerHeight +240 || document.documentElement.clientHeight +240)

  • 作用：提前240个像素加载图片；当然这个值也可以根据自己情况修改

代码压缩优化

为什么要把代码压缩？

因为hexo生成的html、css、js等都有很多的空格或者换行，而空格和换行也是占用字节的，所以需要将空格换行去掉也就是我要进行的“压缩”。

有人说空格换行能占多少字节？确实占不了多少，但是一个人访问是这么多字节，那么一百人，一万人呢？加起来这量就不少了吧，这都是流量啊！这也是很多css/js文件的后缀为*.min.js或*.min.css的原因。虽然我们可能没那么多访问量，但是能减小一点资源文件的大小也是对访问速度有那么一点提升的。

gulp实现代码压缩

  • cd到Hexo根目录依次执行以下命令：

    1
    2
    3
    4
    5
    6
    # 全局安装gulp模块
    npm install gulp -g
    # 安装各种小功能模块  执行这步的时候，可能会提示权限的问题，最好以管理员模式执行
    npm install gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
    # 额外的功能模块
    npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del @babel/core --save

    在Hexo根目录新建文件 gulpfile.js，并复制以下内容到文件中，有中文注释，可以根据自己需求修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
var gulp = require("gulp");
var debug = require("gulp-debug");
var cleancss = require("gulp-clean-css"); //css压缩组件
var uglify = require("gulp-uglify"); //js压缩组件
var htmlmin = require("gulp-htmlmin"); //html压缩组件
var htmlclean = require("gulp-htmlclean"); //html清理组件
var imagemin = require("gulp-imagemin"); //图片压缩组件
var changed = require("gulp-changed"); //文件更改校验组件
var gulpif = require("gulp-if"); //任务 帮助调用组件
var plumber = require("gulp-plumber"); //容错组件（发生错误不跳出任务，并报出错误内容）
var isScriptAll = true; //是否处理所有文件，(true|处理所有文件)(false|只处理有更改的文件)
var isDebug = true; //是否调试显示 编译通过的文件
var gulpBabel = require("gulp-babel");
var es2015Preset = require("babel-preset-es2015");
var del = require("del");
var Hexo = require("hexo");
var hexo = new Hexo(process.cwd(), {}); // 初始化一个hexo对象

// 清除public文件夹
gulp.task("clean", function () {
    return del(["public/**/*"]);
});

// 下面几个跟hexo有关的操作，主要通过hexo.call()去执行，注意return
// 创建静态页面 （等同 hexo generate）
gulp.task("generate", function () {
    return hexo.init().then(function () {
        return hexo
            .call("generate", {
                watch: false
            })
            .then(function () {
                return hexo.exit();
            })
            .catch(function (err) {
                return hexo.exit(err);
            });
    });
});

// 启动Hexo服务器
gulp.task("server", function () {
    return hexo
        .init()
        .then(function () {
            return hexo.call("server", {});
        })
        .catch(function (err) {
            console.log(err);
        });
});

// 部署到服务器
gulp.task("deploy", function () {
    return hexo.init().then(function () {
        return hexo
            .call("deploy", {
                watch: false
            })
            .then(function () {
                return hexo.exit();
            })
            .catch(function (err) {
                return hexo.exit(err);
            });
    });
});

// 压缩public目录下的js文件
gulp.task("compressJs", function () {
    return gulp
        .src(["./public/**/*.js", "!./public/libs/**"]) //排除的js
        .pipe(gulpif(!isScriptAll, changed("./public")))
        .pipe(gulpif(isDebug, debug({ title: "Compress JS:" })))
        .pipe(plumber())
        .pipe(
            gulpBabel({
                presets: [es2015Preset] // es5检查机制
            })
        )
        .pipe(uglify()) //调用压缩组件方法uglify(),对合并的文件进行压缩
        .pipe(gulp.dest("./public")); //输出到目标目录
});

// 压缩public目录下的css文件
gulp.task("compressCss", function () {
    var option = {
        rebase: false,
        //advanced: true, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
        compatibility: "ie7" //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
        //keepBreaks: true, //类型：Boolean 默认：false [是否保留换行]
        //keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
    };
    return gulp
        .src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css
        .pipe(gulpif(!isScriptAll, changed("./public")))
        .pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
        .pipe(plumber())
        .pipe(cleancss(option))
        .pipe(gulp.dest("./public"));
});

// 压缩public目录下的html文件
gulp.task("compressHtml", function () {
    var cleanOptions = {
        protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略处理
        unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/gi //特殊处理
    };
    var minOption = {
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
        removeComments: true, //清除HTML注释
        minifyJS: true, //压缩页面JS
        minifyCSS: true, //压缩页面CSS
        minifyURLs: true //替换页面URL
    };
    return gulp
        .src("./public/**/*.html")
        .pipe(gulpif(isDebug, debug({ title: "Compress HTML:" })))
        .pipe(plumber())
        .pipe(htmlclean(cleanOptions))
        .pipe(htmlmin(minOption))
        .pipe(gulp.dest("./public"));
});

// 压缩 public/medias 目录内图片
gulp.task("compressImage", function () {
    var option = {
        optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
        progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
        interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染
        multipass: false //类型：Boolean 默认：false 多次优化svg直到完全优化
    };
    return gulp
        .src("./public/medias/**/*.*")
        .pipe(gulpif(!isScriptAll, changed("./public/medias")))
        .pipe(gulpif(isDebug, debug({ title: "Compress Images:" })))
        .pipe(plumber())
        .pipe(imagemin(option))
        .pipe(gulp.dest("./public"));
});
// 执行顺序： 清除public目录 -> 产生原始博客内容 -> 执行压缩混淆 -> 部署到服务器
gulp.task(
    "build",
    gulp.series(
        "clean",
        "generate",
        "compressHtml",
        "compressCss",
        "compressJs",
        "compressImage",
        gulp.parallel("deploy")
    )
);

// 默认任务
gulp.task(
    "default",
    gulp.series(
        "clean",
        "generate",
        gulp.parallel("compressHtml", "compressCss", "compressJs","compressImage")
    )
);
//Gulp4最大的一个改变就是gulp.task函数现在只支持两个参数，分别是任务名和运行任务的函数
  • 以后的执行方式有两种：
    1. 直接在Hexo根目录执行 gulp或者 gulp default ，这个命令相当于 hexo cl&&hexo g 并且再把代码和图片压缩。
    2. 在Hexo根目录执行 gulp build ，这个命令与第1种相比是：在最后又加了个 hexo d ，等于说生成、压缩文件后又帮你自动部署了。
  • 值得注意的是：这个加入了图片压缩，如果不想用图片压缩可以把第154行的 "compressImage", 和第165行的 ,"compressImage" 去掉即可

hexo-neat插件实现代码压缩

  • 可能以上方法比较复杂，来介绍个简单的，hexo-neat插件也是用来压缩代码的，底层也是通过gulp来实现的。

  • 但是这个插件是有Bug的：

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

  • Hexo根目录执行安装代码：

    1
    npm install hexo-neat --save

    在Hexo配置文件_config.yml 末尾加入以下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
neat_enable: true
neat_html:
  enable: true
  exclude:
neat_css:
  enable: true
  exclude:
    - '*.min.css'
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'

然后直接 hexo cl&&hexo g 就可以了，会自动压缩文件 。

补充：为了解决以上Bug，对于matery主题（其他主题自行解决）需要将以上默认配置修改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#hexo-neat 优化提速插件（去掉HTML、css、js的blank字符）
neat_enable: true
neat_html:
  enable: true
  exclude:
    - '**/*.md'
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/**/instantpage.js'
    - '**/matery.js'

全站CDN加速

本节参考：github page网站cdn优化加速 - 辣椒の酱

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。——百度百科

放在Github的资源在国内加载速度比较慢，因此需要使用CDN加速来优化网站打开速度，jsDelivr + Github便是免费且好用的CDN，非常适合博客网站使用。

用法：

1
https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径

例如：

1
https://cdn.jsdelivr.net/gh/skyls03/skyls03.github.io/medias/loading.gif

注意：版本号不是必需的，是为了区分新旧资源，如果不使用版本号，将会直接引用最新资源

还可以配合PicGo图床上传工具的自定义域名前缀来上传图片，使用极其方便。更多详细信息可参考我另一篇文章：超好用的软件插件网站集合

重点（敲黑板！）

这个不止可以作用于图片，可以像这样把所有的css、js等文件的加载路径都修改下，从而让全站使用CDN加速！具体怎么修改要根据主题的情况而定，比较麻烦，不过原理都是一样的，有能力的可以改改。

这里我提供一个4.15M的图片文件，供大家测试：

腾讯：COS + CDN

GitHub：GitHub + jsDelivr

阿里：OSS

浏览器打开->F12->Network->Ctrl + F5(强制刷新，即不使用缓存刷新)，然后看加载时间多少。

我的测试结果：

每个人的网络情况不一样，测试数据仅供参考

  • 阿里云的OSS：2.60s加载完成
  • jsDelivr + Github：1.68s加载完成

SEO优化

SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。 ——百度百科

百度收录

在这之前，有个事情需要注意：

GitHub是不允许百度的Spider（蜘蛛）爬取GitHub上的内容的，所以任何部署在GitHub上的静态博客都是不能百度爬取到的！

解决方案：可以参考我另一篇文章 关于百度无法爬取GitHub内容解决方案

让百度收录你的站点

首先来搞百度的，刚建完站在百度上是不可能搜索到我们的网站的，可以先在百度上搜索site:<你的域名>，一般是搜不到的，然后点击 提交网址 将自己的网站提交给百度。

img

添加自己的站点到百度

登录百度搜索资源平台， 只要是百度旗下的账号就可以， 登录成功之后在站点管理中点击添加网站，输入域名，三步走。

img

第三步验证网站的时候， 验证网站所有权的方式有三种：

  • 文件验证
  • HTML标签验证
  • CNAME解析验证（推荐使用）

同理，百度的spider是爬取不到GitHub的内容的，所以HTML标签验证方式也是不太可取的。

img

向百度推送自己的资源

经过以上步骤，百度已经知道有我们网站的存在了，但是百度还不知道我们的网站上有什么内容，所以要向百度推送我们的内容。

还是在百度资源搜索平台，找到数据引入->链接提交，可以看到向百度推送自己的内容有两个方式：

  1. 自动提交

    （分三种）

    • 主动推送
  • 自动推送
    • sitemap（站点地图）

  1. 手动提交

    • 即手动地将链接一次性提交给百度

一般自动提交比手动提交效果好一点，自动提交又从效率上来说：

主动推送>自动推送>sitemap

自动提交的三种方式：

  1. 主动推送：最为快速的提交方式。将站点当天新产出链接通过此方式推送给百度，以保证新链接可以及时被百度收录。
  2. 自动推送：最为便捷的提交方式。将自动推送的JS代码部署在站点的每一个页面源代码中，当部署代码的页面在每次被浏览时，链接就会被自动推送给百度。可以与主动推送配合使用。
  3. sitemap：您可以定期将网站链接放到sitemap文件中，然后将sitemap文件提交给百度。百度会周期性的抓取检查您提交的sitemap，对其中的链接进行处理，但收录速度慢于主动推送。
使用sitemap方式推送

安装sitemap插件

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

这两个插件是用来生成 Sitemap文件 的插件，而 Sitemap 是用来告知搜索引擎我们的网站上有哪些可供抓取的网页的。

注意一点：
hexo配置文件中的url一定要改成你的域名，这两个插件是根据你的url生成站点地图的。

安装后直接执行hexo cl&&hexo g命令，然后就会在网站根目录生成sitemap.xml文件和baidusitemap.xml文件，其中sitemap.xml文件是搜索引擎通用的文件，baidusitemap.xml是百度专用的sitemap文件。

有sitemap文件之后，再将生成的sitemap文件提交给百度或者其他搜索引擎

百度方式：在自动提交的sitemap那里填写自己sitemap文件的URL地址即可

https://你的域名/baidusitemap.xml

img

提交后会有状态提示：

img

这里需要注意严格区分http和https

http和https是不一样的，刚添加的站点是HTTP协议的，如果你网站开启了 强制https，是会报301重定向错误的，也就是百度不能抓取到你的sitemap

如果想用https，可以在数据监控->HTTPS认证进行认证

这个认证有时会很慢，可以在你的站点只留一个首页的简单HTML，然后再去百度认证，这样应该会快一点。

如果是其他的搜索引擎，一般是在填写sitemap的地方，填写以下内容即可

https://你的域名/sitemap.xml

自动推送方式

只要每个需要被百度爬取的HTML页面中加入一段JS代码即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

我所使用的matery主题可以自动给每个页面加上这段代码，只需在主题配置文件中配置：

1
2
# 百度搜索资源平台提交链接
baiduPush: true

即可！

其他主题一般都有这个功能的实现，如果没有的话，想办法在每个页面加入以上JS代码即可，原理是一样。

主动推送方式

安装主动推送插件：hexo-baidu-url-submit

1
npm install hexo-baidu-url-submit --save

然后打开hexo配置文件，在末尾加入以下配置：

1
2
3
4
5
6
# hexo-baidu-url-submit  百度主动推送
baidu_url_submit:
  count: 80 # 提交最新的一个链接
  host: blog.sky03.cn # 在百度站长平台中注册的域名
  token: xxxxxxx # 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt # 文本文档的地址， 新链接会保存在此文本文档里

密匙的获取是在百度的自动提交的主动推送那里。

img

再加入新的deploy：

1
2
deploy:
- type: baidu_url_submitter

如图：

img

这样每次执行 hexo d 的时候，新的链接就会被推送了。
推送成功时,会有如下终端提示!

img

各种不同的推送反馈字段说明点我查看，一般来说，推送失败基本都是地址不相符造成的，我们只需对比baidu_url_submit在public中生成的baidu_urls.txt的地址,与自己填写在host字段中的地址对比看是否一样即可。

谷歌收录

相比于百度，google的效率实在不能更快，貌似一天左右站点就被收录了，其实方法是和百度是一样的。

  • 登录谷歌站长平台，添加自己的域名

    img

  • DNS验证（就是验证下网站是不是你的）就是域名解析那里添加一条TXT解析记录

  • 然后点击验证即可

  • 再到谷歌的Search Console，添加自己的sitemap地址

    img

  • 接下来，等就是了

提交 robots.txt

robots.txt是干嘛的？

robots.txt 是一种存放于网站根目录下的 ASCII 编码的文本文件，它的作用是告诉搜索引擎此网站中哪些内容是可以被爬取的，哪些是禁止爬取的。
robots.txt 要放在 Hexo根目录 下的 source 文件夹中。

每个人站点目录可能不太一样，可以参考下我的 robots.txt 文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
User-agent: *
Allow: /
Allow: /posts/
Disallow: /about/
Disallow: /archives/
Disallow: /js/
Disallow: /css/
Disallow: /contact/
Disallow: /fonts/
Disallow: /friends/
Disallow: /libs/
Disallow: /medias/
Disallow: /page/
Disallow: /tags/
Disallow: /categories/

更多关于 robots.txt 的写法参见 https://blog.csdn.net/fanghua_vip/article/details/79535639

编写完以上内容再重新部署一下，然后到百度资源平台的数据监控->Robots点击检测并更新 看能不能检测到。
同样注意：刚添加的站点没有进行 HTTPS认证，直接检测有可能会报301错误。

配置 Nofollow

  • nofollow 是HTML页面中 a标签 的 属性值。
  • 这个属性的作用是：告诉搜索引擎的爬虫不要追踪该链接，为了对抗博客垃圾留言信息

URL优化

一般来说，SEO搜索引擎优化认为，网站的最佳结构是 用户从首页点击三次就可以到达任何一个页面，但是我们使用Hexo编译的站点结构的URL是：域名/年/月/日/文章标题四层的结构，这样的URL结构很不利于SEO，爬虫就会经常爬不到我们的文章，于是，我们需要优化一下网站文章的URL

方案一：

直接改成域名/文章标题的形式，在Hexo配置文件中修改permalink如下：

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://blog.sky03.cn
root: /
permalink: :title.html
permalink_defaults:

这个方式有个不好的地方：

直接以文章的标题作为URL，而我们所写的文章的标题一般都是中文，但是URL只能用字母数字和标点符号表示，所以中文的URL只能被转义成一堆符号，而且还特别长。

方案二：

安装固定链接插件：hexo-abbrlink

插件作用：自动为每篇文章生成一串数字作每篇文章的URI地址。每篇文章的Front-matter中会自动增加一个配置项：abbrlink: xxxxx，该项的值就是当前文章的URI地址。

  1. Hexo根目录执行：

    1
    npm install hexo-abbrlink --save

    Hexo配置文件末尾加入以下配置：

1
2
3
4
# hexo-abbrlink config 、固定文章地址插件
abbrlink:
  alg: crc16  #算法选项：crc16、crc32，区别见之前的文章，这里默认为crc16丨crc32比crc16复杂一点，长一点
  rep: dec    #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex为十六进制

Hexo配置文件中修改permalink如下：

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://blog.sky03.cn
root: /
permalink: posts/:abbrlink.html
permalink_defaults:

这样站点结构就变成了：域名/posts/xxx.html

优化小技巧

异步加载JS

方法：将JS文件的引入，放到HTML的body结束标签的上方

例：

1
2
3
4
5
6
7
8
9
<html>
    <head>
        <title>Hello World!</title>
    </head>
    <body>
        xxxxx....
        <script src="xx/xx.js"></script>
    </body>
</html>

原理：首先要明白，HTML的加载是从上往下一行一行解释执行的，把js文件的引入放到下面，这样就会先把HTML页面展示出来，然后再加载js。这样看起来的效果就是，大体的页面先出来，而js让它慢慢加载执行，如果你把js放到网页的上方，效果就是必须要加载完js才能继续展示网页，体验极差。

注意：原主题的js文件尽量不要动，我们只需将自己增加的一些js按照异步加载的方式做即可，比如一些音乐js插件、实时在线聊天js插件等放到最后即可！因为这些文件要加载的东西很多。

字蛛

官网 GitHub

使用场景

你的网站中需要自定义字体（额外添加一些普通电脑中没有的字体），但是一般字体是包含很多字符的，这就导致字体文件的体积很大

字蛛作用

字蛛就是自动检测网站的 CSS 与 HTML 文件中的自定义字体（额外加的字体），并将网站中用到的文字重新打包成一个新的字体文件，并自动引入；

而没用到的文字就会删除，从而达到压缩字体文件体积的作用。

安装

1
npm install font-spider -g

在 CSS 中使用 WebFont：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*声明 WebFont*/
@font-face {
  font-family: 'pinghei';
  src: url('../font/pinghei.eot');
  src:
    url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),
    url('../font/pinghei.woff') format('woff'),
    url('../font/pinghei.ttf') format('truetype'),
    url('../font/pinghei.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*使用选择器指定字体*/
.home h1, .demo > .test {
    font-family: 'pinghei';
}
  1. @font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成
  2. 开发阶段请使用相对路径的 CSS 与 WebFont

运行 font-spider 命令：

1
font-spider ./demo/*.html

页面依赖的字体将会自动压缩好，原 .ttf 字体会备份

本文转载自：https://blog.sky03.cn/posts/42790.html