Ksable' 小屋

Home 留言板
Friends About

# 便笺: hexo 插入图片

发表于 2024-05-18 23:10
更新于 2024-05-18 23:10
416 字
3 min read

kissablecho

kissablecho 的个人博客 / 记录生活，分享技术 / 喜欢二次元和白丝。

128 Articles

4 Categories

7 Tags
Home
留言板
Categories
Tags
Archives
Friends
About
一些实用的网站
astro-koharu 使用指南
Music
个人 astro-koharu 主题修改记录便笺: [微信]不用发消息，如何知道自己有没有被拉黑?便笺: git 与 patch 便笺: Readest 私有化部署笔记便笺: VBS 消息轰炸便笺: Javascript 笔记 a ? b : c 便笺: 期末考试，一些人的成绩便笺: 2024-07-22 归档页面修改便笺: Markdown 备忘单便笺: hexo 插入图片 hello world
This post is not yet available in English. Showing the original.
image Image 标签是一种针对单个图片应用场景的标签，支持图片描述文字和指定宽度。 可以支持的参数 图片宽高度 图片描述 占位背景色 gallery Gallery 标签是一种针对一组图片应用场景的标签。

    {% asset_img example.jpg %}

## image

Image 标签是一种针对单个图片应用场景的标签，支持图片描述文字和指定宽度。

    {% image 链接::width=宽度（可选）::height=高度（可选）::alt=描述（可选）::bg=占位颜色（可选） %}

    添加描述：

    {% 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=优化不同宽度浏览的观感 %}

### 可以支持的参数

图片宽高度

    width=300px::height=32px

图片描述

    alt=图片描述

占位背景色

    bg=#f2f2f2

## gallery

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)

一行一个图片

    ![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

一行多个图片（不换行）

    ![图片描述](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)

多行多个图片（每行 2～8 个图片）

    ![](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)

### 可以支持的参数

对齐方向

    left::center::right

缩放

stretch

列数

::后面直接写列数，支持 2 ～ 8 列。设定列数之后就是「多行多图」布局，此时图片默认左对齐。为了避免图片大小不一，建议搭配 stretch 来时图片放大填充。

测试中 设定列数之后 不会产生 累积布局偏移; 没有设定列数 产生了累积布局偏移

分组

相同内容的会被归档在一个分组中。

If you enjoyed this, leave a comment~

English
中文 English 日本語

kissablecho

kissablecho 的个人博客 / 记录生活，分享技术 / 喜欢二次元和白丝。

128 Articles

4 Categories

7 Tags
Home
留言板
Categories
Tags
Archives
Friends
About
一些实用的网站
astro-koharu 使用指南
Music
个人 astro-koharu 主题修改记录便笺: [微信]不用发消息，如何知道自己有没有被拉黑?便笺: git 与 patch 便笺: Readest 私有化部署笔记便笺: VBS 消息轰炸便笺: Javascript 笔记 a ? b : c 便笺: 期末考试，一些人的成绩便笺: 2024-07-22 归档页面修改便笺: Markdown 备忘单便笺: hexo 插入图片 hello world