Translation by content directory

Managing multilingual Hugo sites translated by content directory/folder.

This approach separates all languages, which can make it easier to find specific files. More configuration entries are required, however, resulting in a longer site navigation.

Hugo calls this Translation by content directory. Your files will be placed inside a top-level content folder for each language (e.g. content/es/posts/my-post.md).

The best practice here is to define a collection per language and folder of related files (e.g. Pages EN, Pages ES, Pages FR, Posts EN, Posts ES, Posts FR).

Here's an example with Pages and Posts:

content/
 en/
    about.md
    blog/
       first-post.md
 es/
    about.md
    blog/
       first-post.md
 fr/
    about.md
    blog/
       first-post.md
cloudcannon.config.yaml
copied
collections_config:
  pages_en:
    name: Pages EN
    icon: wysiwyg
    path: content/en
    parse_branch_index: true
    filter: strict
  pages_es:
    name: Pages ES
    icon: wysiwyg
    path: content/es
    parse_branch_index: true
    filter: strict
  pages_fr:
    name: Pages FR
    icon: wysiwyg
    path: content/en
    parse_branch_index: true
    filter: strict
  posts_en:
    name: Posts EN
    icon: event_available
    paths: content/en/blog
  posts_es:
    name: Posts ES
    icon: event_available
    paths: content/es/blog
  posts_fr:
    name: Posts FR
    icon: event_available
    paths: content/fr/blog

The parse_branch_index option is specific to Hugo sites on CloudCannon, and affects what collection _index.* files get assigned to. By default these files do not get assigned to the closest collection, as they usually represent the landing pages of your site. As such, they will be assigned to the global pages collection unless otherwise configured.

If a collection is tagged as parse_branch_index: true, any _index.* files in the collection path (and subdirectories) will be assigned to it.

In this case, we want the content/*/blog/_index.md files to be in the pages_* collection for their language, rather than in the global pages collection, or the inner posts_* collection.

When you browse a collection in CloudCannon, all files within that folder will be shown by default. Applying the strict filter to a collection instead limits the UI to show only the files that exactly match that collection.

In this case, it prevents files from the posts_* collections in the content/*/blog/ subdirectories from appearing when browsing the pages collection for that language.

cloudcannon.config.json
copied
{
  "collections_config": {
    "pages_en": {
      "name": "Pages EN",
      "icon": "wysiwyg",
      "path": "content/en",
      "parse_branch_index": true,
      "filter": "strict"
    },
    "pages_es": {
      "name": "Pages ES",
      "icon": "wysiwyg",
      "path": "content/es",
      "parse_branch_index": true,
      "filter": "strict"
    },
    "pages_fr": {
      "name": "Pages FR",
      "icon": "wysiwyg",
      "path": "content/en",
      "parse_branch_index": true,
      "filter": "strict"
    },
    "posts_en": {
      "name": "Posts EN",
      "icon": "event_available",
      "paths": "content/en/blog"
    },
    "posts_es": {
      "name": "Posts ES",
      "icon": "event_available",
      "paths": "content/es/blog"
    },
    "posts_fr": {
      "name": "Posts FR",
      "icon": "event_available",
      "paths": "content/fr/blog"
    }
  }
}

The parse_branch_index option is specific to Hugo sites on CloudCannon, and affects what collection _index.* files get assigned to. By default these files do not get assigned to the closest collection, as they usually represent the landing pages of your site. As such, they will be assigned to the global pages collection unless otherwise configured.

If a collection is tagged as parse_branch_index: true, any _index.* files in the collection path (and subdirectories) will be assigned to it.

In this case, we want the content/*/blog/_index.md files to be in the pages_* collection for their language, rather than in the global pages collection, or the inner posts_* collection.

When you browse a collection in CloudCannon, all files within that folder will be shown by default. Applying the strict filter to a collection instead limits the UI to show only the files that exactly match that collection.

In this case, it prevents files from the posts_* collections in the content/*/blog/ subdirectories from appearing when browsing the pages collection for that language.

cloudcannon.config.cjs
copied
module.exports = {
  collections_config: {
    pages_en: {
      name: "Pages EN",
      icon: "wysiwyg",
      path: "content/en",
      parse_branch_index: true,
      filter: "strict"
    },
    pages_es: {
      name: "Pages ES",
      icon: "wysiwyg",
      path: "content/es",
      parse_branch_index: true,
      filter: "strict"
    },
    pages_fr: {
      name: "Pages FR",
      icon: "wysiwyg",
      path: "content/en",
      parse_branch_index: true,
      filter: "strict"
    },
    posts_en: {
      name: "Posts EN",
      icon: "event_available",
      paths: "content/en/blog"
    },
    posts_es: {
      name: "Posts ES",
      icon: "event_available",
      paths: "content/es/blog"
    },
    posts_fr: {
      name: "Posts FR",
      icon: "event_available",
      paths: "content/fr/blog"
    }
  }
};

The parse_branch_index option is specific to Hugo sites on CloudCannon, and affects what collection _index.* files get assigned to. By default these files do not get assigned to the closest collection, as they usually represent the landing pages of your site. As such, they will be assigned to the global pages collection unless otherwise configured.

If a collection is tagged as parse_branch_index: true, any _index.* files in the collection path (and subdirectories) will be assigned to it.

In this case, we want the content/*/blog/_index.md files to be in the pages_* collection for their language, rather than in the global pages collection, or the inner posts_* collection.

When you browse a collection in CloudCannon, all files within that folder will be shown by default. Applying the strict filter to a collection instead limits the UI to show only the files that exactly match that collection.

In this case, it prevents files from the posts_* collections in the content/*/blog/ subdirectories from appearing when browsing the pages collection for that language.

Open in a new tab