wiki:devel:templates:notebook
Различия
Показаны различия между двумя версиями страницы.
Следующая версия | Предыдущая версия | ||
wiki:devel:templates:notebook [2024/08/26 09:34] – создано vladpolskiy | wiki:devel:templates:notebook [2024/08/27 00:27] (текущий) – [Верстка шаблона страницы] vladpolskiy | ||
---|---|---|---|
Строка 2: | Строка 2: | ||
Устанавливаем шаблон стартер | Устанавливаем шаблон стартер | ||
- | создаем копированием файлы CSS | + | * В каталоге < |
- | Добавляем в файл ini | + | {{: |
+ | | ||
<code ini> | <code ini> | ||
Строка 18: | Строка 19: | ||
css/ | css/ | ||
</ | </ | ||
+ | < | ||
+ | < | ||
+ | <code ini> | ||
+ | ; Пожалуйста посмотрите https:// | ||
+ | ; из-за ограничений используемого здесь ini-формата | ||
+ | ; Чтобы расширить этот файл или внести в него изменения, | ||
+ | ; локальный файл conf/ | ||
+ | ; любые изменения после обновления. | ||
+ | ; Пожалуйста, | ||
+ | ; (т. е. [таблицы стилей] или [замены]) в этот файл. | ||
+ | |||
+ | ; Здесь определите таблицы стилей, | ||
+ | ; определяет, | ||
+ | ; печать, | ||
+ | ; Здесь вы можете ссылаться на файлы CSS и LESS. Файлы, упомянутые здесь, будут | ||
+ | ; проверять наличие обновлений при рассмотрении возможности перестройки кэша, пока файлы | ||
+ | ; включенные через операторы @import LESS, не являются | ||
+ | |||
+ | [stylesheets] | ||
+ | |||
+ | css/ | ||
+ | css/ | ||
+ | |||
+ | ; загрузить стили из шаблона «dokuwiki» по умолчанию | ||
+ | ; некоторые из них были переименованы из *.css в *.less. | ||
+ | ; но .css по-прежнему загружает тот же файл и обратно совместим | ||
+ | ../ | ||
+ | ../ | ||
+ | ../ | ||
+ | ../ | ||
+ | ../ | ||
+ | ../ | ||
+ | ../ | ||
+ | ../ | ||
+ | ../ | ||
+ | ../ | ||
+ | ../ | ||
+ | ../ | ||
+ | ../ | ||
+ | ../ | ||
+ | ../ | ||
+ | |||
+ | ; загрузить остальные стили | ||
+ | css/ | ||
+ | css/ | ||
+ | css/ | ||
+ | css/ | ||
+ | css/ | ||
+ | css/ | ||
+ | css/ | ||
+ | css/ | ||
+ | |||
+ | css/ | ||
+ | css/ | ||
+ | css/ | ||
+ | |||
+ | |||
+ | ; Этот раздел используется для настройки некоторых значений заполнителей, | ||
+ | ; таблицы стилей. Изменение этого файла — самый простой способ | ||
+ | ; придайте вашей вики новый вид. | ||
+ | ; Определенные здесь заполнители также будут доступны как переменные LESS. | ||
+ | ; (с удаленными подчеркиваниями и добавлением префикса @ini_) | ||
+ | |||
+ | [replacements] | ||
+ | |||
+ | ; | ||
+ | ;------ гарантированные цветные заполнители Dokuwiki, которые может использовать каждый плагин | ||
+ | |||
+ | ; основной текст и цвета фона | ||
+ | __text__ | ||
+ | __background__ | ||
+ | ; альтернативные цвета текста и фона | ||
+ | __text_alt__ | ||
+ | __background_alt__ = "# | ||
+ | ; нейтральные цвета текста и фона | ||
+ | __text_neu__ | ||
+ | __background_neu__ = "# | ||
+ | ; цвет границы | ||
+ | __border__ | ||
+ | |||
+ | ; выделенный текст (например, | ||
+ | __highlight__ | ||
+ | |||
+ | ; цвет ссылки | ||
+ | __link__ | ||
+ | |||
+ | ; | ||
+ | |||
+ | ; они используются для других ссылок | ||
+ | __existing__ | ||
+ | __missing__ | ||
+ | |||
+ | ; ширина | ||
+ | __site_width__ | ||
+ | __sidebar_width__ | ||
+ | |||
+ | ; цвет веб-приложения (используется ядром, а не шаблоном) | ||
+ | __theme_color__ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | * С помощью инструментов разработчика браузера смотрим ширину страницы, | ||
+ | {{: | ||
+ | * Авторизуемся и создадим страницу sidebar (боковая панель) | ||
+ | {{: | ||
+ | * и снова проверим ширину страницы и это 1024px (в принципе все стандартно) | ||
+ | {{: | ||
+ | * бокова 256px | ||
+ | {{: | ||
+ | * Основная 768px (768+256=1024) | ||
+ | {{: | ||
+ | * посмотрим на ширину понравившегося шаблона и это 922px | ||
+ | {{: | ||
+ | * необходимо либо уменьшить ширину шаблона starter, либо увеличить выбраный макет | ||
+ | * выбираю правку шаблона starter и делаю скриншот выбранного макета в размере 922px | ||
+ | {{: | ||
+ | * открываем макет в редакторе (пример paint.net) и начертив прямоугольники вокруг текста измеряем размеры основной области и дополнительной панели | ||
+ | {{: | ||
+ | * вся область 1031px (что обрежется для пк в 1024px), и основная область 473px | ||
+ | {{: | ||
+ | * боковая панель 240px и видия область для мобильных устройств 570px | ||
+ | {{: | ||
+ | =====Верстка шаблона страницы===== | ||
+ | * Стандартная веб-страница содержит следующие секции: | ||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <div class=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | * class=" | ||
+ | внутри этого контейнера будут располагаться, | ||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <!-- в правый (боковая панель) контейнер шириною 240px встроим еще 4 контейнера--> | ||
+ | <!-- содержание, | ||
+ | <!-- которые будут распологаться друг под другом в контейнере (боковая панель) --> | ||
+ | <div class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | * Это и есть в общих чертах наш будущий макет (без картинок и стилей) | ||
+ | * план контейнеров | ||
+ | {{: |
wiki/devel/templates/notebook.1724654094.txt.gz · Последнее изменение: 2024/08/26 09:34 — vladpolskiy