mediawiki - 使用 css/html 下拉菜单作为 Mediawiki 模板
问题描述
我正在尝试将此下拉列表用作 Mediawiki 模板,并允许在 URL 创建(即{{PAGENAME}}
)中使用 Mediawiki 参数。显然,这种类型的 html 元素没有被解析。尝试$wgRawHtml = true;
导致显示模板,但是除了存在安全风险之外,没有办法拥有可解析的元素。我确实找到了这个模板,但我不知道如何使其适应相关下拉列表的样式。
解决方案
在页面中MediaWiki:Common.css
(或者,如果您只希望它用于某种皮肤),添加您想要的 CSS:MediaWiki:Skinname.css
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
如果模板中的所有内容都将成为内部链接,请将其设为您的模板:
<div class="dropdown">
<div class="dropbtn">{{{title|Dropdown}}}</div>
<div class="dropdown-content"><!--
-->{{#if:{{{1|}}}|[[{{{1}}}]]}}<!--
-->{{#if:{{{2|}}}|[[{{{2}}}]]}}<!--
-->{{#if:{{{3|}}}|[[{{{3}}}]]}}<!--
-->{{#if:{{{4|}}}|[[{{{4}}}]]}}<!--
-->{{#if:{{{5|}}}|[[{{{5}}}]]}}<!--
</div>
</div>
然后像这样调用它:
{{dropdown|Foo|Bar|Baz}}
它会生成一个下拉列表,其中包含指向您的 wiki 上的页面Foo
、Bar
和的链接。Baz
如果您必须支持外部链接或纯文本,请改用:
<div class="dropdown">
<div class="dropbtn">{{{title|Dropdown}}}</div>
<div class="dropdown-content plainlinks"><!--
-->{{#if:{{{1|}}}|<span>{{{1}}}</span>}}<!--
-->{{#if:{{{2|}}}|<span>{{{2}}}</span>}}<!--
-->{{#if:{{{3|}}}|<span>{{{3}}}</span>}}<!--
-->{{#if:{{{4|}}}|<span>{{{4}}}</span>}}<!--
-->{{#if:{{{5|}}}|<span>{{{5}}}</span>}}<!--
--></div>
</div>
a
将 CSS 中的 s更改为span
s,并添加一条规则以确保它们是黑色而不是蓝色:
/* Links inside the dropdown */
.dropdown-content span {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content span:hover {background-color: #ddd;}
.dropdown-content a, .dropdown-content a:hover{
color: black;
text-decoration: none;
}
然后,您可以像这样调用它
{{dropdown|[[Foo]]|[https://www.google.com/ Google]|Plain text}}
它有一个指向页面Foo
的链接、一个指向 Google 的链接和一个纯文本菜单项。
注意:如果参数包含等号 ( =
),则需要指定所有参数名称,如下所示:
{{dropdown|1=[https://duckduckgo.com/?q=foo&ia=web Search for Foo]|2=Bar}}
推荐阅读
- amazon-web-services - “解析列类型时出错”Redshift Spectrum
- c - Atom.io 缺少 sys/wait.h 或允许 fork()
- django-models - 可以在 PageChooserBlock 上设置 on_delete=PROTECT 吗?
- java - 如何在java中基于一个相同的索引值同时从两个Arraylists中删除元素
- c# - C# - 如何擦除屏幕上的绘制矩形?
- java - 仅使用 openssl 创建了 java truststore.p12
- linux - 为什么 Windows VM 会产生与 Linux 不同的浮点输出?
- mysql - SELECT count() 有两个相同的条件
- django - 用文件填充 django 模板
- html - Bootstrap 没有官方侧边栏菜单吗?