跳过正文
  1. 轻松办公/

媒体模板示例

·1 分钟·
邢小林
作者
邢小林
南京生活 · 轻松办公 · 城市探索。用图文记录这座城市的风景、美食、桌游与日常思考。
目录

本文汇总 Blowfish 主题中常用的图片与视频展示方式,可作为新文章写作模板。

图片轮播(Carousel)
#

将图片放入文章目录下的 gallery/ 文件夹,然后用 shortcode 引用:

{{< carousel images="gallery/*" interval="4000" aspectRatio="21-9" >}}

带 caption 的写法:

{{< carousel images="gallery/*" captions="{01.jpg:第一张,02.jpg:第二张}" >}}

参考示例:鼓楼滨江步行道

响应式图集(Gallery)
#

{{< gallery >}}
  {{< figure src="gallery/01.jpg" caption="说明文字" figureClass="grid-w33" >}}
  {{< figure src="gallery/02.jpg" caption="说明文字" figureClass="grid-w33" >}}
  {{< figure src="gallery/03.jpg" caption="说明文字" figureClass="grid-w33" >}}
{{< /gallery >}}

本地视频
#

{{< video src="gallery/walk.mp4" poster="gallery/cover.jpg" caption="视频说明" >}}

B 站 / YouTube 嵌入
#

{{< youtubeLite id="BVxxxxxx" label="视频标题" >}}

封面图(Featured Image)
#

在文章目录放置 featured.jpgfeatured.svg,会自动用于:

  • 首页 / 列表页卡片缩略图
  • 文章顶部 Hero 背景
  • 社交分享预览图

也可运行 pnpm run featured:setup 批量生成分类占位封面。

分类占位封面
#

分类占位图
风景名胜assets/img/covers/places.svg
知名高校assets/img/covers/university.svg
桌游时光assets/img/covers/table-game.svg
美食探店assets/img/covers/entertainment.svg
生活感悟assets/img/covers/thinks.svg
轻松办公assets/img/covers/office.svg