让文章页面的内容更加丰富

起因是在浏览众多博客的过程中发掘现在的文字总是枯燥大段的文本而且还有浓重的ai味

所以为了能够在文章页面中图文并茂展现更加精美的插图

于是我就以自己的书写习惯为准写了一个简单的“markdown方言解析”

以下就是一些 example 以及其展示效果

句子引用块

```embed:quote
author: Project notes
url: https://example.com/source
---
Keep the knowledge and its context.
```

Keep the knowledge and its context.

Project notes · https://example.com/source

文字批注效果

```embed:annotation
mark: 内容优先
note: 让文字成为主角
color: red
---
我的博客坚持内容优先。
```

我的博客坚持内容优先。

让文字成为主角

github public 仓库卡片

```embed:github
repo: Pleasurecruise/my-workspace
align: left
```

列表文章链接

```embed:article
url: https://knowledge.you-find.me/articles/949cd5fa-c0ae-4ec2-99c8-5a7fcd8abf67
```

让文章页面的内容更加丰富
介绍自建的markdown方言解析

链接 opengraph 卡片

```embed:link
url: https://ogp.me/
align: wide
```

claude style 工程图

```embed:architecture
align: wide
flowchart LR
   Browser[浏览器] --> API[Article API]
   Vesper[Vesper CLI] --> API[Article API]
   API[Article API] --> Service[校验与保存]
   Service[校验与保存] --> D1[D1 元数据与权限]
   Service[校验与保存] --> R2[R2 Markdown 正文]
   Service[校验与保存] --> KV[KV 派生缓存]
   Service[校验与保存] --> Search[AI Search 中文索引]
```

手绘 style 流程图

```embed:storyboard
title: 发布流程
step: 编写 | 准备中文正文与可选译文
step: 提交 | Vesper 调用 Knowledge API
step: 发布 | 校验入库后在网页阅读
```

git diff 展示块

```embed:diff
title: Publication default
---
--- a/config.ts
+++ b/config.ts
@@ -1 +1 @@
-const visibility = "private";
+const visibility = "public";
```

Publication default

--- a/config.ts
+++ b/config.ts
@@ -1 +1 @@
-const visibility = "private";
+const visibility = "public";

媒体卡片

```embed:media
type: audio
src: https://github.com/Pleasurecruise/pleasure1234/blob/main/public/cat.mp3
align: narrow
```

美股代码曲线

```embed:stock
code: AAPL
```