1. 写作工作流

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

TIP

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

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

---
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不支持。需要删掉。

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. 致谢

网站使用了如下软件模块， 特此致谢：

• 静态网站生成器 vitepress
• Blog Theme借鉴了vitepress-blog-pure
• 评论系统使用artalk
• mermaid vitepress扩展
• 使用了 https://www.jinrishici.com/ 的API服务
• GitHub 提供主机空间