Навинфобоксы

Инфобоксы могут быть отличным местом для расположения важных ссылок, имеющих отношение к статье. Здесь представлен скелет кода для модульных инфобоксов и их стилей для эффективного и простого добавления ссылок в инфобокс.

## Введение

Идея и код навинфобоксов были разработаны участником Kjnoren на английской Elliott Kay Wiki, на которой есть несколько примеров того, как навинфобоксы могут быть использованы на практике.

Блог о взгляде на навбоксы, как на модульные инфобоксы (англ.) содержит рассуждения и информацию о разработке различных элементов.

## Составляющие навинфобокса

Навинфобоксы строятся из следующих элементов:

Списки страниц
Простые списки ссылок, которые могут быть вынесены в отдельный шаблон или включены в страницу.
Навинфобоксы
Модульные инфобоксы, которые могут представлять один список страниц или больше.
Концептбоксы
Модульные инфобоксы, содержащие только списки страниц.
## Рекомендации по использованию

С помощью этого метода можно создать полную замену обычным навбоксам и разместить её в модульных инфобоксах. Не делайте этого!

* Ограничьтесь только самыми важными ссылками для каждой страницы или каждой группы страниц.
* Списки страниц не должны содержать больше семи-восьми элементов, а в идеале - не больше пяти.
* Максимальное количество список страниц - не более двух или трёх в инфобоксе.
* Если ссылка уже есть в инфобоксе где-нибудь в другом месте, нет необходимости добавлять её в список страниц.
* Списки страниц не должны быть двунаправленными. То, что страница включает в себя список страниц не означает, что она должна быть включена в этот список страниц.

Списки страниц очень легко создать, а модульная природа навинфобоксов означает, что они могут быть легко приспособлены для отдельных страниц. Расположение на видном месте означает, что они должны быть зарезервированы для ссылок, которые наиболее подходят для данной страницы.

## Простой пример кода инфобокса

### Простой пример код навинфобокса

Код навинфобокса предназначен для добавления в обычный модульный инфобокс (лучше всего его добавлять в конце). Простой навинфобокс может содержать до двух списков страниц, т. к. предполагается, что он уже содержит другие ссылки в инфобоксе.

```
<infobox>
 <title source="fullname">
 <default>{{#explode:{{PAGENAME}}|(}}</default>
 </title>
 <group name="navgroup">
 <header>Related pages</header>
 <data source="rellist1">
 <label>'''{{{relcaption1}}}'''</label>
 </data>
 <data source="rellist2">
 <label>'''{{{relcaption2}}}'''</label>
 </data>
 </group>
</infobox>

```

### Простой пример кода концептбокса

"Концептбокс" содержит только списки страниц, поэтому он может содержать до трёх списков страниц.

```
<infobox type="prefix-concept" layout="stacked">
 <group name="navgroup">
 <title source="title">
 <default>{{#explode:{{PAGENAME}}|(}}</default>
 </title>
 <data source="rellist1">
 <label>'''{{{relcaption1}}}'''</label>
 </data>
 <data source="rellist2">
 <label>'''{{{relcaption2}}}'''</label>
 </data>
 <data source="rellist3">
 <label>'''{{{relcaption3}}}'''</label>
 </data>
 </group>
</infobox>

```

## Пример простого кода CSS

```
/\* Правила для концептобоксов и навгрупп \*/
section[data-item-name="navgroup"] .pi-item {
 display: block;
}

.page-content aside.type-prefix-concept h3.pi-data-label,
.page-content section[data-item-name="navgroup"] h3.pi-data-label {
 font-size: 14px;
 text-align: center;
}

.type-prefix-concept h3.pi-data-label b,
section[data-item-name="navgroup"] h3.pi-data-label b {
 font-weight: 700;
}

.page-content aside.type-prefix-concept .pi-data-value,
.page-content section[data-item-name="navgroup"] .pi-data-value,
.page-content section[data-item-name="navgroup"] .pi-data-value li {
 font-size: 14px;
 text-align: center;
}

.type-prefix-concept .pi-data,
section[data-item-name="navgroup"] .pi-data {
 border-top: solid 1px var(--pi-border-color);
 padding-top: 9px;
}

.type-prefix-concept .pi-data:first-of-type,
section[data-item-name="navgroup"] .pi-data:first-child,
section[data-item-name="navgroup"] h2 + .pi-data {
 border-top: none;
}

.type-prefix-concept .pi-data ul,
section[data-item-name="navgroup"] .pi-data ul,
.type-prefix-concept .pi-data ol,
section[data-item-name="navgroup"] .pi-data ol {
 text-align: center;
 margin-left: 0;
}

.type-prefix-concept.portable-infobox .pi-data li,
.type-prefix-concept.portable-infobox .pi-data li ul,
.portable-infobox section[data-item-name="navgroup"] .pi-data li,
.portable-infobox section[data-item-name="navgroup"] .pi-data li ul {
 display: inline;
 margin: 0;
}

.type-prefix-concept .pi-data li:first-child::before,
section[data-item-name="navgroup"] .pi-data li:first-child::before
{
 content: none;
}

.type-prefix-concept .pi-data li::before,
section[data-item-name="navgroup"] .pi-data li::before
{
 content: " · ";
 margin-left: 0.1em;
 margin-right: 0.1em;
}

.type-prefix-concept .pi-data li ul::before,
section[data-item-name="navgroup"] .pi-data li ul::before {
 content: " ( ";
 margin-left: 0.1em;
 margin-right: 0.1em;
}

.type-prefix-concept .pi-data li ul::after,
 .pi-data li ul::after{
 content: " )";
 margin-left: 0.1em;
 margin-right: 0.1em;
}

.page-content .portable-infobox .type-prefix-concept ul ul,
.page-content .portable-infobox section[data-item-name="navgroup"] ul ul {
 padding-left: 0;
}

/\* Трюк для отступов (margin) когда навгруппа идёт в инфобоксе первой \*/
.portable-infobox section[data-item-name="navgroup"]:first-child {
 margin-top: 0;
}
/\* Конец правил для концептбоксов и навгрупп \*/

```

## Простой пример навинфобокса

Простой навинфобокс ниже использует встроенные включения списков страниц, показывая свой простой синтаксис. Однако предпочтительно, чтобы списки страниц были вынесены в отдельные шаблоны для лучшей поддержки и лёгкого использования на нескольких страницах.

```
{{Скелет навгруппы
* First album
** Disc one
** Disc two
** Disc three
* Second album
** Disc one
** Disc two
** Disc three
* Third album
* First member
* Second member
* Third member

}}

```

Вот так выглядит навинфобокс с добавлением простого CSS:

```
{{Скелет концептбокса
* First album
* Second album
* Third album
* Fourth album
* Fifth album
* Sixth album
* Seventh album
* Eighth album
* First member
* Second member
* Third member
* Fourth member
* Fifth member
* Sixth member
* Seventh member
* Eighth member
}}

```

Вот так выглядит концептбокс с добавлением простого CSS: