7월 17, 2021

Ghost 로그인, 구독하기 버튼 변경

Ghost 로그인, 구독하기 버튼 변경

무언가를 내 손으로 만든다는 건, 재밌는 일이네요.

오늘은 어드민 페이지 Staff 메뉴에서 기본 스텝으로 등록되어 있던 Ghost 스텝을 삭제하였습니다. 그랬더니 Ghost 이름으로 작성되어 있던 모든 포스트가 사라지네요! 모든 글은 그 글을 쓴 작가에게 귀속된다는 개념이 마음에 듭니다.

테마의 한글 폰트가 마음에 안들어 구글 폰트(https://fonts.google.com/)에서 한글 폰트를 받아 넣어주었구요, 사이트 오른쪽 상단에 있던 트위터, 페이스북, rss 아이콘을 삭제하였습니다. 그리고 이 아이콘들이 있던 자리에 로그인, 구독하기(=회원가입) 버튼을 달아주려고 합니다.

제 개인 블로그에 누가 회원가입을 하고, 누가 로그인을 하겠습니까만은, 고스트의 기능을 보려고 하는 것이니 추가를 해보겠습니다. 그리고 또 모르는 일이죠. 먼 훗날, 제 블로그에 인사이트 있는 글들이 쌓이게 된다면(과연?) 그때는 제 글을 모두 공개하지 않고 구독자 분들께만 공개를 할런지도요.

고스트 디렉토리/content/themes/내테마 폴더 안에 있는 hbs 파일을 수정하여 상단에 로그인, 구독하기 버튼(?)을 달아주었습니다.

[그림1] 오른쪽 상단의 트위터, 페이스북, rss 아이콘
[그림2] 아이콘을 빼고 로그인, 구독하기 버튼을 넣었습니다.

물론 지금은 추가한 버튼을 클릭해도 아무 일이 일어나지 않습니다. 하지만 고스트 문서에 적혀있는 Portal 링크라는 것을 사용해보겠습니다.

Ghost Theme Development: Building custom membership flows
Find out how to build a custom theme for a Ghost Members site, with signup and signin, paid subscriptions, member accounts and more 👉
고스트 멤버십에 대한 문서

고스트 문서에 적혀있는대로 아래와 같이 a 태그를 사용해주었습니다.

[그림3] 로그인, 구독하기에 a링크를 붙여주었습니다.

로그인, 구독하기 글자를 클릭하니 로그인, 회원가입 팝업이 잘 뜹니다.

오오! 놀라운 마음으로 로그인 팝업에 이메일을 입력해봅니다. 제가 관리자 계정에 사용하고 있는 것과는 다른 이메일을 넣어보았습니다.

아직 회원가입 전이므로 회원가입 팝업으로 넘어가겠지? 라고 예상했습니다만.. 엥? 저에게 메일을 보냈답니다.

정말 메일이 왔네요;;

[그림6] 받은 메일 - 링크를 클릭하여 회원가입을 완료하랍니다.

모든 안내가 영어로 되어 있는 것이 거슬리지만, 한글 작업은 나중에 하기로 하고, 우선 로그인 기능부터 살펴보기로 합니다. 메일로 온 [Activate my account] 버튼을 클릭하니 가입완료 메시지가 떴습니다. 응? 그리고 로그인 되었겠지만... 화면에는 여전히 로그인, 구독하기 버튼이 표시되어 로그인이 된 것인지 알 수가 없습니다. 이것부터 손을 봐야겠습니다.

Ghost Theme Development: Building custom membership flows
Find out how to build a custom theme for a Ghost Members site, with signup and signin, paid subscriptions, member accounts and more 👉
고스트 멤버십 중 멤버 오브젝트에 관한 부분

고스트 문서의 @member object 부분을 참고하여 아래와 같이 코드를 작성해주었습니다.

[그림7] 만약 멤버이면..

아까 넣었던 a 태그는 제가 사용하고 있는 Editorial 테마에서 강제로 원치않는 디자인을 적용하길래 빼버렸습니다. 대신 data-portal 이라는 속성을 사용하여 로그인, 구독하기 팝업을 띄웠습니다.

<사용 예. 로그인 기능 넣기>

<a href="#/portal/signin">로그인</a>

또는

<button data-portal="signin">로그인</button>

위와 같이 a 링크 또는 data-portal 속성을 사용하여 원하시는 portal 기능을 추가하세요. 고스트 문서(https://ghost.org/docs/themes/members/) 또는 어드민 페이지 Settings(메뉴 하단 톱니바퀴 아이콘) > Membership > Portal Setting [Customize Portal] 버튼 클릭 > 상단 탭 중 Links 를 선택하시면 사용 가능한 속성 값을 볼 수 있습니다.

[그림8] 어드민 페이지 Settings > Membership

원래는 로그인 후 화면에 로그아웃 버튼도 표시하고 싶었는데, 로그아웃 기능은 아무리 찾아봐도 추가 방법을 못찾겠네요. ㅠㅠ 그래도 [내계정] 을 누르면 나오는 팝업 안에 로그아웃 기능이 있기에, 로그아웃 버튼 추가는 TODO 리스트에 넣어 놓고 우선 패스합니다.

[그림11] 언제 이루어질지 알 수 없는 TODO 리스트에 추가

이렇게 제 블로그에 로그인, 회원가입 기능이 추가되었습니다.

한 일이 없는데 시간이 훅 갔습니다. 이래서야 어느 세월에 블로그가 완성 될런지 모르겠네요.

아까 회원가입 없이 로그인 팝업에 이메일을 입력했을 때 회원가입이 되어버려서 의아했는데, 여기에 그 답이 있었네요.

링크: https://ghost.org/docs/themes/members/#extending-forms

data-members-form="signin": 유효한 이메일이 입력되면 존재하는 멤버에게 로그인 이메일을 발송. 만약 해당 멤버가 없다면, 회원가입 이메일이 대신 발송됨.
data-members-form="signup": 새 멤버에게 회원가입 이메일을 발송. 이메일이 이미 존재하면, 로그인 이메일이 대신 발송됨.
data-members-form="subscribe": 구독하기 이메일 발송. 이메일이 이미 존재하면, 로그인 이메일이 대신 발송됨.

음, 회원가입(signup)과 구독하기(subscribe)의 차이가 뭔지 잘 모르겠네요. 테스트해 본 결과 동일한 팝업이 떴는데 말이죠. 찾아보니 구독하기에는 후원받기 가격표를 붙일 수 있는 것 같은데, 이 부분은 추후 다시 찾아봐야겠습니다.