MURS вики

Шаблон:Схема транспортной системы: различия между версиями

← Предыдущая правкаСледующая правка →
отменитьTringoli (обсуждение | вклад)
Автомодерируемые
266 правок
ВизуальныйВики-текст
мНет описания правки
мНет описания правки
Строка 1: Строка 1:
<includeonly>{{#if: {{{данные|{{{json|}}}}}} |
<includeonly><div class="ts-transport-scheme" style="clear: both; margin: 1.2em auto; width: 100%; box-sizing: border-box; text-align: {{#switch: {{{прижатие|{{{выравнивание|центр}}}}}} | лево = left | право = right | center }};">
  {{#invoke:ТранспортнаяСхема|render|данные={{{данные|{{{json}}}}}}|файл={{{файл|}}}|ширина={{{ширина|}}}|подпись={{{подпись|}}}|карточка={{{карточка|}}}}}
|
<div class="ts-transport-scheme" style="clear: both; margin: 1.2em auto; width: 100%; box-sizing: border-box; text-align: {{#switch: {{{прижатие|{{{выравнивание|центр}}}}}} | лево = left | право = right | center }};">


<!-- Контейнер графической / интерактивной схемы -->
<!-- Графическая схема (отображается ТОЛЬКО если указан файл) -->
<div class="ts-transport-map-card" style="display: inline-block; max-width: 100%; box-sizing: border-box; background: var(--background-color-base, #ffffff); border: 1px solid var(--border-color-base, #d0d7de); border-radius: 10px; padding: 10px; box-shadow: 0 3px 12px rgba(0,0,0,0.06); text-align: center;">
{{#if: {{{файл|{{{изображение|}}}}}} |
{{#if: {{{файл|{{{изображение|}}}}}} |
<div class="ts-transport-map-card" style="display: inline-block; max-width: 100%; box-sizing: border-box; background: var(--background-color-base, #ffffff); border: 1px solid var(--border-color-base, #d0d7de); border-radius: 10px; padding: 10px; box-shadow: 0 3px 12px rgba(0,0,0,0.06); text-align: center; margin-bottom: 12px;">
   <div style="overflow-x: auto; max-width: 100%;">[[Файл:{{{файл|{{{изображение}}}}}}|{{#if: {{{ширина|}}} | {{{ширина}}} | 900px }}|center|alt={{{название|Схема транспортной системы}}}|{{{описание|{{{название|}}}}}}]]</div>
   <div style="overflow-x: auto; max-width: 100%;">[[Файл:{{{файл|{{{изображение}}}}}}|{{#if: {{{ширина|}}} | {{{ширина}}} | 900px }}|center|alt={{{название|Схема транспортной системы}}}|{{{описание|{{{название|}}}}}}]]</div>
|
  {{#if: {{{подпись|}}} | <div style="font-size: 12px; color: #57606a; margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border-color-base, #e1e4e8); text-align: center; line-height: 1.4;">🗺 {{{подпись}}}</div> }}
  <div style="overflow-x: auto; max-width: 100%; display: inline-block;">{{{карта|{{{схема|<div style="padding: 20px; color: #57606a;">''Файл схемы или интерактивная карта не указаны''</div>}}}}}}</div>
</div>
}}
}}
{{#if: {{{подпись|}}} | <div style="font-size: 12px; color: #57606a; margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border-color-base, #e1e4e8); text-align: center; line-height: 1.4;">🗺 {{{подпись}}}</div> }}
</div>


<!-- Блок легенды линий -->
<!-- Единый блок: легенда линий + реестр станций -->
{{#if: {{{линии|}}} |
{{#if: {{{линии|}}}{{{список|{{{1|}}}}}} |
<div class="ts-transport-lines-legend" style="margin: 10px auto; max-width: 950px; text-align: center; padding: 8px 12px; background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 8px;">
<div class="ts-transport-legend-container" style="margin: 0 auto; max-width: 950px; text-align: center; padding: 14px 16px; background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 10px; box-sizing: border-box; box-shadow: 0 2px 6px rgba(0,0,0,0.03);">
<div style="font-size: 11px; font-weight: bold; color: #57606a; text-transform: uppercase; margin-bottom: 4px; letter-spacing: 0.5px;">Линии скоростного транспорта</div>
 
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; align-items: center;">
  <!-- Верхний блок: плашки линий -->
  {{#if: {{{линии|}}} |
  <div class="ts-transport-lines-legend" style="margin-bottom: {{#if: {{{список|{{{1|}}}}}} | 14px | 0 }};">
    <div style="font-size: 11px; font-weight: bold; color: #57606a; text-transform: uppercase; margin-bottom: 10px; letter-spacing: 0.6px;">{{{заголовок линий|Линии скоростного транспорта}}}</div>
    <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: center;">
{{{линии}}}
{{{линии}}}
</div>
    </div>
  </div>
  }}
 
  <!-- Нижний блок: сворачиваемый реестр станций -->
  {{#if: {{{список|{{{1|}}}}}} |
  <div class="mw-collapsible {{#ifeq: {{{свёрнут|}}} | да | mw-collapsed | }} toccolours ts-transport-list-card" style="margin: 0 auto; width: 100%; text-align: left; box-sizing: border-box; background: #ffffff; border: 1px solid #d0d7de; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); padding: 0;">
    <div style="font-weight: bold; font-size: 13.5px; color: var(--color-base, #1f2328); background: #f6f8fa; padding: 9px 14px; border-bottom: 1px solid #d0d7de; display: flex; align-items: center; justify-content: space-between;">
      <span>{{{заголовок списка|📋 Реестр станций и остановочных пунктов}}}</span>
    </div>
    <div class="mw-collapsible-content" style="padding: 16px 20px; font-size: 13px; line-height: 1.6; column-width: {{{ширина колонок|280px}}}; column-gap: 24px; column-rule: 1px solid #e1e4e8;">
{{{список|{{{1}}}}}}
    </div>
  </div>
  }}
 
</div>
</div>
}}
}}


<!-- Сворачиваемый реестр станций -->
</div></includeonly><noinclude>
{{#if: {{{список|{{{1|}}}}}} |
== Пример схемы (статическое изображение) ==
<div class="mw-collapsible {{#ifeq: {{{свёрнут|}}} | да | mw-collapsed | }} toccolours ts-transport-list-card" style="margin: 12px auto 0 auto; max-width: 950px; text-align: left; box-sizing: border-box; background: var(--background-color-neutral-subtle, #f8f9fa); border: 1px solid var(--border-color-base, #d0d7de); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.04); padding: 0;">
{{Схема транспортной системы
<div style="font-weight: bold; font-size: 13.5px; color: var(--color-base, #1f2328); background: linear-gradient(180deg, #f6f8fa 0%, #eaeef2 100%); padding: 9px 14px; border-bottom: 1px solid var(--border-color-base, #d0d7de); display: flex; align-items: center; justify-content: space-between;">
|название = Скоростной транспорт Муроморска
  <span>{{{заголовок списка|📋 Реестр станций метрополитена и железной дороги}}}</span>
|файл = Схема_Муроморского_метрополитена.png
</div>
|ширина = 850px
<div class="mw-collapsible-content" style="padding: 14px 18px; column-width: {{{ширина колонок|20em}}}; -webkit-column-width: {{{ширина колонок|20em}}}; -moz-column-width: {{{ширина колонок|20em}}}; column-gap: 2em; column-rule: 1px solid #e1e4e8; font-size: 13px; line-height: 1.7;">
|подпись = Схема линий Муроморского метрополитена
{{{список|{{{1}}}}}}
|заголовок списка = 🚇 Станции Муроморского метрополитена
</div>
|линии =
</div>
{{СтМ|1|линия}}
|список =
* '''[[Невско-Заводская линия]]'''
** {{СтМ|1|Владимирский проспект|пересадка={{СтМ|D1|Северный вокзал}}}}
** {{СтМ|1|Театральная}}
** {{СтМ|1|Народная|ссылка=Народная (станция метро, Невско-Заводская линия)|пересадка={{СтМ|3|Народная|ссылка=Народная (станция метро, Павловская линия)}}}}
** {{СтМ|1|Площадь Метростроителей|пересадка={{СтМ|2|Площадь Метростроителей}}}}
** {{СтМ|1|Морской бульвар}}
** {{СтМ|1|Ауктува}}
** {{СтМ|1|Машиностроителей}}
** {{СтМ|1|Пролетарская|строящаяся=да}}
}}
}}


</div>
<div style="background: #ffffff; border: 1px solid #d0d7de; border-radius: 8px; padding: 18px 22px; margin-top: 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.05);">
}}</includeonly><noinclude>
 
<includeonly>{{#if: {{{данные|{{{json|}}}}}} |
== Руководство по интеграции схем ==
  {{#invoke:ТранспортнаяСхема|render|данные={{{данные|{{{json}}}}}}|файл={{{файл|}}}|ширина={{{ширина|}}}|подпись={{{подпись|}}}|карточка={{{карточка|}}}}}
|
<div class="ts-transport-scheme" style="clear: both; margin: 1.2em auto; width: 100%; box-sizing: border-box; text-align: {{#switch: {{{прижатие|{{{выравнивание|центр}}}}}} | лево = left | право = right | center }};">


<!-- Контейнер графической / интерактивной схемы -->
Шаблон поддерживает 3 способа вывода транспортных схем:
<div class="ts-transport-map-card" style="display: inline-block; max-width: 100%; box-sizing: border-box; background: var(--background-color-base, #ffffff); border: 1px solid var(--border-color-base, #d0d7de); border-radius: 10px; padding: 10px; box-shadow: 0 3px 12px rgba(0,0,0,0.06); text-align: center;">
{{#if: {{{файл|{{{изображение|}}}}}} |
  <div style="overflow-x: auto; max-width: 100%;">[[Файл:{{{файл|{{{изображение}}}}}}|{{#if: {{{ширина|}}} | {{{ширина}}} | 900px }}|center|alt={{{название|Схема транспортной системы}}}|{{{описание|{{{название|}}}}}}]]</div>
|
  <div style="overflow-x: auto; max-width: 100%; display: inline-block;">{{{карта|{{{схема|<div style="padding: 20px; color: #57606a;">''Файл схемы или интерактивная карта не указаны''</div>}}}}}}</div>
}}
{{#if: {{{подпись|}}} | <div style="font-size: 12px; color: #57606a; margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border-color-base, #e1e4e8); text-align: center; line-height: 1.4;">🗺 {{{подпись}}}</div> }}
</div>


<!-- Блок легенды линий -->
=== 1. Статичный графический файл <small>(.png, .jpg, .svg)</small> ===
{{#if: {{{линии|}}} |
В параметр <code>|файл=</code> передаётся имя загруженного изображения:
<div class="ts-transport-lines-legend" style="margin: 10px auto; max-width: 950px; text-align: center; padding: 8px 12px; background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 8px;">
<pre>
<div style="font-size: 11px; font-weight: bold; color: #57606a; text-transform: uppercase; margin-bottom: 4px; letter-spacing: 0.5px;">Линии скоростного транспорта</div>
{{Схема транспортной системы
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; align-items: center;">
|название = Муроморский скоростной транспорт
{{{линии}}}
|файл    = Схема_Муроморского_метрополитена.png
</div>
|ширина  = 850px
</div>
|подпись  = Схема линий скоростного транспорта Муроморска
|линии    =
{{Линия|1}}
{{Линия|2}}
{{Линия|3}}
{{Линия|4}}
{{Линия|D1}}
{{Линия|D2}}
|список  =  
* '''[[Марининский район (Муроморск)|Марининский район]]'''
** {{СтМ|1|Владимирский проспект|пересадка={{СтМ|D1|Северный вокзал|уточнение=нет}}}}
** {{СтМ|3|Лесная}}
}}
}}
 
</pre>
<!-- Сворачиваемый реестр станций -->
=== 2. Ручная интерактивная разметка <small>(ImageMap)</small> ===
{{#if: {{{список|{{{1|}}}}}} |
Позволяет сделать кликабельными зоны на изображении с помощью тега <code>&lt;imagemap&gt;</code> в параметре <code>|карта=</code>:
<div class="mw-collapsible {{#ifeq: {{{свёрнут|}}} | да | mw-collapsed | }} toccolours ts-transport-list-card" style="margin: 12px auto 0 auto; max-width: 950px; text-align: left; box-sizing: border-box; background: var(--background-color-neutral-subtle, #f8f9fa); border: 1px solid var(--border-color-base, #d0d7de); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.04); padding: 0;">
<pre>
<div style="font-weight: bold; font-size: 13.5px; color: var(--color-base, #1f2328); background: linear-gradient(180deg, #f6f8fa 0%, #eaeef2 100%); padding: 9px 14px; border-bottom: 1px solid var(--border-color-base, #d0d7de); display: flex; align-items: center; justify-content: space-between;">
{{Схема транспортной системы
  <span>{{{заголовок списка|📋 Реестр станций метрополитена и железной дороги}}}</span>
|название = Муроморский скоростной транспорт
</div>
|карта    = <imagemap>
<div class="mw-collapsible-content" style="padding: 14px 18px; column-width: {{{ширина колонок|20em}}}; -webkit-column-width: {{{ширина колонок|20em}}}; -moz-column-width: {{{ширина колонок|20em}}}; column-gap: 2em; column-rule: 1px solid #e1e4e8; font-size: 13px; line-height: 1.7;">
Файл:Схема_Муроморского_метрополитена.png|850px|center|alt=Схема скоростного транспорта
{{{список|{{{1}}}}}}
# Координаты станций: circle X Y Радиус [[Целевая_статья]]
</div>
circle 420 310 16 [[Площадь Метростроителей (станция метро)|Площадь Метростроителей]]
</div>
circle 510 240 16 [[Владимирский проспект (станция метро)|Владимирский проспект]]
circle 330 450 16 [[Машиностроителей (станция метро)|Машиностроителей]]
# Зоны пересадок: rect X1 Y1 X2 Y2 [[Целевая_статья]]
rect 400 290 450 330 [[Площадь Метростроителей (станция метро)|Площадь Метростроителей]]
desc none
</imagemap>
|подпись  = Кликните по станции на схеме для перехода к статье
|линии    =  
{{Линия|1}}
{{Линия|2}}
{{Линия|D1}}
|список  =
* '''[[Центральный район (Муроморск)|Центральный район]]'''
** {{СтМ|1|Площадь Метростроителей|пересадка={{СтМ|2|Площадь Метростроителей}}}}
}}
}}
</pre>


</div>
=== 3. Автоматическая интерактивная схема <small>(JSON + Модуль:ТранспортнаяСхема)</small> ===
}}</includeonly><noinclude>
Полная генерация кликабельной карты, легенды и реестра станций из структурированной базы данных.
== Использование через JSON-базу (Рекомендуемый способ) ==
Теперь вы можете использовать ваш привычный шаблон {{Схема транспортной системы}}, просто передав в него имя датасета:


<syntaxhighlight lang="mediawiki">
Шаблон вызывает Lua-модуль через отдельную страницу <code>[[Модуль:ТранспортнаяСхема]]</code>:
{{Схема транспортной системы|данные = Муроморского метрополитена}}
<pre>
</syntaxhighlight>
{{#invoke:ТранспортнаяСхема|render|Муроморского метрополитена}}
</pre>
* Данные берутся автоматически из подстраницы <code>[[Шаблон:Интерактивная схема Муроморского метрополитена/data.json]]</code>.
* При изменении названий или координат станций в JSON-файле интерактивная карта, легенда и список обновляются автоматически.


При этом автоматически подтянутся координаты из Шаблон:Интерактивная схема Муроморского метрополитена/data.json, построится интерактивная карта, легенда и список станций.
</div>
 
Для вставки компактной схемы '''внутрь карточки статьи''' (например, Шаблон:Метрополитен), добавьте параметры карточки:
<syntaxhighlight lang="mediawiki">
{{Метрополитен
|название = Муроморский метрополитен
|схема линий = {{Схема транспортной системы|данные=Муроморского метрополитена|карточка=да|ширина=280px}}
}}
</syntaxhighlight>


[[Категория:Шаблоны:Транспорт]]
[[Категория:Шаблоны:Транспорт]]
</noinclude>
</noinclude>
Источник — https://wiki.murs-mc.ru/wiki/Шаблон:Схема_транспортной_системы