Update 「我的写作流」 to add section how to handle image elegantly

Author: ramsayleung

content/zh/post/2023/我的写作流.md

@@ -1,7 +1,7 @@
 +++
 title = "我的写作流"
 date = 2023-01-25T14:25:00-08:00
-lastmod = 2025-01-09T17:40:36-08:00
+lastmod = 2025-01-09T23:38:03-08:00
 tags = ["writing"]
 categories = ["工作流"]
 draft = false
@@ -24,13 +24,48 @@ toc = true
 
 所以我倾向于「本地化储存」+「文本格式」 + 「易于同步」的写作方案
 
-最后我选择的写作工具是 `Emacs` + `org-mode=，不熟悉=org-mode` 的读者可能不知道 `org-mode` 是什么，可能理解成类似是=markdown= 的标记语言，但是和=Emacs= 结合后，易用性与扩展性比=markdown= 提高了一个数量级。
+最后我选择的写作工具是 `Emacs` + `org-mode=，不熟悉 =org-mode` 的读者可能不知道 `org-mode` 是什么，可能理解成类似是 `markdown` 的标记语言，但是和=Emacs= 结合后，易用性与扩展性比=markdown= 提高了一个数量级。
 
 这篇文章就是使用 `Emacs` + `org-mode` 写出来的:
 
 {{< figure src="/ox-hugo/emacs_org_mode.png" link="/ox-hugo/emacs_org_mode.png" >}}
 
 
