媒体插入组件
暗色模式

阅读和使用

本指导中,虚线框中的内容即为组件代码,可以直接复制粘贴到词条内。词条编辑页面右下角的 快捷语法复制 按钮中也能找到这些组件,点击后粘贴到编辑框中即可。

虚线框中灰色加粗的部分是需要自行填写的内容,例如:
URL:指你要插入的媒体的链接。如果是当页的附件,则可以直接填上传时使用的名字,而不用填完整链接。

插入图片

注意:请不要使用原始未封装的 [[image]] 图片插入语法!

基础图片插入

最基础的图片插入语法:

[[include component:image-block
|name=URL
|caption=描述
]]

特别的是,图片语法应放在文本前才会在右侧浮动:

[[include component:image-block
|name=https://lostmedia.wikidot.com/local--files/start/cn-logo-2.svg
|caption=站点Logo
]]

文本文本文本描述描述描述……

全屏宽度图片

如果你想像Herobrine 直播视频中一样,让图片横向全屏,可以使用这个代码:

[[include component:image-block-center
|name=图片URL
|caption=描述
]]

[[include component:image-block-center
|name=https://lostmedia.wikidot.com/local--files/copeland-herobrine-stream/2.png
|caption=Enderboss25(搜索组组长)所总结的信息
]]

画廊

一次展示多张图片时,可以使用画廊组件。该组件会生成排列的图像,图像均为gallery模块(即点击可放大,同时可以点击图像左 / 右端切换图像)。

[[include component:gallery urls=
: 附件图片1
: 附件图片2
: 或是完整的URL
]]

[[include component:gallery urls=
: https://lostmedia.wikidot.com/local--files/cr6/1.png
: https://lostmedia.wdfiles.com/local--files/like-the-wind/SubwaysOfYourMind
: https://lostmedia.wikidot.com/local--files/everyone-knows-that/EKT
]]

折叠含不适宜内容的图片

如果对应的图像包含成人 / 惊吓 / 血腥等不适宜内容,请使用该组件:

[[include component:image-block-warn
|text=跳杀警告
|name=图片URL
|caption=描述
]]

对于|text=,最好只填以下列举的词语:

  • 惊吓
  • 血腥
  • 成人

长图折叠

图片竖向长度过长(例如吊桥女鬼),影响排版时,可以使用以下语法进行折叠:

[[include component:image-block-long
|name=图片URL
|caption=描述
]]


插入音频

[[include component:audio
|type=audio
|autoplay=1
|url=音频URL(存站点附件)
]]

[[include component:audio
|type=audio
|autoplay=1
|url=https://lostmedia.wikidot.com/local--files/everyone-knows-that/Everyone_Knows_That.mp3.mpeg
]]


插入视频

目前仅支持插入来自B站的视频。

[[include component:bilibili
|bv=视频BV号
|title=视频标题
]]

若要指定视频的某个分P,可以:

[[include component:bilibili
|bv=视频BV号
|title=视频标题
|page=2(第几P,仅填数字)
]]

若要设定视频播放的起始时间点,可以:

[[include component:bilibili
|bv=视频BV号
|title=视频标题
|t=从视频的特定时间点开始播放,单位:秒
]]

以上两个属性也允许同时设定。

[[include component:bilibili
|bv=BV1Gt411A7gZ
|title=【MikuFans 时期站内视频考古】第1期 / av1 ~ av25
|page=2
|t=15
]]


消除浮动

消除浮动展示1.png

糟糕的图片浮动!

有时候,如果插入过多图片 / 图片过长,可能导致在电脑端图片的浮动使下方的内容留空 / 挤压。由于手机端的图片浮动会被默认清除,因此这个问题可能对手机端阅览者不会很明显。

例如示例图中使用的代码为:

[[include component:image-block
|name=https://lostmedia.wikidot.com/local--files/start/cn-logo-2.svg
|caption=描述
]]

很少的文本量。

+ 相关视频

[[include component:bilibili
|bv=视频BV号
|title=视频标题
]]

对于这种情况,我们可以使用消除浮动代码:~~~~

例如,将上文的代码改写为:

[[include component:image-block
|name=https://lostmedia.wikidot.com/local--files/start/cn-logo-2.svg
|caption=描述
]]

很少的文本量。

~~~~

+ 相关视频

[[include component:bilibili
|bv=视频BV号
|title=视频标题
]]

消除浮动展示2.png

好多了

就可以消除上方图片的浮动,可以理解为有个看不见的线将上下两处给分隔开,效果如图所示。

(实际是插入了一个clear:both; height: 0px; font-size: 1px的div块以达成此效果)

本页内容采用授权方式参见授权指导 失传媒体中文维基 © 2024-2025