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

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

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

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

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

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

물론 지금은 추가한 버튼을 클릭해도 아무 일이 일어나지 않습니다. 하지만 고스트 문서에 적혀있는 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 👉

Ghost - The Professional Publishing Platform

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

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

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

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

정말 메일이 왔네요;;

모든 안내가 영어로 되어 있는 것이 거슬리지만, 한글 작업은 나중에 하기로 하고, 우선 로그인 기능부터 살펴보기로 합니다. 메일로 온 [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 👉

Ghost - The Professional Publishing Platform

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

아까 넣었던 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 를 선택하시면 사용 가능한 속성 값을 볼 수 있습니다.

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

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

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

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

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

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