更新blog使用vitepress

1. 写作工作流

用 VS Code 以Markdown格式写作
用 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

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

注意

svg的宽和高两个属性最好调整成百分比，例如80%，这样可以自适应缩放。
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

2.3. Emoji

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

2.4. 插入外部图片文件

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

3. TODO

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

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

4. 致谢

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

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

更新blog使用vitepress

1. 写作工作流 ​

2. 画图 ​

2.1. excalidraw ​

2.2. mermaid ​

2.3. Emoji ​

2.4. 插入外部图片文件 ​

3. TODO ​

4. 致谢 ​