使用 css/html 下拉列表作为 Mediawiki 模板

Question

我正在尝试使用这个 dropdown as a Mediawiki template and allow for Mediawiki parameters in the URL creation (I.e. {{PAGENAME}}). Apparently, this type of html elements is not parsed. Trying $wgRawHtml = true; resulted in the template being displayed, but, apart from being a security risk, there was no way to have parsable elements. I did find this template 但我不知道如何调整它以适应相关下拉菜单的样式。

Answer 1

在页面 MediaWiki:Common.css（或 MediaWiki:<i>Skinname</i>.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;}

如果模板中的所有内容都是内部 link，请将其作为您的模板：

<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 页面上创建一个带有 link 的下拉列表。

如果您必须支持外部 links 或纯文本，请改用此：

<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 更改为 span，并添加一条规则以确保它们是黑色而不是蓝色：

/* 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}}

它有一个 link 到页面 Foo，一个 link 到 Google，以及一个纯文本菜单项。

注意：如果参数中包含等号（=），则需要指定所有参数名称，如下所示：

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

另请参阅：Passing an equal sign ('=') to a parameter in a MediaWiki template

Answer 2

所以我尝试使用它，但我遇到了一个问题，即下拉菜单之后的其余页面内容在下拉菜单本身中。 IT 看起来没有任何参数没有关闭，所以我不确定为什么要这样做。使用 MW1.32

使用 css/html 下拉列表作为 Mediawiki 模板

Using css/html dropdown as Mediawiki template

mediawiki

mediawiki-templates