2019-08-21

Skin: thisSite.tmpl Минималистичный макет дизайна на базе Bootstrap v3.

Минималистичный макет дизайна на базе Bootstrap v3 позволяет "из коробки" создавать проекты с основным горизонтальным меню, и дополнительным боковым меню с хорошей масштабируемостью.

Что это?

Макет дизайна на базе Bootstrap v3 замещает дефолтный скин PmWiki и решает следующие задачи:

базируется на фреймворке Bootstrap v3.4.1, «готовит почву» для применения всех его возможностей;
«из коробки» позволяет формировать разнообразную навигацию сайта, достаточную для создания URL-структуры большинства проектов;
использует LessCompiler, что позволяет верстать макет online.

Макет дизайна удобно использовать в следующих целях:

как основной дизайн для небольших проектов;
для создания прототипа сайта с работающей навигацией;
как основу для разработки полноценного уникального проекта при итерационной разработке.

Демо

Демонстрацией работы макета является настоящий сайт. Он работает на макете thisSite.tmpl.

Техническая информация

Семантика макета

<body>
  <header>
    <nav>...</nav> // optional
  </header>
  <aside>...</aside> // optional
  <main>
    <div class='breadcrumbs'>...</div> // optional
    <article class='ph-{$Group}'>
      <header>
         <time pubdate datetime="{$Created}" title='дата публикации'>{$Created}</time>
         <h1>{$Titlespaced} <small>{$Description}</small></h1> // optional
      </header>
      <div id='wikitext'>...</div>
    </article>
  </main>
  <footer>...</footer>
</body>

Основное меню `<nav>`

Пункты меню выводятся, со страницы MainMenu, если она существует. Возможно создавать двухуровневые раскрывающиеся меню, см. MainMenu-Template.

См. также:
Примеры формирования меню через Toggles

Левое меню `<aside>`

Выводится, если:

найдена хотя бы одна из страниц ThisSite/Aside-{$Group}-{$Name},ThisSite/Aside-{$Group},ThisSite/Aside. Выводится содержимое первой найденной страницы.
не запрещено директивой (:noaside:).

Если не выводится, <main> растягивается на всю доступную ширину.

Логика позволяет создавать общее меню для всего сайта (ThisSite/Aside), отдельное меню для текущей группы (ThisSite/Aside-{$Group}) или даже страницы (ThisSite/Aside-{$Group}-{$Name})

Меню адаптировано под использование Toggles (кнопки и аккордеоны), благодаря чему есть возможность формировать его в различной стилистике «из коробки». См. Примеры формирования меню через Toggles.

Хлебные крошки `<div class='breadcrumbs'>`

Хлебные крошки не выводятся на корневых страницах Групп (т.е. страницах вида Name.Name ), а также могут быть запрещены директивой (:nobread:).

Дальнейшая логика следующая:

если в корневой странице текущей Группы существует WikiTrails и текущая страница указана в ней, то хлебные крошки выводятся по пути этого WikiTrail;
иначе, хлебные крошки выводятся от корня сайта до текущей страницы через ее Группу и родительскую страницу (если данная страница является дочерней по определенным $BaseNamePatterns, см. Config)

Или, простыми словами:

по-умолчанию крошки выводятся везде, кроме корневых страниц Групп и страниц с запрещающей директивой (:nobread:);
если в корневой странице Группы существует "карта раздела", то крошки генерятся на ее основе;
иначе просто на основе вложенности в Группу, плюс дочерние страницы под Родительской.

Блок основного контента `<article class='ph-{$Group}'>`

По-умолчанию PmWiki выводит интерпретированный wiki-код страницы в блоке <div id='wikitext'>. Однако, в настоящем макете используется дополнительная обертка в виде <article>. Зачем?

внутрь блока добавлен SEO-угодный вывод section > h1, с опциональной возможностью отключения;
class='ph-{$Group}' позволяет удобно индивидуализировать внешний вид Групп сайта через CSS;
в режиме редактирования существует также <div id='preview'>, требующий стилизации, идентичной <div id='wikitext'>.

Другими словами, обертка нужна для того, чтобы :

можно было вносить CSS-корректировки на уровне раздела сайта ( example.com/SomePage/* )
обеспечить стилизацию режима предпросмотра (чтобы к нему применялись те же стили, что и к основному контенту).

Заголовок `<h1>`

Основной заголовок страницы формируется из <tiltle> и <description> страницы автоматически. Он может быть заменен вручную, для чего необходимо его сначала отключить командой (:notitle:), а затем сформировать новый заголовок.

Список директив макета

(:noheader:) - скрыть header
(:noaside:) - скрыть левую панель
(:nodate:) - скрыть дату публикации статьи
(:notitle:) - скрыть заголовок h1
(:nobread:) - скрыть хлебные крошки
(:nofooter:) - скрыть footer

Служебная информация

Status: stable
Core: yes
Version: 20200423

Todo:git

провести еще одну ревизию thisSite.less
добавить в макет Поиск по сайту. Но сначала, очевидно, надо научить его искать по Title

Что это?

Демо

Техническая информация

Семантика макета

Основное меню <nav>

Левое меню <aside>

Хлебные крошки <div class='breadcrumbs'>

Блок основного контента <article class='ph-{$Group}'>

Заголовок <h1>