为什么使用 obsidian：Obsidian 有很多可用的插件，比如 excalidraw 这种流程图软件等等，可以一站实现所有的写文流程，不用再切换其他软件做图；
为什么使用 cloudflare pages：有现成的 Hugo 部署方案，结合 Github 可以实现自动化部署；
QuickAdd 有什么作用：可以使用快捷键将 posts 添加到想要的位置，并且添加 front matter 的 yaml 模版；
需要注意什么：obsidian vault 作为一个写作仓库，会生成.obsidian等与 hugo 部署无关的文件夹，需要添加在.gitignore中防止出现奇怪的问题。
流程涉及的 Obsidian 插件
1. QuickAdd
https://github.com/chhoumann/quickadd
- 快速在指定位置新建 posts/moments
- 使用指定模版
2.Update time on edit
https://github.com/beaussan/update-time-on-edit-obsidian
- 自动生成创建时间
- 自动更新编辑时间
- 自定义创建时间和编辑时间字段名称
3. Git
https://github.com/Vinzent03/obsidian-git
- 一键 Commit and push 到 github 仓库
- 可以设置自动推送（不建议）
前置要求
- 已经将 Hugo 项目部署至 Cloudflare PagesHugo · Cloudflare Pages docs或者 VercelHow to Deploy a Hugo Site with Vercel。
- 了解 Obisidian 的基本使用技巧。
流程实操
Step 1 - 创建 Posts 模版
包含常用参数的 frontmatter 模版，比如我在/_template中添加了 2 个模版文件，一个是显示在文章列表中的 posts 模版，一个是显示在瞬间列表中的 moments 模版，模版内容如下：
add_hugo_posts.md
text
1---
2title: {{name}}
3slug:
4date:
5lastmod:
6tags:
7categories:
8series:
9summary:
10draft: false
11---add_hugo_moments.md
text
1---
2date:
3lastmod:
4slug: {{date:yyyy-MM-dd'T'HH:mm:ss}}
5tags:
6---Step 2 - 新建 QuickAdd 模版
- 添加模版文件路径：obsidian 仓库内的绝对路径
- 输入 QuickAdd 的名称
- 添加至列表
- 设置 QuickAdd 选项
配置说明：我使用的 Hugo 模版是PaperMod，文章内容结构是这样的：
text
1├── content/
2│ ├── posts/
3| ├── post1/
4| ├── index.md
5| ├── pic1.png
6| ├── pic2.jpg
7|
8| ...
9|
10| ├── post2/
11| ├── index.md
12| ├── _index.md所以配置如上图：
- Create in folder: content/posts
- File Name: {{name}}/index
在这样的配置下，使用名为 add post 的 quickadd，将创建一个content/posts/{{name}}/index.md，其中{{name}}为使用 quickadd 时输入的文件名。
如果你的文章结构是下面这种，那么将 File Name 改成{{name}}即可，这样将创建一个content/posts/{{name}}.md。
text
1├── content/
2│ ├── posts/
3| ├── post1.md
4|
5| ...
6|
7| ├── post2.md
8| ├── _index.mdStep 3 - 设置 QuickAdd 快捷键
添加 Run QuickAdd 的快捷键。
Step 4 - 配置 Update time on edit
根据站点实际要求更改日期格式和时间以及编辑时间字段名称，比如我的站点：
- Date format：yyyy-MM-dd’T’HH:mm:ss。使用详细的时间数据方便后续站点设置中的截取。
- Front matter updated name：lastmod。详见
layouts/partials/post_meta.html配置。 - Front matter created name：date。详见
layouts/partials/post_meta.html配置。
layouts/partials/post_meta.html
text
1{{- $scratch := newScratch }}
2
3{{- /* 显示发布日期 */ -}}
4{{- if not .Date.IsZero -}}
5 {{- $formattedDate := .Date.Format (default "2006-01-02 15:04" site.Params.DateFormat) }}
6 {{- $scratch.Add "meta" (slice (printf "<span title='%s'>%s</span>" .Date $formattedDate)) }}
7{{- end }}
8
9{{- /* 检查 Lastmod 和 Date 是否相差至少一天 */ -}}
10{{- if gt .Lastmod .Date -}}
11 {{- $lastUnix := .Lastmod.Unix }}
12 {{- $dateUnix := .Date.Unix }}
13 {{- $diffSeconds := sub $lastUnix $dateUnix }}
14 {{- $diffDays := div $diffSeconds 86400 }}
15 {{- if ge $diffDays 1 }}
16 {{- $formattedLastmod := .Lastmod.Format (default "2006-01-02 15:04" site.Params.DateFormat) }}
17 {{- $scratch.Add "meta" (slice (printf "<span title='%s'>(更新于: %s)</span>" .Lastmod $formattedLastmod)) }}
18 {{- end }}
19{{- end }}
20
21{{- /* 显示阅读时间 */ -}}
22{{- if .Param "ShowReadingTime" -}}
23 {{- $readTime := i18n "read_time" .ReadingTime | default (printf "%d min" .ReadingTime) }}
24 {{- $scratch.Add "meta" (slice $readTime) }}
25{{- end }}
26
27{{- /* 显示字数统计 */ -}}
28{{- if .Param "ShowWordCount" -}}
29 {{- $wordCount := i18n "words" .WordCount | default (printf "%d words" .WordCount) }}
30 {{- $scratch.Add "meta" (slice $wordCount) }}
31{{- end }}
32
33{{- /* 显示作者信息 */ -}}
34{{- if not (.Param "hideAuthor") -}}
35 {{- with (partial "author.html" .) }}
36 {{- $scratch.Add "meta" (slice .) }}
37 {{- end }}
38{{- end }}
39
40{{- /* 输出所有元信息，用 · 分隔，并包裹在左对齐的容器中 */ -}}
41{{- with ($scratch.Get "meta") }}
42 <div class="meta-left-align">
43 {{- delimit . " · " | safeHTML -}}
44 </div>
45{{- end }}Step 5 - 新建 posts
修改相关的 frontmatter 信息。
Step 6（可选） - 使用盘古 PanGu 插件优化排版
在中英文之间增加空格以优化阅读体验。
Step 7 - 使用 Git 插件 Commit&Push 到 Github 仓库
Step 8 - 等待自动部署完成
然后就恭喜大功告成啦！！！