博客现在的一些情况

今年 (2022 年) 年初将博客从 Hexo 迁移到了 VuePress，简单介绍一下博客现在的情况，以及 VuePress 配置的一些技巧。

# 迁移博客平台

# 放弃 Hexo 的原因

放弃 Hexo 大概有这么几点原因

没有心仪的主题，我的博客以前一直再用 yilia 主题，但是这个主题已经没人维护了，我自己用的就是我自己捡起来修修补补搞出来的一个版本。但是我自己水平有限，只能修改一些简单的东西，核心是不会搞的，我这种水平维护一个主题，始终是个隐患。
Hexo 的坑太多了，我自己开发插件 hexo-tag-mmedia (opens new window) 的时候深深的体会到了 Hexo 的坑太多了。
VuePress 用来写博客，条件也比较成熟了，主要是有一款心仪的主题 vuepress-theme-vdoing (opens new window)。

# 迁移博客平台做的一些事情

复制 MarkDown 文件到新的位置
迁移图片和其他静态资源到新的位置
批量修改 MarkDown 文件中的静态资源路径
逐个修改 MarkDown 文件的 front matter，包括修正格式（VuePress 一些写法和 Hexo 有点区别），固定链接（博客在搜索引擎收录页面不少，舍不得这些收录）
配置新的博客
测试，处理文章中不兼容的写法
修改 CI，重新部署

# 博客现在的一些情况

# VuePress

我的博客目前使用的是 VuePress 1.x (opens new window) + vuepress-theme-vdoing (opens new window)。

因为以前我其他的站点就在用这套组合，所以说配置起来也不难，简单说一点配置心得。

这套组合是可以使用 ts 配置文件的，而且我拆分了配置文件，这样看起来清晰。我觉得配置文件是人和程序的接口，既要给机器看，更要给 “人” 看，“人” 看起来清晰才是最重要的。

我在 .vuepress 目录下创建 config 目录，将拆分的配置文件放在里面。

// config.ts

import { defineConfig4CustomTheme } from "vuepress/config";
import { VdoingThemeConfig } from "vuepress-theme-vdoing/types";
import themeConfig from "./config/themeConfig";
import markdown from "./config/markdown";
import plugins from "./config/plugins";
import head from "./config/head";

export default defineConfig4CustomTheme <
  VdoingThemeConfig >
  {
    title: "叉叉白",
    description: "一个小白的技术博客",
    dest: "dist",
    shouldPrefetch: () => false,
    theme: "vdoing",
    head,
    themeConfig,
    markdown,
    plugins,
  };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// config/head.ts

import { HeadTags } from "vuepress/config";
export default <HeadTags>[
  ["link", { rel: "icon", href: "/assets/img/favicon.png" }],
  [
    "meta",
    {
      name: "viewport",
      content: "width=device-width,initial-scale=1,user-scalable=no",
    },
  ],
];

1
2
3
4
5
6
7
8
9
10
11
12
13

// config/plugins.ts

import { UserPlugins } from "vuepress/config";

export default <UserPlugins>{
  sitemap: { hostname: "https://blog.xxwhite.com" },
  smplayer: {},
  pangu: {},
  "one-click-copy": {
    copySelector: [
      'div[class*="language-"] pre',
      'div[class*="aside-code"] aside',
    ],
    copyMessage: "复制成功",
    duration: 1000,
    showInMobile: false,
  },
  "vuepress-plugin-zooming": {
    selector: ".theme-vdoing-content img:not(.no-zoom)", // 排除class是no-zoom的图片
    options: {
      bgColor: "rgba(0,0,0,0.6)",
    },
  },
  "fulltext-search": {},
};

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

// config/markdown.ts

import { MarkdownConfig } from "vuepress/config";

