추가된 세부 정보에 감사드립니다! 실제로 꽤 취약한 CSS였습니다. 이전에 없던 클래스 이름을 여기 사용하게 되어 이제 더 구체적으로 지정할 수 있습니다.
여기서 컴포넌트를 조금 리팩터링했습니다:
main ← fix-refactor
merged 06:50PM - 11 May 23 UTC
Fixed a few lingering issues here (reported in https://meta.discourse.org/t/cust… om-top-navigation-links/87225)...
* active state highlighting stopped working at some point
* the pseudo selectors for hiding the default links were fragile and inconsistent
Also...
* Merged mobile/desktop behavior into /common
* Cleaned up setting descriptions
* Removed JQuery
* Moved from `head_tag` to the initializer
따라서 업데이트만 하면 됩니다.
hide default links가 최신 및 카테고리가 아닌 모든 기본 링크를 숨기도록 수정했습니다. 이렇게 하면 숨김 동작을 이해하기 조금 더 쉬울 것 같습니다.
이 컴포넌트를 통해 추가된 내비게이션 항목에는 이제 nav-item_custom_item-name 클래스가 적용됩니다. 여기서 item-name은 내비게이션 항목의 표시 이름입니다(공백은 하이픈으로 대체됨). 따라서 "my bookmarks"이라는 이름의 내비게이션 항목은 다음과 같은 CSS로 지정할 수 있습니다:
#navigation-bar {
li.nav-item_custom_my-bookmarks {
background: skyblue;
}
}
기본 항목에는 nav-item_name과 같은 클래스 이름이 있으므로, 기본 카테고리 링크를 숨기려면 다음과 같이 할 수 있습니다:
#navigation-bar {
li.nav-item_categories {
display: none;
}
}
이제 활성 클래스가 적용되어야 합니다.
3개의 좋아요
안녕하세요,
최신 업데이트에서 내비게이션 링크의 표시 텍스트가 소문자로 변경되고,额外的 대시(-)가 추가되는 문제가 발생했습니다.
현재 내비게이션 링크 필드에는 다음과 같은 값이 설정되어 있습니다:
⮉ Home;show all categories;/forums
내비게이션 링크는 다음과 같이 표시됩니다:
이전에는 다음과 같이 표시되었습니다: ⮉ Home
아래의 줄이 문제의 원인으로 보입니다:
export default {
name: "nav-links-component",
initialize() {
withPluginApi("0.8", (api) => {
const itemsSetting = settings.Nav_links;
const items = itemsSetting.split("|").map((item) => item.trim());
for (const item of items) {
const splitSec = item.split(";").map((section) => section.trim());
const filter = splitSec[0].replace(/\s+/g, "-").toLowerCase();
const title = splitSec[1];
const location = splitSec[2];
api.addNavigationBarItem({
name: `custom_${filter}`,
displayName: filter,
title,
href: location,
forceActive: (category, args, router) =>
router.currentURL.includes(location),
2개의 좋아요
알려줘서 고마워, 이 문제를 해결하는 작은 업데이트를 방금 적용했어!
3개의 좋아요
carbonrich
5월 13, 2023, 10:28오전
77
솔직히 여기는 꿈속의 영역이라 할 수 있죠—@awesomerobot님 , 수정해 주셔서 정말 감사합니다!—이 컴포넌트에 유용하게 추가할 수 있는 기능으로, 카테고리 및 태그 드롭다운 앞에 커스텀 내비를 표시할 수 있는 옵션이 있다면 좋겠는데, 가능할까요(많은 작업 없이)?!
1개의 좋아요
테마에 CSS를 추가하여 이 작업을 수행할 수 있습니다:
.desktop-view {
#navigation-bar {
order: -1;
margin-right: 0;
}
.category-breadcrumb {
margin-right: auto;
}
}
3개의 좋아요
thaidb
7월 24, 2023, 6:24오전
80
안녕하세요,
Canapin
7월 24, 2023, 7:21오전
81
플러그인에서는 이 기능을 사용할 수 없으므로, 이를 위해 사용자 지정 JavaScript를 추가해야 합니다.
1개의 좋아요
Liseré
10월 3, 2024, 10:19오전
82
안녕하세요,
모바일에서 링크를 표시할 수 있는 방법이 있을까요?
감사합니다!
안녕하세요, 모바일에서 드롭다운 대신 전체 링크를 말씀하시는 건가요?
Liseré
10월 3, 2024, 12:25오후
84
안녕하세요,
빠른 답변 주셔서 감사합니다!
설정 기능을 더 많이 테스트해 보았어야 했는데, 모바일과 데스크톱 모두에서 ‘기본 링크 숨기기’ 옵션을 활성화해 두었기 때문에 모바일에서는 해당 링크가 표시되지 않는 것 같습니다.
이 기본 링크들을 숨기면서 모바일에서는 제가 만든 링크만 표시하려면 어떻게 해야 할까요?
nathank
6월 13, 2025, 1:28오전
86
이 TC에 대해 버그 보고를 제출했습니다:
이 문제는 기능을 상당히 해칩니다. 만약 이 문제가 해결되지 않을 예정이라면, broken
4개의 좋아요
제안: 아이콘을 옵션으로 포함해 주세요. 이모지를 사용했는데 정말 세련된 느낌을 주지만, 모바일에서는 깨지고 당연히 일관성도 없습니다
Moin
7월 30, 2025, 11:24오전
88
상단 내비게이션의 링크에 아이콘을 추가할 수 있는 컴포넌트가 있습니다: Discourse Nav Item Icon / Emoji custom_를 추가해야 한다는 점입니다.
예를 들어,Preferences;edit your preferences;/my/preferences
그리고 아이콘/이모지 컴포넌트를 설정하여 렌치 아이콘을 추가했습니다: icon:custom_preferences:solid:wrench:currentColor
결과:
1개의 좋아요
안녕하세요, 이 부분을 업데이트해 주세요. 현재 상태에서는 기본 링크(최신, 모든 카테고리)의 URL이 깨집니다.
