Различия

Показаны различия между двумя версиями страницы.

--- wiki:devel:templates:notebook [2024/08/26 09:34] – создано vladpolskiy
+++ wiki:devel:templates:notebook [2024/08/27 00:27] (текущий) – [Верстка шаблона страницы] vladpolskiy
@@ Строка 2: / Строка 2: @@
 Устанавливаем шаблон стартер
-создаем копированием файлы CSS
+  * В каталоге <dokuwiki>/lib/tpl/starter/css/ создаем копированием все файлы стилей CSS с приставкой (например notebook_)
-Добавляем в файл ini
+{{:wiki:devel:templates:starter_notebook_10.png?|}}
+  * Добавляем в файл ini
 <code ini>
@@ Строка 18: / Строка 19: @@
 css/notebook_mobile.css               = all
 </code>
+<details>
+<summary>«Файл ini после правки»</summary>
+<code 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
+</code>
+</details>
+   * С помощью инструментов разработчика браузера смотрим ширину страницы, в нашем случае 1024px
+{{:wiki:devel:templates:starter_notebook_12.png?|}}
+  * Авторизуемся и создадим страницу sidebar (боковая панель)
+{{:wiki:devel:templates:starter_notebook_11.png?|}}
+  * и снова проверим ширину страницы и это 1024px (в принципе все стандартно)
+{{:wiki:devel:templates:starter_notebook_13.png?|}}
+  * бокова 256px
+{{:wiki:devel:templates:starter_notebook_14.png?|}}
+  * Основная 768px (768+256=1024)
+{{:wiki:devel:templates:starter_notebook_15.png?|}}
+  * посмотрим на ширину понравившегося шаблона и это 922px
+{{:wiki:devel:templates:starter_notebook_16.png?|}}
+  * необходимо либо уменьшить ширину шаблона starter, либо увеличить выбраный макет
+  * выбираю правку шаблона starter и делаю скриншот выбранного макета в размере 922px
+{{:wiki:devel:templates:starter_notebook_17.png?|}}
+  * открываем макет в редакторе (пример paint.net) и начертив прямоугольники вокруг текста измеряем размеры основной области и дополнительной панели
+{{:wiki:devel:templates:starter_notebook_18.png?|}}
+  * вся область 1031px (что обрежется для пк в 1024px), и основная область 473px
+{{:wiki:devel:templates:starter_notebook_19.png?|}}
+  * боковая панель 240px и видия область для мобильных устройств 570px
+{{:wiki:devel:templates:starter_notebook_20.png?|}}
+=====Верстка шаблона страницы=====
+  * Стандартная веб-страница содержит следующие секции:
+<code html>
+<html>
+<body>
+<header></header>
+<div class="main"></div>
+<footer></footer>
+</body>
+</html>
+</code>
+  * class="main" - это контейнер будущей шириной 1024px, где будет вся страница
+внутри этого контейнера будут располагаться, заголовок страницы, меню, в левой стороне верхняя часть картинки, средняя и нижняя части картинки,  в правой боковое меню с оглавлением, меню входа, и прочим, а в самом низу лицензия и прочая информация. Итак поехали:
+<code html>
+<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>
+</code>
+  * Это и есть в общих чертах наш будущий макет (без картинок и стилей)
+  * план контейнеров
+{{:wiki:devel:templates:starter_notebook_21.png?|}}