叉叉白
首页
朋友们
留言板
关于我
GitHub (opens new window)

MonoLogueChi

菜鸡程序员
首页
朋友们
留言板
关于我
GitHub (opens new window)
  • 自己组建一个多功能导播台
  • 自己开发一个vuepress插件
  • 用Scoop安装一些实用工具
  • 博客现在的一些情况
    • 迁移博客平台
      • 放弃 Hexo 的原因
      • 迁移博客平台做的一些事情
    • 博客现在的一些情况
      • VuePress
      • 自定义样式
      • 媒体插件
      • LaTeX
      • CI
    • 后续
  • Docker安装Caddy使用自定义插件
  • FMP4、HLS和DASH视频生成
  • 使用 GitHub Actions 将博客部署到 GitHub Page
  • 使用 GitHub Actions 将博客部署到又拍云
  • 2022
MonologueChi
2022-02-15
目录

博客现在的一些情况

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

# 迁移博客平台

# 放弃 Hexo 的原因

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

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

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

  1. 复制 MarkDown 文件到新的位置
  2. 迁移图片和其他静态资源到新的位置
  3. 批量修改 MarkDown 文件中的静态资源路径
  4. 逐个修改 MarkDown 文件的 front matter,包括修正格式(VuePress 一些写法和 Hexo 有点区别),固定链接(博客在搜索引擎收录页面不少,舍不得这些收录)
  5. 配置新的博客
  6. 测试,处理文章中不兼容的写法
  7. 修改 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文件 (opens new window)
#建站笔记
上次更新: 4/17/2022, 3:20:02 PM
用Scoop安装一些实用工具
Docker安装Caddy使用自定义插件

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

最近更新
01
使用 GitHub Actions 将博客部署到又拍云
03-09
02
使用 GitHub Actions 将博客部署到 GitHub Page
03-09
03
FMP4、HLS和DASH视频生成
03-01
更多文章>
Theme by Vdoing | Copyright © 2016-2022 MonoLogueChi | CC BY-NC-SA 4.0
本站由 提供 CDN 加速 / 云存储服务
蒙ICP备17004911号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式