 |
Сводка | Banner Featured Links позволяет создать баннер со ссылками. |
 |
Предпросмотр | Theme Creator |
 |
Репозиторий | GitHub - Arkshine/discourse-banner-featured-links · GitHub |
 |
Руководство по установке | Как установить тему или компонент темы |
 |
Новичок в темах Discourse? | Начинающее руководство по использованию тем Discourse |
Установить этот компонент темы
Сводка
Banner Featured Links позволяет создать баннер со ссылками.
Он предоставляет широкий спектр вариантов настройки.
Это функция, вдохновленная замечательной темой Discourse «Meta Branded».
Возможности
Внешний вид по умолчанию — использует цвет темы.
Кнопку можно стилизовать отдельно:
Вы можете разместить ссылки в различных местах через настройку plugin outlet.
Список распространенных местоположений приведен в описании.
Например, если вы хотите имитировать тему Meta Brand, используйте выход search-banner-below-input. Предполагается, что у вас установлен компонент Search Banner.
Подробности
Текущий стиль можно достичь с помощью следующих настроек:
Я призываю вас попробовать свой собственный стиль!
Настройки
Общие
| Имя | Описание |
|---|---|
links |
Текстовые ссылки, отображаемые в заголовке. |
show_for_members |
Отображать ссылки для авторизованных пользователей. |
show_for_anon |
Отображать ссылки для анонимных пользователей. |
display_on_mobile |
Отображать ссылки на мобильных устройствах. |
display_on_desktop |
Отображать ссылки на настольных компьютерах. |
display on homepage |
Отображать ссылки на главной странице. |
url must contain |
Введите пути, на которых должен отображаться баннер. Добавьте * в конец пути как подстановочный знак. |
plugin outlet |
Местоположение для отображения ссылок.Распространенные местоположенияabove-main-containerabove-site-headerafter-headerbefore-header-panelbefore-list-areabefore-topic-listbelow-site-headerheader-list-container-bottomtopic-above-post-streamКомпонент Search Banner: search-banner-below-headlinesearch-banner-below-input |
Настройка links:
| Имя | Описание |
|---|---|
| Иконка | Иконка FontAwesome или эмодзи для отображения для ссылок.Сочетания клавишWindows: Win + . Mac: Cmd + Ctrl + Space ChromeOS: Launch + Shift + Space |
| Заголовок | Заголовок ссылки. |
| URL | URL для перехода. |
| Цель | Открывает связанный документ:_blank: в новом окне или вкладке (это значение по умолчанию)_self: в том же фрейме, в котором был выполнен клик_parent: в родительском фрейме_top: во всем теле окна. |
Вы также можете стилизовать каждую кнопку отдельно. Это переопределит глобальный стиль.
| Имя | Описание |
|---|---|
| Ширина | Ширина кнопки. |
| Шрифт | Шрифт кнопки. |
| Закругление | Степень закругления для кнопки. |
| Фон | Цвет фона кнопки. |
| Фон при наведении` | Цвет фона кнопки при наведении курсора. |
| Цвет` | Цвет текста кнопки. |
| Цвет при наведении` | Цвет текста кнопки при наведении курсора. |
| Рамка | Рамка кнопки. |
| Рамка при наведении | Рамка кнопки при наведении курсора. |
| Тень | Тень кнопки. |
| CSS Класс | Пользовательский CSS-класс для применения к кнопке. Полезно, если вы хотите стилизовать кнопку иначе, а настроек недостаточно. Вы можете использовать селектор .banner-featured-links__link.your-classname {} |
Глобальное стилизование
Настройте стандартные отступы и внешний вид ссылок.
Вы можете переопределить стилизацию кнопки для каждой ссылки индивидуально.
Стилизация обертки кнопок
Настройте контейнер ссылок.
| Имя | Описание |
|---|---|
buttons wrapper max width |
Максимальная ширина обертки кнопок. |
buttons wrapper margin |
Отступы обертки кнопок. |
mobile buttons wrapper max width |
Максимальная ширина обертки кнопок на мобильных устройствах. |
mobile buttons wrapper margin |
Отступы обертки кнопок на мобильных устройствах. |
Отступы кнопок и шрифт текста
Настройте отступы кнопок и размер шрифта текста.
| Имя | Описание |
|---|---|
buttons justify |
Как распределять пространство между ссылками и вокруг них. |
buttons gap |
Разрыв между кнопками. |
buttons font |
Шрифт кнопок. |
mobile buttons justify |
Как распределять пространство между ссылками и вокруг них на мобильных устройствах. |
mobile buttons gap |
Разрыв между кнопками на мобильных устройствах. |
mobile buttons direction |
Направление кнопок на мобильных устройствах. |
mobile buttons font |
Шрифт кнопок на мобильных устройствах. |
Стилизация кнопок
Настройте внешний вид кнопок по умолчанию.
| Имя | Описание |
|---|---|
button width |
Ширина кнопки. |
button padding |
Внутренний отступ кнопки. |
button rounding |
Степень закругления для кнопки. |
button background |
Цвет фона кнопки. |
button background hover |
Цвет фона кнопки при наведении курсора. |
button color |
Цвет текста кнопки. |
button colo hover |
Цвет текста кнопки при наведении курсора. |
button border |
Рамка кнопки. |
button border hover |
Рамка кнопки при наведении курсора. |
button shadow |
Тень кнопки. |
Расширенная настройка
Вы можете использовать следующий CSS для дальнейшей настройки:
.banner-featured-links {
&__wrapper {
}
&__wrapper-links {
}
&__link {
}
}
Если вы предоставляете настройку для каждой кнопки, вы можете указать класс в настройке CSS Classname.
Затем вы можете использовать следующий селектор:
.banner-featured-links {
&__link.myclass {
}
}
Полезные ссылки
- Основные CSS-переменные Discourse: discourse/app/assets/stylesheets/color_definitions.scss at main · discourse/discourse · GitHub
”,“text”:"Присоединяйтесь к нашей программе чемпионов! ",“url”:“
”, “text”=>“Новые виджеты”, “target”=>“_self”, “button_color_hover”=>“
