Discourse는 이제 이 사용 사례를 지원하기 위한 #공식 테마 컴포넌트를 제공합니다:
원본 콘텐츠
대부분의 사이트에서 메인 Discourse 로고가 외부 사이트로 링크되는 것이 좋은 아이디어는 아니라고 생각합니다. 하지만 메인 Discourse 로고를 클릭했을 때 사용자를 외부 웹사이트로 연결하는 것이 의미가 있는 예외적인 경우가 있습니다. 그렇게 하려면 아래 방법을 따르세요.
새 테마 컴포넌트 생성
참고: 이 가이드의 해당 섹션은 곧 전용 토픽으로 분리될 예정입니다.
관리자 / 사용자 지정 / 테마 페이지의 사이드바에서 “Components(컴포넌트)” 링크를 클릭하세요. 그런 다음 사이드바 하단의 “Install(설치)” 버튼을 클릭합니다:
열리는 모달 창에서 “Create New(새로 만들기)” 링크를 클릭하세요:
테마 컴포넌트에 이름을 붙이고 “Component(컴포넌트)” 유형이 선택되어 있는지 확인하세요. 그런 다음 “Create(만들기)” 버튼을 클릭합니다:
이후 테마 컴포넌트 메인 페이지로 이동하게 됩니다.
테마 컴포넌트에 코드 추가
메인 로고의 기본 URL을 재정의하는 코드는 테마 컴포넌트의 HEAD 섹션에 추가해야 합니다. 컴포넌트 편집기에 액세스하려면 “Edit CSS/HTML(CSS/HTML 편집)” 버튼을 클릭하세요:
열리는 편집기에서 “Head” 링크를 클릭하세요:
여러 가지 조건에 따라 홈 로고가 가리키는 URL을 수정하기 위해 아래 코드 스니펫 중 하나를 편집기의 HEAD 섹션에 추가하세요. 코드에서 https://example.com은 외부 사이트의 홈 페이지 전체 URL로 대체해야 합니다:
- 정적 URL로 링크를 변경하려면:
<script type="text/discourse-plugin" version="1.3.0">
api.registerValueTransformer("home-logo-href", () => "https://example.com")
</script>
- 현재 사용자를 기반으로 동적 URL을 반환하려면:
<script type="text/discourse-plugin" version="1.3.0">
api.registerValueTransformer("home-logo-href", () => {
const currentUser = api.getCurrentUser();
return `https://example.com/${currentUser.username}`;
})
</script>
- 테마 컴포넌트 설정을 기반으로 URL을 반환하려면:
<script type="text/discourse-plugin" version="1.3.0">
api.registerValueTransformer("home-logo-href", () => {
return settings.example_logo_url_setting;
})
</script>
변경 사항을 저장하려면 “Save(저장)” 버튼을 클릭하세요. 그런 다음 테마 컴포넌트 메인 페이지로 돌아가 “Add all themes(모든 테마에 추가)” 링크를 클릭하여 새 컴포넌트를 사이트의 모든 테마에 추가하세요:
공유해 주셔서 정말 감사합니다!
