Topic List Previews (legacy)

커스터마이징 플러그인
1227

감사합니다. 테마 컴포넌트보다 카테고리별로 커스터마이징 옵션이 조금 더 많아서 플러그인을 훨씬 선호합니다.

2개의 좋아요
1228

썸네일의 너비/높이를 변경하면 게시물을 다시 베이킹해야 한다고 표시됩니다. 저는 rake posts:rebake 명령어를 사용하고 있습니다.

썸네일이 있는 게시물만 다시 베이킹할 수 있는 명령어가 있는지 궁금합니다. 아니면 썸네일 크기를 변경할 때마다 모든 게시물을 다시 베이킹해야 하는지, 또는 특정 카테고리의 모든 게시물을 다시 베이킹할 수 있는지 알고 싶습니다.

1개의 좋아요
1229

모바일에서는 CSS를 사용하세요 (예: max-width: 몇 개의 게시물 전 참고)

데스크톱에서는 높이와 너비 플러그인 설정을 사용하세요.

썸네일 해상도는 해상도 수준 플러그인 설정에서 처리됩니다. 이는 크기와 같은 개념이 아닙니다.

Rebake는 Discourse에서 썸네일을 설정합니다. 한 번 설정했다면 다시 할 필요가 없습니다. 영원히. 플러그인에서 사용 가능한 해상도 수준이 변경되는 경우를 제외하고는요 (가능성이 낮음)

1개의 좋아요
1230

데스크톱용 플러그인 설정에서 높이와 너비를 변경하고 있습니다. 어떤 변화가 있는지 확인하기 위해 3px까지 작게 설정해 보았습니다. 이후 게시물을 다시 생성(rebake)했지만, 섬네일 크기는 변하지 않았습니다.

image
image374×234 6.87 KB

1개의 좋아요
1231

px 대신 숫자만 사용하세요.

재번역(rebake)에 대한 조언은 오래된 내용입니다. 죄송합니다!

1개의 좋아요
1232

숫자를 적용해도 아무 변화가 없네요.

image
image376×220 6.58 KB

기본적으로 여기서 썸네일 크기를 줄이려고 합니다: https://forum.duelistsunite.org/c/yugioh/decks/19

어떤 숫자를 넣어도 변하지 않았습니다.

1개의 좋아요
1233

너비는 50으로 설정하고 두 번째는 비워두면 어떨까요? 제 환경에서는 잘 동작합니다.

참고로, 타일(Tiles) 레이아웃의 경우 두 설정 모두 무관합니다(너비는 브라우저 창 너비와 열 수에 의해 결정되고, 높이는 이미지의 종횡비에 의해 결정됩니다).

또한 이 설정들은 해당 카테고리만 단독으로 볼 때만 적용된다는 점도 유의하세요.

1개의 좋아요
1234

음, 아마도 그게 변경되지 않는 이유일지도 모르겠네요. 저는 Tiles 레이아웃을 사용하고 있습니다. 현재 이 카테고리만 보고 있고, 폭을 20으로 변경한 뒤 높이는 비워 두었습니다. 하지만 아무 변화가 없어요.

썸네일 이미지에 투명한 픽셀을 더 추가해서 크기를 줄이는 방법도 가능할 것 같네요. 그 방법이 통할지도 모르겠어요.

1개의 좋아요
1235

네, Tiles에 이 설정들은 말이 안 돼요. Tiles는 브라우저/기기 폭을 줄이면 3열에서 2열, 1열로 자동으로 전환됩니다. 섬네일은 열의 전체 폭(약간의 패딩 제외)을 차지하죠. 섬네일을 축소하는 건 의미가 없어요 — 그렇게 하면 _최악_으로 보일 거예요.

저는 Tiles를 여러 프로토타입을 거치며 설계했는데, 컴퓨터 화면에서 3열 이상은 따라가기 매우 어렵기 때문에 최대 열 수를 3으로 제한했습니다.

이 설정들은 Tiles가 아닌 뷰를 사용자화하는 데 도움을 주기 위한 것으로, 목록에서 섬네일이 얼마나 많은 폭을 차지할지 결정할 수 있도록 합니다.

1개의 좋아요
1236

