일반적으로 이것은 사실입니다. CSS는 어떤 지식이 있는 사람이 어떤 이유로든 페이지 소스를 볼 수 있기 때문에 아무것도 숨기는 안전한 방법이 아닙니다… 하지만 크롤러에게는 no-js 뷰를 제공하므로, 그 경우 테마에 의해 추가된 콘텐츠는 일반적으로 인덱싱되지 않습니다.
3개의 좋아요
미리보기 링크를 업데이트했으니 이제 작동할 거예요!
3개의 좋아요
이 컴포넌트를 사용해 실제 URL 대신 javascript:script('function');를 호출할 수 있을까요?
(거의 작동하는 것 같지만, CSP 위반이 발생하고 있습니다.)
추가로 편집합니다:
작동하게 만들었습니다. 혹시 다른 분들도 궁금해하실 수 있으니, 컴포넌트 UI에서 URL 대신 #을 사용하고, 이벤트 리스너를 통해 자바스크립트 함수를 호출하는 방식으로 구현했습니다.
더 나은 방법이 있을 수 있으니, 알고 계신 분은 공유해 주시면 좋겠습니다!
2개의 좋아요
안녕하세요, 헤더 링크의 글꼴 스타일과 크기를 조정하고 싶습니다. 이렇게 할 수 있는 올바른 CSS를 알려주실 수 있을까요? 감사합니다!
2개의 좋아요
Hey @brentoshiro, 스타일을 적용할 대상에 따라 속성이 달라지지만, 링크를 선택하는 방법은 다음과 같습니다:
모든 헤더 링크에 스타일 적용:
.custom-header-links .headerLink a {
font-size: 1rem; // 원하는 글꼴 크기로 교체
color: #96b67b; // var(--tertiary)와 같은 변수도 사용 가능
font-style: italic; // 옵션: normal, italic, oblique
}
특정 링크에 스타일 적용
링크 제목(대시(-)로 구분되고 소문자로 입력)를 사용하여 링크에 접근할 수 있습니다. "Privacy"의 경우 다음과 같습니다:
.custom-header-links .headerLink.privacy-custom-header-links a:hover {
color: red;
}
또는 title 속성을 사용하여 링크 제목을 입력할 수도 있습니다:
.custom-header-links .headerLink a[title='Our Privacy Policy'] {
color: purple;
}
호버 시 스타일을 추가하려면 a 태그 뒤에 단순히 :hover를 추가합니다:
.custom-header-links .headerLink a:hover {
color: var(--primary-low);
}
2개의 좋아요
안녕하세요, 링크를 좌우 정렬 대신 가운데 정렬로 스타일링할 수 있을까요?
1개의 좋아요
정말 멋진 기능입니다. 그룹별로 헤더 링크 목록을 다르게 설정할 수 있도록 하려면 얼마나 추가적인 작업이 필요할지 궁금합니다. 저희 사이트에는 직원과 학생이 함께 사용하는데, 각 그룹별로 헤더의 주요 링크를 다르게 제공하면 좋겠습니다.
3개의 좋아요
각 그룹을 서로 다른 Theme에 배치하고, 각 Theme이 이 Theme Component의 자체 복사본을 사용하도록 하면 이를 구현할 수 있습니다.
두 그룹 중 하나가 상당히 정적(또는 적어도 더 작을)인 경우, 이 방법은 잘 작동합니다. 스태프 그룹이 이를 위해 이상적입니다. 또는 동적 그룹이 하나뿐인 경우에도 마찬가지입니다.
그런 다음 학생 링크를 사이트 기본 Theme으로 설정하고, 스태프 구성원에게는 수동으로 스태프 링크를 지정합니다(UI를 통해 또는 Rails Console을 통해).
6개의 좋아요
드디어 로그인 화면에 그 링크들이 표시되는 것을 알아차렸고, 바로 이 질문을 하려고 여기 온 참이었습니다.
제 경우, 헤더 이름은 그대로 유지하면서 링크 중 하나가 매달 변경됩니다. 링크를 숨기기 위해 매번 코드를 수정하지 않고 헤더를 숨기는 코드를 사용할 수 있을까요? 예를 들어, 제 경우 Joe 님의 예시를 따라가면 다음과 같습니다.
Customer Support
2022-customer-support/26903이 제 링크이고, 그다음에는 customer-support-july 등이 됩니다.
보시는 바와 같이 customer-support-june을 숨기는 것은 잘 작동하지만, "FAQ"를 단순히 숨기는 경우와 달리 매달 업데이트해야 합니다. (또한 토픽의 /26903을 CSS 코드에 추가할 수 없어서 이 특정 링크를 숨길 수 없습니다. 페이지를 게시하여 우회할 수는 있겠지만요.) 다른 방법이 없다면 큰 문제는 아닙니다. 노력의 양과는 무관한 사소한 문제이므로, 제가 그저 잊어버릴 것이라는 보장만 있는 셈이니까요.
2개의 좋아요
안녕하세요, 텍스트에 번역을 적용할 수 있는지 궁금해서 여쭤봅니다. 컴포넌트에 번역 키가 포함되어 있다면, 이를 포함시켜서 처리할 수 있을까요? 
2개의 좋아요
****비로그인 사용자에게 기본적으로 표시되지 않는 이유가 있나요?
대체로, 테마에 구성 요소를 적용하면 어떤 이유로든 표시되지 않습니다. 대신 구성 요소를 테마에 추가해야 합니다.
1개의 좋아요
UTF-8 아이콘 사용
링크 앵커로 UTF-8 아이콘을 사용할 수 있습니다.
이 경우, 다른 헤더 드롭다운 아이콘과 일치하도록 다음 CSS를 시도해 볼 수 있습니다:
.custom-header-links .headerLink {
margin-top: -1px;
}
.custom-header-links .headerLink a {
padding: 3px 10px;
color: var(--primary-low-mid);
font-size: var(--font-up-5);
font-weight: bold;
}
.custom-header-links .headerLink:hover {
background-color: var(--primary-low);
}
.custom-header-links .headerLink:hover a {
color: var(--primary-medium);
}
다음과 같은 효과를 냅니다:
1개의 좋아요
방금 이 컴포넌트를 설치하고 몇 가지 링크를 추가했는데, 링크가 표시되지 않았습니다.
언어를 입력하면 사이트에서 링크가 표시되지 않는다는 사실을 발견했습니다. 처음에는 필요하지 않았음에도 불구하고 완성도를 위해 'blank’를 입력해 두었습니다. 'blank’를 'en’으로 변경해도 여전히 표시되지 않았습니다. 제 경우 값 자체를 완전히 제거하니 문제가 해결되었습니다. 왜 그런지는 전혀 모르겠지만, 다른 분들도 비슷한 문제를 겪고 계실까 봐 공유해 봅니다.
2개의 좋아요
나도 얼마 전 같은 문제에 부딪혔습니다:
기본 예시를 더 직관적으로 변경할 수 있는지 확인해 보겠습니다.
2개의 좋아요
여기서 기본 설정에서 로케일을 제거했습니다: UX: remove locale from default settings - Pull Request #38 - discourse/discourse-custom-header-links - GitHub
이제 사이트가 어떤 로케일로 설정되어 있든 기본값이 표시되어야 합니다. @packman님과 @JammyDodger님께 감사드립니다!
2개의 좋아요
마지막 업그레이드 후 내 링크가 사라졌습니다 (PC, Ubuntu, Brave)
확인해 주시겠습니까?
1개의 좋아요
최근에 제가 설정한 커스텀 링크가 기본 링크 3개로 대체되었습니다. 미리보기에서는 정상적으로 작동합니다.
호스팅 사이트인데, 테마에 변경 사항이 생겨서 커스텀 헤더 링크가 인식되지 않는 것 같다는 생각이 들었습니다. 확인해 보고 다시 알려드리겠습니다.
꽥! 플러그인을 여러 테마에서 미리 확인했는데 모두 정상적으로 작동했어요. 로그아웃을 해도 작동했고, 브라우저를 바꿔도 작동했어요. 슈뢰딩거의 고양이 냄새가 확실히 나네요.
1개의 좋아요