export default <MarkdownConfig>{
  lineNumbers: true,
  plugins: [
    "markdown-it-sub",
    "markdown-it-sup",
    "markdown-it-footnote",
    "markdown-it-task-lists",
    "markdown-it-attrs",
    "markdown-it-imsize",
    "markdown-it-mathjax3",
  ],
  extendMarkdown: (md) => {
    md.set({ breaks: true });
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// config/vdoingThemeConfig.ts

import nav from "./nav";
import { VdoingThemeConfig } from "vuepress-theme-vdoing/types";

export default <VdoingThemeConfig>{
  nav,
  sidebarDepth: 2, // 侧边栏显示深度，默认1，最大2（显示到h3标题）
  //logo: '/img/EB-logo.png', // 导航栏logo
  repo: "MonoLogueChi/blog.xxwhite.com", // 导航栏右侧生成Github链接
  searchMaxSuggestions: 10, // 搜索结果显示最大数
  lastUpdated: "上次更新", // 更新的时间，及前缀文字   string | boolean (取值为git提交时间)
  docsDir: "docs", // 编辑的文件夹
  editLinks: true, // 启用编辑
  editLinkText: "查看MD文件",

  //*** 以下配置是Vdoing主题改动和新增的配置 ***//

  category: true, // 是否打开分类功能，默认true。 如打开，会做的事情有：1. 自动生成的front matter包含分类字段 2.页面中显示与分类相关的信息和模块 3.自动生成分类页面（在@pages文件夹）。如关闭，则反之。
  tag: true, // 是否打开标签功能，默认true。 如打开，会做的事情有：1. 自动生成的front matter包含标签字段 2.页面中显示与标签相关的信息和模块 3.自动生成标签页面（在@pages文件夹）。如关闭，则反之。
  archive: true, // 是否打开归档功能，默认true。 如打开，会做的事情有：1.自动生成归档页面（在@pages文件夹）。如关闭，则反之。
  // categoryText: '随笔', // 碎片化文章（_posts文件夹的文章）预设生成的分类值，默认'随笔'
  // bodyBgImg: [
  //   'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175828.jpeg',
  //   'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175845.jpeg',
  // ], // body背景大图，默认无。 单张图片 String || 多张图片 Array, 多张图片时每隔15秒换一张。
  // bodyBgImgOpacity: 0.5, // body背景图透明度，选值 0 ~ 1.0, 默认0.5
  // titleBadge: true, // 文章标题前的图标是否显示，默认true
  // titleBadgeIcons: [ // 文章标题前图标的地址，默认主题内置图标
  //   '图标地址1',
  //   '图标地址2'
  // ],
  // contentBgStyle: 1, // 文章内容块的背景风格，默认无。 1 => 方格 | 2 => 横线 | 3 => 竖线 | 4 => 左斜线 | 5 => 右斜线 | 6 => 点状
  sidebarOpen: true, // 初始状态是否打开侧边栏，默认true
  updateBar: {
    // 最近更新栏
    showToArticle: true, // 显示到文章页底部，默认true
    moreArticle: "/", // “更多文章”跳转的页面，默认'/archives'
  },
  pageButton: true, // 是否显示快捷翻页按钮，默认true

  sidebar: { mode: "structuring", collapsable: false }, // 侧边栏  'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | 自定义
  author: {
    // 文章默认的作者信息，可在.md文件front matter中单独配置此信息 String | {name: String, link: String}
    name: "MonologueChi", // 必需
    link: "https://blog.xxwhite.com", // 可选的
  },
  blogger: {
    // 博主信息，显示在首页侧边栏
    avatar: "/assets/img/avatar.jpg",
    name: "MonoLogueChi",
    slogan: "菜鸡实习生",
  },
  social: {
    // 社交图标，显示于博主信息栏和页脚栏
    // iconfontCssFile: '//at.alicdn.com/t/font_1678482_u4nrnp8xp6g.css', // 可选，阿里图标库在线css文件地址，对于主题没有的图标可自由添加
    icons: [
      {
        iconClass: "icon-QQ",
        title: "QQ",
        link: "/assets/html/qq-groups.html",
      },
      {
        iconClass: "icon-bilibili",
        title: "哔哩哔哩",
        link: "https://space.bilibili.com/28474682",
      },
      {
        iconClass: "icon-github",
        title: "GitHub",
        link: "https://github.com/MonoLogueChi",
      },
      {
        iconClass: "icon-v2ex",
        title: "v2ex",
        link: "https://www.v2ex.com/member/MonoLogueChi",
      },
      {
        iconClass: "icon-youjian",
        title: "发邮件",
        link: "mailto:xxwhite@foxmail.com",
      },
    ],
  },
  footer: {
    // 页脚信息
    createYear: 2016, // 博客创建年份
    copyrightInfo: `
      <a href='https://blog.xxwhite.com' target='_blank'>MonoLogueChi</a> | <a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' rel='external nofollow' target='_blank'>CC BY-NC-SA 4.0</a>
      <br>
      本站由 <a href='https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral' target='_blank'><img src='/assets/img/upyun.png' height='20px' style="vertical-align:middle"> </a>提供 CDN 加速 / 云存储服务
      <br>
      <a href="http://beian.miit.gov.cn/" target="_blank">蒙ICP备17004911号-1</a>
    `, // 博客版权信息，支持a标签
  },
};

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

// config/nav.ts

import { NavItem } from "vuepress/config";

export default <Array<NavItem>>[
  { text: "首页", link: "/" },
  { text: "朋友们", link: "/pages/friends.html" },
  { text: "留言板", link: "/pages/MessageBoard.html" },
  { text: "关于我", link: "/pages/aboutme.html" },
];

1
2
3
4
5
6
7
8
9
10

我个人感觉，把配置文件拆分，无论是看起来，还是用起来，都是非常方便。

# 自定义样式

因为我比较喜欢极简风格，主题的一些默认样式不适合我，简单自定义一点

/* .vuepress/styles/palette.styl */

// 布局
$navbarHeight = 3.6rem
$sidebarWidth = 18rem
$contentWidth = 960px
$homePageWidth = 1280px

.home-wrapper .banner {
    min-height: 50px !important
    height: 50px
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 媒体插件

我博客里会插入一些视频文件，以前用 Hexo 的时候就自己开发了 hexo-tag-mmedia (opens new window)，这次更换平台，就顺带开发了一款插件 vuepress-plugin-smplayer (opens new window)。

# LaTeX

插件使用了 markdown-it-mathjax3 (opens new window)。

# CI

以前的 CI 平台用的是 Azure Pipelines (opens new window)，前年也曾经写过一篇文章介绍过。这次趁着迁移博客平台，顺带也把 CI 更换到了 GitHub。

目前来说，我使用的包管理工具是 pnpm (opens new window)，博客同时部署在又拍云和 github page 上，DNS 做分流解析，国内解析到又拍云，国外解析到 github page。

# github/workflows/deploy.yml

name: deploy

# 在master分支发生push事件时触发。
on:
  push:
    branches:
      - master

env: # 设置环境变量
  TZ: Asia/Shanghai # 时区（设置时区可使页面中的`最近更新时间`使用时区时间）

jobs:
  build: # 自定义名称
    runs-on: ubuntu-latest # 运行在虚拟机环境ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Setup Pnpm
        uses: pnpm/action-setup@v2
        with:
          version: latest
          run_install: true

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: "16.x"
          cache: "pnpm"

      - run: pnpm run build

      - run: wget -O upx.tar.gz http://collection.b0.upaiyun.com/softwares/upx/upx_0.3.6_linux_x86_64.tar.gz
      - run: tar -zxf upx.tar.gz
      - run: chmod +x upx
      - run: ./upx login ${{ secrets.UP_BUCKET }} ${{ secrets.UP_OPERATOR }} ${{ secrets.UP_OPERATOR_PASSWORD }}
      - run: ./upx sync dist/ / --delete
      - run: ./upx logout

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          publish_dir: ./dist
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          user_name: "github-actions[bot]"
          user_email: "github-actions[bot]@users.noreply.github.com"

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

# 后续

博客迁移基本上完成了，后修就是一些修修补补的工作了

评论区这里还在考虑要不要完善一些，打算迁移到 Vssue，但是不太喜欢 Vssue 现在的样式，应该会重写一些样式，后面慢慢来搞吧。

还有就是自己写的插件 vuepress-plugin-smplayer (opens new window) 目前还有优化的空间，还需要再完善一下。

查看MD文件

#建站笔记

上次更新: 4/17/2022, 3:20:02 PM

← 用Scoop安装一些实用工具 Docker安装Caddy使用自定义插件→