Вед-дев, Сео, Манимейкинг

Добавляем инфо-блоки в MediaWiki

Данная статья актуальна для версии MediaWiki 1.23+ (я использую 1.24 альфа).

Инфо-блок (Infobox) - это блок, который находится с правой стороны статьи и может иметь графический и текстовый контент, а также раскрывающиеся заголовки.

Например:

infobox-mw.png

А теперь подробная шаги по достижению такого результата:

1) Устанавливаем расширение Scribuntu
2) Вставляем следующие строки кода в ваш css файл, который находится по адресу http://site.com/index.php/index.php?title=MediaWiki:Common.css&action=edit:

/* infobox */

.infobox .navbar {
    font-size: 100%;
}
.navbox .navbar {
    display: block;
    font-size: 100%;
}
.navbox-title .navbar {
    /* @noflip */
    float: left;
    /* @noflip */
    text-align: left;
    /* @noflip */
    margin-right: 0.5em;
    width: 6em;
}

/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript
   in [[MediaWiki:Common.js]] are styled here so they can be customised. */
.collapseButton {
    /* @noflip */
    float: right;
    font-weight: normal;
    /* @noflip */
    margin-left: 0.5em;
    /* @noflip */
    text-align: right;
    width: auto;
}
/* In navboxes, the show/hide button balances the v·d·e links
   from [[Template:Navbar]], so they need to be the same width. */
.navbox .collapseButton {
    width: 6em;
}

/* Styling for JQuery makeCollapsible, matching that of collapseButton */
.mw-collapsible-toggle {
    font-weight: normal;
    /* @noflip */
    text-align: right;
}
.navbox .mw-collapsible-toggle {
    width: 6em;
}

/* Infobox template style */
.infobox {
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    color: black;
    /* @noflip */
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    /* @noflip */
    float: right;
    /* @noflip */
    clear: right;
    /* @noflip */
    text-align: left;
    font-size: 88%;
    line-height: 1.5em;
}
.infobox caption {
    font-size: 125%;
    font-weight: bold;
}
.infobox td,
.infobox th {
    vertical-align: top;
}
.infobox.bordered {
    border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
    border: 1px solid #aaa;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
    border: 0;
}

.infobox.sisterproject {
    width: 20em;
    font-size: 90%;
}

.infobox.standard-talk {
    border: 1px solid #c0c090;
    background-color: #f8eaba;
}
.infobox.standard-talk.bordered td,
.infobox.standard-talk.bordered th {
    border: 1px solid #c0c090;
}

/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
    border: 0;
    border-top: 1px solid #aaa;
    /* @noflip */
    border-right: 1px solid #aaa;
}

.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
    border: 0;
    /* @noflip */
    border-right: 1px solid #aaa;
}

/* Styles for geography infoboxes, eg countries,
   country subdivisions, cities, etc.            */
.infobox.geography {
    border-collapse: collapse;
    line-height: 1.2em;
    font-size: 90%;
}

.infobox.geography  td,
.infobox.geography  th {
    border-top: 1px solid #aaa;
    padding: 0.4em 0.6em 0.4em 0.6em;
}
.infobox.geography .mergedtoprow td,
.infobox.geography .mergedtoprow th {
    border-top: 1px solid #aaa;
    padding: 0.4em 0.6em 0.2em 0.6em;
}

.infobox.geography .mergedrow td,
.infobox.geography .mergedrow th {
    border: 0;
    padding: 0 0.6em 0.2em 0.6em;
}

.infobox.geography .mergedbottomrow td,
.infobox.geography .mergedbottomrow th {
    border-top: 0;
    border-bottom: 1px solid #aaa;
    padding: 0 0.6em 0.4em 0.6em;
}

.infobox.geography .maptable td,
.infobox.geography .maptable th {
    border: 0;
    padding: 0;
}

/* collapsible infoboxes */

a.infoboxtoggle { float: right; } /* positions the +/- */
.hidden { display: none; } /* hides hidden rows */
tr.header.hidden { display: table-row; } /* does _not_ hide headers */

3) Вставляем следующие строки кода в ваш js файл, который находится по адресу http://site.com/index.php/index.php?title=MediaWiki:Common.js&action=edit:

/* infoboxes */
(function($) {
    $('<a class="infoboxtoggle" href="#">+/-</a>').appendTo(
      $('.infobox tr.header').filter(function(){ return $(this).attr('class').split(" ").length > 1 }).find("th")
    );
 
    $(".infobox tr.header").each(function(){
      var $this = $(this);
 
      if( $this.hasClass("hidden") ){
        var firstclass = $this.attr("class").split(" ")[0];
        $this.siblings("." + firstclass).addClass("hidden");
      }
   });
 
    $('a.infoboxtoggle').click (
      function (infoboxtoggle)
      {
        var parent  = $(this).parent ();
        var grandparent  = parent.parent ();
        var firstclass  = grandparent.attr ('class').split(" ")[0];
 
        infoboxtoggle.preventDefault();
        grandparent.siblings ('.' + firstclass).has ('td').toggleClass ('hidden');
      }
    );
});

4) Экспортируем infobox шаблон из wikipedia.org, но учтите.
- Оставляем пустым поле "Add pages from category"
- В текстовое поле пишем "Template:Infobox"
- Следующие чекбоксы должны быть активными: "Include only the current revision, not the full history”, “Include templates”, and “Save as file"
- Нажимаем на кнопку "Export" и сохраняем на наш компьютер.

5) Импортируем шаблон infobox в наш MediaWiki: http://your_wiki/wiki/index.php/Special:Import

6) Вставляем код в любую из наших статей:

{{Infobox
 | abovestyle = background:#cfc;
 | above = Infobox
 | image = [[File:Parents.jpg|300px]]

 |header1 = Header 1
 |rowclass1 = class1 header hidden

 |label2 = 111
 |data2 = test1
 |rowclass2 = class1

 |header3 = Header 3
 |rowclass3  = class3 header hidden

 |label4 =
 |data4  = data 4
 |rowclass4 = class3
}}

Класс "hidden" скрывает объект.
Класс "header" добавляет объекту кнопки "+/-" для раскрытия/скрытия контента.



Комментарии (0)

Разделы

Подписаться

Подписка на RSS-лента последние записи из Блога

Комменты

  • Olzhas 5 месяцев 3 недели назад
    Спасибо. С Новым Годом! 
  • Den 6 месяцев 3 недели назад
    В первой функции, при создании переменной $li_previous нужно поменять '←' с NULL, в $li_next сделать тоже самое. 
  • Гость 6 месяцев 3 недели назад
    Если все ровно так как было описано, то нет никаких сомнений что домен увел сам регистратор. Потому что вероятность того 
  • Валерий 7 месяцев 2 недели назад
    да можно делать импорт-экспорт только лишь в оболочке на входя на mysql сервер 
  • admin 7 месяцев 3 недели назад
    Валерий, а зачем вам именно так делать экспорт? Если я не ошибаюсь, то там нет какой-либо команды чтобы сделать экспорт 
  • Валерий 7 месяцев 3 недели назад
    захожу на mysql через ssh по команде  
  • admin 7 месяцев 3 недели назад
    Добрый вечер, какой у вас клиент? 
  • Валерий 7 месяцев 3 недели назад
    Здравстуйте, есть команда чтобы сделать экспорт базы внутри mysql клиента? 
  • Eduard 8 месяцев 1 неделя назад
    Видать, домен хороший был. Заявление пробывали писать на мошенника? 
  • Stas 9 месяцев 2 недели назад
    Ошибка в ключе квантификатора - replace(/будешь|пить/ig, "хлеб"); Указать -g для прохода по всем совпадениям!