| 요약 | 기본 인증 버튼을 드롭다운 또는 모달에서 링크를 열 수 있는 통합 버튼으로 대체합니다 | |
| 리포지토리 | https://github.com/Lillinator/combined-auth-button | |
| 설치 가이드 | 테마 또는 테마 컴포넌트 설치 방법 |
이 테마 컴포넌트를 설치하세요
개요
이 테마 컴포넌트는 가입 및 로그인 버튼을 드롭다운 옵션이 포함된 하나의 버튼으로 통합하여, 더 깔끔한 헤더 공간과 향상된 사용자 경험(특히 모바일 사용자)을 제공합니다.
구체적으로, 기본 Discourse 모바일 포럼 뷰에서는 가입 버튼이 숨겨지고 기존 로그인 버튼만 표시되며, 이는 Discourse 포럼의 신규 방문자(익명 뷰)에게 혼란스럽고 직관적이지 않을 수 있습니다. 또한, 기본 모바일 뷰의 로그인 버튼은 로그인 페이지로 연결되며, 해당 페이지에는 다시 가입 페이지로 연결되는 링크가 있습니다. 이로 인해 모바일 기기 사용자의 경우 불필요한 마찰이 발생합니다.
컴포넌트 없는 기본 모바일 뷰:
이 간단한 Discourse 테마 컴포넌트는 기존 로그인 버튼을 더 명확한 라벨이 붙은 통합 버튼으로 대체합니다. 기본값은 가입 / 로그인입니다. 클릭하거나 탭하면 각각의 가입 또는 로그인 페이지로 연결되는 드롭다운 메뉴 또는 모바일 모달이 열립니다.
컴포넌트 기본 설정이 적용된 모바일 버튼 및 모달:
컴포넌트 기본 설정이 적용된 데스크톱 버튼 및 드롭다운 메뉴:
설정 및 테마 번역
데스크톱에서 활성화, 모바일 뷰에서 더 많은 헤더 공간을 확보하기 위해 통합 버튼 아이콘을 숨기기, 그리고 모든 버튼 아이콘 및 라벨을 변경할 수 있는 관리자 설정이 있습니다.
| 설정 | 설명 |
|---|---|
enable_on_desktop |
모든 뷰포트 크기에서 통합 인증 버튼 활성화 |
hide_mobile_combined_button_icon |
헤더 공간 확보를 위해 모바일 뷰에서 통합 인증 버튼 아이콘 숨김 |
combined_button_icon |
통합 인증 드롭다운 버튼용 SVG 아이콘 |
login_button_icon |
로그인 버튼용 SVG 아이콘 |
signup_button_icon |
가입 버튼용 SVG 아이콘 |
button_labels.auth |
테마 번역용 통합 버튼 텍스트 문자열 |
button_labels.log_in |
테마 번역용 로그인 버튼 텍스트 문자열 |
button_labels.sign_up |
테마 번역용 가입 버튼 텍스트 문자열 |
추가 스크린샷
참고 사항
- 이 컴포넌트는 모바일에서 왼쪽 햄버거 메뉴와 호환되지만, 사이트 로고를 중앙 정렬하면 헤더에 혼잡함이 발생할 수 있습니다.
제 다른 Discourse 관련 콘텐츠 보기











