输入关键词,开始搜索

↑↓ 选择 打开 esc 关闭
沉浸

媒体嵌入(5个指令)

媒体嵌入指令

用于在文章中插入图片、画廊、视频和音频。


增强图片(image)

带说明文字和可选下载按钮的单张图片展示。

壮丽山景
壮丽山景
带下载按钮的山峰
带下载按钮的山峰
正方形裁剪
正方形裁剪
::image{src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80" alt="壮丽山景"}

::image{src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=800&q=80" alt="带下载按钮的山峰" download="true"}

::image{src="https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?w=800&q=80" alt="正方形裁剪" ratio="1/1" width="300px"}
  • src必填):图片地址
  • alt:图片描述,会显示在图片下方作为 caption
  • width / height:设置图片尺寸
  • ratio:固定宽高比,如 1/116/9
  • downloadtrue 或自定义下载链接,显示下载按钮
  • fancyboxfalse 可禁用点击放大

画廊(gallery)

图片网格或瀑布流展示,适合多张图片的排版。

:::gallery{layout="grid"}
![壮丽山峰](https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=400&q=80)
![山间湖泊](https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&q=80)
![森林小径](https://images.unsplash.com/photo-1448375240586-882707db888b?w=400&q=80)
![海边日落](https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400&q=80)
![城市夜景](https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=400&q=80)
![田园风光](https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=400&q=80)
:::
  • layoutgrid(网格,默认)或 flow(瀑布流)
  • sizexs | s | m | l | xl | mix,控制图片尺寸
  • ratiosquare | portrait | origin,固定图片比例,origin 保持原始比例

摄影框(photo)

带水印的摄影展示,适合摄影作品的专业呈现。

::photo{src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&q=80" watermark="true"}

::photo{src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&q=80" watermark="Vergil Theme"}
  • src必填):图片地址
  • watermark:水印文字,true 使用默认水印,或传入自定义文字

音频播放器(audio)

在文章中插入音频,支持本地音频、网易云音乐和语音消息三种模式。

SoundHelix Song 1
SoundHelix Song 1
T. Schürger
00:00
00:00

写法:

:::audio{src="https://example.com/music.mp3" title="歌曲名" artist="艺术家" cover="https://..."}
:::
  • src必填):音频文件地址
  • title:歌曲标题
  • artist:艺术家
  • cover:封面图 URL(可选)
  • align:对齐方式,可选 left(默认)、centerright
  • width:自定义宽度,如 width="400px"

居中对齐:

SoundHelix Song 1
T. Schürger
00:00
00:00

自定义宽度:

SoundHelix Song 1
T. Schürger
00:00
00:00

写法:

:::audio{netease="25706282" title="晴天" artist="周杰伦"}
:::
  • netease必填):网易云音乐歌曲 ID
  • 从网易云音乐网页版分享链接中获取歌曲 ID
  • align:对齐方式,可选 left(默认)、centerright
  • width:自定义宽度,如 width="400px"
15"

写法:

:::audio{voice="https://example.com/voice.mp3" duration="15"}
:::
  • voice必填):语音文件地址
  • duration:语音时长(秒),用于显示波形长度
  • align:对齐方式,可选 left(默认)、centerright
  • width:自定义宽度,如 width="400px"

视频播放器(video)

在文章中插入视频,支持本地视频、Bilibili 和 YouTube 三种模式。本地视频支持画中画(PiP)浮动播放器。

本地视频(带封面)

:::video{src="https://example.com/video.mp4" poster="https://example.com/poster.jpg" ratio="16/9"}
:::
  • src必填):视频文件地址
  • poster:封面图,显示自定义播放按钮覆盖层,点击后播放
  • ratio:宽高比,默认 16/9,可选 4/31/1
  • width:最大宽度,如 width="600px"
  • align:对齐方式,可选 left(默认)、centerright
  • autoplaytrue 自动播放(静音)
  • pip:画中画模式,可选 auto(默认,滚动离开自动触发)、manual(手动触发)、off(关闭)

本地视频(原生 controls)

不指定 poster 时,直接使用原生 <video controls> 播放器。

:::video{src="https://example.com/video.mp4" ratio="16/9"}
:::
  • 不指定 poster 时,使用原生浏览器播放器控件
  • 其他参数与带封面模式相同

本地视频(画中画 auto)

视频播放中向下滚动离开视口时,自动弹出右下角浮动播放器。

:::video{src="..." poster="..." ratio="16/9" pip="auto"}
:::
  • pip="auto"(默认):播放中离开视口自动进入画中画
  • 浮动播放器支持拖动、播放/暂停、进度跳转
  • 点击 ↩ 回到原位并恢复播放,点击 × 直接关闭

本地视频(画中画 manual)

不自动触发,鼠标悬停视频右上角显示画中画按钮,点击后手动进入浮动播放。

:::video{src="..." poster="..." ratio="16/9" pip="manual"}
:::
  • pip="manual":鼠标悬停时右上角显示画中画按钮,点击手动触发
  • 适合不希望自动打扰读者的场景

本地视频(居中对齐)

:::video{src="..." poster="..." align="center" width="500px" ratio="4/3"}
:::
  • align="center":视频容器居中对齐
  • width="500px":限制最大宽度
  • ratio="4/3":4
    宽高比

Bilibili

:::video{bilibili="BV1GJ411x7h7"}
:::
  • bilibili必填):B 站 BV 号
  • ratiowidthalign 与本地视频相同
  • 不支持画中画(iframe 内视频无法控制)

YouTube

:::video{youtube="jfKfPfyJRdk"}
:::
  • youtube必填):YouTube 视频 ID
  • autoplaytrue 自动播放(自动静音,符合 YouTube 策略)
  • ratiowidthalign 与本地视频相同
  • 不支持画中画
未知标题
00:00
00:00
播放列表