阅读和使用
本指导中,虚线框中的内容即为组件代码,可以直接复制粘贴到词条内。词条编辑页面右下角的 快捷语法复制 按钮中也能找到这些组件,点击后粘贴到编辑框中即可。
虚线框中灰色加粗的部分是需要自行填写的内容,例如:
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=描述
]]
又是站点Logo!
对于|text=,最好只填以下列举的词语:
- 惊吓
- 血腥
- 成人
长图折叠
图片竖向长度过长(例如吊桥女鬼),影响排版时,可以使用以下语法进行折叠:
[[include component:image-block-long
|name=图片URL
|caption=描述
]]
站点Logo。
插入音频
[[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
]]
消除浮动
糟糕的图片浮动!
有时候,如果插入过多图片 / 图片过长,可能导致在电脑端图片的浮动使下方的内容留空 / 挤压。由于手机端的图片浮动会被默认清除,因此这个问题可能对手机端阅览者不会很明显。
例如示例图中使用的代码为:
[[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=视频标题
]]
好多了
就可以消除上方图片的浮动,可以理解为有个看不见的线将上下两处给分隔开,效果如图所示。
(实际是插入了一个clear:both; height: 0px; font-size: 1px的div块以达成此效果)


