组件:伪链接预览,如何使用和效果展示
存档用于保留原文,原版可正常使用,请见
http://backrooms-wiki-cn.wikidot.com/component:popup
这是什么?
这是由 Eltrac 制作的伪链接预览组件(Fake Popup Preview),意在模仿维基百科的导航预览功能。使用者只要将鼠标放在一个超链接上,就能够看到作者预先设置好的有关这个链接页面的介绍。
该组件会在链接后生成一个 与普通链接做区分。在小屏幕设备下,尤其是只能通过触屏点击的移动设备,需要点击这个按钮才不会在查看内容时跳转到链接对应页面。
效果演示
把鼠标移到下面的链接上试试!
Level C-599 被认为是 C 层群的第 599 层。与 Level 199使用方法
首先,在页面顶部插入一下代码。
[[include :backrooms-wiki-cn:component:popup]]
在需要使用的位置复制粘贴以下代码并修改即可。
链接前的文字[[span class="popup"]][[[链接|链接文字]]][[span class="popup-content"]][[image 图片链接]][[span]]预览文字[[/span]][[/span]][[/span]]链接后的文字。对于没有图片的伪预览,可以使用这个代码1。
链接前的文字[[span class="popup text-only"]][[[链接|链接文字]]][[span class="popup-content"]]预览文字[[/span]][[/span]]链接后的文字。若需要修改伪预览块的颜色,使用这个代码。如果只是想要简单兼容基于黑色标记笔制作的版式,直接复制一下代码即可,无需更改。
[[module CSS]] :root { --popup-bg: var(--pale-gray-monochrome); /* 修改背景色 */ --popup-text: var(--black-monochrome); /* 修改文字颜色 */ } [[/module]]
如果不喜欢链接后面的问号,可以用这个代码隐藏。
[[module CSS]] @media screen and (min-width:768px) { .popup::after { display: none } } [[/module]]
特别说明
如果你发现你添加了伪链接预览的某一段落失去了上下边距,比如出现了这样的情况:
下水道系统不同于与它重名的 Level 34
Level 34 是一个小隧道,天花板和地板之间只隔四英尺。在此处要格外小心,因为你可能会不慎掉入水中而进入 Level -2。该层级没有内部照明,所以非常建议带上灯笼或手电筒。该层级已被多人进入过。层级内有很多实体,如笑魇。若你在隧道内看见笑魇,建议立即关闭手电筒,将视线移至下方,直至你认为笑魇已消失——若你认为笑魇消失了,笑魇就会消失。这里的猎犬很少,但有很多尸鼠在狭小空间内游荡。 一女子声称在该层级中看到了窃皮者,但无证据支持这点。建议携带其他层级的杏仁水,因为该层级的杏仁水已被污染。,系一极为特殊的隐秘层级。
Level 34 是一个小隧道,天花板和地板之间只隔四英尺。在此处要格外小心,因为你可能会不慎掉入水中而进入 Level -2。该层级没有内部照明,所以非常建议带上灯笼或手电筒。该层级已被多人进入过。层级内有很多实体,如笑魇。若你在隧道内看见笑魇,建议立即关闭手电筒,将视线移至下方,直至你认为笑魇已消失——若你认为笑魇消失了,笑魇就会消失。这里的猎犬很少,但有很多尸鼠在狭小空间内游荡。 一女子声称在该层级中看到了窃皮者,但无证据支持这点。建议携带其他层级的杏仁水,因为该层级的杏仁水已被污染。,系一极为特殊的隐秘层级。
描述:
……
在不使用伪链接预览的情况下是这样:
这是因为某个漏洞导致 Wikidot 没有给使用了伪链接预览的段落添加 p 标签,而没有 p 标签就没有上下边距。要解决这个问题,我们就需要手动添加边距。
如果遭遇了这种情况,给对应的段落加上 popup-fix 类。
[[div class="popup-fix"]]
......
[[/div]]






