Skip to content

Commit

Permalink
Add Translation Posts
Browse files Browse the repository at this point in the history
  • Loading branch information
@BernatBC
BernatBC committed Jan 15, 2024
1 parent 7c822e9 commit 6e9dcae
Show file tree
Hide file tree
Showing 3 changed files with 259 additions and 4 deletions.
23 changes: 21 additions & 2 deletions content/posts/translation/content/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
---
title: "How to Translate Posts"
date: 2020-06-07T06:20:50+06:00
date: 2024-01-15T06:20:50+06:00
author:
name: BernatBC
image: images/author/bernatbc.png
menu:
sidebar:
name: Translating Posts
Expand All @@ -9,4 +12,20 @@ menu:
weight: 520
---

## Coming soon.......
This theme has built-in support for multiple language.

Before starting the post translation, make sure that you have enabled the language to your site. If that's not the case, you can follow the section `Add the language to the site` from the guide [How to Translate Site Data](/posts/translation/site-data/).

## Creating the post

Once you have your desired language added to your website, know you can translate posts to that language. We're going to assume that you want to translate an existing post.

### Create the index file

The first step is to locate the `index.md` file from the post that you want to translate. Then you have to create a file in the same directory (or you can just copy the `index.md` file), and name it `index.<language_code>.md`, where `<language_code>` is the language code that you can find in the language table in [How to Translate Site Data](/posts/translation/site-data/).

### Translate the post

Now, you can start translating the post, the same way as you write a new post.

> INFO: If you're dealing with internal references, you'll need to add the prefix `/<language_code>` in front of your relative path. For example, if you want to create a link that is pointing to `/posts/translation/site-data/`, the link for the translated post will be `/<language_code>/posts/translation/site-data/`.
162 changes: 162 additions & 0 deletions content/posts/translation/new-language/index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
---
title: "How to add an unsupported language"
date: 2024-01-15T06:20:50+06:00
author:
name: BernatBC
image: images/author/bernatbc.png
menu:
sidebar:
name: Adding new language
identifier: new-language
parent: translation
weight: 510
---

If you want to translate to an unsupported language, you can translate the UI elements.

## Create an `i18n` file.

To do so, you have to create the `i18n` diretory inside the root of the site, the directory where you can find the `config.yaml` file, and directories like `data`, `content`, etc.

Afterwards, you can create the file `<language_code>.toml` into the `i18n` directory. In this [directory](https://github.com/hugo-toha/hugo-toha.github.io/tree/gh-pages/flags/1x1), you can find all language codes with the flag that will appear with that code.

## Translate the UI elements.

Inside the new file, just copy the following content, and replace the content between the quotation marks with the name in your desired language.

{{< alert type="warning" >}}
If the content above gets obsolete, you can copy the contents from the [en](https://github.com/hugo-toha/toha/blob/main/i18n/en.toml) file.
{{< /alert >}}

```toml
# More documentation here: https://github.com/nicksnyder/go-i18n
[home]
other = "Home"

[posts]
other = "Posts"

[toc_heading]
other = "Table of Contents"

[tags]
other = "Tags"

[categories]
other = "Categories"

[at]
other = "at"

[resume]
other = "My resume"

[navigation]
other = "Navigation"

[contact_me]
other = "Contact me:"

[email]
other = "Email"

[phone]
other = "Phone"

[newsletter_text]
other = "Stay up to date with email notification"

[newsletter_input_placeholder]
other = "Enter email"

[newsletter_warning]
other = "By entering your email address, you agree to receive the newsletter of this website."

[submit]
other = "Submit"

[hugoAttributionText]
other = "Powered by"

[prev]
other = "Prev"

[next]
other = "Next"

[share_on]
other = "Share on"

[improve_this_page]
other = "Improve this page"

[out_of]
other = "out of"

[publications]
other = "Publications"

[taken_courses]
other = "Taken Courses"

[course_name]
other = "Course Name"

[total_credit]
other = "Total Credit"

[obtained_credit]
other = "Obtained Credit"

[extracurricular_activities]
other = "Extracurricular Activities"

[show_more]
other = "Show More"

[show_less]
other = "Show Less"

[responsibilities]
other = "Responsibilities:"

[present]
other = "Present"

[comments_javascript]
other = "Please enable JavaScript to view the"

[comments_by]
other = "comments powered by"

[read]
other = "Read"

[project_star]
other = "Star"

[project_details]
other = "Details"

[err_404]
other = "The page you are looking for is not there yet."

[more]
other = "More"

[view_certificate]
other = "View Certificate"

[notes]
other = "Notes"

[disclaimer_text]
other = "Liability Notice"

[search]
other = "Search"

[minute]
one = "minute"
other = "minutes"
```
78 changes: 76 additions & 2 deletions content/posts/translation/site-data/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
---
title: "How to Translate Site Data"
date: 2020-06-07T06:20:50+06:00
date: 2024-01-15T06:20:50+06:00
author:
name: BernatBC
image: images/author/bernatbc.png
menu:
sidebar:
name: Translating Homepage
Expand All @@ -9,4 +12,75 @@ menu:
weight: 510
---

## Coming soon.......
This theme has built-in support for multiple language.

## Add the language to the site

Adding the language to your site will translate the UI to that language (e.g. the buttons, the nav bars, etc.).

### Get language code

In order to translate your site, you will need the code from your language. The following table contains the supported languages algonside its codes:

| Languages | Code |
|----------------------|-------------------|
| English | `en` / none |
| বাংলা | `bn` |
| Français | `fr` |
| Indonesian | `id` |
| Deutsch | `de` |
| Español | `es` |
| 简体中文 | `zh-cn` / `zh-tw` |
| हिन्दी | `hi` |
| Italiano | `it` |
| 日本語 | `jp` |
| 한국어 | `ko` |
| русский | `ru` |
| suomi | `fi` |
| Tiếng Việt | `vn` |
| Turkish | `tr` |
| Arabic (العربية) | `ar` |
| Português Europeu | `pt-pt` |
| Català | `ad` |
| Português Brasileiro | `pt-br` |
| Dutch | `nl` |

</br>

For a complete list of the supported languages, please check the README file from the [toha repository](https://github.com/hugo-toha/toha).

If the language you desire to translate the content to is not available, please check the guide [How to add an unsupported language](/posts/translation/new-language/).

### Add the language into `config.yaml`

After you know what's the code for the language you wish to translate your site, open `config.yaml` file, and under the `languages sections` add the following:

```yaml
languages:
en:
languageName: English
weight: 1
<language_code>:
languageName: <language_name>
weight: 2 # You can set the language order with this value

```

For example, if we want to set `Frech` as the new language, the section would look similar to:

```yaml
languages:
en:
languageName: English
weight: 1
fr:
languageName: French
weight: 2 # You can set the language order with this value

```

## Translating the Main Page

You can translate the main page by creating a new directory into `data` directory. The name of the new directory should be `<language_code>`. For example, if we want to translate it to french, we would create the `fr` directory into `data` directory.

Afterwards you can create your usual data file like `about.yaml` or `education.yaml` files, keeping the same file structure and maintaining the same file names. Inside those files, you can just translate the content of the fields into your desired language.

0 comments on commit 6e9dcae

Please sign in to comment.