更新记录

在2022.1jsd出了一些事，导致速度大不如前（甚至起到反效果）所以将jsd加速换为npm+饿了么加速

参考教程

糖果屋优化访问日记里面的部分内容（写的很详细，推荐去看）

摘要

摘要

1、npm+饿了么网宿

更换jsd

2、图片压缩

压缩图片工作流

3、Gulp 压缩全站静态资源

gulp的优缺点，并将其安装使用

4、合并css

合并css的方式

5、手机端优化

通过css进行优化

6、镜像站支持

verce，gitee，conding

7、PWA

糖果屋的教程

8、杂项

调整主题配置

8.1、instantpage（预加载）
8.2、默认图片更改
8.3、Pangu(文字格式优化)
8.4、pjax

正文

CDN 加速（已失效）

butterflu默认的一些文件不会用jd加速所以请自行更改

2021.1.26更新：npm+饿了么网宿

其实把npm当图床也不错（就是麻烦一点）可npm每一个包好像有大小限制，但你可以无限创建npm包啊，那不就等于无限储存空间吗

首先你需要知道如何创建一个npm包并使用饿了么网宿加速，在这方面已经有很完善的教程了，请移步至npm图床的使用技巧学习

接下来的教程请确保你已经学会了npm图床的用法，并且能做到使用饿了么网宿加速

第一步：确定你的浏览器(我用的是谷歌浏览器，但推荐火狐)

第二部：打开你的博客并按下F12打开控制台，找到”网络“点击，它会让你重新刷新一次，刷新后，你可以看到每一个文件加载的顺序以及大小，速度等等

第三步：在里面找速度很慢的加载项文件，双击，就可以看到具体的属性，复制它的文件名

第四步：去butterflu配置文件中搜索你刚刚复制的文件名，找到相应的源，复制在浏览器打开，一会看到一堆乱七八糟的玩意，不管ctrl+a全选ctrl+c复制

第五步：新建一个npm包，根据被复制文件的后缀新建一个相同名称的文件，并将刚刚复制的内容粘贴进去即可，重复以上步骤把所有推延加载速度的文件换成npm+饿了么网宿加速

如果实在看不懂，我的qq：3378216360（不收费）或者F12查看我的文件源

图片压缩

用imagine进行有损压缩后，再用格式工厂转换为web格式

2022.1.26更新，不需要imagine压缩，直接用格式工厂转web即可！

Gulp 压缩全站静态资源

gulp 能够帮助用户自动压缩静态资源，配合各类下属插件，能够压缩包括 css、js、html 乃至各类格式的图片文件。（图片文件的压缩效果远远不如上文提到的压缩方法，所以此处不再写使用 gulp 压缩图片的内容）

安装 Gulp 插件：在博客根目录 [Blogroot] 打开终端，输入：

1
2
npm install --global gulp-cli #全局安装gulp指令集
npm install gulp --save #安装gulp插件

安装各个下属插件以实现对各类静态资源的压缩。
压缩 HTML：

1
2
3
npm install gulp-htmlclean --save-dev
npm install gulp-html-minifier-terser --save-dev
# 用gulp-html-minifier-terser可以压缩HTML中的ES6语法

压缩 CSS：

1
npm install gulp-clean-css --save-dev

压缩JS：

1
npm install gulp-terser --save-dev

为 Gulp 创建 gulpfile.js 任务脚本。在博客根目录 [Blogroot] 下新建 gulpfile.js, 打开 [Blogroot]\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
//用到的各个插件
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var htmlmin = require('gulp-html-minifier-terser');
var htmlclean = require('gulp-htmlclean');
// gulp-tester
var terser = require('gulp-terser');
// 压缩js
gulp.task('compress', () =>
  gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
    .pipe(terser())
    .pipe(gulp.dest('./public'))
)
//压缩css
gulp.task('minify-css', () => {
    return gulp.src(['./public/**/*.css'])
        .pipe(cleanCSS({
            compatibility: 'ie11'
        }))
        .pipe(gulp.dest('./public'));
});
//压缩html
gulp.task('minify-html', () => {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true, //清除html注释
            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"
            minifyJS: true, //压缩页面 JS
            minifyCSS: true, //压缩页面 CSS
            minifyURLs: true  //压缩页面URL
        }))
        .pipe(gulp.dest('./public'))
});

