주제 목록 미리보기 (TLP)

**이것은 테마 컴포넌트(Theme Component)**이지만 보완 플러그인을 추가할 수 있는 옵션이 있습니다.

:information_source: 요약 이미지와 발췌문(그리고 그 이상!)을 주제 목록에 추가할 수 있으면서도 어떤 목록에 어떤 추가 요소가 표시될지 설정할 수 있는 원래의 주제 미리보기(Topic Preview) 컴포넌트입니다.
:hammer_and_wrench: 저장소 링크 GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists · GitHub
:open_book: 설치 가이드 Installing a theme or theme component
:heart: 후원 이 컴포넌트가 마땅히 받아야 할 유지보수를 받고 미래에도 여러분의 사이트에서 계속 작동할 수 있도록, 여러분이나 여러분의 조직의 자원과 필요에 맞는 수준으로 저의 오픈 소스 작업의 정기 후원자가 되어 주세요.

이 테마 컴포넌트를 즐기고 계신가요? GitHub에서 :star: 해주세요.

이 테마 컴포넌트 설치

Discourse Bars 🍻 🍸 (a sidebar framework)! 와 함께 매우 잘 작동합니다!

개요

주제 목록 미리보기(Topic List Previews)는 다음을 수행할 수 있습니다:

  • 주제 목록에 썸네일, 발췌문, 참여자 아바타 및 주제 통계를 추가
  • 전통적인 행(row), 반응형 타일 또는 메이슨리(masonry) 스타일 레이아웃 사용
  • 주제 목록, 카테고리 및 태그별로 미리보기를 독립적으로 설정
  • 썸네일 크기, 해상도, 폴백 및 표시 제한 제어
  • 더 큰 강조 타일로 선택된 주제 하이라이트
  • 주제 목록 위에 ‘추천(Featured)’ 주제를 추가하고, 필요에 따라 필터링 및 정렬
  • 썸네일, 발췌문 및 작성자 세부 정보로 전체 페이지 검색 강화
  • 활동 페이지에 사용자 월(User Wall) 추가 - ‘포트폴리오’ 기능

사이드카(Sidecar)

이것은 사이드카 플러그인: https://github.com/merefield/discourse-topic-previews-sidecar-pro과 함께 보완할 수 있습니다.

이것은 현재 월 $7 이상을 기여하는 제 GitHub 후원자에게만 접근 권한이 주어지는 비공개 저장소입니다.

다음과 같은 기능을 추가하기 위해:

  • ‘액션’ — 주제 목록에서 바로 북마크, 공유 및 좋아요
  • 썸네일 선택기 — 주제 전체에서 임의의 이미지 선택
  • 선택된 썸네일 기반의 우세 색상 배경
  • YouTube 썸네일에서 검은색 테두리 자동 제거
  • 주제 게시물을 재빌드할 때 선택적 썸네일 재생성
  • 설정 가능한 발췌문 길이 및 선택적 링크 제거
  • 채택된 솔루션 및 Q&A 답변 미리보기
  • 최신 게시물의 발췌문 표시 옵션
  • 미리보기 클릭을 최신 게시물로 유도하는 옵션
  • 검색 결과에 썸네일 미리보기
  • 낮은 해상도 썸네일을 위한 사용자별 설정

플러그인 설치 가이드: Install plugins on a self-hosted site

테마 컴포넌트는 필수이며, 플러그인은 선택 사항입니다.

이러한 설정은 사이트 전체 또는 카테고리별로 모든 주제 목록이나 선택된 주제 목록에 적용할 수 있습니다.

이 유연한 기능 집합을 사용하면 다양한 주제 목록 스타일을 만들 수 있으며, 여기에는 다음이 포함됩니다.

기본 스타일

관련 설정
  • 주제 목록 썸네일
  • 주제 목록 발췌문
  • 주제 목록 액션

Pinterest(메이슨리) 스타일 또는 ‘타일’

관련 설정
  • 주제 목록 타일
  • 주제 목록 썸네일
  • 주제 목록 발췌문
  • 주제 목록 액션
  • 주제 목록 썸네일 너비
  • 주제 목록 썸네일 높이

이것에는 와이드 포맷 옵션(설정 topic_list_tiles_wide_format 뒤)이 있습니다:

이것은 반응형으로 작동하므로, 충분한 폭이 주어지지 않으면 메이슨리 형식으로 축소됩니다(그리고 그 반대도 마찬가지입니다).

추천 이미지(Featured Images)

관련 설정
  • 주제 목록 추천 이미지 태그
  • 주제 목록 추천 이미지 개수
  • 주제 목록 추천 너비
  • 주제 목록 추천 높이
  • 주제 목록 추천 제목
  • 주제 목록 추천 발췌문
  • 주제 목록 추천 정렬

발췌문 토글(Toggling Excerpts):

이것은 제 AI 주제 요약 플러그인과 함께 사용하기 위해 얼마 전 도입했습니다.

TLP(주제 목록 미리보기)에 사용할 수 있습니다:

실제 사례 :seedling:

지원

무료로 보장된 지원을 제공하지 않습니다. 제 GOLD 또는 PLATINUM 월간 후원 티어 중 하나에 가입한 기업 또는 기관에는 지원을 제공할 수 있습니다.

또한 일회성 버그 헌트 옵션도 있습니다.

54개의 좋아요
Facebook-like Feed?
Topic List Previews (legacy)
A more social Discourse layout
Discourse AI Topic Summary :robot:
Hi, is there a plugin for user image galleries?
Imageboard layout for topics (topic excerpts)
What are good plugins or theme components for a forum emphasizing pictures?
Changing views to creating date?
New Photography Theme
Search results page displays topics title that I cannot click
I want to create a Theme/Theme component as shown in the picture below!
No Thumbnail for Unlisted Vimeo Videos
Plugin vs. theme component
Discourse.stpl and discourse.tlp
Enabling a plugin for a specific theme only
Undefined column 'boomarks.post_id' after update
Attempted to upgrade and I think I messed something up
Allow users to block keywords
How to display posts as blocks?
Option to select format and compression degree for thumbnails
FKB Pro - Social theme
FKB Pro - Social theme
Multiple installs of user portfolio
Any plugins that show MEDIA on forum index?
FKB Pro - Social theme
Topic List Sort - Random
How can I change the background of a certain topic?
Homepage plugin for displaying recent topics, latest members, popular threads, and similar elements
Some posts showing 'ignored content'
Topic details under title
FKB Pro - Social theme
How to set summary word count?
Ghost Theme
2023: The Year in Review
Can the homepage display images within the Topic feed?
Expand new posts in topics in "Unread" and "New" to full summary
Can we get a custom PROFILE up?
Topic Author
Is it possible to display the thumbnails in Docs?
All links to categories broken?
Discussion grid latest
Is there a Kanban theme for Discourse?
Is it possible to add posts to a profile?
Carousel sliders with Featured Tiles component on mobiles?
How to display posts in grid?
FKB Pro - Social theme
Can discourse be used entirely through the APIs to build a flutter app?
2024: The Year in Review
How can I set the search results displayed in grid or mansionry
Visually better separate topics on the home page
Can Discourse achieve this kind of card UI layout for topics?
Creating a Unique Gallery Layout for a Category
View count on fakebook theme
Display post content in homepage
Create a forum with the same interface and functions
Help with display home screen look
Is there a way to display topic contents in category view?
How can I make my forum look like this one?
Homepage Feature
Cannot see the multiple posts selection icon on desktop view
Fakebook Theme
Video thumbnails issue
Don't show grid, just topics list
Guest Gate Theme Component
Visual newsfeed as community home
Visual newsfeed as community home
Posts appear twice on homepage
Using Discourse to Build a Blog, Reddit, X or Facebook-Style Scrolling Platform
Looking for feedback on my new Discourse site ✨
Featured Topics
PAID - Seeking Discourse Developer for Custom Portfolio Feature
Eliminate YouTube thumbnail black bars
This theme (or component) msg doesn't go away
How to create a banner with link in the image?
Chat channels and chat nav seem to have broken
Topic List Previews (legacy)
Adding Like Dislike Buttons And Inline Replies To Redditish Theme
News on the sidebar
2021: The Year in Review
Topic excerpts appearing after update to Discourse 2.8
Thumbnail of topic
Extend Topic List Thumbnails TC with like button
Infinite scrolling is a total pain
Developing a component or plugin similar to topic list thumbnails or topic list previews

