decorateWidget를 사용해 헤더에 텍스트 링크 추가하기

개발
1

헤더에 아이콘과 텍스트 링크를 추가하려고 Theme Component를 사용 중입니다.

아래 코드를 사용하여 아이콘을 추가하는 데는 성공했습니다:

    const { iconNode } = require("discourse-common/lib/icon-library");
    api.decorateWidget('header-icons:before', helper => {
        return helper.h('li.header-dropdown-toggle', [
            helper.h('a.icon', {
                href:'/docs',
                title: 'Document'
            }, iconNode("book")),
        ]);
    });

image
image296×108 1.2 KB

하지만 아이콘 옆에 Documents URL로 연결되는 텍스트를 추가하는 데 어려움을 겪고 있습니다.

아래와 같이 시도해 보았지만, 텍스트에 링크가 걸리지 않습니다.

        api.decorateWidget('header-icons:before', helper => {
        return helper.h('li.header-dropdown-toggle', [
            helper.h('h3', {
                href:'/docs',
                title: 'Document'
            }, 'Docs'),
        ]);

image
image352×108 2.22 KB

무엇이 부족한가요?

또한 아이콘을 헤더의 왼쪽(로고 옆)에 배치할 수 있는 방법이 있나요?

미리 감사합니다.

2

예시에서 텍스트를 여기에 삽입해야 합니다:

helper.h('a.icon', {
    href:'/docs',
    title: 'Document'
}, ["test", iconNode("book")]),

링크의 CSS를 조정해야 합니다.

예를 들어:

padding-inline-end: 2em;
justify-content: space-between;
color: currentcolor;

chrome_Tk18DUhJQQ

오른쪽에 배치하는 것을 의미하신다면, 다음을 시도해 볼 수 있습니다:

api.decorateWidget('home-logo:after', helper => {
    return helper.h('div.d-header-icons', [
        helper.h('a.icon.btn-flat.doc', {
            href:'/docs',
            title: 'Document'
        }, [iconNode("book"), "Doc"]),
    ]);
});

.d-header-icons .icon.doc {
    width: auto;
    gap: 0.5em;
    margin-inline: 1em;
    
    & .d-icon {
        width: 1em;
    }
}

image
image437×105 8.82 KB

간단하게 테스트해 보았습니다. 몇 가지 이상한 동작이 있을 수 있지만, 일반적인 아이디어는 파악하실 수 있을 것입니다!

3
4

맞아, 왜 그 컴포넌트들을 링크하지 않았는지 모르겠어. 존재하는 건 알고 있었거든. :man_facepalming:

5

그 컴포넌트들을 좀 살펴봤어요 - 둘 다 조금씩 사용하고 싶어서요 ㅋㅋ

6

잘 작동했어요 - 감사합니다.

이제 저녁 내내 폰트 색상을 바꾸려고 CSS랑 씨름해야겠네요 ㅋㅋ