테마 수정자: 간단한 소개

테마의 기능이 점점 더 복잡해짐에 따라, 코어 서버 사이드 동작을 조작할 수 있는 방법을 모색해 왔습니다. 플러그인만큼의 제어 권한은 부여되지 않지만, 테마가 조작할 수 있는 몇 가지 사전 정의된 훅을 제공할 수 있습니다.

소개합니다: 테마 수정자 (theme modifiers) :partying_face:

이들은 테마의 about.json 파일에서 modifiers 키를 사용하여 지정됩니다.

100% 최신 수정자 목록은 theme_modifier_set.rb 하단의 데이터베이스 스키마를 확인하세요. 현재까지 제공되는 수정자의 빠른 요약은 다음과 같습니다:

  • serialize_topic_excerpts boolean (기본값 false) - 주제 목록을 직렬화할 때 항상 발췌문을 포함합니다

  • csp_extensions string array - CSP에 지시문을 추가합니다. 이전의 “extend_content_security_policy” 테마 설정 방법과 동일하게 작동합니다. 하지만 기억하세요, 단순한 <script src=""> 태그는 자동으로 허용됩니다.

  • svg_icons string array - 아이콘 하위 집합에 포함되어야 할 아이콘 목록

  • topic thumbnails array of dimensions - 주제 섬네일 세트에서 추가 해상도를 요청합니다. 비동기로 생성되므로, 요청한 크기가 제공되지 않으면 원래 이미지로 폴백해야 합니다. 자세한 정보는 커밋 메시지에서 확인할 수 있습니다.

  • serialize_post_user_badges string array - 게시글 데이터와 함께 직렬화할 배지 이름 목록(배지 테이블의 항목과 일치해야 함). 설정되면 시스템은 클라이언트 사이드 렌더링을 위해 각 게시글에 지정된 사용자 배지를 포함합니다.

이 새로운 훅을 적극 활용하는 테마 중 하나는 Topic List Thumbnails 입니다. 작동 방식을 보려면 코드를 확인해 보세요.

설정에 종속적인 수정자

테마 수정자는 테마 설정에서 값을 가져오도록 구성할 수도 있으며, 이를 통해 사이트 운영자는 테마 코드를 수정하지 않고도 수정자 동작을 오버라이드할 수 있습니다. 수정자를 설정에 종속적으로 만들려면 about.json에서 다음 구문을 사용하세요:

{
  "modifiers": {
    "modifier_name": {
      "type": "setting",
      "value": "setting_name"
    }
  }
}

예를 들어, show_excerpts라는 이름의 테마 설정이 있고 이것이 serialize_topic_excerpts 수정자를 제어하도록 하려면:

settings.yml에서:

show_excerpts:
  default: false

about.json에서:

{
  "modifiers": {
    "serialize_topic_excerpts": {
      "type": "setting",
      "value": "show_excerpts"
    }
  }
}

show_excerpts 설정이 변경되면 수정자 값이 자동으로 일치하도록 업데이트됩니다. 이를 통해 사이트 운영자는 관리자 UI를 통해 테마 동작을 유연하게 커스터마이즈할 수 있습니다.


이 문서는 버전 관리됩니다 - 변경 사항을 github에서 제안해 주세요.

35개의 좋아요

David, 아마도 조금 게으르게 질문하는 건데 플러그인에서 이것에 접근할 방법이 있을까요:

테마는 about.json 파일에서 수정자(modifier)를 사용하여 추가적인 썸네일 크기를 요청할 수 있습니다:

TLP 플러그인을 이 새로운 스키마로 마이그레이션하려고 하는데, 적어도 그 사이까지는 플러그인에서 동일한 기능에 접근할 수 있으면 좋겠습니다.

2개의 좋아요

지금은 없지만, 확인해볼게요 :eyes:

6개의 좋아요

David, 썸네일 일괄 재생성 시 올바른 접근 방식은 무엇인가요?

최근 한 사이트에서 이 기능을 사용해 보았는데, 주제의 약 10%만 처리한 뒤 중단되었습니다(또는 나머지를 거부한 것으로 보입니다). 썸네일이 생성된 주제가 가장 최근 10%였던 점을 들어, 후자가 아닌 전자(중단)라고 추정합니다.

게시물 재처리(Rebaking)만으로는 해결되지 않는 것 같습니다. 실제로 일괄 재처리를 실행해 보았는데, 이것이 원인을 제공한 건 아닌지 의문이 듭니다 …

image_url은 값이 채워져 있지만, 썸네일이 없다는 점을 확인했습니다.

조언을 주시면 감사하겠습니다!

1개의 좋아요

해당 컬럼은 아무 역할도 하지 않으며, 곧 삭제될 예정입니다. 사용해야 하는 컬럼은 image_upload_id입니다.

이것은 필요하지 않습니다. 사용자가 콘솔에서 복잡한 작업을 하지 않고도 새 테마를 설치할 수 있도록 의도적으로 설계했습니다. 썸네일은 필요할 때 비동기적으로 생성됩니다. 예를 들어:

  • 새 해상도를 요청하는 새 테마를 추가합니다.
  • 사용자가 토픽을 요청하면 기존에 존재하는 썸네일을 제공합니다. 만약 특정 크기의 썸네일이 없다면 sidekiq 작업을 예약합니다.
  • 다음에 누군가 해당 토픽을 요청하면 올바른 크기의 썸네일이 존재하게 됩니다.

요청한 썸네일 크기가 원본 이미지보다 크다면, 썸네일을 생성하지 않습니다.

따라서 이 시스템이 정상적으로 작동하려면 다음 사항을 반드시 기억해야 합니다:

제가 만든 썸네일 테마 컴포넌트에 이 폴백 로직의 예시가 있습니다.那里的 로직을 자유롭게 가져다 쓰셔도 됩니다.

