Использование css / html выпадающего списка в качестве шаблона Mediawiki - PullRequest
Новая
       76

Использование css / html выпадающего списка в качестве шаблона Mediawiki

0 голосов
/ 16 февраля 2019

Я пытаюсь использовать этот выпадающий список в качестве шаблона MediaWiki и разрешить параметры MediaWiki при создании URL (т.е. {{PAGENAME}}).Видимо, этот тип HTML-элементов не анализируется.Попытка $wgRawHtml = true; привела к отображению шаблона, но, кроме угрозы безопасности, не было никакого способа иметь анализируемые элементы.Я нашел этот шаблон , но я не мог понять, как адаптировать его для работы со стилем раскрывающегося списка.

1 Ответ

0 голосов
/ 16 февраля 2019

На странице 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;}

Если все в шаблоне будетвнутренняя ссылка, сделайте этот шаблон таким: 

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

И он сделает выпадающий список со ссылками на страницы 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 s вCSS для 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}}

См. также: Передача знака равенства ('=') параметру в шаблоне MediaWiki

...