6.2 KiB
LUCI-THEME-FOOTSTRAP
English · Русский · Песочница — всё можно потрогать без роутера
Тема LuCI для OpenWrt 24.10 и новее. Без фреймворка, единственная зависимость — luci-base.
Браузеры: Chrome 108, Firefox 101, Safari 15.4 и новее. Более старые получают страницу проще
оформленную, а не сломанную; порог выводится из таблицы стилей гейтом и записан в
docs/css.md.
23.05 объявлена EOL, и тема на ней останавливается: 0.14.2 — последняя версия, которая там работает. Установщик ставит на роутер с 23.05 именно её — по фиксированному тегу, с той же проверкой подписи и суммы — и говорит об этом прямо. Более новые версии требуют 24.10 и новее, где есть
ui.RangeSlider.
Настройки внешнего вида
Установка
wget -qO- https://raw.githubusercontent.com/VizzleTF/luci-theme-footstrap/main/install.sh | sh
Скрипт добавляет свой фид пакетов и ставит тему из него. Дальше тема обновляется вместе с роутером:
apk update && apk upgrade (или opkg). Повторный запуск обновляет тему и печатает, что именно
сделал — поставил, обновил с какой версии или всё уже актуально.
raw.githubusercontent.com лимитируется по адресу, поэтому если он ответил 429 (общий выход, CGNAT),
тот же скрипт приложен к каждому релизу и раздаётся с CDN без такого лимита — с подписью, так что его
можно проверить до запуска:
wget -qO- https://github.com/VizzleTF/luci-theme-footstrap/releases/latest/download/install.sh | sh
После этого выберите Footstrap в System → System → Language and Style, поле «Design».
Что умеет
- Стилизует любую страницу, стоковую и нет — но не перебивает то, что приложение красит само
- Работает на телефоне и ставится на его домашний экран — иконка, своё окно, без адресной строки
- Быстрее bootstrap — цифры ниже
- Обновляется вместе с роутером, из фида пакетов
- Двадцать одна ось внешнего вида, применяются сразу, всё в одной вкладке
Замерено, а не заявлено
Время до первой отрисовки, тот же роутер, те же страницы.
| Страница | bootstrap | footstrap |
|---|---|---|
| Wireless status | 271 мс | 54 мс |
| Interfaces | 374 мс | 111 мс |
| DNS | 329 мс | 108 мс |
| Firewall zones | 311 мс | 79 мс |
| Прогон 38 страниц | 11 306 мс | 4933 мс |
| Запросов/стр. | 15–47 | 0–7 |
Медианная страница — в 3.03 раза быстрее, весь прогон — в 2.29 раза. Процессорное время роутера на тот же обход: 37.3 с против 18.4 с. Замерено на железе, пять прогонов; методика и полные данные — docs/benchmark.md.
Документация
Документация для разработчика — в docs/: архитектура, дизайн-система, сборка
стилей, SPA-роутер, упаковка, релизный ранбук. Она на английском; на русском остаются только
этот README и CHANGELOG_ru.md. Начните с architecture.md — что такое
тема, — или с conventions.md — правила, которым обязана следовать правка.
Пишете luci-app? Прочитайте,
как стилизовать его, чтобы он работал под любой темой, и
вставьте свой CSS в devkit — сетка токенов,
разметка компонентов, проверялка стилей.