이 두 버튼을 제거하는 쉬운 방법이 있을까요? 이 질문을 하는 이유는 이 사이트에서 Discourse가 신규 사용자에게 다소 부담스럽게 느껴질 수 있다는 의견들을 읽어봤기 때문입니다. 카테고리 탭이 바로 옆에 있는 상황에서 카테고리 버튼이 다소 중복된다고 느껴지고, 경험이 있는 사용자가 태그로 검색하고 싶다면 사이드 메뉴를 사용할 수 있을 것 같거든요. 이 기능 자체는 좋지만, 제 생각에는 화면이 조금 어지러워 보입니다.
CSS 태그를 찾아서 숨기는 방법도 있다는 걸 알지만, 좀 더 깔끔한 방법이 있는지 궁금합니다. 나중에 플랫폼에 익숙해지면 사용자가 직접 이 기능을 켤 수 있도록 하는 것도 좋은 기능일 것 같습니다.
Discourse에는 UI에서 “카테고리” 또는 “태그” 버튼을 전역으로 제거하거나 전환할 수 있는 내장된 비-CSS 설정이 없습니다.
커뮤니티를 위해 아이디어를 참고하겠습니다. 감사합니다!
몰랐습니다…. 감사합니다
저는 Don이 만든 간단한 컴포넌트를 사용하여 익명 사용자(로그인하지 않은 사용자 또는 방문자)의 경우 기본적으로 사이드바를 완전히 숨기도록 선택했습니다. 여기서 찾아보세요 (Don에게 감사드립니다)
모든 휴대폰 사용자는 메뉴나 설정을 보려면 햄버거 버튼을 찾아봐야 한다는 것을 알고 있다고 생각했으며, 사이드바가 없으면 UI가 훨씬 덜 혼란스럽고 무섭게 보인다고 느꼈습니다 (적어도 처음에는요). 결국 사람들이 인터페이스에 익숙해지면 (또는 회원이 되면) 사이드바를 발견하게 될 것입니다.
그러므로 아무튼….
두 버튼을 없애는 데 제가 알아낸 특별한 비법은 다음과 같습니다:
.category-breadcrumb {
display: none
}
이것이 올바른 방법이 아니라면 수정해 주십시오
개인적으로는 기능 손실 없이 UI를 조금 더 깔끔하게 만들어준다고 생각합니다
Andy
수정하여 추가합니다:
모바일에서는 기본적으로 두 버튼이 사라지는 것을 확인했습니다. 따라서 개발자들은 이 버튼들이 표시되지 않아도 세상이 끝나는 것은 아니라고 생각한 것 같습니다
모바일에서는 카테고리 페이지 상단에 브레드크럼 드롭다운 선택기가 표시됩니다.
또한 FKB Social과 같은 일부 테마에서는 모바일 탐색(/latest 등) 페이지에서도 표시됩니다.
질문자님은 "카테고리 탭이 바로 거기 있으니"라고 말씀하셨는데, 이는 네비게이션 필 버튼(nav pill button)을 의미하신 것으로 보입니다. 해당 버튼을 클릭해야 카테고리 페이지로 이동한 후 원하는 카테고리를 찾아야 하므로, 카테고리 드롭다운에서 바로 원하는 곳으로 이동하는 것이 훨씬 직관적입니다. 특히 하위 카테고리를 찾는 경우 더욱 그렇습니다. 또한 현재 질문자님의 사이트에서 태그 탐색은 어떻게 수행하나요?
그리고 이건 원래 경로들을 대체하기 위해 내가 만든 이 좀 엉망진창인 스크립트야
)
<script>
document.addEventListener('DOMContentLoaded', function() {
const updateLinks = () => {
document.querySelectorAll('a[href*="/l/latest"]').forEach(link => {
link.href = 'https://segredin.com/';
});
document.querySelectorAll('a[href*="/l/hot"]').forEach(link => {
link.href = 'https://segredin.com/hot';
});
document.querySelectorAll('a[href*="/latest"]').forEach(link => {
link.href = 'https://segredin.com/';
});
};
const ocultarElementos = () => {
// 필요하면 요소를 숨기는 코드를 여기에 추가하세요
};
const applyStylesToPosts = () => {
// 게시글 스타일링 로직을 여기에 추가하세요
// 예시: document.querySelectorAll('.post').forEach(post => { ... });
};
const replaceTextNodes = (node) => {
node.childNodes.forEach(child => {
if (child.nodeType === Node.TEXT_NODE) {
child.textContent = child.textContent
.replace(/-E-/gi, ' & ')
.replace(/-/g, ' ');
} else {
replaceTextNodes(child);
}
});
};
const processTags = () => {
document.querySelectorAll('.discourse-tag.box').forEach(tag => {
replaceTextNodes(tag);
});
document.querySelectorAll('#sidebar-section-content-tags .sidebar-section-link-content-text').forEach(tag => {
replaceTextNodes(tag);
});
};
const TITLES = {
"home": "Segredin - Desabafo Anônimo e Contos",
"hot": "Segredin - Tópicos Populares"
};
const HOMEPAGE_URLS = [
"https://segredin.com/",
"https://segredin.com"
];
const HOT_PAGE_URLS = [
"https://segredin.com/hot",
"https://segredin.com/hot/"
];
const getCurrentPageType = () => {
const currentUrl = window.location.href;
// /hot 페이지인지 확인
if (HOT_PAGE_URLS.some(url =>
currentUrl === url ||
currentUrl.startsWith(url.replace(/\/$/, '') + '?') ||
currentUrl === url.replace(/\/$/, '')
)) {
return "hot";
}
// 홈페이지인지 확인
if (HOMEPAGE_URLS.some(url =>
currentUrl === url ||
currentUrl.startsWith(url.replace(/\/$/, '') + '?') ||
currentUrl === url.replace(/\/$/, '')
)) {
return "home";
}
return null;
};
const getDesiredTitle = () => {
const pageType = getCurrentPageType();
return pageType ? TITLES[pageType] : null;
};
const enforceTitle = () => {
const desiredTitle = getDesiredTitle();
if (!desiredTitle) return;
if (document.title !== desiredTitle) {
document.title = desiredTitle;
}
};
const startTitleObserver = () => {
const titleObserver = new MutationObserver(enforceTitle);
const titleElement = document.querySelector('title');
if (titleElement) {
titleObserver.observe(titleElement, {
childList: true,
subtree: true,
characterData: true
});
}
return titleObserver;
};
const monitorUrlChanges = (titleObserver) => {
let lastUrl = window.location.href;
setInterval(() => {
if (window.location.href !== lastUrl) {
lastUrl = window.location.href;
const pageType = getCurrentPageType();
if (pageType) {
enforceTitle();
titleObserver.disconnect();
startTitleObserver();
} else {
titleObserver.disconnect();
}
}
}, 300);
};
const mainObserver = new MutationObserver(() => {
applyStylesToPosts();
updateLinks();
ocultarElementos();
processTags();
enforceTitle();
});
// 초기 실행
applyStylesToPosts();
updateLinks();
ocultarElementos();
processTags();
const titleObserver = startTitleObserver();
monitorUrlChanges(titleObserver);
mainObserver.observe(document.body, {
childList: true,
subtree: true
});
document.addEventListener('page:changed', () => {
processTags();
enforceTitle();
});
});
</script>
나중에 이 코드를 더 확장할 건데, 지금은 일단 잘 돌아가고 있어
이것이 네비게이션 필 버튼이라면 맞습니다
미안합니다, 이것을 뭐라고 부르는지 몰랐어요
동의합니다
하지만…. 새로운 사용자는 자신이 어디로 가고 싶은지 알까요? 하위 카테고리를 찾고 있을까요?
사이드바 메뉴인가요?
처음 사용하는 사용자는 특정 태그를 찾아야 한다는 것을 알까요?
아마도 제 접근 방식이 잘못되었을 수 있습니다. 저는 제 인스턴스를 처음 사용하는 사용자의 관점에서 보려고 노력하고 있지만, 제가 제 것을 시작하기 전에 몇 년 동안 Discourse 포럼을 사용했기 때문에 저에게는 어려운 일입니다.
아마도 제 특정 상황의 또 다른 독특한 점은 Discourse 일반의 전형적인 것이 아닐 수 있습니다. 저는 라이브 이벤트(스포츠 이벤트 중계)를 진행합니다. 이러한 이벤트에서 사람들이 자주 다가와서 웹에서 저를 찾는 방법에 대해 더 알고 싶어합니다. 중계 중에도 사람들이 포럼을 찾아보도록 장려합니다. 포럼으로 연결되는 QR 코드가 포함된 간판과 스티커를 가지고 있습니다.
이들 중 일부는 젊고 스마트폰에 능숙한 사용자입니다. 다른 일부는 전화를 소유하고 있지만, 전화가 울릴 때 전화를 받는 것조차 barely 할 수 있는 고령자입니다. 저는 두 그룹 모두 포럼을 멍하니 보며 다음에 무엇을 해야 할지 모르고 서 있는 모습을 직접 지켜본 적이 있습니다. 이것은 특히 Discourse의 문제는 아닙니다. 제 YouTube 채널에서도 그들이 같은 행동을 하는 것을 본 적이 있으니까요
샘미, 고마워. 네 코드 연구 중이야.
(어떻게 동작하는지 파악하면) 원한다면 테마의 head 섹션에 이런 걸 삽입할 수 있을 것 같아 
결국 위에서 설명한 대로 CSS를 사용하여 카테고리 및 태그 버튼을 제거하는 방법을 선택하지 않았습니다. 사용자가 카테고리를 클릭한 후 카테고리 목록 보기로 돌아갈 수 있는 방법이 없었기 때문입니다. 최근 이 문제를 해결할 수 있는 테마 구성 요소를 발견했습니다.
