토픽 목록 HTML 현대화 - 테마, 컴포넌트 및 플러그인 준비

뉴스 및 이벤트 공지사항
1

Discourse 프로젝트가 시작된 이후로 주제 목록 마크업은 거의 변하지 않았습니다. 최신 웹 기술을 활용하기 위해, 주제 목록의 테마 설정 가능성을 향상시킬 몇 가지 변경 사항을 계획하고 있습니다.

전환 과정을 최대한 원활하게 만들기 위해, 이러한 변경 사항을 단계별로 진행할 것이며, 2022년 1분기에 마이그레이션이 완료되기를 기대하고 있습니다.

: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개의 좋아요