Последний список в виде сетки

Разработка
1

Привет!

Сейчас я разрабатываю собственную тему для «блога» и хотел бы настроить отображение последних записей в виде сетки (как здесь, в категории тем).

Я знаю, что для этого есть несколько компонентов, но так как в моих записях нет изображений, это выглядит немного странно. Кроме того, нет возможности (например, в компоненте topic-thumbnails) установить количество колонок на 2 или 3 (или даже сделать их гибкими).

Я перепробовал многое (сайт после этого то и дело ломался :joy:), но так и не смог понять, как это реализовать.

Может, кто-то сможет дать подсказку, как решить эту задачу? Мне нужны только базовые настройки, а дальше я сам «отстили» это под свои нужды.

С уважением,

P.S. Если это не та категория, пожалуйста, переместите сообщение. :slightly_smiling_face:

2

Большинство таких настроек можно выполнить в CSS через админку: Настроить > Темы > Пользовательский CSS

Я также хотел иметь две колонки и более узкий вид, поэтому уменьшил max-width с 1100 пикселей (?) до 950 пикселей, и это изменило макет с трёх колонок на две — в моём случае это было так:

:root { --d-max-width: 950px; }

3

Предварительный просмотр списков тем адаптивен и автоматически устанавливает количество колонок. Достаточно немного сжать его с помощью боковых панелей (например, с помощью плагина Layouts), и количество колонок уменьшится. (Смотрите этот пример: https://www.starzen.space — изначально отображаются 2 колонки, но при клике на тег возвращается 3 колонки)

4

Да, я знаю, что это можно сделать через CSS, вся моя тема выполнена на CSS.
К тому же, у меня нет фиксированного значения 1100px, мой дизайн адаптивен к разрешению экрана. И нет, я не хочу эту сверхмалую фиксированную ширину в 1100px. :wink:

@merefield
Я пробовал этот компонент темы много раз, но это не то, что я искал. У меня нет изображений в постах, и колонки должны быть адаптивными (в зависимости от разрешения экрана).

Что я ищу, так это CSS-класс для преобразования списка в сетку. :slightly_smiling_face:

5

Оно гибкое, поэтому на мобильных устройствах отображается только одна колонка.

На iPad с диагональю 11 дюймов с одной правой боковой панелью TLP показывает две колонки в ландшафтном режиме и одну в портретном.

Вот ключевая строка в TLP:

Вам стоит прочитать это:

а также это (но я не уверен, что вы имеете в виду именно «разрешение», так как это может быть спутано с DPI):

6

Спасибо!

Моя проблема заключалась в том, чтобы найти правильный CSS-класс для списка в Discourse.
Это topic-list-item, topic-list-item-seperator или что-то ещё?

Я попробую позже.

7

CSS для сетки должен располагаться выше уровня элемента. Скопируйте способ, которым это реализовано в TLP или TLT.

8

Я сейчас использую Topic List Thumbnails и переопределил несколько элементов через CSS. Не хотел ничего с изображениями в тексте, но можно использовать изображение по умолчанию.

9

Разве вы не имели в виду иконку?

Вам не обязательно использовать изображения в TLP, и вы можете использовать изображение по умолчанию image.

10

Да, конечно, иконка по умолчанию. :wink:

11

Извините за повторный пост, но у меня есть ещё один вопрос, касающийся кнопок регистрации/входа.

Я хочу скрыть эти две кнопки для анонимных пользователей, но тогда я не смогу войти в систему. Есть ли URL-адрес страницы входа или что-то подобное?

12

Никто?

Действительно нет ссылки для входа?

13

https://meta.discourse.org/login или

В зависимости от ваших методов входа и того, что вы хотите. :slight_smile: