저도 같은 현상을 확인했는데, 외부 링크만 더 보기 섹션에 표시되지 않는 것 같습니다.
3개의 좋아요
이 컴포넌트에서 내부 링크를 사용하는데, 예를 들어 사용자 초대장을 여는 링크가 있습니다: /my/invited/pending/
사이드바에서 링크를 열면 다음과 같은 메시지가 표시됩니다. “Oops! That page doesn’t exist or is private.”
URL 바에서 직접 접근하면 링크는 정상적으로 작동합니다.
완전한 URL(https://domain.com/my/invited/pending/)을 입력하면 URL이 다음과 같이 열립니다:
https://domain.com/https://domain.com/my/invited/pending/
2개의 좋아요
네. 알려진 문제입니다.
2개의 좋아요
안녕하세요,
Chat,/chat/browse/open으로 작동해야 합니다:slightly_smiling_face:
2개의 좋아요
네, 알아요. 제가 댓글을 좀 너무 빨리 보낸 것 같네요. 아니, 확실히 너무 빨랐어요. 왜냐하면 전체 URL 대신 경로를 사용해야 한다고 말해야 했거든요.
채팅용 추가 링크… 음, 새 사이드바가 플레이그라운드를 완전히 바꿔놓아서 더 이상 필요하지 않아요.
2개의 좋아요
Discourse의 사이드바 코드를 살펴보고 @manuel 님의 아이콘 추가를 확인했습니다.
현재 햄버거 메뉴 장식(decoration) 메서드가 prefixValue 상수(아이콘 이름을 포함) 등을 고려하지 않기 때문에, 커스텀 링크의 아이콘을 커스터마이즈하는 것이 불가능한 것으로 보입니다.
또한 api.decorateWidget를 사용한 햄버거 메뉴 장식은 향후 비추천(deprecated)될 예정인 것 같습니다. 참고:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L534
그리고 외부 링크가 더 이상 작동하지 않는 문제는 다음 코드에서 비롯된 것일 수 있습니다:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L524
따라서 이를 가능하게 하려면 코어 코드에 일부 변경이 필요할 것입니다.
저는 Discourse의 작동 방식에 대해 거의 아는 것이 없으므로 제 추측이 크게 틀렸을 수 있습니다.
제 분석이 맞나요?
3개의 좋아요
GitHub 저장소에서 이 테마 구성 요소를 설치했습니다. Discourse를 3.0.0.beta15 버전으로 실행 중이며, 링크를 추가한 것으로 보이지만 햄버거 메뉴에 제 링크가 표시되지 않습니다… 혹시 아이디어가 있으신가요?
1개의 좋아요
다음 항목과 관련이 있을 수 있습니다:
아직도 외부 링크가 작동하지 않습니다.
그리고 내부 링크는 전체 경로가 아닌 상대 경로로 시작해야 합니다.
3개의 좋아요
유용한 컴포넌트를 제공해 주셔서 감사합니다. 몇 가지 중요한 내부 링크를 추가해야 하는데, 햄버거 메뉴가 사이드바에 통합되면서 더 보기 메뉴 아래에 있는 링크들이 잘 보이지 않는 것 같습니다. 사용자는 보통 원하는 것을 찾기 어렵기 때문에, 이 링크들을 최상위 레벨에, 이상적으로는 내 게시글 바로 뒤에 배치하고 싶습니다. 이를 위해 사용할 수 있는 CSS 해킹 방법이 있을까요?
2개의 좋아요
CSS로 달성할 수 있는 범위를 벗어난 것 같습니다. Discourse 팀은 이를 로드맵에 포함하고 있지만, 가까운 시일 내에 구현될 것 같지는 않습니다(제 생각에는):
6개의 좋아요
저는 이것을 사용합니다:
<script>
const customHeader = document.createElement("div")
customHeader.className = "sidebar-section-wrapper sidebar-section-community"
customHeader.innerHTML = `
<div class="sidebar-section-header-wrapper sidebar-row">
<button id="ember11" class="sidebar-section-header sidebar-section-header-collapsable btn-flat btn no-text" type="button">
<span class="sidebar-section-header-text"> Rechtliches </span>
</button>
</div>
<div class="sidebar-section-content" id="customNavigation"/>
`
$(document).ready(function () {
// 링크 생성
const links = [
{ title: "Impressum", src: "/impressum" },
{ title: "Datenschutz", src: "/privacy" },
]
// 모바일
let hamburger = document.getElementById("toggle-hamburger-menu")
if (hamburger) {
hamburger.addEventListener("click", addCustomLinks)
} else {
addCustomLinks()
}
let bool = false;
function addCustomLinks() {
setTimeout(function () {
// 네비게이션이 로드될 때까지 대기하도록 강제
const sidebar = document.getElementsByClassName("sidebar-sections")[0]
if (sidebar) {
sidebar.append(customHeader)
if (bool) return;
// customNav ID 가져오기
const customNavigation = document.getElementById("customNavigation")
if (customNavigation) {
links.filter(function (link) {
let linkDiv = document.createElement("div")
linkDiv.className = "sidebar-section-link-wrapper"
linkDiv.innerHTML = `<a href="${link.src}" class="sidebar-section-link sidebar-section-link-everything sidebar-row ember-view">
<span class="sidebar-section-link-prefix icon"></span>
<span class="sidebar-section-link-content-text"> ${link.title} </span>
</a>
`
customNavigation.append(linkDiv)
let linkIcon = document.getElementById("link_" + link.title)
})
}
}
bool = true
}, 0)
}
})
</script>
https://forum.courservio.de/ 에서 결과를 볼 수 있습니다.
이 코드의 원본은 https://meta.discourse.org/t/add-custom-links-to-sidebar/246848 에서 가져온 것입니다. 도움이 될 수 있습니다.
6개의 좋아요
@hosch 와, 정말 멋지네요! 제가 찾던 바로 그거였어요! 정말 감사합니다.
1개의 좋아요
@hosch 혹시 더 위에 위치시킬 수 있을까요? 커뮤니티 섹션 뒤에, 혹은 가능하면 그 앞에 나타나도록 하고 싶습니다.
수정: 이것의 변형으로 가능한 것 같습니다:
Rearrange Existing Hamburger Menu Items - #3 by awesomerobot
.sidebar-sections {
display: flex; /* 재배열을 위해 flex 레이아웃 설정 */
flex-direction: column;
.sidebar-section-community {
order: -1;
}
}
가장 높은 위치로 이동하는 것에 대해 궁금합니다.
1개의 좋아요
이 메서드에는 사이드바 표시를 전환할 때(예: 브라우저 창이 좁을 때) 사용자 정의 div가 사라지는 특이한 문제가 있습니다. 이는 특히 데스크톱 버전의 Discourse를 사용하는 태블릿에서 문제가 되는데, 사이드바를 표시하려면 햄버거 메뉴를 클릭해야 하기 때문입니다. 가능한 우회 방법이 있을까요? 감사합니다!
수정: 여기에서 해결되었습니다:
1개의 좋아요
@hosch님과 @Olivier_Lambert님, 이걸 만들어 주셔서 감사합니다.
초보자인 제가 이걸 어디에 삽입해야 하는지 설명해 주실 수 있을까요? 
1개의 좋아요
사이드바 / 햄버거 메뉴 섹션의 요소를 순서대로 재배열하는 방법은 무엇인가요?
예를 들어, “Categories” 섹션에서 카테고리 목록 위에 "All categories"를 배치하고, "All tags"도 마찬가지입니다.
감사합니다!
1개의 좋아요
CSS를 위한 컴포넌트 사용법을 이제 아시죠? 그것을 head 섹션에 추가하세요.
쉽게 할 수는 없습니다. 어쨌든, 현재는 완전히 완성되고 다듬어진 상태가 아닙니다.
2개의 좋아요
이렇게 해봤는데, src 근처에서 세미콜론을 사용하면서 오류가 발생했습니다.
다시 시도해 보겠습니다. 감사합니다
1개의 좋아요
여전히 이 문제가 발생하고 있으며, 이후 시도했던 해결책들이 문제를 해결하지 못했습니다.
설정: Invite friends,/my/invited/pending/,f
본론에서 벗어난 이야기:
이전에는 이 축소된 사이드바 스타일링을 본 적이 있는데, 어디에서도 찾을 수 없습니다. 이것은 테마 컴포넌트인가요?
1개의 좋아요
다음 CSS를 사용할 수 있습니다:
#sidebar-section-content-categories,
#sidebar-section-content-tags {
display: flex;
flex-direction: column;
li:last-child {
order: -1;
}
}
8개의 좋아요