7월 17, 2021

Ghost Portal 팝업 한글화

Ghost Portal 팝업 한글화

어드민에서 얼추 글쓰기 테스트를 끝내고 호스팅 서버에 올려볼까 했는데, 구독&로그인 팝업과 링크 메일이 모두 영어로 되어 있는 것이 영 신경쓰입니다.

열심히 Ghost 파일을 뒤져보았는데 아무리 찾아보아도 도대체 어디에 저 팝업이 구현되어 있는지 찾을 수가 없던 중, 깃헙에서 이런 문서와 코드를 발견하였습니다.

TryGhost/Portal
Drop-in script to add membership features in a Ghost theme - TryGhost/Portal
GitHubTryGhost
Portal readme

음, 고스트 버전4 이상에서는 자동으로 아래 링크로부터 Portal 스크립트를 주입받아 사용하고 있다네요.

<script defer src="https://unpkg.com/@tryghost/portal@latest/umd/portal.min.js" data-ghost="https://mymemberssite.com"></script>

찾아보니 제 로컬 고스트 디렉토리의 core config 파일에도 해당 스크립트를 불러와 사용하도록 세팅되어 있습니다.

[그림1] 로컬 고스트 core config - portal 설정

Ghost API 만 사용하더라도 위의 스크립트를 가져다가 사용하면 손쉽게 멤버십 부분을 처리할 수 있다는 것이 장점이라고 하지만, 그 전에 언어가 안맞는 상황이니.. Portal 코드를 받아서 수정해야겠습니다.

위의 깃헙에서 코드를 다운로드 받고, 팝업에 있는 영문 부분을 한글로 수정하였습니다. 팝업 관련 코드는 src/components/pages 안에 위치하고 있습니다.

[그림2] src/components/pages 안의 파일들

저는 해당 디렉토리에 있는 아래 파일들을 수정해주었습니다.

AccountHomePage.js
AccountPlanPage.js
AccountProfilePage.js
LinkPage.js
LoadingPage.js
MagicLinkPage.js
SigninPage.js
SignupPage.js

제 사이트에서 다른 언어로 서비스 할 일은 없겠지만, 만약을 위해 translate.js 파일을 하나 만들고 현재 설정된 언어로 팝업에 표시되도록 작성하였습니다.

[그림3, 그림4] translate.js 파일 내용

그리고 PopupModal.js 파일에서 아래 img 태그를 삭제하여, 왼쪽 하단에 표시되던 'powered by Ghost' 문구도 빼버렸습니다.

<img src="https://static.ghost.org/v4.0.0/images/powered.png" border="0" width="142" height="30" alt="host" />

한글로 수정 후에 Portal 디렉토리에서 yarn build 명령어를 실행하면, umd 디렉토리 아래에 portal.min.js 파일이 생성됩니다. (저는 오류가 발생하여 Portal 폴더 내 npm 설정 파일을 삭제하고, yarn add --dev install-peers 명령어를 실행하고서야 됐습니다;;)

이 portal.min.js 파일을 복사하여 고스트 디렉토리/content/themes/내 테마/assets/built/ 안에 넣어주세요. 제 테마 파일 안에는 built 디렉토리가 없어서 built 디렉토리를 만들고 넣어주었습니다.

마지막으로 고스트에서 우리가 새로 만든 portal.min.js 파일을 사용하도록, 고스트 디렉토리에 있는 설정 파일 - config.development.json 에 Portal 설정을 추가하였습니다.

[그림5] config.development.json 파일에 portal 설정 추가

그리고 고스트 디렉토리에서 ghost restart 명령어를 실행시켜 재기동 한 후 사이트 팝업을 확인해보면, 짜잔! 마음에 들게 바뀌었습니다.

[그림6, 그림7] 왼쪽 영문 로그인 팝업이 -> 오른쪽 한글 로그인 팝업으로 변경되었습니다.
[그림8] 링크 안내 팝업도 한글로 변경

팝업을 한글로 바꾼 후 로그인을 해보았는데요, 어이쿠야! ㅠㅠ 다 됐다고 좋아했더니 이메일도 영어네요. 울고 싶습니다.

[그림9] 로그인 영문 안내 이메일

또 열심히 구글 검색을 했습니다. 구글이 없었으면 어떻게 살았을까 싶네요.

다행히도 저와 같은 고민을 올려 놓은 사람이 있었습니다. 프랑스 사람도 저와 같은 고민을 하고 있다는 것이 반갑고 기쁩니다. ㅋ

Changing language for subscription email
Hi, I know that Ghost support localization and it’s awesome! My blog is 95% in French now. The only thing missing is the email a user receives when he is subscribing to the blog? Where we find the file to edit and change to another language? In the core files? thanks
Ghost ForumOZRay911
나와 같은 이의 고민글

음, 코어 파일을 수정하랍니다. 고스트 버전을 업데이트 하면 다시 수정해야하는 문제가 있다고 하지만, 앞으로의 버전에서는 이 문제가 개선되길 바라며.. 우선 아래 파일에서 영어 안내문구를 한글로 수정하겠습니다.

current/core/server/services/members/emails/signin.js
current/core/server/services/members/emails/signup.js
current/core/server/services/members/emails/subscribe.js
current/core/server/services/members/emails/updateEmail.js

그리고 고스트를 재기동 해주었습니다.

이메일 메시지가 한글로 바뀌었습니다... 만 메일 제목은 여전히 영문이네요. ㅠㅠ

[그림10, 그림11] 왼쪽 영문 이메일이 -> 오른쪽 한글 이메일로 변경되었습니다.

이메일 제목은 current/core/server/services/members/api.js 파일에 작성된 것을 사용하나 봅니다.

current/core/server/services/members/api.js 파일의 getSubject 함수 내 영문 제목을 한글로 변경하였습니다. (혹시 몰라 getText 함수 내용도 한글로 변경하였습니다.)

[그림12] api.js 파일 내 getSubject 함수

다시 한번 고스트 재기동 후 로그인을 시도해보니 이제 제목까지 한글로 잘 들어옵니다.

[그림13] 아래는 변경 전 메일 -> 위는 한글 변경 후 메일

마음같아서는 이 기세를 몰아 호스트 서버에 올려보고 싶지만, 괜히 다이어트 한답시고 저녁을 안먹었더니 손이 후들거려 힘드네요. 내일은 AWS에서 도메인을 구매하고 Lightsail 에 서비스를 올려보겠습니다.