常用markdown语法(hugo)

本文大部分是在hugo+loveit主题两者基础上才有作用,具体参考loveit主题shortcode文档

toml

baseURL = "http://example.org/"

# 更改使用 Hugo 构建网站时使用的默认主题
theme = "LoveIt"

# 网站标题
title = "我的全新 Hugo 网站"

# 网站语言, 仅在这里 CN 大写 ["en", "zh-CN", "fr", "pl", ...]
languageCode = "zh-CN"
# 语言名称 ["English", "简体中文", "Français", "Polski", ...]
languageName = "简体中文"
# 是否包括中日韩文字
hasCJKLanguage = true

bash

git clone https://github.com/dillonzq/LoveIt.git themes/LoveI

scss

@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400,700&display=swap&subset=latin-ext');             
$code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospace;           
注意
注意
admonition note
admonition note

admonition tip
admonition tip
【更多admonition参考】

DoIt 新增 | 0.0.1
DoIt 更改 | 0.0.2
DoIt 删除 | 0.0.3

scss

![](/images/fengmian4.jpg)

scss

<p align="center">
    <img src="/images/fengmian4.jpg" width="200" />
</p>
<center>图示</center>

图示

scss

<center>
<img width="300" src="/images/fengmian4.jpg">
<div style="color:black;"> <b> 图示 </b>  </div>
</center>
图示

scss

<center>
{{< image src="/images/fengmian4.jpg" title="停留显示"width="50%" >}}
<div style="color:black;"> <b> 图示 </b>  </div>
</center>
技巧
1.此shortcode需loveit主题支持
2.这种方式显示的图片配合loveit主题可以点击放大,停留显示文案等
停留显示
图示
Bug
主题应该是有bug, 当设置caption图片标题, 会造成width属性失效,所以这里加div标签达到效果

相关内容