로고 옆 헤더에 텍스트 추가

디스코urses를 처음 사용해 보는데요, 간단하게 할 수 있는 것이라면 죄송합니다. 하지만 헤더의 로고 옆에 표시할 텍스트를 어디서 설정하는지 찾을 수가 없어요.

헤더의 빨간색 박스 안에 ‘커뮤니티 포럼’ 또는 비슷한 문구를 넣고 싶은데:

이걸 어떻게 하면 될까요?

미리 도움 주셔서 감사합니다!

Daniel님 :wave:

사이트 헤더 로고 옆에 텍스트를 추가하려면 다음과 같은 코드를 사용할 수 있습니다.

<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("home-logo:after", helper => {
  const titleVisible = helper.attrs.minimized;
  const headerText = "Text you want to add"; // <--- 이 텍스트를 변경하세요

  if (!titleVisible) {
    return api.h("span.header-text", headerText);
  }
});
</script>

이 코드를 테마/컴포넌트의 헤더 섹션에 추가하면 됩니다. Discourse 테마 시스템에 대한 자세한 내용은 여기서 확인할 수 있습니다.

Discourse의 변경 사항으로 인해 이제 에러 배너가 표시되고 있습니다. 새로운 방식으로 동일한 결과를 얻기 위한 제안이 있으신가요? 감사합니다.

네, 해당 메서드는 더 이상 작동하지 않으며, home-logo:after 위젯 장식 대신 home-logo 플러그인 아웃렛에 대해 이 섹션에 명시된 커넥터를 사용해야 합니다:

시간이 나면 제가 직접 코드를 붙여넣을게요. 아니면 누군가 먼저 시간을 내서 해주시면 정말 감사하겠습니다… :slight_smile:

방금 테마용으로 이렇게 구현해 보았습니다. 사이트의 제목과 짧은 설명을 사용하고 있지만, 테마 설정 값이나 로컬라이즈된 텍스트를 삽입하는 것도 가능합니다.

components/header-logo-title.gjs에 glimmer 컴포넌트를 추가합니다.

import Component from "@glimmer/component";
import { service } from "@ember/service";

export default class HeaderLogoTitle extends Component {
  @service siteSettings;

  <template>
    {{#unless @outletArgs.minimized}}
      <div class="header-logo-title">
        <span
          class="header-logo-title__title"
        >{{this.siteSettings.title}}</span>
        {{#if this.siteSettings.short_site_description}}
          <span
            class="header-logo-title__description"
          >{{this.siteSettings.short_site_description}}</span>
        {{/if}}
      </div>
    {{/unless}}
  </template>
}

/api-initializers/my-theme.js에서 아웃렛에 연결합니다.

import { apiInitializer } from "discourse/lib/api";
import HeaderLogoTitle from "../components/header-logo-title";

export default apiInitializer("1.26.0", (api) => {
  api.renderAfterWrapperOutlet("home-logo", HeaderLogoTitle);
});

#unless 헬퍼는 로고의 최소화 상태를 확인하며, 전체 로고가 표시될 때만 텍스트를 추가합니다. 항상 표시되길 원한다면 해당 조건을 제거해야 합니다.

api.renderAfterWrapperOutlet("home-logo") (v.1.26.0 이상)를 사용할 수도 있습니다. 이 방법은 마법 상수인 __before/__after를 제공할 필요 없이 실제 아웃렛 이름을 사용할 수 있다는 장점이 있습니다.

@Arkshine 감사합니다. 훨씬 더 좋습니다. 이전 게시물을 업데이트했습니다.

지금 이 작업을 시도하고 있는데 문제가 생겼습니다 - "components/header-logo-title.gjs"의 글리머(glimmer) 컴포넌트에 어떻게 접근하나요?

제 커뮤니티는 여기 있습니다: https://community.worldradioleague.com/.

유료 플랜을 사용하고 있는데 - 아마도 Discourse 코어에 접근 권한이 없어서 이 부분을 볼 수 없는 건가요?

이 내용을 컴포넌트로 감싸 두었습니다. 이 컴포넌트를 사용해 볼 수 있습니다: Manuel Kostka / Discourse / Helpers / Header Logo Title · GitLab. 기본적으로 사이트 제목과 짧은 사이트 설명을 추가합니다. 또는 컴포넌트 설정에서 제목과 설명에 사용자 정의 텍스트를 추가할 수도 있습니다.