고스트 CMS 다국어 블로그: 1. post, page 다국어 처리
Ghost는 특정 post들의 Collection을 만들 수 있다. 지원하고자 하는 언어별 태그를 생성하고 각 태그의 Collection을 만들어서 다국어 블로그 형태로 구현해보자.
- 지원 언어에 대한 internal tag를 생성한다
- routes.yaml에 Collection을 설정해준다
- hbs파일을 수정해준다
나는 영어를 주 언어로, 한국어를 두 번째 언어로 하는 다국어 블로그를 만들고자 한다.
Internal tag 생성
Ghost admin 화면에서 좌측의 Tags를 선택하고 New tag를 클릭해 internal tag를 추가하자. internal tag는 #으로 시작해야 한다.
영어포스팅을 위한 인터널 태그는 #en, 한국어포스팅을 위한 인터널 태그는 #ko로 설정했다. Name에 #en을 입력하면 Slug는 자동으로 hash-en로 설정되는데, 더 간결하게 만들기 위해 hash- 부분은 삭제했다.
Internal tags를 선택했을때 아래와 같은 화면이 되면 된다.
테스트용 포스트 발행
추후 테스트를 위해 internal태그로 포스팅을 발행해보자.
각 인터널 태그별로 두 개씩 포스팅을 발행했다.
- en news 1: News, #en
- en news 2: News, #en
- ko news 1: News, #ko
- ko news 2: News, #ko
모든 포스트의 첫 번째 태그는 'News'로 설정하고, 두 번째 태그는 언어 태그(#en 또는 #ko)로 지정했다.
예를들어 news, latest, #en 이 세가지 태그를 적용하고자 한다면 [news, #en, latest] 또는 [latest, #en, news] 순서로 설정해야 한다. 핵심은 두번째 태그가 언어태그여야 한다는 점이다.
이제 블로그 메인 페이지를 보면 설치시 기본으로 발행되어있는 1개의 포스트에 추가로 발행한 4개의 포스트를 합쳐 총 5개의 포스트가 발행되어 있는걸 볼 수 있다.
routes.yaml에서 Collection을 설정
- admin 대시보드에서 settings 아이콘을 클릭한 뒤 Labs에서 Download curnet routes를 선택해서 routes.yaml파일을 내려받자.
routes.yaml의 초기 상태는 아래와 같다.
routes:
collections:
/:
permalink: /{slug}/
template: index
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/
routes.yaml 원본
이걸 아래처럼 수정하고 업로드 해주자.
routes:
collections:
/:
filter: "tag:en"
permalink: /{slug}/
template: index-en
/ko/:
filter: "tag:ko"
permalink: /ko/{slug}/
template: index-ko
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/
routes.yaml (영어가 메인)
https://sanghun.xyz/ 주소로 접속하면 en태그를 가진 포스트만 보이고 https://sanghun.xyz/ko/ 로 접속하면 ko 태그를 가진 포스트만 보이도록 설정하는것이다. 주의할 점은 메인언어를 collections의 가장 상위에 배치해야 한다는 것이다.
각 콜렉션은 배타적이다. 즉 중복이 있을수 없다. 하나의 포스트에 #en, #ko 태그를 모두 붙였다면 상위에 위치한 콜렉션의 경로로 접속했을 때만 노출되고 다른 경로로 접속했을땐 노출되지 않는다.
한국어를 메인으로 설정하고 싶으면 아래처럼 설정하면 된다.
routes:
collections:
/:
filter: "tag:ko"
permalink: /{slug}/
template: index-ko
/en/:
filter: "tag:en"
permalink: /en/{slug}/
template: index-en
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/routes.yaml (한국어가 메인)
이 포스트에서는 영어가 메인인 설정을 따른다.
hbs파일 수정
Casper 테마 5.7버전을 기준으로 설명한다.
코드 수정은 아래 커밋을 참조하면 된다.
sanghunka- 두 개의 파일을 추가한다
- index-en.hbs
- index-ko.hbs
- 세 개의 파일을 수정한다
- default.hbs
- post.hbs
- page.hbs
index-en.hbs & index-ko.hbs
{{!< index}}
{{#contentFor "lang"}}en{{/contentFor}}index-en.hbs
{{!< index}}
{{#contentFor "lang"}}ko{{/contentFor}}index-ko.hbs
루트 경로에 위 파일 두개를 추가한다.
default.hbs
<html lang="{{@site.locale}}"{{#match @custom.color_scheme "Dark"}} class="dark-mode"{{else match @custom.color_scheme "Auto"}} class="auto-color"{{/match}}>이 부분을 아래처럼 수정한다.
<html lang="{{#if (block "lang")}}{{{block "lang"}}}{{else}}en{{/if}}"{{#match @custom.color_scheme "Dark"}} class="dark-mode"{{else match @custom.color_scheme "Auto"}} class="auto-color"{{/match}}>이를 통해 index-en.hbs템플릿을 쓰는 페이지는 html lang="en" , index-ko.hbs템플릿을 쓰는 페이지는 html lang="ko" 이렇게 설정된다.
그리고 특별한 lang정보가 없으면 기본값인 en이 설정된다.
post.hbs
{{#post}} 아래 부분에 4줄을 추가해준다.
{{#post}}
{{#has tag="#ko"}}
{{#contentFor "lang"}}ko{{/contentFor}}
{{else}}
{{#contentFor "lang"}}en{{/contentFor}}
{{/has}}page.hbs
{{#post}} 아래 부분에 4줄을 추가해준다.
{{#post}}
{{#has tag="#ko"}}
{{#contentFor "lang"}}ko{{/contentFor}}
{{else}}
{{#contentFor "lang"}}en{{/contentFor}}
{{/has}}주의할 점은, 2순위 언어태그를 기준으로 구분을 해야한다는 것이다. 이 글에서는 한국어를 2순위 언어로 설정하고, #ko태그가 있을경우 ko, 없을 경우 기본값인 en으로 설정되게 하였다.
결과
routes.yaml에서 설정한 /와 /ko/경로로 접속해 보면 언어 태그별로 구분되어 정상적으로 표시되는 것을 확인할 수 있다. 이는 여러개의 Ghost블로그를 사용하지 않고 단일 Ghost CMS로 만들어낸 결과이다.
개발자 도구에서 확인해보면 /, 영어 포스트, 영어 페이지에는 <html lang="en"> , /ko/, 한국어 포스트, 한국어 페이지에는 <html lang="ko"> 로 language declaration역시 적절히 설정되어 있는것을 볼 수 있다.
주의할 점
- 이제부터 모든 포스트는 #en 또는 #ko 중 하나의 태그를 반드시 포함해야 한다. 이 두 태그 . 중하나라도 없으면 해당 포스트는 어떤 콜렉션에도 속할 수 없기 때문이다.
- Post URL이 언어 태그의 slug와 일치해서는 안된다. #en의 slug는 en이고 #ko의 slug는 ko니까 post URL은 en이나 ko가 되어서는 안된다
이렇게 되면 안된다
다음글
