Модернизация HTML списка тем: подготовка тем, компонентов и плагинов

Новости и события Объявления
1

Разметка списков тем оставалась практически неизменной с момента начала проекта Discourse. Чтобы использовать возможности новейших веб-технологий, мы планируем внести изменения, которые расширят потенциал кастомизации тем для списков тем.

Чтобы сделать переход максимально плавным, мы будем вносить эти изменения поэтапно и надеемся завершить миграцию в первом квартале 2022 года.

:white_check_mark: Шаг 1: Обновление CSS-селекторов

Мы недавно добавили классы .topic-list-header, .topic-list-body и .topic-list-data, чтобы начать переход.

  • У thead теперь есть класс topic-list-header
  • У tbody теперь есть класс… вы уже догадались! topic-list-body
  • Элементы td теперь также имеют прикрепленные классы topic-list-data

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

Обновление существующих переопределений шаблонов

По возможности мы рекомендуем удалить переопределения шаблонов и использовать комбинацию CSS и выходных точек плагинов для кастомизации. Если удаление переопределений невозможно, вам потребуется вручную обновить их, включив новые классы.

Шаблоны, к которым были добавлены классы:

:black_square_button: Шаг 2: Изменение типов элементов

Следующим шагом в этом процессе станет преобразование существующих элементов table в более подходящие элементы.

Подготовка пользовательских таблиц стилей, нацеленных на элементы table

На данный момент вам следует удалить все ссылки на table, thead, tbody, tr, td из ваших пользовательских таблиц стилей и заменить их новыми классами. Тогда, когда мы в конечном итоге изменим типы элементов, ваша кастомизация тем продолжит работать без сбоев.

Мы с нетерпением ждем, что смогут создать наши разработчики тем и плагинов после этих изменений! :partying_face:

38 лайков
After updating to 2.8.0.beta8, nothing shows as "read" anymore
Topic List Previews (legacy)
6

Можете рассказать немного подробнее, что именно происходит?

4 лайка
7

Кратко: мы больше не будем использовать HTML-элемент table для списков тем, так как он ведёт себя довольно странно, что затрудняет внесение существенных изменений с помощью CSS.

16 лайков
8

Это огромная новость — я так рад, что мы переходим от таблиц. Это позволит сделать тему гораздо более гибкой и простой для списков тем. :heart_eyes:

9 лайков
9

Это отличное изменение, так как Ember, насколько мне известно, не позволяет динамически заменять теги, например, <table> или <tr> на <div>, используя привязки, в отличие от классов, что, к счастью, возможно!

Это означает, что если <table> находится в корне шаблона компонента, вы как бы застрянете с ним, если только не переопределите всё целиком, что в противном случае было бы излишним преувеличением.

Короче говоря, я ЗА! :heart_eyes:

11 лайков
10

Спасибо за внесение этих изменений! Просто перепроверяю перед тем, как скорректировать объявления.

Разметка выглядит так:

<table>
  <thead>
    <tr>
      <th>
  <tbody>
    <tr>
      <td>

А соответствующие классы есть/будут:

.topic-list
  .topic-list-header
    (tr здесь будет удалён?)
     .topic-list-data
  .topic-list-body
    .topic-list-item
      .topic-list-data
5 лайков
11

Да, всё выглядит правильно :+1:

7 лайков
13

Есть ли какие-либо обновления по этому вопросу? Я бы хотел иметь возможность лучше стилизовать списки тем.

4 лайка
14

К сожалению, этот вопрос был отложен на задний план на довольно долгое время, чтобы освободить время для других более срочных задач в Discourse. Однако я планирую вернуться к нему в ближайшие недели!

6 лайков