// 运行gulp命令时依次执行以下任务
gulp.task('default', gulp.parallel(
  'compress', 'minify-css', 'minify-html'
))

运行如下指令即可实现压缩上传

1
hexo cl && hexo g && gulp && hexo d

合并CSS

注意：并不推荐这种方法，你还不如少减少魔改的css来的直接

将魔改样式整合到 index.css 文件内，减少对服务器的请求次数。

在 [Blogroot]\themes\butterfly\source\css\ 路径下新建_custom 文件夹，然后把魔改样式的 CSS 文件拖动进去。文件目录层级可以表示为以下情况：

1
2
3
4
5
6
7
source
  |__ css
     |__ _custom
        |__ custom1.css
        |__ custom2.css
        |__ custom3.css
     |__ index.styl

在 [[Blogroot]\themes\butterfly\source\css\index.styl 中新增一行代码:@import ‘_custom/你的css文件名.css’,如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
if hexo-config('css_prefix')
  @import 'nib'
  @import '_third-party/normalize.min.css'
// project
@import 'var'
@import '_global/*'
@import '_highlight/highlight'
@import '_page/*'
@import '_layout/*'
@import '_tags/*'
@import '_mode/*'

// search
if hexo-config('algolia_search.enable')
  @import '_search/index'
  @import '_search/algolia'

if hexo-config('local_search') && hexo-config('local_search.enable')
  @import '_search/index'
  @import '_search/local-search'
// My css
    @import "_custom/custom.css";

其中// My css为我的css
如果是外链

1
@import 'https://cdn.jsdelivr.net/gh/username/repo/css/example.css'

注意：如果不生效请检查jd的缓存

手机端优化

请将如下css添加进你引入的css中

1
2
3
4
5
6
7
8
/*移动端优化：去除归档、标签、最新文章、公告、、只保留网站统计*/

@media screen and (max-width: 800px) {
    #aside_content div:not(:last-child) {
        display: none;
        font-size: 13px;
    }
}

镜像站支持

目前用的人比较多的有

  • vercel：推荐，免费，快速
  • gitee：不建议使用，类似GitHub，在国内访问速度快且稳定
  • conding：不推荐，已被腾讯收购

使用方式请自行谷歌

PWA

糖果屋教程https://akilar.top/posts/8f31c3d0/

杂项

其实在主题配置中也有许多的设置可以优化访问速度

instantpage（预加载）

找到instantpage将其开启

1
instantpage: true

当鼠标悬停到链接上超过 65 毫秒时，Instantpage 会对该链接进行预加载，可以提升访问速度。

默认图片更改

找到default_top_img将其改为自用图片

图片记得按照步骤2进行压缩

1
default_top_img: 这里填写你的图片链接

Pangu(文字格式优化)

找到pangu将其开启

它会自动替你在网页中所有的中文字和半形的英文、数字、符号之间插入空白。

1
2
3
pangu:
  enable: false
  field: post # site/post

取消文章顶部图

找到disable_top_img将其开启

可以使文章页加载速度提升

1
disable_top_img: true

Pjax

通过 ajax 和 pushState 技术提供了极速的（无刷新 ajax 加载）浏览体验，并且保持了真实的地址、网页标题，浏览器的后退（前进）按钮也可以正常使用

开启只需要在 _config.butterfly.yml 中 开启 pjax

1
2
3
4
5
pjax:
  enable: true
  exclude:
    # - xxxx
    # - xxxx

结尾

恭喜，你的博客已经完成了优化，可这并不代表结束，我的这篇文章仅仅针对自己的博客需求，如果你想获得更好的体验请自行谷歌教程