> ## Content Index > Fetch the complete content index at: https://sanghunkang.com/llms.txt > Use this file to discover other available public pages before exploring further. # 고스트 CMS 다국어 블로그: 1. post, page 다국어 처리 - URL: https://sanghunkang.com/ko/multilingual-ghost-cms-1-post-page-ko/ - Published: 2024-05-10T08:58:00.000Z - Updated: 2026-09-26T14:41:08.000Z - Author: Sanghun Kang - Tags: Ghost, #ko, #multi Ghost는 특정 post들의 [Collection](https://ghost.org/tutorials/content-collections/?ref=sanghunkang.com)을 만들 수 있다. 지원하고자 하는 언어별 태그를 생성하고 각 태그의 Collection을 만들어서 다국어 블로그 형태로 구현해보자. 1. 지원 언어에 대한 internal tag를 생성한다 2. routes.yaml에 Collection을 설정해준다 3. hbs파일을 수정해준다 나는 영어를 주 언어로, 한국어를 두 번째 언어로 하는 다국어 블로그를 만들고자 한다. 💡 이 포스팅 시리즈에서는 Ghost 기본 테마인 [Casper](https://github.com/TryGhost/Casper?ref=sanghunkang.com)를 사용했다. 다른 테마에도 똑같이 적용 가능하다. # Internal tag 생성 Ghost admin 화면에서 좌측의 Tags를 선택하고 New tag를 클릭해 internal tag를 추가하자. internal tag는 #으로 시작해야 한다. 영어포스팅을 위한 인터널 태그는 `#en`, 한국어포스팅을 위한 인터널 태그는 `#ko`로 설정했다. Name에 `#en`을 입력하면 Slug는 자동으로 hash-en로 설정되는데, 더 간결하게 만들기 위해 `hash-` 부분은 삭제했다. ![](https://cdn.magicpages.co/sang.mymagic.page/2024/04/image.png) ![](https://cdn.magicpages.co/sang.mymagic.page/2024/04/image-1.png) Internal tags를 선택했을때 아래와 같은 화면이 되면 된다. ![](https://cdn.magicpages.co/sang.mymagic.page/2024/04/image-3.png) ## 테스트용 포스트 발행 추후 테스트를 위해 internal태그로 포스팅을 발행해보자. 각 인터널 태그별로 두 개씩 포스팅을 발행했다. - en news 1: News, #en - en news 2: News, #en - ko news 1: News, #ko - ko news 2: News, #ko ![](https://cdn.magicpages.co/sang.mymagic.page/2024/04/image-5.png) 모든 포스트의 첫 번째 태그는 'News'로 설정하고, 두 번째 태그는 언어 태그(#en 또는 #ko)로 지정했다. 💡 만약 여러개의 태그를 적용하더라도 두번째 태그는 언어태그(#en or #ko)로 지정을 해야한다. 추후 다국어 tag페이지를 구현할때 편의성을 위해 정한 규칙이다. 예를들어 news, latest, #en 이 세가지 태그를 적용하고자 한다면 \[news, #en, latest\] 또는 \[latest, #en, news\] 순서로 설정해야 한다. 핵심은 두번째 태그가 언어태그여야 한다는 점이다. 이제 블로그 메인 페이지를 보면 설치시 기본으로 발행되어있는 1개의 포스트에 추가로 발행한 4개의 포스트를 합쳐 총 5개의 포스트가 발행되어 있는걸 볼 수 있다. ![](https://cdn.magicpages.co/sang.mymagic.page/2024/04/image-6.png) ## routes.yaml에서 Collection을 설정 - admin 대시보드에서 settings 아이콘을 클릭한 뒤 Labs에서 Download curnet routes를 선택해서 routes.yaml파일을 내려받자. routes.yaml의 초기 상태는 아래와 같다. ```yaml routes: collections: /: permalink: /{slug}/ template: index taxonomies: tag: /tag/{slug}/ author: /author/{slug}/ ``` routes.yaml 원본 이걸 아래처럼 수정하고 업로드 해주자. ```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 (영어가 메인) 주소로 접속하면 `en`태그를 가진 포스트만 보이고 [https://sanghunkang.com/ko/](https://sanghunkang.com/) 로 접속하면 `ko` 태그를 가진 포스트만 보이도록 설정하는것이다. 주의할 점은 메인언어를 collections의 가장 상위에 배치해야 한다는 것이다. 💡 collections are ****exclusive** 각 콜렉션은 배타적이다. 즉 중복이 있을수 없다. 하나의 포스트에 #en, #ko 태그를 모두 붙였다면 상위에 위치한 콜렉션의 경로로 접속했을 때만 노출되고 다른 경로로 접속했을땐 노출되지 않는다. 한국어를 메인으로 설정하고 싶으면 아래처럼 설정하면 된다. ```yaml 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](https://github.com/TryGhost/Casper?ref=sanghunkang.com) 테마 5.7버전을 기준으로 설명한다. 코드 수정은 아래 커밋을 참조하면 된다. [0.0.1 · sanghunka/ghost-multilingual-theme@0ba9bd1Multilingual post Multilingual page![](https://github.githubassets.com/assets/pinned-octocat-093da3e6fa40.svg)GitHubsanghunka![](https://opengraph.githubassets.com/92d91e8dc186666db5cb6086ff1db6f9d0a0293f643785fb698510fec6e03b12/sanghunka/ghost-multilingual-theme/commit/0ba9bd1d8a7b2a9fea69ed044bdb25f69001008e)](https://github.com/sanghunka/ghost-multilingual-theme/commit/0ba9bd1d8a7b2a9fea69ed044bdb25f69001008e?ref=sanghunkang.com) - 두 개의 파일을 추가한다 - index-en.hbs - index-ko.hbs - 세 개의 파일을 수정한다 - default.hbs - post.hbs - page.hbs ## index-en.hbs & index-ko.hbs ```handlebars {{!< index}} {{#contentFor "lang"}}en{{/contentFor}} ``` index-en.hbs ```handlebars {{!< index}} {{#contentFor "lang"}}ko{{/contentFor}} ``` index-ko.hbs 루트 경로에 위 파일 두개를 추가한다. ## default.hbs ```handlebars ``` 이 부분을 아래처럼 수정한다. ```handlebars ``` 이를 통해 index-en.hbs템플릿을 쓰는 페이지는 `html lang="en"` , index-ko.hbs템플릿을 쓰는 페이지는 `html lang="ko"` 이렇게 설정된다. 그리고 특별한 lang정보가 없으면 기본값인 en이 설정된다. ## post.hbs {{#post}} 아래 부분에 4줄을 추가해준다. ```handlebars {{#post}} {{#has tag="#ko"}} {{#contentFor "lang"}}ko{{/contentFor}} {{else}} {{#contentFor "lang"}}en{{/contentFor}} {{/has}} ``` ## page.hbs {{#post}} 아래 부분에 4줄을 추가해준다. ```handlebars {{#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로 만들어낸 결과이다. ![](https://cdn.magicpages.co/sang.mymagic.page/2024/04/image-7.png) ![](https://cdn.magicpages.co/sang.mymagic.page/2024/04/image-8.png) 개발자 도구에서 확인해보면 /, 영어 포스트, 영어 페이지에는 `` , /ko/, 한국어 포스트, 한국어 페이지에는 `` 로 language declaration역시 적절히 설정되어 있는것을 볼 수 있다. # 주의할 점 - 이제부터 모든 포스트는 #en 또는 #ko 중 하나의 태그를 반드시 포함해야 한다. 이 두 태그 . 중하나라도 없으면 해당 포스트는 어떤 콜렉션에도 속할 수 없기 때문이다. - Post URL이 언어 태그의 slug와 일치해서는 안된다. #en의 slug는 en이고 #ko의 slug는 ko니까 post URL은 en이나 ko가 되어서는 안된다 ![](https://cdn.magicpages.co/sang.mymagic.page/2024/04/image-9.png) ![](https://cdn.magicpages.co/sang.mymagic.page/2024/04/image-10.png) 이렇게 되면 안된다 --- - 참조 - [https://www.benjaminrancourt.ca/how-to-support-multilingual-pages-in-ghost/](https://www.benjaminrancourt.ca/how-to-support-multilingual-pages-in-ghost/?ref=sanghunkang.com) **다음글** [고스트 CMS 다국어 블로그: 2\. ‘포스트 더보기’ 다국어 처리포스트를 보면 영어 포스트임에도 불구하고 하단의 show\_recent\_posts 부분에는 언어 구분 없이 모든 포스트가 노출된다. 이 부분을 수정해보자.![](https://sanghunkang.com/favicon.ico)Sanghun's BlogSanghun Kang![](https://cdn.magicpages.co/sang.mymagic.page/2024/05/ghost-3-1.png)](https://sanghunkang.com/ko/multilingual-ghost-cms-2-show-recent-posts-ko/)