Fandom Developers Wiki

“黑幕”可以隐藏内容,当光标悬浮在黑幕上方时里面的内容才会显示。当光标离开黑幕时,里面的内容会再次隐藏。

See also SpoilerBlur and SpoilerTags.

安装[]

使用方法[]

<span class="heimu">黑幕内容</span>包裹住内容,让内容隐藏在黑幕中。效果见此

自定义颜色[]

总共有8个CSS变量用于调整黑幕的颜色,亮色主题和暗色主题各4个。红链颜色用于指向站内尚不存在的页面的链接。

CSS变量名
浅色主题 深色主题
背景颜色 --light-heimu-background-color --dark-heimu-background-color
文字颜色 --light-heimu-text-color --dark-heimu-text-color
链接颜色 --light-heimu-link-color --dark-heimu-link-color
红链颜色 --light-heimu-redlink-color --dark-heimu-redlink-color

行内样式[]

如果你要修改一个黑幕的配色,添加行内样式即可。注意,直接定义CSS属性(比如<span class="heimu" style="color:lime">Lime</span>)会导致黑幕在浅色主题和神色主题中都使用同一种颜色。如果你要在不同的主题分别用不同的颜色,请为上述CSS变量赋值。

<span class="heimu" style="--light-heimu-background-color:purple;--dark-heimu-background-color:cyan">这个黑幕在亮色主题有紫色的背景,在暗色主题又有天蓝色的背景。</span>

全站样式[]

要让黑幕的颜色和你wiki的主题色相配,你可能需要往wiki的MediaWiki:Common.css里添加如下代码:

:root {
    --light-heimu-background-color: /* 你要的颜色 */;
    --light-heimu-text-color: /* 你要的颜色 */;
    --light-heimu-link-color: /* 你要的颜色 */;
    --light-heimu-redlink-color: /* 你要的颜色 */;
    --dark-heimu-background-color: /* 你要的颜色 */;
    --dark-heimu-text-color: /* 你要的颜色 */;
    --dark-heimu-link-color: /* 你要的颜色 */;
    --dark-heimu-redlink-color: /* 你要的颜色 */;
}

模板[]

在你的wiki上创建这样一个模板,方便使用:

<span class="heimu" title="{{{title|}}}" style="{{{style|}}}">{{{1|}}}</span>

(本段代码不处理模板文档、选择嵌入和分类的问题。如果你要将这个模板搬运至自己的wiki,需要自行解决这些问题。)

更多增强功能[]

  • HeimuToggle: 向你的工具栏添加一个按钮,按下按钮可以让全部黑幕内容显示(即将推出)