“黑幕”可以隐藏内容,当光标悬浮在黑幕上方时里面的内容才会显示。当光标离开黑幕时,里面的内容会再次隐藏。
See also SpoilerBlur and SpoilerTags.
安装[]
使用方法[]
用<span class="heimu">黑幕内容</span>
包裹住内容,让内容隐藏在黑幕中。效果见此。
自定义颜色[]
总共有8个CSS变量用于调整黑幕的颜色,亮色主题和暗色主题各4个。红链颜色用于指向站内尚不存在的页面的链接。
浅色主题 | 深色主题 | |
---|---|---|
背景颜色 | --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: 向你的工具栏添加一个按钮,按下按钮可以让全部黑幕内容显示(即将推出)