Featured image of post 『 Hugo 』Typlog Atlas

『 Hugo 』Typlog Atlas

在 Markdown 中排版插图 by Stack@Hugo + Github Pages

DEMO


What Typlog

Typlog 相册语法 是一种基于 Markdown 图像插入语法的,能将你插入到 Markdown 文本中的图片渲染呈现“瀑布流”排版效果的一种嵌入式插件。

Stack@Hugo主题 借鉴支持 Typlog 相册语法,该主题已获原作者 Lepture 授权。

Why Typlog

Typlog 相册语法 能够丰富你的 Markdown 正文内容,也能在需要的地方增加信息浓度。

How Typlog

How to insert a picture by Markdown syntax

Markdown 插入图片的语法规则如下所示。

1
![alt text for the image](src of the image)

此处的 src 可以是本地资源路径,也可以是网络图片的链接(如果目标资源设置了防盗链,可能无法直接在webview中使用)。

Markdown 插入图片的用法如下代码块所示。

1
![local source](hello-hugo.jpg)
1
![remote source](https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png)

How to insert a picture by Typlog syntax

Typlog 语法格式基于上述代码实现。“瀑布流”排版效果实现起来非常简单,仅需将Syntax Block按照你的意愿进行“堆叠”,插入的图片就会被“等比例调整”实现自动排版效果

实现2 × 2矩阵图的自动排版参考语法如下:

1
2
![img-1](image1.jpg)![img-2](image2.jpg)
![img-3](image3.jpg)![img-4](image4.jpg)

实现1 × 2 + 1 + 1 x 2矩阵图的自动排版参考语法如下:

1
2
3
![alt](https://image/src1) ![alt](https://image/src2)
![alt](https://image/src3)
![alt](https://image/src4) ![alt](https://image/src5) ![alt](https://image/src6)

Conclusion

Typlog 作为一个由 Stack 引入的拓展插件,仅能在你的 Hugo 站点上生效,而本地编辑 Markdown 的工具(如 Typora)在默认情况下是不会提现 Typlog 的排版效果的。

Reference

You will to enjoy grander sight / By climing to a greater height.