1
| {% asset_img example.jpg %}
|
image
Image 标签是一种针对单个图片应用场景的标签,支持图片描述文字和指定宽度。
1
| {% image 链接::width=宽度(可选)::height=高度(可选)::alt=描述(可选)::bg=占位颜色(可选) %}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| 添加描述:
{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::alt=每天下课回宿舍的路,没有什么故事。 %}
指定宽度:
{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px %}
指定宽度并添加描述:
{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px::alt=每天下课回宿舍的路,没有什么故事。 %}
设置占位背景色:
{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px::bg=#1D0C04::alt=优化不同宽度浏览的观感 %}
|
可以支持的参数
图片宽高度
1
| width=300px::height=32px
|
图片描述
占位背景色
gallery
Gallery 标签是一种针对一组图片应用场景的标签。
1 2 3 4
| {% gallery 参数::列数::分组 %} ![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg) {% endgallery %}
|
一行一个图片
1 2 3
| {% gallery %} ![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg) {% endgallery %}
|
一行多个图片(不换行)
1 2 3 4 5
| {% gallery::::one %} ![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg) ![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg) ![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/00E0F0ED-9F1C-407A-9AA6-545649D919F4.jpeg) {% endgallery %}
|
多行多个图片(每行2~8个图片)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| {% gallery stretch::6::two %} ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/001.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/002.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/003.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/004.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/005.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/006.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/007.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/008.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/009.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/010.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/011.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/012.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/013.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/014.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/015.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/016.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/017.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/018.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/019.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/020.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/021.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/022.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/023.jpg) ![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/024.jpg) {% endgallery %}
|
可以支持的参数
对齐方向
缩放
stretch
列数
::后面直接写列数,支持 2 ~ 8 列。设定列数之后就是「多行多图」布局,此时图片默认左对齐。为了避免图片大小不一,建议搭配 stretch 来时图片放大填充。
测试中 设定列数之后 不会产生 累积布局偏移; 没有设定列数 产生了累积布局偏移
分组
相同内容的会被归档在一个分组中。