설정이 표시되지 않음

여러분 안녕하세요, 저는 Discourse를 위한 개발을 시작하고 있으며, 현재 테마 컴포넌트를 작업 중입니다.
링크: GitHub - NateDhaliwal/discourse-persistent-banner: A theme component for Discourse that cannot be closed by the user. · GitHub

Theme Creator에 올렸을 때, settings.yml 파일이 있음에도 불구하고 설정 항목이 표시되지 않습니다. 혹시 아이디어가 있으신 분 계신가요?

테마 생성기에서 오류 메시지가 보입니까?

시작과 끝에 동일한 따옴표를 사용해야 할 것 같습니다.

여기도 문제가 될 수 있습니다. default: ""를 사용해 보시길 권합니다.

선택지에 "block"을 추가하는 것이 좋을 수도 있습니다. 그렇지 않으면 해당 옵션을 다시 선택하려면 되돌리기 버튼을 사용해야 합니다.

아, 방금 '새로 만들기’를 클릭하는 대신 가져오기를 해야 했다는 걸 깨달았네요…
하지만 이제 URL을 사용하려고 하면 about.json이 유효하지 않거나 존재하지 않는다고 하면서 테마인지 묻습니다.
About.json:

무언가 잘못된 건가요?

라이선스 URL 뒤에 쉼표가 없습니다.

:roll_eyes:
@merefield 버전은 "" 안에 있어야 하나요?

아마 그것도 그럴 것이다. 그냥 예시를 살펴보면 된다.

감사합니다! 하나만 더 여쭤볼게요. 변수가 표시되지 않는 것 같아요.
https://github.com/NateDhaliwal/discourse-persistent-banner/blob/main/common/header.html

제대로 초기화하지 않아서 그런 건가요? 가이드를 따라 해 봤는데…

  1. "header.html"을 사용하지 말고, 적절한 컴포넌트(가능하면 .gjs 파일, .hbs도 허용)를 사용하세요.
  2. 설정값이나 변수에서 HTML을 출력할 때는 항상 html-safe 헬퍼를 사용하세요.

그렇다면 다음 코드를 사용해야 하나요?

import Component from "@glimmer/component";

export default class PracticeComponent extends Component {
  get bannerLinks() {
    return JSON.parse(settings.banner_links);
  }
}

수억 개의 예를 보라 :stuck_out_tongue_winking_eye:

JavaScript로 처리해야 할 작업이 있는 경우에만 gjs 파일을 사용해야 하며, 그렇지 않으면 hbs 템플릿 파일만으로도 충분할 수 있습니다. 직접 시도해 보세요.

내가 가고 있는 방향이 맞는지 확신이 서지 않습니다.
다음과 같은 내용으로 javascripts/persistent-banner.hbs 파일을 만들었습니다:
https://github.com/NateDhaliwal/discourse-persistent-banner/blob/main/javascripts/persistent-banner.hbs

하지만 아무것도 표시되지 않습니다. 다른 위치에 놓아보았지만 여전히 작동하지 않습니다.

예제를 찾아보았지만, 많은 예제가 도움이 되지 않는 것 같습니다.
어떤 조언을 주실 수 있을까요?

어떤 플러그인 아웃렛에 배너를 배치하시겠습니까?
Using Plugin Outlet Connectors from a Theme or Plugin 를 참고해 보세요.

https://meta.discourse.org/t/add-a-featured-topic-list-to-your-discourse-homepage/132949?u=moin 을 예시로 사용할 수 있습니다.

플러그인 아웃렛의 이름과 위치를 확인하려면 (deprecated) Plugin outlet locations theme component 을 사용할 수 있습니다. 예를 들어 "above-main-container"는 사이드바 위가 아닌, 주제 목록 바로 위의 가장 상단 영역을 가리킵니다.

비슷한 기능을 추가하는 #customization:theme-component의 코드를 살펴보는 것도 배우는 데 매우 좋은 방법입니다.

hbs 파일에 script 태그를 넣을 필요가 없으며, 넣어서도 안 됩니다. hbs 파일은 템플릿의 콘텐츠에만 제한되어야 합니다.

감으로 추측하지 말고, 가이드를 읽어보세요:

그래서… hbs 파일 없이 <script> 태그를 사용해 Handlebars를 적용하는 방식으로 작동하게 만들었습니다. 지금은 이렇게 사용하고 있지만, 대신 hbs 파일을 사용하는 방식으로 계속 시도해 볼 계획입니다.

파일을 올바르게 분리하는 방법을 보여드리기 위해 빠른 pull request를 생성했습니다. 병합하시거나 브랜치를 확인해 보셔도 됩니다.

정말 감사합니다! 이제 작동합니다!

걱정 마, 네이트. 계속 실험하고, 읽고, 다른 예시를 살펴봐. 금세 나보다 이 개발 관련 일을 훨씬 잘하게 될 거야 :smiley: :raised_hands:

격려해 주셔서 감사합니다!