Hexo进阶之各种优化

Hexo

发布于: 2019-11-12

更新于: 2020-01-24

文章字数: 6.3k

阅读次数:

npm速度优化

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

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

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

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

npm的默认仓库地址是 https://registry.npmjs.org/
可以使用以下命令查看当前npm的仓库地址
```
npm config get registry
```
可以使用以下命令来改变默认下载地址，从而达到不安装cnpm就能采用淘宝镜像的目的，然后使用上面的get命令查看是否设置成功。
```
npm config set registry https://registry.npm.taobao.org
```

安装CNPM

安装cnpm，命令：

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

安装后，使用以下命令测试是否安装成功：
```
cnpm -v
```
成功后，以后都使用 cnpm 代替以前 npm 来执行命令！

访问速度优化

图片加载优化

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

什么是预加载

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

缺点：会增加服务器压力

什么是懒加载

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

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

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

开始操作

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

在Hexo根目录执行

npm install hexo-lazyload-image --save

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

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行加上：

$(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：

<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：

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行修改为：

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

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

代码压缩优化

为什么要把代码压缩？

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

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

gulp实现代码压缩

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

# 全局安装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，并复制以下内容到文件中，有中文注释，可以根据自己需求修改。

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根目录执行安装代码：
```
npm install hexo-neat --save
```

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

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主题（其他主题自行解决）需要将以上默认配置修改为：

#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，非常适合博客网站使用。

用法：

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

例如：

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:<你的域名>，一般是搜不到的，然后点击 提交网址 将自己的网站提交给百度。

添加自己的站点到百度

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

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

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

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

向百度推送自己的资源

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

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

自动提交 （分三种）
- 主动推送
- 自动推送
- sitemap（站点地图）
手动提交
- 即手动地将链接一次性提交给百度

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

主动推送>自动推送>sitemap

自动提交的三种方式：

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

使用sitemap方式推送

安装sitemap插件

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

提交后会有状态提示：

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

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

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

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

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

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

自动推送方式

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

<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主题可以自动给每个页面加上这段代码，只需在主题配置文件中配置：

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

即可！

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

主动推送方式

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

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

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

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

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

再加入新的deploy：

deploy:
- type: baidu_url_submitter

如图：

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

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

谷歌收录

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

登录谷歌站长平台，添加自己的域名
DNS验证（就是验证下网站是不是你的）就是域名解析那里添加一条TXT解析记录
然后点击验证即可
再到谷歌的Search Console，添加自己的sitemap地址
接下来，等就是了

提交 robots.txt

robots.txt是干嘛的？

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

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

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如下：

# 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地址。

Hexo根目录执行：
```
npm install hexo-abbrlink --save
```

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

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

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

# 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结束标签的上方

例：

<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 文件中的自定义字体（额外加的字体），并将网站中用到的文字重新打包成一个新的字体文件，并自动引入；

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

安装

npm install font-spider -g

在 CSS 中使用 WebFont：

/*声明 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';
}

@font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成

开发阶段请使用相对路径的 CSS 与 WebFont

运行 font-spider 命令：

font-spider ./demo/*.html

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

Sky03

https://www.sky03.cn/posts/42790.html

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Sky03 !

Hexo

关于百度无法爬取GitHub内容解决方案

关于百度无法爬取GitHub内容解决方案既然百度无法爬取GitHub，那么我们只需要找个可以被百度爬取到的代码托管平台即可（并且还提供pages服务），基本只有国内的平台了：Gitee和Coding！Gitee自定义域名要花钱（九十多，都可

2019-11-13 Hexo

Hexo

超好用的软件插件网站集合

前言本贴收藏了很多个人觉得很好用的软件，或者你有好用的软件也可以在评论区留言。没有最好用的，只有最合适的人。持续更新中。。。软件系列markdown编写软件 Typora 支持Windows、Mac、Linux 暂时免费 Typo

2019-10-31 个人

软件

npm速度优化

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

安装CNPM

访问速度优化

图片加载优化

什么是预加载

什么是懒加载

开始操作

自定义loading图片

懒加载优化

代码压缩优化

为什么要把代码压缩？

gulp实现代码压缩

hexo-neat插件实现代码压缩

全站CDN加速

重点（敲黑板！）

SEO优化

百度收录

让百度收录你的站点

添加自己的站点到百度

向百度推送自己的资源

使用sitemap方式推送

自动推送方式

主动推送方式

谷歌收录

提交 robots.txt

robots.txt是干嘛的？

配置 Nofollow

URL优化

优化小技巧

异步加载JS

字蛛

使用场景

字蛛作用

安装

在 CSS 中使用 WebFont：

运行 font-spider 命令：

你的赏识是我前进的动力