태그가 추가된 시간을 기준으로 추천 이미지의 순서를 정할 수 있는 방법이 있을까요? 현재는 최근 활동이 있는 주제의 추천 이미지가 표시되어, 최근에 태그된 이미지가 아래로 밀려나는 문제가 있습니다.

예를 들어, 이미지가 10개 있을 때 그중 5개를 추천으로 지정하면 상단 바에 해당 5개가 표시됩니다. 그런데 태그를 5개 더 추가하면 기존 5개가 대체됩니다. 하지만 기존 5개 주제 중 하나에 댓글이나 게시물이 추가되면 해당 이미지가 다시 맨 앞으로 올라와 버립니다.

3개의 좋아요

태그? 아니요, 하지만 생성 날짜순으로 정렬하는 옵션은 있습니다:

image

1개의 좋아요

경고: 곧 타일(아이템) 레이아웃 변경을 배포할 예정입니다. CSS를 직접 수정하신 경우, 해당 부분도 … 음 … 조정해야 할 수 있습니다:

이런 일은 자주 하지 않겠다고 약속합니다. 이번 변경은 정리하고, 향후可能出现할 수 있는 새로운 기능을 원활하게 지원하기 위한 것입니다 …

현재 변경 사항은 beta 브랜치에 적용되어 있습니다.

3개의 좋아요

네, 그 옵션이 조금은 도움이 되지만, 이전 게시글에 업데이트가 있으면 그 게시글이 맨 위로 올라옵니다.

2개의 좋아요

저는 Discourse API에서 사용할 수 있는 네이티브 옵션만 사용하고 있습니다. (이것은 본질적으로 테마 컴포넌트이므로 API를 변경할 수 없습니다.) 시간이 나면 정렬 방식을 다시 한번 확인해 보겠습니다. 다만, 이 문제는 이전에 한 번 언급된 적이 있었고, 한 사용자를 돕기 위해 변경을 한 적이 있습니다. Topic List Previews (legacy) - #1154 by merefield. 스펙대로 작동하지 않는 것이 놀랍습니다. 새 게시물이 추가되어도 토픽의 created_at은 고정되어 있어야 하지 않나요? 설정을 변경하고 브라우저를 새로고침하셨는지 확인해 보셨습니까?

3개의 좋아요

@raghukamath 방금 테스트해 보았는데 의도대로 작동하는 것 같습니다? 여전히 새 게시물에 따라 순서가 변경되지 않고 created_at 날짜를 따르고 있습니다. 브라우저를 새로고침한 후 다시 시도해 주세요.

3개의 좋아요

네, 괜찮습니다. 더 테스트해 보겠습니다. 옵션이 활성화되었을 때의 동작 때문에 혼란을 겪었을 수도 있겠네요. 이렇게 번거롭게 해서 죄송합니다.

회원분들이 지적한 또 다른 문제는 읽지 않은 항목과 읽은 항목의 색상 CSS 수정이 모바일 브라우저에 적용되지 않는다는 점입니다.

1개의 좋아요

네, 이전에 언급했듯이 아직 해결되지 않은 상태입니다. 위에서 설명한 레이아웃 업데이트와 함께 배포를 시도해 보겠습니다. 아마 며칠 내로 가능할 것입니다.

안녕하세요. git depreciated 플러그인을 사용하려고 했는데, 모바일 섬네일에서 CSS를 오버라이드할 수 없었습니다. 계속 80px 높이로 되돌아갔습니다. 검색해보니 해당 기능이 component로 이동했다는 것을 확인했습니다. 같은 문제가 생길까요? 변경하려면 component를 클론해야 하는지, 아니면 다른 우회 방법이 있는지 궁금합니다. 모바일 브라우저에서 모바일 화면에 대해 전체 너비(full width)를 적용하고 싶습니다.

여기 레이아웃이 필요하신 조건에 맞지 않을까요: Topic List Previews (TLP) - #4 by merefield 필요하신 조건에 맞을까요? 새로운 타일에는 전체 폭의 섬네일이 제공됩니다. 현재 beta 브랜치에 있습니다. 원하신다면 이를 추가 테마 컴포넌트로 설치해 보시기 바랍니다. 설치 시 브랜치를 지정하고, 이름이 Beta임을 명확히 알 수 있도록 테마 컴포넌트 이름을 수정해 주세요.

