Skip to content

更新blog使用vitepress

1. 写作工作流

  1. 用 VS Code 以Markdown格式写作
  2. 用 vitepress 发布

TIP

vitepress 有一些特殊的markdown扩展可以增强表现力。 参见 https://vitepress.dev/guide/markdown#custom-containers

在markdown的开头,可以添加frontmatter来描述当前文章的属性。 例如:

yaml
---
date: 2023-12-20
title: "更新blog使用vitepress"
tags:
   - "vitepress"
   - "markdown"
description: "把之前jekyll的blog移植到vitepress了,记录下vitepress下写blog的工作流。"
---

其中description是可选的。 当description没有的时候,在blog列表中,会自动提取markdown文件的前100字符作为description。

2. 画图

  • excalidraw表现力丰富,是一个不错的选择。
  • mermaid 语法简单,使用方便,画技术类示意图推荐。 🧜‍♀️
  • emoji 表情符号
  • 插入外部图片文件

2.1. excalidraw

  1. 在logseq或者其它画图工具中画excalidraw图
  2. 画的差不多满意时候,导出 svg 内容到剪切板
  3. 将copy的svg粘贴到markdown文本里,用一个div包起来,就可以在blog中展示了(原因是vitepress支撑内嵌html)

注意

  1. svg的宽和高两个属性最好调整成百分比,例如80%,这样可以自适应缩放。
  2. svg元素中的style不支持。需要删掉。
。◕‿◕。Group

2.2. mermaid

mermaid支持的diagram类型丰富

  • Flowchart
  • Sequence Diagram
  • Class Diagram
  • State Diagram
  • Entity Relationship Diagram
  • User Journey
  • Gantt
  • Pie Chart
  • Quadrant Chart
  • Requirement Diagram
  • Gitgraph (Git) Diagram 🔥
  • C4 Diagram 🦺⚠️
  • Mindmaps 🔥
  • Timeline 🔥
  • Zenuml 🔥
  • Sankey 🔥
  • XYChart 🔥

下面是三个例子。

null

PS. 上述订制版本西红柿鸡蛋mermaid配色致敬Rational Rose 🌹

null
null

2.3. Emoji

Mac下,按 Control + Command + Space 打开表情符号和符号视图,然后可以选择或搜索所需的 Unicode 字符。

2.4. 插入外部图片文件

在VS Code中编辑时候,直接粘贴图片文件到需要插入的位置。VS Code会把图片文件放在markdown文件相同目录下,并且自动在插入位置生成markdown中展示图片的链接。 用vitepress build时候,该图片会自动被copy到assets目录下发布。

3. 使用VUE控件

Markdown Content

The count is: 0

5. TODO

后续考虑添加下面的功能。

  • PDF下载:支持以pdf格式下载某一篇文章。
  • 分享:支持文章分享。

6. 致谢

网站使用了如下软件模块, 特此致谢: