English

This website implements quarto with 2 languages. Currently, you are looking at the english version.

To use multi language support, I make use of quarto profiles. Some ideas are from here.

Current approach

1. Create profiles for each language: en / de. Each has its own YAML file: _quarto-en.yml and quarto-de.yml. In these yaml files, specify the language and the menu items for each language:

quarto-en.yml"

lang: en

website:
  navbar:
    left:
      - href: index.qmd
        text: Home
      - href: about.qmd
        text: "About"
  title: "Multi-languages Websites with Quarto!"

quarto-en.yml"

website:
  navbar:
    left:
      - href: index.qmd
        text: Home
      - href: about.qmd
        text: "Infos"
  title: "Mehrsprachige Websiten mit Quarto!"

2. Specify a default profile using groups. The default language is rendered to docs, the other language is rendered to a subdir of docs. Add a navbar item (right) to switch to the other language

quarto-en.yml"

project:
  output-dir: docs
  
  
website:
  navbar:
    right:
      - href: de
        text: 🌍 Auf Deutsch wechseln

quarto-en.yml"

project:
  output-dir: docs/de
  
website:
  navbar:
    right:
      - href: ../
        text: 🌍 Switch to English

3. Conditionally show content on each page using divs with the .content-visible when-profile="de" syntax

:::{.content-visible when-profile="de"}

## Deutsch

Diese Website implementiert quarto mit 2 Sprachen. Derzeit sehen Sie die deutsche Version. Wie das ganze funktioniert ist nur in der englischen Version sichtbar.

:::

4. To render:
   • If possible, render the default profile first (quarto render) and the other second (e.g. quarto render --profile de)
   • If you need to render the other language first, use --no-clean (quarto render --profile de --no-clean) to prefent docs from being purged first
5. To publish
   • We cannot use quarto publish, since this is this command is output-dir-aware. Instead, we specify docs to be the source for gh-pages on GitHub. The disadvantage is that you need to versioncontrol your html-files.
   • Netlify would be an elegant solution with some overhead (create an netlify account, install the netlify-cli). Here you have the additional advantage of being able to use _redirects depending on the preferred user language in the browser settings.

Note

Anything not in a conditional div is displayed in both language versions (like this callout block you are reading right now)