그러면 더 작은 "타일"을 만들려면 CSS를 사용해야 한다는 뜻인가요?

1237

시도는 해볼 수 있지만, 지원되지는 않습니다. 메타가 너무 많이 압축되는 문제로 인해 이슈가 발생할 가능성이 높습니다.

4열은 읽기 꽤 어렵다고 느꼈습니다. 제 사이트 중 한 곳의 사용자가 1열보다 더 많다고 불평한 기억이 납니다! ㅋㅋ

그럼에도 불구하고, 기본 CSS를 여기에 올립니다. 패턴을 파악하실 수 있으실 거라고 생각합니다. 마음껏 활용하세요!:

  .tiles-grid-sizer,
  .tiles-grid-item {
    // 매우 좁은 뷰에서 1열
    width: 100%;
    // 중간 너비에서 2열
    @media screen and (min-width: 501px) and (max-width: 800px) {
      width: calc((100% - 6px)/2);
    }
    // 공간이 있을 때 3열
    @media screen and (min-width: 801px) {
      width: calc((100% - 12px)/3);
    }
  }
4개의 좋아요
1238

Hey @merefield,
프로덕션 웹사이트에 테마 컴포넌트를 사용하는 것을 추천하시나요? 아직 실험 단계라고 생각하시나요?

플러그인을 삭제하고 테마 컴포넌트를 설치하면 썸네일 이미지가 유지될까요?
그렇지 않다면, 플러그인과 테마 컴포넌트 사이를 부드럽게 전환할 수 있는 방법이 있을까요?

2개의 좋아요
1239

데이터 소스에 영향을 주지 않아야 합니다. 두 가지 사이를 자유롭게 전환할 수 있습니다.

테마 컴포넌트는 더 빠르지만, 타일(Tiles) 모드는 Chrome에서 데스크톱 화면 약 10페이지 이상을 아래로 스크롤하면 버그가 발생하는 렌더러에 의존합니다(모바일에서는 거의 불가능합니다!). 관련 Chrome 이슈는 아직까지도 해결되지 않았습니다. 이것이 여전히 '실험적’으로 표시되는 유일한 이유입니다.

긍정적인 측면에서, 테마 컴포넌트의 타일 모드는 사이드바를 처리할 수 있지만 플러그인은 그럴 수 없습니다. 다만 플러그인의 매스오니(masonry) 렌더러는 애니메이션이 적용되어 일부 사용자들에게는 더 ‘우아해’ 보일 수 있습니다. 테마 컴포넌트의 타일 뷰에는 애니메이션이 없습니다.

종합적으로 볼 때, 저는 개인적으로 더 가볍고 타일 모드에서 훨씬 적은 JavaScript를 사용하며 더 빠른 테마 컴포넌트를 선호합니다.

2개의 좋아요
1240

상세한 답변 감사합니다.
주제(토픽) 어딘가에 테마 컴포넌트 링크를 추가해 주실 수 있나요? 유용할 것 같은데, 제가 찾은 곳은 여기뿐이었습니다:

2개의 좋아요
1241

저는 TLP 플러그인을 사용 중입니다. 모바일 기기에서 사용자 카드의 포트폴리오 버튼이 표시되지 않나요? 이 기능을 활성화할 수 있는 설정이 있을까요?

1개의 좋아요
1242

@merefield 다시 한 달의 첫 5일이 돌아왔네요! :tada: TLP와 최신 Discourse 버전 사이에 문제가 있는지 알고 계신가요? 다시 테스트를 시작할 준비가 되어 있습니다 :slight_smile:

3개의 좋아요
1243

그렇습니다. 심각한 깨짐 문제가 있다는 것은 알지 못합니다.

3개의 좋아요
1245

업그레이드가 순조롭게 완료되었습니다!

2개의 좋아요
1246

테마 컴포넌트에 작은 문제가 있습니다.
카테고리 페이지가 로드될 때(단순히 "카테고리"를 클릭하는 것이 아닌, 전체 앱 로드 시) 다음 JS 오류가 발생합니다:

GET https://canapin.win/tags/.json 404

image

1개의 좋아요
1247

태그가 누락된 설정이 있나요?

1개의 좋아요