Custom Header Links (icons)

와, 정말 효과가 있었네요! 정말 감사합니다!
테마 컴포넌트에만 "building"을 시도해 봤고(동작하지 않음), 두 곳 모두에 "fas-building"을 시도해 봤는데(동작하지 않음), 두 필드에 모두 일반 버전을 시도해 볼 생각은 전혀 하지 못했어요.

그래도 컴포넌트 설명에서 fa(s)와 fab/far 사이의 이 차이를 더 명확하게 해 줄 것을 여전히 제안합니다.

2개의 좋아요

안녕하세요.
훌륭한 플러그인을 만들어 주셔서 감사합니다.

한 가지 도움을 요청드리고자 합니다.

제 Discourse에 로그인 필수(Login Required) 설정이 적용되어 있습니다.
이 설정이 적용된 사이트를 방문하면 당연히 계정 생성 또는 로그인을 요구받게 되며, 헤더에는 이 플러그인으로 만든 아이콘이 표시됩니다.


계정 또는 로그인 페이지(일본어)

이 정도라면 문제가 없겠지만, 이 아이콘을 클릭하면 로그인 없이 링크된 페이지가 열립니다.
(해당 링크는 제가 직접 만든 플러그인으로, 경로는 사이트 루트 바로 아래에 있는 /test_path와 같은 경로입니다. 이 경로를 직접 URL로 지정하는 등 다른 방법으로 접근하면 계정 생성 또는 로그인을 요구받습니다. 오직 이 플러그인의 헤더 아이콘을 통해 들어갈 때만 로그인 없이 페이지가 표시됩니다.)

가장 좋은 해결책은 애초에 아이콘을 표시하지 않는 것이지만, 최소한 아이콘을 클릭했을 때 로그인을 요구하는 페이지가 표시되도록 해야 합니다.

해결 방법을 알려주시면 정말 감사하겠습니다. 감사합니다.

1개의 좋아요

Johani님, 안녕하세요. 이 코드가 테마 변수의 새로운 작동 방식에 맞게 업데이트가 필요한 것 같습니다. 관리자 패널에서 다음 오류를 확인했습니다:

