고스트 CMS 다국어 블로그: 1. post, page 다국어 처리

Sanghun Kang·5일 전

GHOST cms 다국어

Ghost는 특정 post들의 Collection을 만들 수 있다. 지원하고자 하는 언어별 태그를 생성하고 각 태그의 Collection을 만들어서 다국어 블로그 형태로 구현해보자.

지원 언어에 대한 internal tag를 생성한다
routes.yaml에 Collection을 설정해준다
hbs파일을 수정해준다

나는 영어를 주 언어로, 한국어를 두 번째 언어로 하는 다국어 블로그를 만들고자 한다.

💡 이 포스팅 시리즈에서는 Ghost 기본 테마인 Casper를 사용했다. 다른 테마에도 똑같이 적용 가능하다.

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)로 지정했다.

💡 만약 여러개의 태그를 적용하더라도 두번째 태그는 언어태그(#en or #ko)로 지정을 해야한다. 추후 다국어 tag페이지를 구현할때 편의성을 위해 정한 규칙이다.

예를들어 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://sanghunkang.com/ 주소로 접속하면 en태그를 가진 포스트만 보이고 https://sanghunkang.com/ko/ 로 접속하면 ko 태그를 가진 포스트만 보이도록 설정하는것이다. 주의할 점은 메인언어를 collections의 가장 상위에 배치해야 한다는 것이다.

💡 collections are exclusive

각 콜렉션은 배타적이다. 즉 중복이 있을수 없다. 하나의 포스트에 #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버전을 기준으로 설명한다.

코드 수정은 아래 커밋을 참조하면 된다.

0.0.1 · sanghunka/ghost-multilingual-theme@0ba9bd1

Multilingual post Multilingual page

두 개의 파일을 추가한다
- 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가 되어서는 안된다