Как мне добиться чего-то подобного?
Когда я добавляю картинки в свою категорию, они все сжимаются и выглядят некрасиво.
Есть ли какой-то кастомный плагин или что-то подобное?
Посмотрите здесь: Category Banners. Это компонент темы, который можно установить на ваш сайт, чтобы добавить баннеры к категориям. В разделе «Дополнительные стили CSS» в конце темы подробно описано, как установить фоновое изображение для баннера.
Судя по всему, это баннер для категории. Мне нужен такой, который отображает раздел, чтобы я мог пояснить…
именно это я хочу
Это потребует некоторой индивидуальной доработки. Если вы хотите сделать это самостоятельно, ознакомьтесь с руководством по темам. Если же вы хотите нанять кого-то для выполнения этой работы, создайте тему в категории Marketplace.
Вот что они используют, но у меня не получается заставить это работать
discourse-misc-html-css (2).zip (2.5 КБ)
Есть много ссылок и элементов, которые нужно отредактировать как в CSS, так и на вкладке «Head». Вы это сделали?
Вот кастомный CSS, который Fivem использует сегодня, и именно его мне прислала команда администраторов, но я не знаю, как заставить его работать.
discourse-misc-html-css (2).zip (2.5 КБ)
Я уже довольно давно работаю над этим, и в целом у меня получилось заставить это работать.
Честно говоря, всё работает отлично.
Но наверху почему-то дублируются некоторые категории.
Как это исправить? Как сделать так, чтобы категории не дублировались?
Вот моя конфигурация:
discourse-misc-html-css.zip (2.5 КБ)
Итак, теперь я, по крайней мере, для себя всё исправил.
Итак, сначала скачайте этот файл:
discourse-misc-html-css (2).zip (2.5 КБ)
Если вы не уверены, как добавить этот файл на свой сайт, сначала ознакомьтесь с этим руководством:
Теперь перейдите в раздел Misc/HTML+CSS, затем в CSS, где нужно будет немного изменить настройки.
Сначала скопируйте эту строку:
&.fivem > .category-list {
&:before {
content: 'FiveM';
}
background-image: url(https://i.imgur.com/1YZTip0.png);
}
Затем измените название баннера на нужное вам.
В моём примере я буду использовать test1:
&.test1 > .category-list {
&:before {
content: 'test1';
}
background-image: url(https://i.imgur.com/1YZTip0.png);
}
После этого работа в разделе CSS завершена.
Теперь перейдите в раздел .
Прокрутите вниз до:
<script type='text/x-handlebars' data-template-name='components/categories-with-featured-topics'>
Найдите секцию с именем:
<div class="category-thing fivem">
Затем скопируйте:
<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
И измените её под свои настройки. В моём примере я использовал test1:
<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
Теперь прокрутите вниз до:
<script type='text/x-handlebars' data-template-name='mobile/components/categories-with-featured-topics'>
Найдите:
<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
И измените его под свои настройки. В моём примере я меняю fivem на test1:
<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
Далее прокрутите ещё ниже и найдите секцию с кодом:
registerUnbound('filter-core', (categories) => {
return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^fivem/i) && !a.read_restricted);
});
Здесь нужно добавить флаг категории, который мы создали выше. Это нужно, чтобы избежать дублирования категорий, как в моей проблеме:
В моём примере я добавлю test1:
registerUnbound('filter-core', (categories) => {
return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^test1/i) && !a.name.match(/^fivem/i) && !a.read_restricted);
});
Затем прокрутите вниз и найдите секцию:
registerUnbound('filter-fivem', (categories) => {
return categories.filter(a => a.name.match(/^fivem/i));
});
Здесь нужно заменить fivem на нужное вам имя. В моём примере я заменю на test1:
registerUnbound('filter-test1', (categories) => {
return categories.filter(a => a.name.match(/^test1/i));
});
После этого работа завершена.
Теперь измените Slug категории. Вот мой пример:
После этого эта категория появится под баннером test1.
Все остальные категории будут отображаться под баннером core CFX.RE (в этом примере).
Кстати, вот мои текущие настройки, которые я использую на своём сайте:
discourse-misc-html-css.zip (2.5 КБ)
Если хотите посмотреть, как это работает, вот ссылка:
https://forum.tgacommunity.com/
Также можете пометить эту тему как решённую?
Надеюсь, это помогло вам. Если у кого-то возникнут вопросы, просто задавайте их здесь или в личных сообщениях.
Всем привет. @manuel создал компонент темы, который расширяет этот код и упрощает его использование на собственных форумах.
Оба метода работают, и выбор за вами. При этом оба варианта дают одинаковый результат.