Error: Undefined variable: "$add-whitespace". on line 14 of common.scss >> @if $add_whitespace == "true" { ----^
3개의 좋아요

안녕하세요,

제한된 접근이 가능한 페이지로 링크를 걸려고 하는데, URL에 몇 가지 변수를 전달해야 합니다. 사용자 이름, 사용자 ID, 이메일 주소와 같은 시스템 변수를 사용할 수 있을까요?

1개의 좋아요

저도 같은 것을 찾고 있습니다. 헤더 아이콘을 클릭할 때 로그인한 사용자의 사용자 이름(유저네임)을 원격 서버로 전송하고 싶습니다. JavaScript를 통해 사용자 이름을 가져올 수 있다는 것은 이해하고 있지만, 헤더 아이콘을 통해 이를 수행하는 방법을 정확히 모르겠습니다:

<script type="text/discourse-plugin" version="0.8">
const username = api.getCurrentUser().username;
</script>

감사합니다!

1개의 좋아요

한 가지 알려드릴 게 있어요. 테마 설정 설명서에 버그가 있는 것 같네요.

상단에는 순서가 title, icon, URL, view, target라고 되어 있고,

하단에는 순서가 title, icon, view, URL, target라고 되어 있습니다.

상단 내용이 정답이며, URL이 view 앞에 와야 합니다.

스크린샷은 아래를 참고해 주세요:

3개의 좋아요

이 문제에 대해 PR을 올렸습니다:

5개의 좋아요

감사합니다! 언젠가는 방법을 배우고 PR을 올릴 용기를 낼 수 있을 것 같아요 :smiley:

3개의 좋아요

아이콘의 위치를 지정하는 방법이 있을까요? 커스텀 아이콘을 하나 사용하고 있는데, 헤더에 채팅 아이콘과 다른 테마 컴포넌트 아이콘이 함께 있어 검색 아이콘 옆에 커스텀 헤더 아이콘을 배치하고 싶습니다.

여러분 안녕하세요!

훌륭한 Theme Component에 감사드립니다! 다만 작은 문제가 생겼습니다. 일부 아이콘은 fa-rocket처럼 정상적으로 작동하지만, fa-rocketchat 같은 다른 아이콘은 필요한 아이콘 클래스를 모두 설치한 것으로 생각하는데도 표시되지 않습니다. 원인이 무엇일지 혹시 아시는 분 계신가요? 정말 감사하겠습니다 :slight_smile:

그리고: solid 아이콘 대신 일반 Font Awesome 아이콘을 사용하려면 어떻게 해야 하나요? far-iconname과 fa-regular을 포함해 봤는데 작동하지 않는 것 같습니다…

아마도 이것이 원인일 것입니다.

질문의 첫 번째 부분에 대해 말씀드리자면, 제가 틀렸을 수도 있지만 사이트 설정의 svg icon subset에 로켓 채팅 아이콘을 추가해 보시기 바랍니다.

1개의 좋아요

불행히도 이 방법으로 제 문제는 해결되지 않습니다.

헤더 링크는 다음과 같습니다:

Rocket.Chat,rocket,https://chat.domain.de,vdo,blank

테마 구성 요소 설정의 Svg Icons와 Discourse 기본 설정의 Svg icon subset에 Font Awesome 아이콘 설명에 자세히 나와 있는 대로 fa-rocketchat과 fa-brands를 추가했습니다. FA 버전 5.0.0부터 지원되므로 그 문제는 아닐 텐데…

혹시 아이디어가 있으신 분이나 도움을 주실 수 있는 분이 계신가요? :slight_smile:

다음 작업을 수행해야 합니다:

  1. svg icon subset에 fab-rocketchat을 추가합니다.
  2. Header links를 Rocket.Chat,fab-rocketchat,https://chat.domain.de,vdo,blank으로 변경합니다.

설명이 다소 혼란을 줄 수 있지만, 다시 살펴보면 부정확하지는 않습니다:

어려운 부분은 fab fa-rocketchat(Font Awesome 웹사이트)를 fab-rocketchat(Discourse에서)으로 변환해야 한다는 점입니다.

2개의 좋아요

웹사이트에 업로드한 SVG 아이콘을 추가하는 방법이 있나요? (Font Awesome 웹사이트에서 제공하는 아이콘을 사용하지 않는 경우)

어떻게 해결해야 할지 몰라 머리가 지끈지끈 아파옵니다!

“headset” 아이콘은 사용하는데 문제가 없습니다.

rocket | Font Awesome

하지만 “light headser” 아이콘을 사용하려고 하면 아예 사용할 수 없습니다.

rocket | Font Awesome

‘fab-’, ‘fas-’, 'far-'를 붙여서도 시도해 봤고, 붙이지 않고도 시도해 봤습니다. SVG 부분에 이름을 넣기도 했고, 이것저것 다 해 봤는데도 사용할 수가 없습니다.

[image]
구글 플레이 스토어 아이콘도 마찬가지입니다. 사용할 수 없고, 해결책이 없습니다.

rocket | Font Awesome

왜 이런 일이 발생하는 걸까요?

라이트 버전이 “Pro” 아이콘일 수도 있습니다:

"headset"의 라이트 스타일을 사용하려면, 해당 아이콘(또는 스타일)이 포함된 특정 버전의 Font Awesome을 포함한 Pro 레벨 플랜 구독 또는 영구 Pro 라이선스가 필요합니다.

1개의 좋아요

저도 그 방법을 알고 싶습니다. 웹 어딘가에 Letterboxd 아이콘을 포함시키고 싶은데, 이미 누군가가 만들어서 Font Awesome에 제안했지만 채택되지 않았습니다.

테마를 사용하여 사용자 지정 SVG 아이콘을 추가할 수 있습니다:

2개의 좋아요

모바일 모드에서 사이트 하단에 표시되는 아이콘(모든 사용자에게 동일하게 나타나는 아이콘)을 어떻게 배치할 수 있나요?

예를 들어, 타임라인 버튼은 모든 스마트폰 모델과 모바일 운영체제에서 동일한 위치에 표시됩니다.

지금 CSS를 사용하여 헤더 버튼 메뉴를 하단에 배치하면, 일부 휴대폰에서는 정해진 위치에 나타나지만, 다른 휴대폰에서는 약간 위로, 또 다른 휴대폰에서는 옆으로 치우쳐 보입니다. 왜 이런 현상이 발생하나요?

한 가지 더 궁금한 점이 있습니다. 아래 예시처럼 아이콘을 클릭하면 다른 아이콘과 함께 다른 옵션이 열리도록 아이콘을 배치할 수 있는 방법이 있나요?