概览

资源类型 文件大小 情景 加载时间 处理方式 前置准备
woff2字体文件 5M+ 一：放在source目录下，直接访问托管的github网站 20s+ 可以托管在国内的gitee上，但它会莫名封掉不让访问。并且hexo有部分应用依赖github。不考虑托管在国内 无
二：文件挂到七牛云存储上，https://s.qiniu.com/QVNJNf cdn 1.备案域名
2.域名证书
图片 大图 例如：toc_img和底部图 图片格式转为webp，工具：XnConvert
小图 例如自定义鼠标图 资源文件直接放在github托管的网站上，在source目录下
css中的可以通过相对路径引用，配置文件可以直接通过域名访问

字体图标

默认走的是jsdelivr

image-20230208204129705

图片

小图

小图还是别放免费图床了，完全属于负优化了，当然如果找到了serverResponse比较快的图床，还是可以的（如果付费图床自己做了cdn，还是放图床上吧）

image-20230208142736554

放图床上

image-20230208144250418

放github上

image-20230208144112258

放七牛云上

image-20230208144503840

对比可以看到，虽然七牛云的contentDownload最快，但由于是外链，有个200多ms的Queueing队列调度时间（这个是本站程序决定的），并且七牛云等待serverResponse的时间并不比github快

资源跨域图

image-20230208145129217

如果是文章里的外链图片，压缩成webp放在https://7bu.top/图床上（支持webp格式）

这个是付费的图床，做了cdn加速的，也不贵

图片还是不放在七牛云上了，就放个字体文件就行

文章图片懒加载

Hexo 图片懒加载 | 竹山一叶 (zsyyblog.com)

image-20230211135231325

CSS

处理自定义CSS文件

先在_config.yml忽略掉一些文件，避免发布纳入

1
2
3
4
exclude:
  - "custom/node_modules/**/*"
  - "custom/package.json"
  - "custom/bak/**/*"

配置 | Hexo

样例

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
# 处理或不处理目录或文件
include:
  - ".nojekyll"
  # 处理 'source/css/_typing.css'
  - "css/_typing.css"
  # 处理 'source/_css/' 中的任何文件，但不包括子目录及其其中的文件。
  - "_css/*"
  # 处理 'source/_css/' 中的任何文件和子目录下的任何文件
  - "_css/**/*"

exclude:
  # 不处理 'source/js/test.js'
  - "js/test.js"
  # 不处理 'source/js/' 中的文件、但包括子目录下的所有目录和文件
  - "js/*"
  # 不处理 'source/js/' 中的文件和子目录下的任何文件
  - "js/**/*"
  # 不处理 'source/js/' 目录下的所有文件名以 'test' 开头的文件，但包括其它文件和子目录下的单文件
  - "js/test*"
  # 不处理 'source/js/' 及其子目录中任何以 'test' 开头的文件
  - "js/**/test*"
  # 不要用 exclude 来忽略 'source/_posts/' 中的文件。你应该使用 'skip_render'，或者在要忽略的文件的文件名之前加一个下划线 '_'
  # 在这里配置一个 - "_posts/hello-world.md" 是没有用的。

ignore:
  # 忽略任何一个名叫 'foo' 的文件夹
  - "**/foo"
  # 只忽略 'themes/' 下的 'foo' 文件夹
  - "**/themes/*/foo"
  # 对 'themes/' 目录下的每个文件夹中忽略名叫 'foo' 的子文件夹
  - "**/themes/**/foo"

在source/custom使用webpack压缩文件

1
2
3
4
5
npm i webpack@4.41.6 webpack-cli@3.3.11 -D
npm i css-loader@3.4.2 style-loader@1.1.3 -D
npm i mini-css-extract-plugin@0.9.0 -D
npm i postcss-loader@3.0.0 postcss-preset-env@6.7.0 -D
npm i optimize-css-assets-webpack-plugin@5.0.3 -D

对应的webpack.config.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
const {resolve} = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
    entry: './js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '../css/custom.min.css'
        }),
        // 压缩css
        new OptimizeCssAssetsWebpackPlugin()
    ],
    mode: 'development'
}

js/index.js中引入原来写在配置文件中的css

1
2
3
4
5
6
7
8
9
10
11
import '../css/font.css';
import '../css/mouse.css';
import '../css/card_wx.css';
import '../css/scrollbar.css';
import '../css/windmill.css';
import '../css/optimize.css';
import '../css/video.css';
import '../css/universe.css';
import '../css/rightMenu.css';
import '../css/cat.css';

注意css中不要写相对路径，直接写source下一级的路径/custom/css/...即可，否则打包会不认识webp格式

运行npx webpack打包，在css目录中生成了custom.min.css

在配置文件中引入这一个css文件即可

注意：我们在写样式类名和id名时，尽量保持唯一不要重复