1 目的

使用图床方式托管图片,减小hugo源文件对github库的占用控件。

在使用markdown时,可以使用 ![](imgUrl) 语法加载图床中的图片。

现在想在org-mode中实现同样的效果,尝试了以下几种方式,都无法实现。
org-mode插图仅支持文件模式:

具体插入流程:org-download本身会自动在org文档当前目录下创建一个与文档同名的文件夹来保存图片,然后支持多种途径的图片插入,插入之后会复制或者下载一张图片到图片文件夹下面。

参考的资料:
Images in Content — ox-hugo - Org to Hugo exporter
利其器─Emacs/orgmode插入图片 - 知行合一
使用Emacs中的org-mode写cnblogs之图片插入 - yangwen0228 - 博客园

2 探索插入图片的几种方案

  1. 外连接图片直接粘贴路径到org中即可。

    1
    2
    
       #+ATTR_HTML: :width 50% :align center
       https://devalot.com/assets/articles/2008/07/project-planning/expanded.jpg

    导出md后的格式:

    1
    2
    
       <figure><img src="https://devalot.com/assets/articles/2008/07/project-planning/expanded.jpg" width="50%"/>
       </figure>
  2. 使用脚本生成图片
    snippet命令:uml/xmd/wbs

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    
       #+BEGIN_SRC plantuml :file ../iPics/images/emacs.png
       @startmindmap
       caption 总结emacs 知识体系
       title emacs 知识体系
       center header
               通过结构来描述emacs 最受用的工具
       endheader
       * root node
       ** child node left side
       ** child left node
       ***_ child2 left node
       '给图表添加备注
       legend right
               完成相关技能的总结回顾
       endlegend
    
       center footer
               结束
       endfooter
       @endmindmap
       \#+END_SRC
  3. img直接导出markdown语法
    snippet命令:umlimg

    1
    
       @@md:![](http://www.plantuml.com/plantuml/proxy?cache=no&src=https://it-boyer.github.io/iDocs/uml/UGM-gtd.plantuml)@@

    markdown语法必须使用反转义包围: @@md: md语法 @@ 否则,导出的会添加反斜杠转义符: \![](imgUrl) 导致在hugo中无法正确显示图片。
    Export snippet Markdown ❚ ox-hugo Test Site

  4. 宏的使用
    习七 Issue #85

  5. Multiple ATTR_HTML
    snippet命令:img

1
2
3
4
#+html: <style>.foo img { border:2px solid black; }</style>
#+attr_html: :alt Org mode logo
#+attr_html: :width 300 :class foo
[[https://ox-hugo.scripter.co/test/images/org-mode-unicorn-logo.png]]
  1. SVG 支持

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    
       #+begin_src plantuml :file ../iPics/images/ox-hugo/svg-with-hyperlinks.svg :exports results
       skinparam svgLinkTarget _parent
       start
       :[[https://ox-hugo.scripter.co/ ox-hugo homepage]];
       stop
       #+end_src
       #+caption: An SVG with *hyperlinks* -- generated using PlantUML
       #+attr_html: :inlined t
       #+RESULTS:
       [[file:../iPics/images/ox-hugo/svg-with-hyperlinks.svg]]
    

Inlined SVG ❚ ox-hugo Test Site

问题:
homebrew 安装emacs 27.1 不支持svg吗? - Emacs-general - Emacs China
无法显示 svg,Invalid image type ‘svg’ - Emacs-general - Emacs China

3 org-download工具使用

org-download本身会自动在org文档当前目录下创建一个与文档同名的文件夹来保存图片,然后支持多种途径的图片插入,插入之后会复制或者下载一张图片到图片文件夹下面:

  • 用url把图片插入,然后自动下载;
  • 复制图片文件路径,然后插入;
  • 拖拽图片插入。

支持两种 org-download-method 方式:

方式1: attach

1
(setq org-download-method 'attach)

在这种模式下,存在两个问题

  1. 问题1:在插入图片时,图片会被存到 ~ /org/.attach 下一个很长串的目录下。

    这种附件方式,无法指定图片的存放位置,导致无法使用托管图库,导致库文件大。

    解决办法:将 .attach 目录作为图库的托管目录,这样就可以把较大的附件托管给子模块库中。

  2. 问题2:在插入了attachment后,headline添加一个名为 :ATTACH: 的tag

    因为ox-hugo在导出org时,会把headline的tag作为tag或分类,导出到hugo站中。对于hugo来说 ATTACH 意义不大。

    解决办法:关闭导出标签的开关 (setq org-export-with-tags nil) 这种方式在ox-hugo导出无效。

方式2: directory

1
(setq org-download-method 'directory)

doom-emacs下安装

在init.el中的org模块下增加 +org-download .

使用

spc m a P: yank
spc m a p: clipboard
z i: 预览图片开关

图片大小控制

通过下面的属性可以分别控制图片在emacs里面显示的大小以及导出的html的图片的大小。

1
2
3
#+ATTR_ORG: :width 200
#+ATTR_HTML: :width 50% :align center
[[attachment:_20210805_170910proxy.png]]