5개의 좋아요

폴백이 thumbnailsl[0]로 직렬화되는 건가요? 네, 이미 그 부분을 처리하고 있습니다. (참고로 구현 방식이 아주 좋습니다. 다루기 매우 쉽네요)

일부 이미지가 기준을 충족하지 못하거나 조건에 맞지 않아 제외되는 경우가 있을까요?

TLP 플러그인에서는 원박스(thumbnail) 썸네일을 가져오는 동작을 하고 있습니다. 하지만 여기서는 모든 경우에 그런 동작이 일어나지 않는 것 같습니다.

예를 들어, 시간이 되시면 아래 예시들을 확인해 주실 수 있을까요?

이 썸네일들은 기준에 미달하는 것 같습니다. 썸네일이 null로 직렬화되고 있습니다.

네, 의도적으로 그렇게 했습니다. 작은 원박스(onebox) 썸네일을 제거해 달라는 요청이 여러 건 있었습니다. 예를 들어, 사람들이 자신의 깃허브 아바타가 주제 썸네일로 표시되는 경우가 있었는데, 이는 거의 의도된 상황이 아니었습니다.

참고로, 이미지가 실제 콘텐츠인 원박스(인스타그램/트위터/등등의 사진)의 경우 썸네일로 선택됩니다.

유튜브 영상의 경우, 어제 수정했습니다.

5개의 좋아요

아, 좋습니다. 확인해 주셔서 감사합니다.

그건 좀 이상하네요. 빌드가 더 최신이었지만, 여전히 일부가 무시되고 있는 것 같습니다.

네, 자동 선택이 최적이지 않은 상황을 위해 섬네일 선택기를 구현하게 된 이유이기도 합니다. 해당 동작을 변경할 수도 있지만, 플러그인에서 그렇게 해보겠습니다.

시간 내어 주셔서 감사합니다, David!

2개의 좋아요

좋아요, 해결했습니다. 다소 무과실인 byebug 세션 후에 왜 오래된 YT 게시글에 썸네일이 생성되지 않는지 이해할 수 없었습니다.

그런 다음 깨달았습니다. 그 이유는 이것 때문입니다:

따라서 이 값을 상당히 큰 숫자(365?)로 설정한 후 다시 재구축(rebake)해야 할 수도 있다고 제안합니다.

로컬에 업로드되지 않은 항목에는 썸네일이 생성되지 않는다고 생각하는데, 제 추측이 맞을까요? …

4개의 좋아요

:+1: 맞습니다, 이는 로컬 업로드에 대해서만 작동합니다… “최대 경과 일수” 설정을 다시 생각해 볼 필요가 있을 것 같습니다 :thinking:

8개의 좋아요

계획이 있으니 이번 주에 구현해 보겠습니다. 한 가지 질문이 있는데, 값이 동적으로 설정되어야 하나요?

즉, 해상도가 부팅 시에 정의되나요? 아니면 런타임에 (예: 사이트 설정을 통해) 정의되나요?

전자가 더 쉽긴 하지만… 후자도 가능할 수 있습니다 :thinking:

2개의 좋아요

확인해 주셔서 감사합니다.

테마 컴포넌트처럼 수정된 방식이 필요합니다.

사이트 설정으로 제공되면 좋겠습니다.

완전한 공개를 위해 추가로 말씀드리면, 플러그인에서 벗어나고 싶으므로 테마 컴포넌트 솔루션과의 호환성만으로도 충분합니다.

2개의 좋아요

@merefield 여기 있습니다:

커밋 메시지가 작동 방식을 설명해 줄 거라 생각합니다. 궁금한 점이 있으면 말씀해 주세요.

7개의 좋아요

훌륭합니다. 방금 TLP에 추가했는데 잘 작동하는 것 같습니다! 도움 주셔서 감사합니다!

4개의 좋아요

4개의 게시물이 새 주제 JSON 엔드포인트에서 썸네일 가져오기로 분리되었습니다.

원격 서버의 이미지에도 적용할 수 있을까요? 예를 들어 Blogger, Picasa, 또는 Amazon S3의 이미지처럼요.

Discourse는 크고 용량이 큰 이미지 사이트를 위해 Amazon S3 호스팅을 지원하므로, 모든 것을 로컬 서버에 직접 호스팅해야 한다면 이러한 설계 방식이 단점이 될 수 있습니다.

이번 업데이트로 인해 저희 사이트에는 쉬운 해결책이 아닙니다. 저희는 이미 다른 서버에 이미지를 호스팅하고 있기 때문입니다. 많은 게시물이 있는 상태에서 제휴 서버로 이전하는 것은 너무 어렵고, 로컬 서버에 호스팅하기에는 용량이 너무 큽니다.

이것은 Discourse의 'uploads’에서만 작동하도록 설계되었습니다. S3 또는 다른 서비스를 사용할 경우 해당 서비스가 적용됩니다.

다른 사이트에서 핫링크된 이미지를 자동으로 다운로드하려면 download_remote_images 사이트 설정 사용을 권장합니다.

4개의 좋아요

데이비드님, TC에서 Pro 아이콘을 사용하려면 특별히 해야 할 일이 있나요?

1개의 좋아요

별거 없어요, 아니요. Discourse의 다른 곳에서 프로 아이콘을 사용하는 것과 똑같이 작동해야 합니다. 이 플러그인을 사용해 프로 아이콘을 활성화하고 계신 것 같네요.

동작하지 않으면 알려주세요. 확인해 보겠습니다 :eyes:

2개의 좋아요

네, 맞아요. 한 번 더 찾아볼게요. 늦은 저녁에 답장 주셔서 감사합니다!

2개의 좋아요