Hexo 博客搭建

daiwenzh5
前端Hexo

发布于：2020年5月11日
次浏览

文章摘要

为了在列表页面隐藏全文，实现“阅读全文”的折叠按钮，需要在 md 文件上手动添加标记  <!-- more -->，对文件本身产生了侵入，更好的方式是通过  npm install hexo-excerpt --save  插件，来实现自动根据目录层级生成摘要。

1
2
3
4
5
excerpt:
  depth: 2
  excerpt_excludes: []
  more_excludes: []
  hideWholePostExcerpts: true

文章路径

默认的路径中若包含中文，将会生成又臭又长的一段字符串，影响阅读体验。
使用  npm install hexo-abbrlink --save 插件，可以自动地将文章标题映射成一串短字符串。

1
2
3
4
5
6
7
# 源路径生成跪在，:key 表示动态值
# permalink: :year/:month/:day/:title/
permalink: :year/:month/:day/:abbrlink.html
## 启用算法生成不重复文件编号
abbrlink:
  alg: crc132 #算法： crc16(default) and crc32
  rep: hex # dec为十进制，hex为十六进制

RSS 订阅

RSS 虽然小众，却能带来很好的阅读体验，因为订阅的权力是面向读者的，且不会有广告之类的阅读干扰。
使用  npm install hexo-generator-feed --save  插件可以自动生成支持 RSS 订阅的 XML 文件。

1
2
3
4
feed:
  type: atom
  path: atom.xml
  limit: 20

PWA 支持

hexo-service-worker 插件

安装

1
npm install hexo-service-worker --save

介绍

该插件是 hexo-offline 的改进版，具有相同的配置以及更强的功能。同样，我在其仓库的文档中并没有找到 sw.js 的配置入口，因此采用了手动注册（sw.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
### _config.yml
import:
  # meta:
		# ...
  link:
    - <link rel="shortcut icon" href="/favicon.ico">
    - <link rel="manifest" href="/manifest.json">
  script:
    - <script src="/sw-register.js"/>
    - <script src="/sw.js"/>

# offline config passed to sw-precache.
service_worker:
  maximumFileSizeToCacheInBytes: 5242880
  staticFileGlobs:
  - public/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}
  stripPrefix: public
  verbose: true
  ## 缓存策略，支持列表
  runtimeCaching:
    - urlPattern: /**/*
      handler: cacheFirst
      options:
        origin: imgchr.com
    - urlPattern: /**/*
      handler: cacheFirst
      options:
        origin: cdn.jsdelivr.net

资源

sw-register.js
sw.js

需要注意此文件头部的变量（用于定义要缓存的资源），可能要调整。

hexo-pwa 插件

不想降级 hexo， 已放弃使用的改插件了，/(ㄒ o ㄒ)/~~

安装

1
npm install hexo-pwa --save

bash

介绍

该插件已经年久失修了， 上次提交 23429d1（截止 2020-03-21），该插件尚且不兼容  hexo@4.2.0，降级后可正常使用。

插件地址

1
2
3
4
# 查看版本
hexo -version
# 安装指定版本
npm install hexo@4.1.1 --save

配置

需要指定 manifest.json 文件及 sw.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
pwa:
  manifest:
    path: /manifest.json
    body:
      name: "名称"
      short_name: "短名称"
      theme_color: "主题颜色，标题栏颜色"
      background_color: "背景色"
      display: "standalone"
      Scope: "/"
      start_url: "/"
      icons:
        - src: /images/logos/48.png
          sizes: 48x48
          type: image/png
        - src: /images/logos/96.png
          sizes: 96x96
          type: image/png
        - src: /images/logos/128.png
          sizes: 128x128
          type: image/png
        - src: /images/logos/144.png
          sizes: 144x144
          type: image/png
        - src: /images/logos/192.png
          sizes: 192x192
          type: image/png
        - src: /images/logos/512.png
          sizes: 512x512
          type: image/png
  serviceWorker:
    path: /sw.js
    preload:
      urls:
        - /
      posts: 5
    opts:
      networkTimeoutSeconds: 5
    routes:
      - pattern: !!js/regexp /hm.baidu.com/
        strategy: networkOnly
      - pattern: !!js/regexp /.*\.(js|css|jpg|jpeg|png|gif)$/
        strategy: cacheFirst
      - pattern: !!js/regexp /\//
        strategy: networkFirst
  priority: 5

图标

需要不同尺寸的图标，推荐使用 svg 图片导出不同尺寸，白嫖的 Logo 设计网站：生成好图片后，F12 打开“元素”面板，选中图片，复制出 svg 标签使用 TXT 文本另存为 logo.svg。此时可以使用 AI 来处理，矢量图的好处就是可以无损的进行放大（于 2020-05-12）。

清单

需要添加 manifest.json 到 sources 目录下，并在模板中手动引用。

1
2
3
import:
  link:
    - "<link rel='manifest' href='/manifest.json'>"
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
{
  "name": "名称",
  "short_name": "短名称",
  "theme_color": "主题色，标题栏颜色",
  "background_color": "背景色",
  "display": "standalone",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "相对 sources 的图片地址",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "相对 sources 的图片地址",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "相对 sources 的图片地址",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "相对 sources 的图片地址",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "相对 sources 的图片地址",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "相对 sources 的图片地址",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

脚本

需要添加 sw.js 到 sources 目录下。

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
const workboxVersion = "5.0.0";
importScripts(
  `https://storage.googleapis.com/workbox-cdn/releases/${workboxVersion}/workbox-sw.js`
);

if (workbox) {
  workbox.setConfig({
    modulePathPrefix: `https://storage.googleapis.com/workbox-cdn/releases/${workboxVersion}`,
  });

  workbox.precaching.precache(["/", "/index.html"]);

  workbox.routing.registerRoute(
    new RegExp("^https?://博客地址/?$"),
    workbox.strategies.networkFirst()
  );

  workbox.routing.registerRoute(
    new RegExp(".*.html"),
    workbox.strategies.networkFirst()
  );

  workbox.routing.registerRoute(
    new RegExp(".*.(?:js|css)"),
    workbox.strategies.staleWhileRevalidate()
  );

  workbox.routing.registerRoute(
    new RegExp("https://imgchr.com/"),
    workbox.strategies.cacheFirst()
  );

  workbox.routing.registerRoute(
    new RegExp("https://cdn.jsdelivr.net/"),
    workbox.strategies.cacheFirst()
  );
}

语雀文章获取

使用

参加插件官方配置

标签使用

语雀本身的  🔖（标签组件）只会被渲染成普通的字符串，必须通过手动添加 front-matter  才可以。

1
2
3
4
tags: [标签 1, 标签 2]
categories: [一级分类, 二级分类]

---

在语雀中，可以配合 🔖 字符串形式，如本文中使用方式：
image.png

图片防盗链处理

添加  <meta name="referrer" content="no-referrer" />  到模板 head 可解决。

1
2
3
4
# blog/_config.yml
import:
  meta:
    - <meta name="referrer" content="no-referrer"/>

参见插件官方 issue 

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：http://daiwenzh5.github.io/2020/05/11/yuque/Hexo%20%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/

更新于：2022年4月17日

Hexo

Blog

Github Pages

语雀

评论