Hugo Markdown 图片编辑

Post 中插入图片

Markdown文件中插入图片的基本格式为：

    ![Alternative Text](pic-link "optional title")

• Alternative Text: 图片占位文本，用来描述图片的关键词，可以不写。主要用于当图片因为某种原因不能被显示时而出现的替代文字，后来又被用于SEO，可以方便搜索引擎根据 Alt-Text 里面的关键词搜索到图片.
• pic-link: 图片的引用地址；可以是本地路径地址，或者是网址。
• optional title: 鼠标悬置于图片上会出现的标题文字，可以不写。

使用 base64 图片编码时基本格式：

    ![Alternative Text][base64 label]

• base64 label: 图片Base64编码的标签名。

网址引用

pic-link 使用 http:// 或 https:// 开头的图片网址：

示例代码：![via Pexels](https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg)

效果：

本地图片引用

可以通过图片所在本机的绝对地址，或者相对于Markdown文件的相对位置，进行引用。

• 绝对地址引用：用以 / 开头的从根目录开始的本地图片绝对地址。
• 相对地址引用：用以 ./ 或 ../ 开头的、相对于 Markdown 文件的图片相对地址。特别的：如果图片和 Markdown 文件在同一目录下，则可以直接写文件名即可，相当于 ./pic-file-name.png 。

注意： 涉及到图片地址时，无论时网址还是本机地址，路径文件夹名和文件名中都不要有‘ ’空格，否则处理起来非常麻烦。

Hugo中本地图片管理

Hugo post 的 Markdown 文件中，本地根目录 / 代表 static 目录。通常在其中建立 images 目录，所有 post 中所用到的图片，都可以统一存放在 static/images/ 中。 引用时，使用 ![XXX](/images/XXX/filename.png) 即可。

通常，可能会被多篇 post 所引用的图片放在 static/images/ 目录中；某一篇 post 独有的图片会再创建 post 同名子目录进行管理。

如果希望某篇 post 独有的图片能和 post-name.md 文件放在一起管理，Hugo 的 build 机制会导致一些问题。

主要原因是，Hugo 在build静态网页时，对于 post-name.md 文件，会创建一个名为 post-name 的目录，目录中生成固定文件名的 index.html 。Markdown 文件中的内容实际上被渲染成了HTML文件；而原来与 Markdown 文件放在一起的图片文件并没有被转移到新创建的 post-name 目录中，这就导致图片文件与引用它的文件的相对地址发生了变化。

这时，对于“将图片和 Markdown 文件放在同一目录下管理”的情况：

• 如果在编辑 post 的时候，直接使用 pic-file-name.png 或 ./pic-file-name.png 引用图片，那么脱离Hugo进行 Markdown 文件预览时，图片显示正常；但是在 Hugo 生成网站后，post中的图片会引用失败（因为图片在上一级目录中）。
• 如果在编辑 post 的时候，对于同级图片使用 ../pic-file-name.png 进行引用。那么脱离Hugo进行 Markdown 文件预览时，图片引用失败；但是在 Hugo 生成网站后，post中的图片可以正常显示。

解决方案

如果希望将 post-name.md 文件和它所需要的图片文件放在同一目录下管理，可以将 Markdown 文件和图片文件所在目录的目录名改为 post-name ，将 Markdown 文件改名为 index.md ；形成这种目录结构：

    xxx
    ├─ post-name
    │  ├─ index.md
    │  └─ pic-file-name.png
   ...

此时，使用 pic-file-name.png 或 ./pic-file-name.png 引用图片，无论是预览 Markdown 文件还是Hugo生成的网页，图片都可以正常显示。

示例： ![Audiogram](./audiogram.png "听力图")

渲染效果：(注意 此图片超宽，实际未能显示完整，自适应图片显示请参考下节)

Hugo Post 图片自适应

标准 Markdown 文件插入图片后，图片会以自身原始大小显示。当在网站中显示时可能会超出屏幕宽度。

自适应居中显示图片有多种实现方法。这里提供一种“通过标记css文件”实现图片的自适应显示。

修改主题CSS文件

在 Hugo Themes 目录中所使用的主题下，找到主题所用 CSS 文件，在其中定义新样式如下：

.content img[src*="#auto-fit"] { 
  max-width:  100%;
  height: auto;
  display: block;
}

其中 .content 为 Hugo 主题的 layouts/_default 目录下，对于 Markdown 文件内容渲染时，文件内容的 class 定义。不同的主题可能使用不同的 class 名称。需要根据所使用的主题进行修改。

"#auto-fit" 定义了 .content 中所有图片地址的特定结尾字符。如果图片地址的结尾字符匹配预定义的"#auto-fit"，则按定义规则渲染。

所以在 post 中使用 Markdown 语法插入图片时，可以在图片地址后面添加 #auto-fit 标志，使其显示宽度最大为 100% 。

示例： ![Python Color Map](./Python.Color.Map.png#auto-fit "PyCM")

渲染效果：

在 Markdown 文件中控制图片样式

注意 在当前 Hugo 主题中无法实现

直接在图片后面加上对应的CSS样式即可:

![test image size](url){:class="img-responsive"}
![test image size](url){:height="50%" width="50%"}
![test image size](url){:height="100px" width="400px"}