Условия использования:
Вы можете использовать все материалы, соблюдая условия использования бесплатного контента.
Что такое MYBB.RU-STYLER?
Это пакет, позволяющий верстать форум на mybb
Зачем он нужен?
Позволяет верстать дизайн на майбб.ру в среде разработки, типа VS Code. Такие программы значительно упрощают верстку форумов. Они могут подсказывать какие значение вписывать, могут подсветить и указать на неочевидные ошибки. В IDE ошибку либо исправят автоматически, либо подсветят, либо подсказка появится как правильнее сделать (не придётся сохранять-обновлять страницу — смотреть что же не так) - зависит от программы для разработки и настроек. Разумеется, IDE код за вас не напишет, но она будет помогать и подсказывать.
Версионность. Со стайлером можно легко откатиться назад к прошлым версиям кода, открыть старые версии, сравнить, скопировать что нужно и прочее и т.д.
Можно в любой момент загрузить стиль, там покрутить что-то, поменять если хочется. И не нужно переносить на тестовик. При этом изменения не будут видны, пока админ сам не зальет их на форум.
В стайлере же ещё периодически выходят всякие дополнения. Сейчас, например, он может показать как будет выглядеть форум для разных разрешений экрана и для разных ролей на форуме. В теории это можно и сделать без него, но со стайлером просто проще и быстрее.
Ну и банально быстрее работать и менять что-то в стайлере, переключаясь между стилями и html-верх/низ, чем во вкладках админки.
Необходимые инструменты для работы:
Интегрированная среда разработки (IDE). Если до этого вы никогда не работали в IDE и не знаете, что это такое, рекомендую ознакомиться с данной статьей Руководство для новичков про IDE и редакторы кода. В ней расписано какие среды бывают и чем отличаются. Изучаем, скачиваем и устанавливаем выбранную IDE.
Node.js — среда выполнения кода JavaScript вне браузера, которая позволяет писать серверный код для веб-страниц и веб-приложений, а также для программ командной строки. ( https://nodejs.org/en/);
Стайлер (https://github.com/Embery/mybb_styler)
Шаг 1: Устанавливаем стайлер с GITHUB в IDE
Что такое гитхаб и как с ним работать, можно узнать из статьи Про Гит (Git) и Гитхаб (GitHub) для новичков. Здесь описана пошаговая инструкция работы с гитхабом.
Нам же нужно перекинуть пакет с гитхаб в среду разработки. Для этого у нас есть два способа:
Скопировать пакет на компьютер и загрузить его в среду разработки, но при этом теряется связь с гитхабом. То есть, если автор зальет в свой репозиторий какие-то крутые фичи, то придется копировать все файлы снова, теряя при этом свои наработки. При клонировании же можно выполнить команду git pull и все изменения автора попадут к вам, при этом объединяя их с вашими изменениями;
Клонировать пакет в среду разработки, но при этом в настройках проекта сохраняется обратная связь с репозиторием-оригиналом. Также этот способ позволяет нескольким людям работать над одним проектом.
Способ 1: Копирование пакета с GITHUB
Проходим по ссылке стайлера (https://github.com/Embery/mybb_styler), нажимаем Code — Download ZIP
Скачиваем архив, распаковываем и загружаем архив в IDE. Для написания этого гайда я буду использовать Visual Studio Code, он же VS Code. Чтобы загрузить пакет в VS Code, нужно нажать Файл — Открыть папку и выбрать распакованный архив со стайлером.
После этого в окне проводника появится дерево проекта. Далее приступаем к шагу 2
Способ 2: Клонирование репозитория Git в VS Code
Чтобы клонировать пакет, необходимо скопировать ссылку на репозиторий Code — HTTPS
и добавить ее в программу, следуя следующей схеме:
Система управления версиями — Представления и дополнительные действия — Клонировать
Появится вот такое окошко, куда и нужно вставить нашу ссылку
После этого компьютер предложит выбрать место, куда ему скопировать файлы из репозитория.
Как только все будет выполнено появится дерево проекта.
Шаг 2: Выполняем команду npm i
После появления дерева проекта на панели управления выбираем Терминал — Создать терминал
В появившемся поле прописываем команду npm i и нажимаем Enter
Выглядеть это будет примерно так:
Шаг 3: Выполняем команду npm run create_resources
В том же окне терминала прописываем npm run create_resources и нажимаем Enter. Это скопирует структуру ресурсов из папки example в папку resources и сгенерирует .env-файл
Шаг 4: Подгружаем свой форум
Заходим в файл .env
И меняем в нем на свои значения следующие строки:
URL="https://showmemagic.mybb.ru/" — здесь указываем адрес своего форума/теста
LOOK_RESOLUTION="1920,1080" — здесь разрешение меняем на свое значение
Шаг 5: Выполняем команду npm start
После того, как указали адрес форума и разрешение, в окне терминала запускаем команду npm start и нам откроется окно браузера, где будет отображаться наш форум и дизайн.
Готово. Вы загрузили пакет стайлера в среду разработки.
Как редактировать стиль?
Находим папку resources в дереве проекта. В этой папке будут такие файлы:
style.css — структура style.css (первое окошко стиля);
style_cs.css — цвета style_cs.css (второе окошко стиля);
announcement.html — объявление;
footer.html — хтмл-низ;
header.html — хтмл-верх;
reply.html — форма ответа.
Редактируя эти файлы, вы будете менять стиль форума. Чтобы посмотреть изменения, достаточно с охранить файл любым способом (ручками или включив автосохранение) и обновить окошко в тестовом браузере (шаг 5). Автосохранение включается так:
Примечание:
Для того, чтобы стиль отображался в тестовом браузере на форуме должно быть включено отображение своего стиля.
Все изменения будут отображаться только в тестовом браузере. На сам форум ничего переноситься не будет. Если нужно перенести дизайн на форум, необходимо скопировать код из файлов в resources и вставить в соответствующие окна на форуме.
- Подпись автора
Вместо нас никто не полезет в наши окопы