博客现在的一些情况

MonoLogueChi建站笔记大约 8 分钟

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

迁移博客平台

放弃 Hexo 的原因

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

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

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

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

博客现在的一些情况

VuePress

我的博客目前使用的是 VuePress 1.xopen in new window + vuepress-theme-vdoingopen in 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,
  };
// 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主题改动和新增的配置 ***//

  categories: 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标签
  },
};
// 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-mmediaopen in new window,这次更换平台,就顺带开发了一款插件 vuepress-plugin-smplayeropen in new window

LaTeX

LaTeXLaTeX 插件使用了 markdown-it-mathjax3open in new window

ab±cd=ad±bcbd \frac{a}{b}\pm \frac{c}{d}= \frac{ad \pm bc}{bd}

\ceSO42+Ba2+>BaSO4v \ce{SO4^2- + Ba^2+ -> BaSO4 v}

sinα+sinβ=2sinα+β2cosαβ2 \sin \alpha + \sin \beta =2 \sin \frac{\alpha + \beta}{2}\cos \frac{\alpha - \beta}{2}

\ce{Zn^2+ <=>[+ 2OH-][+ 2H+] $\underset{\text{amphoteres Hydroxid}}{\ce{Zn(OH)2 v}}$ <=>[+ 2OH-][+ 2H+] $\underset{\text{Hydroxozikat}}{\ce{[Zn(OH)4]^2-}}$}

CI

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

目前来说,我使用的包管理工具是 pnpmopen in 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"

后续

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

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

还有就是自己写的插件 vuepress-plugin-smplayeropen in new window 目前还有优化的空间,还需要再完善一下。

Loading...