디스커스 사이트의 기본 /about 페이지는 관리자 및 모더레이터에게만 정보를 표시하며, 각 사용자의 사용자 이름, 이름, 직책만 표시합니다. 사용자 프로필의 ‘About me’ 섹션 내용도 함께 표시하도록 about 페이지를 사용자 지정하려면 어떻게 해야 하나요?
여기에 설명된 일반적인 개념은 이해하고 있습니다:
- 컴포넌트 정의
- 템플릿 정의
- 기존 아웃렛을 활용하기 위한 커넥터 파일 생성
하지만 제 사용 사례에 더 적합한 아웃렛이 없는 것 같습니다. 또한 /about 템플릿을 오버라이드하거나 플러그인 API의 modifyClass 기능을 사용하는 것은 권장되지 않는 것으로 보입니다. 그래서 어떻게 해야 할지 모르겠습니다. 여기에서 모범 사례에 대한 지침을 정말로 원합니다. 감사합니다!
디스커스 AI는 템플릿을 오버라이드하라고 생각합니다. 그렇게 하는 것이 맞을까요?
Discourse AI의 답변
Discourse /about 페이지에 "About Me" 추가 AI
aas:
디스커스 사이트의 기본 /about 페이지는 관리자 및 모더레이터에게만 정보를 표시하며, 각 사용자의 사용자 이름, 이름, 직책만 표시합니다. 사용자 프로필의 ‘About me’ 섹션 내용도 함께 표시하도록 about 페이지를 사용자 지정하려면 어떻게 해야 하나요?
여기에 설명된 일반적인 개념은 이해하고 있습니다:
Add custom content that only appears on your homepage
- 컴포넌트 정의
- 템플릿 정의
- 기존 아웃렛을 활용하기 위한 커넥터 파일 생성
하지만 제 사용 사례에 더 적합한 아웃렛이 없는 것 같습니다. 또한 /about 템플릿을 오버라이드하거나 플러그인 API의 modifyClass 기능을 사용하는 것은 권장되지 않는 것으로 보입니다. 그래서 어떻게 해야 할지 모르겠습니다. 여기에서 모범 사례에 대한 지침을 정말로 원합니다. 감사합니다!
HelperBot:
네, “About me” 섹션과 같은 사용자 프로필 정보를 포함하도록 /about 페이지를 사용자 지정하는 모범 사례에 대해 도움을 드릴 수 있습니다.
코어 템플릿을 직접 오버라이드하거나 modifyClass를 사용하는 것이 복잡하고 업데이트 시 깨질 수 있다는 점은 정확합니다. 가능할 경우 테마 컴포넌트와 아웃렛을 사용하는 것이 일반적으로 권장됩니다. /about 페이지 자체에 특정 아웃렛이 없을 수 있다고 하셨으니, 이 페이지를 사용자 지정하거나 사용자 필드를 추가하는 방법에 대한 토론을 검색해 보겠습니다.
먼저, /about 페이지 사용자 지정, 특히 프로필 필드 추가에 대한 토론을 검색하겠습니다.
Meta Discourse 검색
'customize about page profile field category:dev' 검색 결과 14개 결과 발견
Meta Discourse 검색
'customize about page profile field category:theme-component' 검색 결과 4개 결과 발견
자, 이 문제를 분석해 보겠습니다. 기본 /about 페이지의 스태프 목록에 사용자 프로필의 “About me” 내용을 추가하려는 것입니다.
표준 테마 컴포넌트 접근 방식은 플러그인 아웃렛을 사용하는 것을 포함하며, /about 페이지의 스태프 목록 테이블 내부에 이 데이터를 쉽게 주입할 수 있는 특정 세밀한 아웃렛이 없는 것 같습니다.
검색 결과와 일반적인 관행에 따르면, 미래 업데이트가 깨지지 않도록 아웃렛을 사용하는 것이 선호되지만, /about 페이지와 같은 특정 코어 템플릿을 사용자 지정하는 유일한 실행 가능한 방법은 테마 컴포넌트 내에서 직접 오버라이드하는 것일 수 있습니다.
테마 컴포넌트를 사용하여 다음과 같은 가능성이 높은 최선의 접근 방식입니다:
- 테마 컴포넌트 생성: 아직 생성하지 않았다면, 새로운 테마 컴포넌트를 만드세요.
- 템플릿 오버라이드:
about.hbs템플릿을 오버라이드해야 합니다.- 테마 컴포넌트에서
common/templates/about.hbs파일을 만드세요. - 원본
about.hbs파일의 내용을 새 파일에 복사하세요. 원본은 GitHub에서 여기에서 찾을 수 있습니다. about.hbs의 복본을 수정하세요.model.admins와model.moderators를 반복하는 부분을 찾으세요. 루프 내부(아마도{{#each}}블록 내부)에서 사용자 객체에 접근할 수 있습니다. “About me” 내용은 일반적으로user.profile.bio_raw또는 유사한 속성에 있습니다. 이 속성을 각 사용자에게 표시하려는 템플릿 위치에 추가하세요.
- 컴포넌트 활성화: 테마 컴포넌트를 테마에 추가하고 활성화하세요.
이 접근 방식을 사용하는 이유?
- 직접 제어:
/about페이지의 HTML 구조를 직접 제어할 수 있습니다. - 실행 가능성: 해당 페이지의 사용자 목록 내부에 전용 아웃렛이 없으므로, 이 특정 위치에 사용자별 내용을 주입하는 가장 직접적인 방법입니다.
단점 (당신이 지적했듯이):
- 유지보수: 디스커스가 미래에 코어
about.hbs템플릿을 크게 업데이트하면, 오버라이드된 버전에는 그 업데이트가 자동으로 적용되지 않습니다. 나중에 수동으로 변경 사항을 비교하고 병합해야 할 수 있습니다. 이는 특정 아웃렛 없이 코어 템플릿을 사용자 지정하는 데 따른 트레이드오프입니다.
검색에서 /about 페이지에 대한 정확한 예시는 찾지 못했지만, 프로필 정보를 추가하기 위해 템플릿을 수정하는 것은 사용자 카드 및 프로필에 대한 사용자 지정에서 볼 수 있듯이 일반적인 패턴입니다:
- Normalized Profile Links 는 컴포넌트 내 템플릿 수정을 통해 사용자 카드/프로필에 사용자 정의 필드를 추가합니다.
- Quick Profile Links Menu는 사용자 프로필 페이지에 요소를 추가합니다.
이 예시들은 특정 아웃렛이 사용할 수 없을 때 테마 컴포넌트가 종종 템플릿 사용자 지정 관련을 포함함을 보여줍니다. about.hbs 오버라이드는 당신의 특정 사용 사례에 대해 이 패턴을 따릅니다.
aas:
discourse/discourse 저장소에 about.hbs 템플릿이 없는 것 같습니다. 그러나 about.gjs 템플릿은 app/assets/javascripts/discourse/app/templates/about.gjs에 위치하는 것으로 보입니다.
HelperBot:
정말 맞습니다! 수정해 주셔서 감사합니다. 디스커스는 /about 페이지를 포함한 많은 컴포넌트에 대해 .gjs (GlimmerJS) 템플릿으로 전환했습니다.
구식 .hbs 형식을 참조한 것에 대해 사과드립니다.
코어 코드에서 템플릿의 올바른 경로는 실제로 app/assets/javascripts/discourse/app/templates/about.gjs입니다.
테마 컴포넌트를 사용하여 이를 오버라이드하는 과정은 개념적으로 동일하지만, 파일 경로와 구문이 업데이트됩니다:
- 테마 컴포넌트 생성/사용: 이전과 동일하게.
- 템플릿 오버라이드:
- 테마 컴포넌트에서 해당 경로에 파일을 만드세요:
assets/javascripts/discourse/app/templates/about.gjs. - 원본
about.gjs파일의 전체 내용을 (제공하신 링크)를 테마 컴포넌트의about.gjs파일에 복사하세요. - 복본을 수정하세요. 관리자 및 모더레이터를 반복하는 부분을 찾으세요. 아마도
{{#each this.admins as |admin|}}와{{#each this.moderators as |moderator|}}를 사용할 것입니다. 이 루프 내부에서 사용자 객체(예:admin또는moderator)에 접근할 수 있습니다. “About me” 필드를 추가해야 합니다. 이는admin.profile.bio_raw또는moderator.profile.bio_raw와 같은 속성으로 접근할 수 있어야 합니다. 이를 GlimmerJS 템플릿 구조에 통합해야 합니다. 예를 들어, 사용자의 표시 블록 내에 새로운<div>또는<p>태그를 추가할 수 있습니다:
(참고: 자기소개 렌더링된 HTML 버전을 원하면{{#each this.admins as |admin|}} <div class="user"> {{!-- 아바타, 사용자 이름, 이름과 같은 기존 사용자 정보 --}} <UserAvatar @username={{admin.username}} @size="large" /> <div class="user-details"> <span class="username">{{admin.username}}</span> {{#if admin.name}}<span class="name">{{admin.name}}</span>{{/if}} {{#if admin.title}}<span class="title">{{admin.title}}</span>{{/if}} {{!-- About Me 섹션 추가 --}} {{#if admin.profile.bio_raw}} <div class="about-me"> {{{admin.profile.bio_cooked}}} {{!-- 렌더링된 HTML을 위해 bio_cooked 사용 --}} {{!-- 원본 텍스트가 필요한 경우 bio_raw 사용: <p>{{admin.profile.bio_raw}}</p> --}} </div> {{/if}} </div> </div> {{/each}} {{!-- 모더레이터 루프에 대해 유사한 수정 반복 --}}bio_cooked를, 일반 텍스트를 원하면bio_raw를 사용하세요. 레이아웃에 맞게 HTML 구조를 조정하세요.)
- 테마 컴포넌트에서 해당 경로에 파일을 만드세요:
- 컴포넌트 활성화: 테마 컴포넌트가 테마에 추가되고 활성 상태인지 확인하세요.
단점은 동일합니다: 이러한 방식으로 코어 템플릿을 오버라이드하면, 미래의 디스커스 업데이트에서 원본 about.gjs 파일이 크게 변경될 경우 테마 컴포넌트 버전을 수동으로 업데이트해야 할 수 있습니다. 그러나 더 구체적인 아웃렛이 없으므로, 이 수준의 사용자 지정을 달성하는 표준적인 방법입니다.