Шаблон Notebook

Устанавливаем шаблон стартер

В каталоге <dokuwiki>/lib/tpl/starter/css/ создаем копированием все файлы стилей CSS с приставкой (например notebook_)

Добавляем в файл ini

[stylesheets]
 
css/notebook_basic.css                = screen

; загрузить остальные стили
css/notebook_structure.css            = screen
css/notebook_design.css               = screen
css/notebook_content.css              = screen
css/notebook_includes.css             = screen
 
css/notebook_mobile.css               = all

«Файл ini после правки»

; Пожалуйста посмотрите https://www.php.net/manual/en/function.parse-ini-file.php
; из-за ограничений используемого здесь ini-формата

; Чтобы расширить этот файл или внести в него изменения, рекомендуется создать
; локальный файл conf/tpl/<имя-папки-шаблона>/style.ini, чтобы предотвратить потерю
; любые изменения после обновления.
; Пожалуйста, не забудьте скопировать раздел, в котором должны находиться ваши изменения.
; (т. е. [таблицы стилей] или [замены]) в этот файл.

; Здесь определите таблицы стилей, которые использует ваш шаблон. Второе значение
; определяет, для какого носителя вывода должен быть загружен стиль. В настоящее время
; печать, экран и все поддерживаются.
; Здесь вы можете ссылаться на файлы CSS и LESS. Файлы, упомянутые здесь, будут
; проверять наличие обновлений при рассмотрении возможности перестройки кэша, пока файлы
; включенные через операторы @import LESS, не являются
 
[stylesheets]
 
css/basic.css                         = screen
css/notebook_basic.css                = screen

; загрузить стили из шаблона «dokuwiki» по умолчанию
; некоторые из них были переименованы из *.css в *.less.
; но .css по-прежнему загружает тот же файл и обратно совместим
../dokuwiki/css/_imgdetail.css        = screen
../dokuwiki/css/_media_popup.css      = screen
../dokuwiki/css/_media_fullscreen.css = screen
../dokuwiki/css/_fileuploader.css     = screen
../dokuwiki/css/_tabs.css             = screen
../dokuwiki/css/_links.css            = screen
../dokuwiki/css/_toc.css              = screen
../dokuwiki/css/_footnotes.css        = screen
../dokuwiki/css/_search.less          = screen
../dokuwiki/css/_recent.css           = screen
../dokuwiki/css/_diff.css             = screen
../dokuwiki/css/_edit.css             = screen
../dokuwiki/css/_modal.css            = screen
../dokuwiki/css/_forms.css            = screen
../dokuwiki/css/_admin.less           = screen

; загрузить остальные стили
css/structure.css                     = screen
css/notebook_structure.css            = screen
css/design.css                        = screen
css/notebook_design.css               = screen
css/content.css                       = screen
css/notebook_content.css              = screen
css/includes.css                      = screen
css/notebook_includes.css             = screen
 
css/mobile.css                        = all
css/notebook_mobile.css               = all
css/print.css                         = print

 
; Этот раздел используется для настройки некоторых значений заполнителей, используемых в
; таблицы стилей. Изменение этого файла — самый простой способ
; придайте вашей вики новый вид.
; Определенные здесь заполнители также будут доступны как переменные LESS.
; (с удаленными подчеркиваниями и добавлением префикса @ini_)
 
[replacements]

;--------------------------------------------------------------------------
;------ гарантированные цветные заполнители Dokuwiki, которые может использовать каждый плагин

; основной текст и цвета фона
__text__           = "#333"                 ; @ini_text
__background__     = "#fff"                 ; @ini_background
; альтернативные цвета текста и фона
__text_alt__       = "#999"                 ; @ini_text_alt
__background_alt__ = "#eee"                 ; @ini_background_alt
; нейтральные цвета текста и фона
__text_neu__       = "#666"                 ; @ini_text_neu
__background_neu__ = "#ddd"                 ; @ini_background_neu
; цвет границы
__border__         = "#ccc"                 ; @ini_border

; выделенный текст (например, фрагменты поиска)
__highlight__      = "#ff9"                 ; @ini_highlight

; цвет ссылки
__link__            = "#00c"                ; @ini_link

;--------------------------------------------------------------------------

; они используются для других ссылок
__existing__       = "#090"                 ; @ini_existing
__missing__        = "#f30"                 ; @ini_missing

; ширина
__site_width__     = "64em"                 ; @ini_site_width
__sidebar_width__  = "16em"                 ; @ini_sidebar_width

; цвет веб-приложения (используется ядром, а не шаблоном)
__theme_color__    = "#eee"                 ; @ini_theme_color

С помощью инструментов разработчика браузера смотрим ширину страницы, в нашем случае 1024px

Авторизуемся и создадим страницу sidebar (боковая панель)

и снова проверим ширину страницы и это 1024px (в принципе все стандартно)

бокова 256px

Основная 768px (768+256=1024)

посмотрим на ширину понравившегося шаблона и это 922px

необходимо либо уменьшить ширину шаблона starter, либо увеличить выбраный макет
выбираю правку шаблона starter и делаю скриншот выбранного макета в размере 922px

открываем макет в редакторе (пример paint.net) и начертив прямоугольники вокруг текста измеряем размеры основной области и дополнительной панели

вся область 1031px (что обрежется для пк в 1024px), и основная область 473px

боковая панель 240px и видия область для мобильных устройств 570px

Верстка шаблона страницы

Стандартная веб-страница содержит следующие секции:

<html>
<body>
<header></header>
<div class="main"></div>
<footer></footer>
</body>
</html>

class=«main» - это контейнер будущей шириной 1024px, где будет вся страница

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

<html>
<body>
<header></header> <!-- верхний (название и меню) контейнер шириною 1024px -->
<div class="main"> <!-- общий контейнер шириною 1024px -->
<div class="main_header"> <!-- верхний (для верха картинки) контейнер шириною 1024px -->
<div class="main_page"> <!-- левый основной контейнер шириною 473px + поля -->
<div class="main_sidebar"> <!-- правый (боковая панель) контейнер шириною 240px + поля -->
<!-- в правый (боковая панель) контейнер шириною 240px встроим еще 4 контейнера-->
<!-- содержание, поиск, новости, авторизация шириною 240px -->
<!-- которые будут распологаться друг под другом в контейнере (боковая панель) -->
<div class="main_sidebar_content"> <!-- боковая панель контейнер (содержание) шириною 240px -->
</div>
<div class="main_sidebar_search"> <!-- боковая панель контейнер (поиск) шириною 240px -->
</div>
<div class="main_sidebar_news"> <!-- боковая панель контейнер (новости) шириною 240px -->
</div>
<div class="main_sidebar_login"> <!-- боковая панель контейнер (авторизация) шириною 240px -->
</div>
<div class="main_footer"> <!-- нижний (для низа картинки) контейнер шириною 1024px -->
</div>
</div>
</div>
</div>
<footer></footer><!-- нижний (лицензия и прочее) контейнер шириною 1024px -->
</body>
</html>

Это и есть в общих чертах наш будущий макет (без картинок и стилей)

Только авторизованные участники могут оставлять комментарии.