注意
此页为于 SCP 维基内部使用的"组件"页。用于在其他页面中引用。
未经组件作者或工作人员允许,请勿修改此页的内容。
悬停链接!
跟维基百科里的一样!无需多言。
悬停链接最初由 Croquembouche Croquembouche 制作并在 SCP-9000 — 无尽残形 iSCP-9000 — 无尽残形原来是可以在组件里推文的呀。有谁会抱怨呢?你吗?-中使用,如果你喜欢将有趣且有关联的页面链接穿插在自己的故事中,却又不想读者感觉自己如果没读过这些文就空缺了什么,那么在这种极少量的应用场景中就可以用上悬停链接。你可以利用悬停链接来简明地总结一下链接的背景故事,然后继续写作,而无需冒着读者可能会分心然后永远放弃掉你的文章的风险。
使用方法
在任何维基中,将下面代码贴到页面的顶部,并需置于所有 CSS 版式的上方:
[[include :scp-wiki-cn:component:hoverlinks]]
上面的代码只需要贴一次,无论页面中存在多少悬停链接。
随后,对于每一条想要在页面中使用的悬停链接,复制下方的格式(或者用更下面的生成器),然后粘贴在你想要的任何地方。
带图片:
[[span class="hoverlink"]][[[链接地址|链接文字]]]^^i^^[[span class="hoverlink-card"]][[span class="hoverlink-title"]]悬停标题[[/span]][[span class="hoverlink-text"]]悬停文本[[/span]][[span class="hoverlink-image" style="--src: url(图片链接)"]]-[[/span]][[/span]][[/span]]
不带图片
[[span class="hoverlink"]][[[链接地址|链接文本]]]^^i^^[[span class="hoverlink-card"]][[span class="hoverlink-title"]]悬停标题[[/span]][[span class="hoverlink-text"]]悬停文本[[/span]][[/span]][[/span]]
生成器
使用生成器工具来为页面生成悬停链接。你所需的就只有页面的地址(可以是完整的地址,也可以只有页面名称,比如 "scp-173")。然后,你可以让 Crom 来帮你把剩下的信息都填上。这个生成器里面已经填好一个随机的 SCP 了,你可以马上就试一试。
Crom 使用的数据实际上并不一定适用于悬停链接——比如,预览用的文本可能是由目标页面作者所写的,通常更多时候只是简介,而不是什么有用的总结,而大多数页面甚至都没有预览文本。你应该用 Crom 的数据作为起点,然后根据自己所需来定制悬停链接。
亦请参见:如何为你的文章修改这项数据 i文章作者的 Crom 使用说明作为一个作者,多数人对你文章的第一印象大部分都来自 Crom。举个例子,Discord 的嵌入文本、Reddit 上的回复、网站内的嵌入式搜索模块,或者是本网站。而作为作者,你可以在许多方面定制 Crom 展示你的作品的方式。-
[フレーム]
使用注意
悬停文本应该是什么?
你应该根据你的文章和链接所处的具体语境来高度量身定制悬停文本。
我的建议是,想想你为什么要链入那篇文章,然后尽量简洁地说明这一原因,且使其符合世界观。比如:
- 如果我在写一个比如说逆模因的故事,然后我想链接到 SCP-055 iSCP-055无法被记住的未知物体。基金会所获的首个逆模因。 因为它是第一个逆模因,那么我就可能会做出刚刚所做的那种事。现在读者就能读懂我选择写这个的原因,他们就知道这只是世界观构建的一部分而已,可以忽略掉。他们就可以继续读我的故事。
- 如果我在写一个有背景阅读需求的故事——比如说这篇故事是在死亡终结设定下的——那我可能会链接到死亡终结的中心页,然后说一些比如"由于正在发生的 ΩK 级情景 i死亡终结 - 中心页由未知事件所促成的正在发生的 ΩK 级情景,该情景导致任何生物无法死亡。所有研究员都应该对此熟悉。-所以什么什么之类的"。这就能让读者知道,在叙事上,他们可能会需要暂停阅读我的故事,先补设定再回来。
或者说,如果你想暗示读者他们应该完整阅读被链入的页面,或者给读者一种他们正在阅读一个庞大的连贯信息体系的印象,那可以试试给悬停链接添加足够多的文本,且使其被截断并显示省略号——就像维基百科那样。
避免将你的悬停链接变成简洁,比如引用文章内的一句"很酷的话",或者评论。你的目标不是扮演推销员向读者推销这篇文章,而是给他们一个工具,让他们自己做出要不要点击这个链接的明智决定。除非这是一个世界观外的页面,比如说你的作者页,那你可以随便写什么都行。
还有避免剧透被链入的文章,如果你能做到的话。
那个小小的 i 符号是什么?
我觉得这个符号能够很好地显式提示读者这个链接实际上是个悬停链接。我们维基用链接的的历史已经将近二十年了,积攒了太多的熟悉感。如果你不明确这个链接是悬停链接的话,那么大部分的用户都绝对不会知道。
你可能不觉得这想法好。那你可以自己把它去掉。直接从复制到的格式里移除掉 ^^i^^ 就行。
CSS 版式应该为悬停链接写样式吗?
绝对应该。如果你是 Sigma 版式的创作者,那可以随意将悬停链接修饰成适合的风格。如果你是其它基础版式(黑标、玄武岩)的创作者,那么你应该先等待基础版式更新了再做修饰。
为什么悬停链接本身不使用 [[include]]?
因为你不能在一行文本的中间 [[include]] 任何东西,而大部分的链接都在此处。
我可以放一个不是链接的悬停链接吗?
i悬停链接!悬停链接!悬停链接!悬停链接!。你只需要将 [[[链接地址 | 链接文本]]] 改成 [# 链接文本] 就行了。外观看起来还是一个链接(而且也必须要是,因为需要支持键盘导航激活),但却不会导向任何地方。
CSS 源代码
下面是悬停链接的 CSS:
/* 悬停链接! */ :root{ /*** 可配置变量 *CSS 版式应该先修改这些变量 * 仅在必要时修改其他属性 */ --hoverlink-bg-color:white; --hoverlink-text-color:black; /* 弹出框与链接之间的纵向距离 */ --hoverlink-distance:0.5rem; /* 弹出框在渐入时会移动的距离 */ --hoverlink-motion-distance:1rem; /* 桌面端弹出框的宽度,包括图片 */ --hoverlink-width:30rem; /* 弹出框高度 */ --hoverlink-height:12rem; /* 桌面端图片宽度 */ --hoverlink-image-width: var(--hoverlink-height); /* 卡片底部的文本。将其设置 "" 来将其移除 */ --hoverlink-read-more: "↗ 阅读全文"; }.hoverlink{position:relative; }@media (max-width: 1200px) {.hoverlink{position:static; }}.hoverlink-card{display: grid; grid-template-areas: "title" "text"; grid-template-rows:auto1fr; border:thinsolid #0006; border-radius:0.25rem; width: calc(var(--hoverlink-width) - var(--hoverlink-image-width)); height: var(--hoverlink-height); box-shadow:02.5rem 5rem -1rem #0002; background-color: var(--hoverlink-bg-color); color: var(--hoverlink-text-color); text-align:left; font-style:normal; font-weight:normal; opacity:0; visibility:hidden; transition-property: opacity, transform, visibility; transition-duration:0.2s, 0.2s, 0s; transition-timing-function: ease-out; transition-delay:0s, 0s, 0.4s; position:absolute; z-index:9; top:0; left:50%; pointer-events:none; user-select:none; transform: translate( -50%, calc( -100% - var(--hoverlink-distance) + var(--hoverlink-motion-distance) )); }.hoverlink-card:where(:has(.hoverlink-image)) {grid-template-areas: "title image" "text image"; grid-template-columns:auto var(--hoverlink-image-width); width: var(--hoverlink-width); }@media (max-width: 1200px) {.hoverlink-card{top:auto; transform: translate(-50%, calc( 0px - var(--hoverlink-distance) + var(--hoverlink-motion-distance) )); --hoverlink-distance:100% - 2rem; }}@media (max-width: 600px) {.hoverlink-card{ --hoverlink-image-width:16rem; width:16rem; height:auto; min-height: var(--hoverlink-height); max-height:15rem; }.hoverlink-card:has(.hoverlink-image) {height:28rem; grid-template-areas: "title" "text" "image"; grid-template-rows:auto1fr var(--hoverlink-image-width); grid-template-columns:auto; max-height:none; }}.hoverlink-image{grid-area: image; aspect-ratio:1; width: var(--hoverlink-image-width); background-image: var(--src); background-size: cover; background-position:center; color:transparent; }.hoverlink-title{grid-area: title; font-size:1.2em; font-weight:600; margin:0.5rem; }.hoverlink-text{grid-area:text; margin-inline:0.5rem; text-overflow: ellipsis; overflow:hidden; position:relative; }.hoverlink-text::after{position:absolute; pointer-events:none; inset:0; background-image: linear-gradient(to bottom, transparent70%, var(--hoverlink-bg-color) 95% ); content: var(--hoverlink-read-more); font-size:80%; display: flex; align-items: end; justify-content: end; opacity:0.9; }.hoverlink > a{ /*DisablepagepreviewoniOSasthiscoversthepopupandyoucan'tdismissitwithoutdismissingthepopup*/ -webkit-touch-callout:none; }.hoverlink > :is(a:hover, a:active, a:focus, sup:hover) ~ .hoverlink-card, .hoverlink-card--static{opacity:1; visibility:visible; --hoverlink-motion-distance:0rem; transition-delay:0.2s, 0.2s, 0s; }.hoverlink-card--static{position:relative; pointer-events:auto; user-select:auto; transform: translate(-50%, -0.5rem); --hoverlink-distance:0.5rem; --hoverlink-motion-distance:0rem; }.hoverlink > sup{user-select:none; top: -0.4em; margin-right: -0.25ch; }