0 常用参考教程
1 文本编辑
有序列表
1. 上海
1. 徐汇区
2. 静安区
2. 深圳
1. 福田区
3. 成都
1. 金牛区
- 上海
- 徐汇区
- 静安区
- 深圳
- 福田区
- 成都
- 金牛区
无序列表
- 上海
1. 徐汇区
2. 静安区
- 深圳
1. 福田区
- 成都
1. 青羊区
- 上海
- 徐汇区
- 静安区
- 深圳
- 福田区
- 成都
- 青羊区
脚注
脚注示例：
今天我吃了披萨[^1]。
[^1]: 披萨店是大润发那里的萨莉亚。
效果：
今天我吃了披萨1。
Latex
Latex语言支持测试：
Let $G1=(X_1,\Sigma_1,\delta_1,x_{01})$ and $G2=(X_2,\Sigma_2,\delta_2,x_{02})$ be two automata. The parallel combination of $G1$ and $G2$ is defined as $G1\lVert G2=(X_1 \times X_2,\Sigma_1\cup \Sigma_2,\delta,(x_{01},x_{02}))$.
效果：
Let $G1=(X_1,\Sigma_1,\delta_1,x_{01})$ and $G2=(X_2,\Sigma_2,\delta_2,x_{02})$ be two automata. The parallel combination of $G1$ and $G2$ is defined as $G1 \lVert G2=(X_1 \times X_2,\Sigma_1\cup \Sigma_2,\delta,(x_{01},x_{02}))$.
注释框
使用shortcode实现12种fancy 背景框。
代码格式示例：
{{< admonition type=quote title=“这是引用框” open=true >}}</br>
一个 技巧 横幅 </br>
{{< /admonition >}}</br>
效果：
利用admonition折叠代码，类型参数可选tip、note、abstract、info、success、question、warning、failure、danger、bug、example、quote。
代码框
使用示例：
```markdwon { title=“path/readme.md;true;D:” }
- 代码块加上 title 属性，使用时得加上代码块所属语言
- 第二个参数控制是否在标题前加前缀，默认值 “true”
- 第三个参数是前缀名，无默认值
```
效果：
- 代码块加上 title 属性，使用时得加上代码块所属语言
- 第二个参数控制是否在标题前加前缀，默认值 "true"
- 第三个参数是前缀名，无默认值
文章内链
使用时去掉字母a：
{a{< innerlink src=“posts/tools/2020-09-myblog.md” >}}
效果：
文字下划线
<!-- 下划线 -->
<u>添加下划线</u>
<!-- 带颜色的下划线 -->
<span style="border-bottom: 5px solid #0081EF;">带颜色的下划线</span>
添加下划线
带颜色的下划线
空格
- & nbsp; 表示半角空格（英文）
- & emsp; 表示全角空格（中文）
2 图片处理
本地图片
- 博客本地图片需要创建与markdown同级同名文件夹！
使用图床
1、使用shortcode
简洁、使用简单。
{ {< card url="https://z1.ax1x.com/2023/11/07/pilzvpF.jpg" discrible="枫泾古镇狗子">}}
//两个括号间没有空格
通用，和markdwon 混合，不太友好。
<div align=center>
<img src="https://source.unsplash.com/random/940x350?bicycle" width="400px" height="300px" />
</div>
随机图片
原理参见： PaperModx 模板：随机显示图片
使用方法：
- 直接引用网址
<img loading="lazy" alt="" class="x-random-img"
src="https://source.unsplash.com/random/720x400?star" width="720" height="400"
data-topic="star,cat"/>
其中，width=“720” 、height=“400”、 data-topic=“star"分别设置随机图片的宽、高和主题。
效果：
<img loading="lazy" alt="" class="x-random-img" src="https://source.unsplash.com/random/720x400?star" width="720" height="200" data-topic="star,cat"/>
- 使用shortcode
最简方式: {{< random_image >}}
完整参数: {{< random_image width=“720” height=“200” topic=“ocean” >}}
效果：
插入emoji
表情网站粘贴复制：EMOJIALL - 多语言 EMOJI词典
示例 ：😋 😛 😜 🤪 😝 🙄 😏
图片画廊
{{ < galleries >}}
{{ < gallery src="https://pic.huangjia.site/blog-images//2023-01-photos/tongdehu.png" title="同德湖">}}
{{ < gallery src="https://pic.huangjia.site/blog-images//2023-01-photos/siyuanhu.png" >}}
{{ < gallery src="https://pic.huangjia.site/blog-images//2023-01-photos/library.png" >}}
{{ < /galleries >}}
图片轮播
来源: 在文章中插入轮播图片。
使用示例：
shortcode: {{< imgloop “URL1,URL2,URL3,URL4,URL5” >}}
3 其他功能
内嵌PPT
网页中实现查看pdf文件效果。
shortcode : {{< ppt src=“https://skyzh.github.io/files/cv.pdf" >}}
效果：Alex Chi的简历 🤩
插入B站视频
使用shortcode： {{< bilibili BV12K4y1L7om >}}
其中BV12K4y1L7om为本站视频分享链接的bvid。
-
披萨店是大润发那里的萨莉亚。 ↩︎
...