통합 인증 버튼

:information_source: 요약 기본 인증 버튼을 드롭다운 또는 모달에서 링크를 열 수 있는 통합 버튼으로 대체합니다
:hammer_and_wrench: 리포지토리 https://github.com/Lillinator/combined-auth-button
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법

이 테마 컴포넌트를 설치하세요

:woman_technologist:t2: 개요

이 테마 컴포넌트는 가입 및 로그인 버튼을 드롭다운 옵션이 포함된 하나의 버튼으로 통합하여, 더 깔끔한 헤더 공간과 향상된 사용자 경험(특히 모바일 사용자)을 제공합니다.

구체적으로, 기본 Discourse 모바일 포럼 뷰에서는 가입 버튼이 숨겨지고 기존 로그인 버튼만 표시되며, 이는 Discourse 포럼의 신규 방문자(익명 뷰)에게 혼란스럽고 직관적이지 않을 수 있습니다. 또한, 기본 모바일 뷰의 로그인 버튼은 로그인 페이지로 연결되며, 해당 페이지에는 다시 가입 페이지로 연결되는 링크가 있습니다. 이로 인해 모바일 기기 사용자의 경우 불필요한 마찰이 발생합니다.

컴포넌트 없는 기본 모바일 뷰:

이 간단한 Discourse 테마 컴포넌트는 기존 로그인 버튼을 더 명확한 라벨이 붙은 통합 버튼으로 대체합니다. 기본값은 가입 / 로그인입니다. 클릭하거나 탭하면 각각의 가입 또는 로그인 페이지로 연결되는 드롭다운 메뉴 또는 모바일 모달이 열립니다.

컴포넌트 기본 설정이 적용된 모바일 버튼 및 모달:

컴포넌트 기본 설정이 적용된 데스크톱 버튼 및 드롭다운 메뉴:


:gear: 설정 및 테마 번역

데스크톱에서 활성화, 모바일 뷰에서 더 많은 헤더 공간을 확보하기 위해 통합 버튼 아이콘을 숨기기, 그리고 모든 버튼 아이콘 및 라벨을 변경할 수 있는 관리자 설정이 있습니다.

설정 설명
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 테마 번역용 가입 버튼 텍스트 문자열

:camera_flash: 추가 스크린샷

설정 페이지

hide_mobile_ combined_button_icon 활성화된 경우

변경된 버튼 라벨 및 아이콘

모바일:

데스크톱:

포럼에 맞게 재미있게 커스터마이징하기


:bulb: 참고 사항


제 다른 Discourse 관련 콘텐츠 보기
12개의 좋아요

i just pushed an update to this that improves the experience by opening a mobile modal that links to either the sign up or login pages. updated the OP as well. thanks to @Moin for the idea! :smiley:

screenshots

default component modal buttons:

changeable button labels:

4개의 좋아요

Thank you very much @Lilly, I will test it soon.

1개의 좋아요

ok i have made some changes to this component again - one can now enable it on desktop and change all the labels and icons.

the component repo has also been renamed. it will continued to work if you have it installed, but you should change the source (or re-install it) at some point to avoid potential future repo source issues.

5개의 좋아요

i pushed a bit of a fix for this component today - the button was rendering inside the header title in scrolled topics when using the left side hamburger component. the components are now fully compatible with each other.

3개의 좋아요