모바일 브라우저용 모바일 백버튼 내비게이션에 대한 주제들이 몇 가지 있는 것 같고, 해결책을 찾지 못했지만 아마도 제가 놓친 것일 수도 있겠네요 
저는 코더가 아니고, 위험할 정도로 Discourse에 능숙하지도 않지만 
, 제 강아지와 함께 ChatGPT를 이용해 이 이미지에서 보이는 작동하는 파란색 백버튼을 만들어 보았습니다.
특정 페이지에서 이를 숨기고 싶지만, 아직 요소를 숨기는 방법을 찾지 못했습니다. 누군가 방법을 알면 지시사항을 조정하고 추가하겠습니다.
Discourse에 플로팅 백버튼 추가하기 (모바일 사용자용)
이 가이드는 Discourse 포럼에 모바일 기기를 위한 플로팅 “뒤로” 버튼을 추가하는 방법을 안내합니다. 버튼이 모바일 사용자에게만 나타나도록 하며, 내장된 백버튼이 없는 앱이나 브라우저의 내비게이션을 개선합니다.
1단계: 새 테마 컴포넌트 생성
- 관리자로 로그인:
- Discourse 포럼에 접속하여 관리자 계정으로 로그인합니다.
- 테마 사용자 지정 접근:
Admin > Customize > Themes(관리자 > 사용자 지정 > 테마)로 이동합니다.
- 테마 컴포넌트 생성:
- Components(컴포넌트)를 클릭합니다.
- Install > Create New(설치 > 새로 만들기)를 클릭합니다.
- 컴포넌트 이름을 "Mobile Back Button"으로 지정하고 Create(생성)를 클릭합니다.
2단계: 백버튼 코드 추가
- 테마 컴포넌트 편집:
- 방금 생성한 테마 컴포넌트를 클릭합니다.
- CSS/HTML 섹션으로 이동합니다.
- 백버튼용 JavaScript 추가:
- Mobile(모바일) 탭으로 전환합니다.
</head>섹션을 클릭합니다.- 다음 코드를 붙여넣습니다:
html
코드 복사
<script type="text/discourse-plugin" version="0.8">
function addMobileBackButton() {
const isMobileView = api.container.lookup('site:main').mobileView;
if (isMobileView) {
const existingButton = document.querySelector('.floating-back-button');
if (!existingButton) {
const backButton = document.createElement('button');
backButton.className = 'floating-back-button';
backButton.innerHTML = '←'; // 왼쪽 화살표 유니코드
backButton.onclick = (event) => {
event.preventDefault();
window.history.back();
};
document.body.appendChild(backButton);
}
}
}
// 초기 페이지 로드 시 버튼 추가
document.addEventListener('DOMContentLoaded', addMobileBackButton);
// 이후 페이지 전환 시 재확인
api.onPageChange(addMobileBackButton);
</script>
3단계: 스타일링을 위한 CSS 추가
- 백버튼 스타일 추가:
- Mobile(모바일) 탭에서 CSS 섹션을 클릭합니다.
- 다음 CSS를 붙여넣습니다:
css
코드 복사
.floating-back-button {
position: fixed;
bottom: 20px;
left: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #0088cc; /* 색상 사용자 지정 */
color: #fff;
border: none;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
cursor: pointer;
}
4단계: 테마 컴포넌트 적용
- 테마로 돌아가기:
Admin > Customize > Themes(관리자 > 사용자 지정 > 테마)로 다시 이동합니다.
- 활성 테마 편집:
- 활성 테마를 클릭합니다.
- Theme Components(테마 컴포넌트)에서 드롭다운 메뉴를 통해 “Mobile Back Button” 컴포넌트를 추가합니다.
- Add(추가)를 클릭한 다음 Save(저장)를 클릭합니다.
5단계: 변경 사항 테스트
- 모바일에서 포럼 열기:
- 모바일 브라우저를 사용하거나 개발자 도구를 사용하여 모바일 뷰를 시뮬레이션합니다.
- 백버튼 확인:
- 버튼이 화면 왼쪽 하단 모서리에 표시되어야 합니다.
- 버튼을 클릭하면 브라우저 히스토리에서 이전 페이지로 이동해야 합니다.
참고 사항:
- 모바일 전용: 코드와 CSS가 Mobile(모바일) 탭에 있으므로 버튼은 모바일 기기에서만 표시됩니다.
- 사용자 지정:
- 포럼 디자인에 맞게 CSS에서 버튼의 위치, 크기 또는 색상을 조정할 수 있습니다.
- 기능:
- 백버튼은
window.history.back()을 사용합니다. 이전 페이지가 없으면 어디로도 이동하지 않습니다.
- 백버튼은
