wiki:devel:templates:notebook
Это старая версия документа!
Содержание
Шаблон 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>
- Это и есть в общих чертах наш будущий макет (без картинок и стилей)
Только авторизованные участники могут оставлять комментарии.
wiki/devel/templates/notebook.1724701188.txt.gz · Последнее изменение: 2024/08/26 22:39 — vladpolskiy