통합 인증 버튼

: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개의 좋아요

방금 이 기능에 모바일 모달을 열어 가입 또는 로그인 페이지로 연결하도록 개선하는 업데이트를 적용했습니다. OP(원문)도 함께 업데이트했어요. 아이디어를 준 @Moin님께 감사드립니다! :smiley:

스크린샷

default component modal buttons:

changeable button labels:

4개의 좋아요

정말 감사합니다 @Lilly. 곧 테스트해 보겠습니다.

1개의 좋아요

ok, 이 컴포넌트에 또 일부 변경을 했습니다 - 이제 데스크톱에서 활성화하고 모든 라벨과 아이콘을 변경할 수 있습니다.

컴포넌트 저장소 이름도 변경되었습니다. 이미 설치되어 있다면 계속 작동하지만, 향후 저장소 소스 관련 잠재적 문제를 피하기 위해 언젠가 소스를 변경하거나(또는 다시 설치하거나) 해야 합니다.

5개의 좋아요

오늘 이 컴포넌트에 대한 작은 수정을 적용했습니다 - 모바일에서 왼쪽 햄버거 메뉴 컴포넌트를 사용할 때 스크롤된 토픽에서 버튼이 헤더 제목 안에 렌더링되는 문제였습니다. 이제 두 컴포넌트가 완전히 호환되도록 수정되었습니다.

3개의 좋아요