博客现在的一些情况
大约 8 分钟
今年 (2022 年) 年初将博客从 Hexo 迁移到了 VuePress，简单介绍一下博客现在的情况，以及 VuePress 配置的一些技巧。
迁移博客平台
放弃 Hexo 的原因
放弃 Hexo 大概有这么几点原因
- 没有心仪的主题，我的博客以前一直再用 yilia 主题，但是这个主题已经没人维护了，我自己用的就是我自己捡起来修修补补搞出来的一个版本。但是我自己水平有限，只能修改一些简单的东西，核心是不会搞的，我这种水平维护一个主题，始终是个隐患。
- Hexo 的坑太多了，我自己开发插件 hexo-tag-mmedia 的时候深深的体会到了 Hexo 的坑太多了。
- VuePress 用来写博客，条件也比较成熟了，主要是有一款心仪的主题 vuepress-theme-vdoing。
迁移博客平台做的一些事情
- 复制 MarkDown 文件到新的位置
- 迁移图片和其他静态资源到新的位置
- 批量修改 MarkDown 文件中的静态资源路径
- 逐个修改 MarkDown 文件的 front matter，包括修正格式（VuePress 一些写法和 Hexo 有点区别），固定链接（博客在搜索引擎收录页面不少，舍不得这些收录）
- 配置新的博客
- 测试，处理文章中不兼容的写法
- 修改 CI，重新部署
博客现在的一些情况
VuePress
我的博客目前使用的是 VuePress 1.x + vuepress-theme-vdoing。
因为以前我其他的站点就在用这套组合，所以说配置起来也不难，简单说一点配置心得。
这套组合是可以使用 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,
};
// 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",
},
],
];
// 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": {},
};
// 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 });
},
};
// 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&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标签
},
};
// 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" },
];
我个人感觉，把配置文件拆分，无论是看起来，还是用起来，都是非常方便。
自定义样式
因为我比较喜欢极简风格，主题的一些默认样式不适合我，简单自定义一点
/* .vuepress/styles/palette.styl */
// 布局
$navbarHeight = 3.6rem
$sidebarWidth = 18rem
$contentWidth = 960px
$homePageWidth = 1280px
.home-wrapper .banner {
min-height: 50px !important
height: 50px
}
媒体插件
我博客里会插入一些视频文件，以前用 Hexo 的时候就自己开发了 hexo-tag-mmedia，这次更换平台，就顺带开发了一款插件 vuepress-plugin-smplayer。
LaTeX
CI
以前的 CI 平台用的是 Azure Pipelines，前年也曾经写过一篇文章介绍过。这次趁着迁移博客平台，顺带也把 CI 更换到了 GitHub。
目前来说，我使用的包管理工具是 pnpm，博客同时部署在又拍云和 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"
后续
博客迁移基本上完成了，后修就是一些修修补补的工作了
评论区这里还在考虑要不要完善一些，打算迁移到 Vssue，但是不太喜欢 Vssue 现在的样式，应该会重写一些样式，后面慢慢来搞吧。
还有就是自己写的插件 vuepress-plugin-smplayer 目前还有优化的空间，还需要再完善一下。