使用CSS/HTML下拉列表作为MediaWiki模板



我正在尝试将此订单用作MediaWiki模板,并允许在URL创建中使用MediaWiki参数(即{{PAGENAME}})。显然,这种类型的HTML元素没有解析。尝试$wgRawHtml = true;导致显示模板,但是除了是安全风险外,没有办法具有可放松元素。我确实找到了这个模板,但我无法弄清楚如何使其适用于有关下拉列表的样式。

在页面MediaWiki:Common.css(或MediaWiki:Skinname.css,如果您只想要特定皮肤),请添加所需的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上使用链接到页面FooBarBaz的链接。


如果您必须支持外部链接或明文,请改用以下内容:

<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>

将CSS中的a 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链接和一个普通文本菜单项。


注意:如果参数包含equals(=),则需要指定所有参数名称,例如:

{{dropdown|1=[https://duckduckgo.com/?q=foo&ia=web Search for Foo]|2=Bar}}

另请参见:将等同的符号('=')传递给媒体维基模板中的参数

,所以我尝试使用它,并且在下拉列表本身中的页面内容的其余部分内容都存在。看起来任何参数都不关闭,所以我不确定为什么要这样做。使用MW1.32

相关内容

  • 没有找到相关文章

最新更新