+### <span class="section-num">2.1</span> 图片 {#图片}
+
+在[《写博客的动机》](https://ramsayleung.github.io/zh/post/2017/blog/)一文我提到，我之前是自建了博客，但是后来又迁移到了ox-hugo + Hugo 的GitHub Page上，其中最大的一个痛点就是插入图片.
+
+插入图片流程一般是分为两步：
+
+1.  上传图片到云端存储，一般就是各种图床，如国外的Imgur, Cloudflare, 国内的七牛，又拍云，腾讯云对象存储等等
+2.  将上传的图片插入文章，如果使用 Markdown, 就是 `![]()` 的格式插入
+
+最初我是手动上传到 Imgur，再把生成的链接插入到Markdown，每次图片操作下来大概耗费1-2分钟，尤其是Imgur还在国外，网络不好，经常失败。
+
+后来用上了[PicGo](https://github.com/Molunerfinn/PicGo) 这个图片上传工具，稍微好些，但是依旧不方便，因为手动拖拉图片上传，图片还不好管理。
+
+后面遇到 `ox-hugo` 这个插件之后，就完全没有插入文件的困扰了。
+
+得益于Emacs各种强大的文件交互功能，我只需要做：
+
+1.  打开本地图片, `Ctrl-c l` 触发 `org-store-link` 函数, 将文件名保存起来
+2.  `Ctrl-c Ctrl-l` 触发 `org-insert-link` 函数, 选择刚刚指定的文件, 点击回车即可.
+
+我现在管理图片的方式是将每篇文章相关的文章都放到 `文章名/img` 的目录下, 所以我只需要打开 `img`, `Ctrl-c l` 选择图片, 再回到文章 `Ctrl-c Ctrl-l` 插入即可.
+
+{{< figure src="/ox-hugo/ox-hugo-link-image.gif" >}}
+
+又得益于Emacs org-mode 无可比拟的export 功能, 我可以通过ox-hugo 将 org-mode 文件导出成 Hugo 兼容的Markdown 文件, 然后再自动将文章中所有的图片复制到 Hugo 博客下的 `static/ox-hugo` 目录下.
+
+假如我本地路径为 `/home/ramsay/blog/2023/我的写作流/img/emacs_org_mode.png` 的图片，在按下 `Ctrl-c Ctrl-e H h` 之后，导出到 Hugo Markdown 之后，图片路径就会变成:
+
+```markdown
+{{\< figure src="/ox-hugo/emacs_org_mode.png" link="/ox-hugo/emacs_org_mode.png" >}}
+```
+
+只需要将复制到 `ox-hugo` 目录的图片和文章的Markdown 文件一起提交到Git, 并上传到GitHub 就相当于把GitHub 当作图床，但是其他操作都由ox-hugo 和 GitHub 代劳了.
+
+
 ## <span class="section-num">3</span> 写作平台 {#写作平台}
 
 
@@ -46,15 +81,15 @@ toc = true
 直到2022年，因为工作太忙碌，没有太多时间来维护博客的代码以及运维博客的服务。
 自建博客的初衷只是为了有个地方可以承载我写的内容，只是因为年轻，有精力折腾，就自己写代码，搭建服务。
 
-但总体而言，写作的流程并不顺手: 因为我一直都是使用=org-mode= 来写作，而我自己的博客只支持=markdown= 格式，这就意味着我必须每次写作完成后，需要将=org-mode= 转换成=markdown= , 然后再在博客后台发布。
+但总体而言，写作的流程并不顺手: 因为我一直都是使用=org-mode= 来写作，而我自己的博客只支持 `Markdown` 格式，这就意味着我必须每次写作完成后，需要将=org-mode= 转换成 `markdown` , 然后再在博客后台发布。
 
-如果涉及到图片就更麻烦，需要将图片逐张上传到图床，然后再插入到=org-mode=中, 而博客使用的=markdown= 编辑器过了5年后，开发者已经不维护了，所以免不了又会有各种小问题。
+如果涉及到图片就更麻烦，需要将图片逐张上传到图床，然后再插入到 `org-mode=中, 而博客使用的=markdown` 编辑器过了5年后，开发者已经不维护了，所以免不了又会有各种小问题。
 
-我又尝试了=Emacs= + `org-mode` + `hugo` 的博客方案，发现使用起来非常舒心，发布文章几乎无成本。正好碰上博客服务器到期，就干脆切换回=Github Pages=.
+我又尝试了 `Emacs` + `org-mode` + `hugo` 的博客方案，发现使用起来非常舒心，发布文章几乎无成本。正好碰上博客服务器到期，就干脆切换回=Github Pages=.
 
-`hugo` 是使用=markdown= 来构建网站的框架，而我使用的=org-mode=，所以还需要一个工具将=org-mode= 转换为=hugo markdown=，这个就是=Emacs= 插件[`ox-hugo`](https://ox-hugo.scripter.co/)。当然， `hugo` 原生也支持=org-mode=, 只是功能支持不完整， 不及=ox-hugo=.
+`hugo` 是使用 `markdown` 来构建网站的框架，而我使用的 `org-mode=，所以还需要一个工具将 =org-mode` 转换为 `Hugo markdown=，这个就是 =Emacs` 插件 [`ox-hugo`](https://ox-hugo.scripter.co/)。当然， `hugo` 原生也支持 `org-mode`, 只是功能支持不完整， 远不及 `ox-hugo`.
 
-`ox-hugo` 只需要将在=org-mode= 内容的最开始插入标记：
+`ox-hugo` 只需要将在 `org-mode` 内容的最开始插入标记：
 
 ```org
 #+HUGO_BASE_DIR: ~/code/org/ramsayleung.github.io
@@ -68,14 +103,12 @@ toc = true
 #+HUGO_CATEGORIES: writing
 ```
 
-Emacs一个快捷键 `C-c C-e H h` 就可以将=org-mode= 转换成=hugo= 格式的=markdown=:
+Emacs一个快捷键 `C-c C-e H h` 就可以将 `org-mode` 转换成 `Hugo` 格式的 `Markdown`:
 
 {{< figure src="/ox-hugo/one-post-per-subtree.png" link="/ox-hugo/one-post-per-subtree.png" >}}
 
 结合[Github Action](https://github.com/ramsayleung/ramsayleung.github.io/blob/master/.github/workflows/gh-pages.yml)，就可以自动把导出的markdown 博文部署到Github Pages，称得上是一键部署。
 
-不过，说出来有点心酸，我在博客写的文章，读者大多是我自己。
-
 
 ### <span class="section-num">3.2</span> 公众号 {#公众号}
 
@@ -103,21 +136,108 @@ Emacs一个快捷键 `C-c C-e H h` 就可以将=org-mode= 转换成=hugo= 格式
 或许是因为我写的内容贴近业务，是同事比较感兴趣的。
 
 
-### <span class="section-num">3.5</span> 一鱼多吃的问题 {#一鱼多吃的问题}
+### <span class="section-num">3.5</span> 格式兼容多个平台 {#格式兼容多个平台}
 
 将同一篇文章分发到多个平台，就难免会有不同平台格式不通的问题。
 
-上面这些平台，都是不支持 `org-mode` 这种相对小众的文本格式，所以 `markdown` 算是比较理想的中间格式，可以先把=org-mode= 转换成=hugo markdown=，再将=hugo markdown= 转换成=markdown=:
+因为Markdown 是通用文档，所以我倾向于把我的文章发布在其他的平台，如上文提到的知乎，公众号。
+
+但是这些平台都是使用专有的编辑器，并不支持直接解析Markdown，所以我会把文章复制到 <https://markdown.com.cn/editor/> 的在线编辑，它提供了一键复制格式到公众号，知乎, 掘金的功能.
+
+新的问题又来了, 我使用 `ox-hugo` 导出的是Hugo Markdown，又不是标准的Markdown， markdown.com.cn的编辑器无法解析部分标签, 如:
+
+```nil
++++
+title = "我的写作流"
+date = 2023-01-25T14:25:00-08:00
+lastmod = 2025-01-09T17:40:36-08:00
+tags = ["writing"]
+categories = ["工作流"]
+draft = false
+toc = true
++++
+
+# ## <span class="section-num">1</span> 前言 {#前言} => ## <span class="section-num">1</span> 前言
 
-{{< figure src="/ox-hugo/写作流程.png" link="/ox-hugo/写作流程.png" >}}
+{{\< figure src="/ox-hugo/emacs_org_mode.png" link="/ox-hugo/emacs_org_mode.png" >}}
+```
+
+既然编辑器不支持Hugo语法，那么把Hugo特有的语法去掉就行了嘛，所以我写了一个 shell script 用来把Hugo Markdown 转换回标准 Markdown:
+
+```shell
+remove_heading_tag () {
+    # ## <span class="section-num">1</span> 前言 {#前言} => ## <span class="section-num">1</span> 前言
+    # 删除 {#前言}
+    sed 's/{#.*}//' $1
+}
+
+remove_meta_info () {
+    # 删除下列信息
+    # +++
+    # title = "为什么梦想买不起，故乡回不去"
+    # date = 2023-01-14T23:21:00+08:00
+    # lastmod = 2023-01-25T09:00:47+08:00
+    # tags = ["book", "history", "economy"]
+    # categories = ["book"]
+    # draft = false
+    # toc = true
+    # +++
+    sed '/+++/,/+++/d'
+}
+```
 
-使用 `ox-hugo=，可以将=org-mode` 转换成=hugo markdown= , 至于将=hugo markdown= 转换成=markdown=, 我写了个脚本 [`hugomd2md.sh`](https://gist.github.com/ramsayleung/4b408dddc9ac1b4ef3464f5e9df1a9ef#file-hugomd2md-sh)来处理：
+又因为Emacs 本身就是个Lisp解析器, 我在运行时修改了一下导出成 Hugo Markdown 的函数, 在导出完之后，再调用上面的shell 脚本, 根据Hugo Markdown 再生成一份标准的Markdown.
+
+```emacs-lisp
+(defun ramsay/org-hugo-export-to-std-md (orig-fun &rest args)
+  "Generate standard markdown file base on the exported hugo markdown."
+  (let ((res (apply orig-fun args)))
+    (message "Generate the standard markdown from %S" res)
+    (ramsay/hugo2md-base "~/code/shell/hugomd2md-gitea.sh" res "gitea")
+    res))
+
+(advice-add 'org-hugo-export-to-md :around #'ramsay/org-hugo-export-to-std-md)
+```
 
-除了将=hugo markdown= 转换成=markdown=，使用Github Pages 当作图床，还在最后插入一个公众号广告。
+回到图片的问题上, 虽然GitHub 可以作为图床，但是因为墙不间断阻断 GitHub, 导致国内访问 GitHub 并不稳定，图片可能无法下载下来.
+
+既然 GitHub 无法稳定访问, 那么就挑个能在国内稳定访问的 Git 服务呗。
+
+一番调研之后，最后选定了 [Gitea](https://about.gitea.com/)。
+
+需要做的事情也很简单，只需要在 Gitea 上新建一个仓库，然后再给我的博客增加一个远程仓库即可:
+
+```sh
+> git remote -v
+gitea   [email protected]:myusername/store.git (fetch)
+gitea   [email protected]:myusername/store.git (push)
+origin  [email protected]:ramsayleung/ramsayleung.github.io.git (fetch)
+origin  [email protected]:ramsayleung/ramsayleung.github.io.git (push)
+```
+
+最后需要做的就是再更新一下Shell 脚本，在把Hugo Markdown转换成标准Markdown的时候，再把图片链接修改为GitTea 链接:
+
+```sh
+replace_link () {
+    # hugo的图片链接，转换成markdown 标准链接
+    # {{\< figure src="/ox-hugo/土地金融-政府债务.png" link="/ox-hugo/土地金融-政府债务.png" >}}
+    # => ![](https://gitea.com/myusername/store/raw/branch/master/static/ox-hugo/土地金融-政府债务.png)
+    sed 's/{{\< figure src="\(.*\)" link=.*>}}/!\[\](https:\/\/gitea.com\/myusername\/store\/raw\/branch\/master\/static\1)/'
+}
+```
+
+最后的效果就是，在我把 Org-mode 文件导出成 Hugo Markdown 后，会自己再生成一份替换了图片链接地址的标准Markdown.
+
+{{< figure src="/ox-hugo/ox-hugo-export.gif" >}}
+
+因为我太懒了，所以我再写了个小函数，导出完成之后，自动复制标准 Markdown 的内容到 clipboard, 这样就可以直接粘贴到 markdown.com.cn了（算下来，我每次操作都省了10来秒）
 
 
 ## <span class="section-num">4</span> 写在最后 {#写在最后}
 
-因为使用=Emacs= + `org-mode` 写文章非常顺手，所以我写下了很多的文稿，只是思绪杂乱，不方便都发布出来.
+完整的写作流如图:
+[![](/ox-hugo/写作流程.png)](/ox-hugo/写作流程.png)
+
+因为使用 `Emacs` + `org-mode` 写文章非常顺手，所以我写下了很多的文稿，只是思绪杂乱，不方便都发布出来.
 
 现在正逐步将存稿往公众号平台上迁移，只是公众号有诸多限制，其中一条是一天只能群发一篇文章，只能「小刀锯大树」，慢慢来了。