1개의 좋아요

그렇게 되면 확실히 가능할 거예요. 이제 제가 원했던 대로 전체 너비로 설정해 두었습니다. 감사합니다.

1개의 좋아요

beta 브랜치를 병합했습니다:

  • 타일 내부 스타일링이 현대화되고 정리되었습니다. 이제 썸네일이 열 전체 너비에 맞춰 표시됩니다.
  • 여러 CSS 단순화가 적용되었습니다.
  • 모바일에서 타일 외 요소의 레이아웃이 일부 개선되었습니다.
  • 모바일에서도 이제 타일 제목에 이전 방문 기록이 반영됩니다.
4개의 좋아요

안녕하세요,

정말 멋진 컴포넌트를 만들어 주셔서 감사합니다! 디자인이 정말 마음에 듭니다 :heart_eyes:

저는 디스코스에 아직 초보라서 기술적인 용어에 대해 잘 알지 못합니다.

목록 컴포넌트에 이미지가 표시되지 않는 문제로 고생하고 있습니다. 어떤 이유인지 모르겠지만, 컴포넌트 미리보기에서는 이미지가 잘 보이는데 실제 화면을 불러오면 이미지가 사라집니다.


^ 이것은 컴포넌트의 미리보기 화면입니다

1개의 좋아요


^ 실제 페이지를 로드했을 때의 모습입니다.

이것이 내 Discourse 설정과 관련이 있는 것 같습니다??

이 컴포넌트가 작동하려면 활성화해야 하는 특정 설정이 있나요? 왜 의도한 대로 작동하지 않는지 정말 모르겠습니다…

1개의 좋아요

안녕하세요, 관심 가져주셔서 감사합니다.

몇 가지 참고할 사항이 있습니다:

  • 이전에 비슷한 컴포넌트나 플러그인을 설치해 본 적이 없다면 모든 섬네일이 생성되기까지 시간이 좀 걸릴 수 있습니다. 이는 배치 처리 과정이며 시간이 소요됩니다. 컴포넌트를 설치하고 테마에 추가하면 이 과정이 자동으로 백그라운드에서 시작됩니다. sidekiq 큐를 확인해 보세요. 큐에 대기 중인 작업이 많이 표시될 수 있습니다.
  • 모든 테마와 반드시 호환되는 것은 아닙니다. 충돌이 발생할 가능성이 항상 존재하며, 이 컴포넌트는 기본적으로 제공되는 테마를 기준으로 개발 및 설계되었습니다. 처음에는 기본 테마만 사용하여 사이트에 적용해 테스트해 보시기 바랍니다. 외관을 조정할 수는 있지만, 이는 이 컴포넌트의 고유한 구조를 기반으로 해야 합니다.
1개의 좋아요

로버트님,

답장 주셔서 감사합니다! 제안해 주신 내용을 제 사이트에서 테스트해 보겠습니다 :slight_smile:

1개의 좋아요

로버트, 안녕하세요. 헤더 아래에 서드파티 JavaScript를 테이블로 가져왔는데, 컴포넌트에서 사용하면 스크립트가 미리보기가 깨져요. 우회 방법이 있을까요?

그 스크립트에 오류가 있어 JavaScript 실행이 중단되면, JavaScript가 최적의 동작 모드로 설정되어 있어야 하는 TLP 레이아웃 코드가 깨질 수 있습니다. 브라우저 콘솔에서 빨간색 오류를 확인해 보세요.

1개의 좋아요

안녕하세요, 제안해 주신 대로 created at date 옵션을 활성화했습니다. 문제가 다소 해결되었습니다. 하지만 이전 플러그인에서는 게시글이 태그된 날짜에 따라 순서가 정해졌던 것 같습니다. 또한, 토픽에 업데이트나 답글이 달릴 때마다 오래된 이미지가 첫 페이지에 표시되는 문제 때문에 최근 이미지가 계속 특징 이미지로 유지되기 어렵습니다. 예를 들어, 제가 이미지를 특징 이미지로 지정했는데 1년 전의 오래된 게시글에 새 답글이 달리면, 첫 페이지에는 그 게시글의 특징 이미지가 표시됩니다. 오래된 게시글에 답글이 많이 달리면, 최근에 태그된 특징 이미지가 사라져 버립니다.