utterances-bot commented 2 years ago

Mario Angst - A multi-language (German/ English) Quarto website

https://marioangst.com/en/blog/posts/multi-language-quarto/

beatrizmilz commented 2 years ago

Hi Mario! Thanks for this post. I'll try to use profile soon to improve the multilanguage feature in my blog, and this blog post will definitely be really useful!

FreddieJH commented 1 year ago

Thanks so much for this blog. I am going through it now. I am a little stuck with regards to the redirect. I am not using netlify, but will be using github.io, and i want to redirect the webpage.com to webpage.com/en/ but it doesn't seem to work. the step i am refering to is:

FreddieJH commented 1 year ago

the step: The easiest way (I think) would be to also render one additional language profile at at the root domain. You would need to change the navbar language toggles to ./en respectively ./de only.

marioangst commented 1 year ago

@FreddieJH - Hey you are right I did not do a good job explaining this idea. What I meant with the most simple step is that (if english is supposed to be your main landing page) you change your _quarto.english.yml file to something like this (changes to version above in bold):

project: title: "Mario Angst | Sustainability | Digitalization | Governance" output-dir: ./_site

website: navbar: left:

href: about.qmd text: About me
icon: book href: publications.qmd text: Publications
href: software.qmd
text: Software
href: blog/index.qmd text: Blog right:
href: ../de text: Deutsch - href: ./ text: English

lang: en

format: html: theme: morph css: styles.css toc: true

So this means that

when you render the english version you render to the top level directory
the second language you render to special folder (eg. /de)
whenever someone clicks english, they get to the top level directory
when they go to your root domain, they also end up at your top level directory

Does this make sense?

edit: as @FreddieJH pointed out, this is a bit flawed - linking to hardcoded en/de index pages will do the trick

FreddieJH commented 1 year ago

Legend! Thank you so much for your response. The only issue I came across with the method of using relative links like ../de was that it would produce a 404 error if i clicked switched the language to DE when on the home page, then it would try and go back a directory level and mess up. I ended up making my links hard links to the EN or DE index homepage, not sure if that's good practice, but it works for me.

marioangst commented 1 year ago

Hi Freddie yes that makes a lot of sense - actually quite a silly error in my thinking, because, as you say, if you render the languages in directories at different levels, this breaks down. So your solution sounds good - I do not know about good practice in this regard but I guess it probably is in the absence of a more elaborate redirect structure - it's robust, that's all that matters :).

marioangst commented 1 year ago

@FreddieJH now I actually remembered what I meant originally by rendering an additional profile at the root domain, again silly me :). I think I had the idea of just rendering the english version as a third profile to the root (for the default language). Basically just duplicating _quarto.english.yml but changing the output dir to to root instead of /en. Very very clumsy though, as it would just duplicate all english content ;).

johannes-titz commented 1 year ago

I had to use ::: {.content-visible when-profile="english"} to make it work. Without .content-visible it always showed both texts. Otherwise, this works very well and I believe should be sufficient for most bloggers. Who would want to switch the language for an individual post or an individual page? With a good redirect 99% of users will be happy. Nice post!

I just realized I posted on the German site :). So this is also something to consider when using this setup. If you have some content only in one language, this can happen.

marioangst commented 1 year ago

@johannes-titz good point - that is a change they introduced moving from the pre-release to the release version I think. I've actually had to change it in this way as well, but did not update the post (I'll do that now).

And yeah, blogging is reserved to English for me at the moment, even though I'd love to write in German more often actually... but for these technical things, it has to be English I guess.

baarthur commented 1 year ago

Hey Mario, awesome content! Thank you very much. @FreddieJH and @johannes-titz thank you also, your comments were also very useful for me. I had a lot of trouble understanding the directories and quarto profiles. Here is what worked for me, in may 2023:

after creating the additional yml files, run (separately) quarto --render profile lang1 and quarto --render profile lang2. I don't know why quarto --render profile lang1,lang2 didn't work.
I skipped the step of duplicating the english content. But then I need to render my secondary language last. If not, its folder is deleted.
This is my first time creating a quarto website (following this tutorial). I'm not using netlify or anything else, just github pages. Although I have a .nojekyll, I still can't use _site as output-dir because github won't recognize it.

This is what my .ymls look like:

file: _quarto-portuguese.yml

project:
  title: "title"
  output-dir: ./docs/pt

website:
  navbar:
    background: primary
    right:
      - href: ../pt
        text: Português
      - href: ../ # the two dots are necessary, dunno if it was a typo but you removed one of them in one of your comments
        text: English
    left: (...)

file: _quarto-english.yml

project:
  title: "title"
  output-dir: ./docs 

website:
  navbar:
    background: primary
    right:
      - href: ../pt
        text: Português
      - href: ../ # the two dots are necessary, dunno if it was a typo but you removed one of them in one of your comments
        text: English
    left: (...)

Following these steps and adding {.content-visible when-profile="lang1"}, works pretty fine here!

martinbaumgaertner commented 1 year ago

Hey Mario, thank you very much for your post. It was very helpfull. For upcoming readers:

the "sub yml" files should be named: _quarto-german not _quarto.german _quarto-english not _quarto.english

There seems to be an technical change since posting :)

glilienthal commented 1 year ago

Hi Mario, thanks a lot for the great content. I have one question: How can I change the title of a page depending on the profile? (i.e. the "title: " entry in the yaml header.)

You seem to have done it for your page Publications/Publikationen. How did you do it?

I tried title: "r ifelse(Sys.getenv('QUARTO_PROFILE') == 'german', 'Publikationen', 'Publications')"

But that messes up the entry in the navigation. (and maybe other stuff)

Thanks!

marioangst commented 1 year ago

Hi @glilienthal glad it was of use to you :).

I have the differing page titles/ navigation items defined in two different _quarto.yml files. Eg. _quarto-english.yml looks like this:

project:
  output-dir: ./_site/en

website:
  title: "Mario Angst"
  description: "Sustainability | Digitalization | Governance"
  navbar:
    left:
      - href: about.qmd
        text: About me
      - icon: book
        href: publications.qmd
        text: Publications
      - href: software.qmd        
        text: Software
      - href: blog/index.qmd
        text: Blog
    right:
      - href: ../de
        text: Deutsch
      - href: ../en
        text: English

lang: en

format:
  html:
    theme: morph
    css: styles.css
    toc: true

and _quarto-german.yml looks like:

project:
  output-dir: ./_site/de

website:
  title: "Mario Angst"
  description: "Nachhaltigkeit | Digitalisierung | Governance"
  navbar:
    left:
      - href: about.qmd
        text: Über mich
      - href: software.qmd        
        text: Software
      - icon: book
        href: publications.qmd
        text: Publikationen
      - href: blog/index.qmd
        text: Blog (englisch)
    right:
      - href: ../de
        text: Deutsch
      - href: ../en
        text: English

lang: de

format:
  html:
    theme: morph
    css: styles.css
    toc: true

The I render both with:

quarto render --profile german
quarto render --profile english

By the way, this also would make other nice things possible, like rendering some homepage element only for a given language etc.

Hope this helps :)!

melissavanbussel commented 1 year ago

Hi everyone! Here is a link to a relevant GitHub discussion: https://github.com/quarto-dev/quarto-cli/discussions/6319. It's an example of how to create a button in the header of a Quarto site that, when clicked, modifies part of the URL (e.g., from en to fr) to switch to the other-language-version of the page:

In _quarto.yml:

website:
  body-header: |
    <link rel="stylesheet" href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css><button onclick="window.location = location.href.replace('/en/','/fr/');" class="btn"><i class="fa fa-language"></i> Français</button>

And some CSS to make it look a bit nicer:

.btn {
  background-color: dodgerblue;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
  float: right;
}
.btn:hover {
  background-color: #1a7bd9;
  color: white;
}

marioangst commented 1 year ago

@melissavanbussel now that is a super cool trick - I have also tried it out (that button looks super cool!) and also added an edit to this blog post mentioning it. The only problem I found with it is that this does not work if you have some content on your homepage only in one language. For example, I have a blog only in English (and the link on the German page also links to ../en/blog), so for "blog" I would not want to send people to "de/blog". But I guess one could get around this with customizing the javascript code a bit with some if/else statements, plus I guess for most sites it also does not really matter.

baarthur commented 1 year ago

Hi everyone! Here is a link to a relevant GitHub discussion: quarto-dev/quarto-cli#6319. It's an example of how to create a button in the header of a Quarto site that, when clicked, modifies part of the URL (e.g., from en to fr) to switch to the other-language-version of the page:

In _quarto.yml:
website:
  body-header: |
    <link rel="stylesheet" href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css><button onclick="window.location = location.href.replace('/en/','/fr/');" class="btn"><i class="fa fa-language"></i> Français</button>
And some CSS to make it look a bit nicer:
.btn {
  background-color: dodgerblue;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
  float: right;
}
.btn:hover {
  background-color: #1a7bd9;
  color: white;
}

@melissavanbussel thanks for the insight. I wonder if it is possible to replace the navbar language selector in the fashion @marioangst suggested, instead of having it in the body. I know basically nothing of either javascript or HTML, so what I tried initially was to get that location.href.replace bit inside the href of the .yml navbar section, but it literally translates into an href. any tips?

website:
  navbar:
    background: primary
    left:
      (...)
    right:
      - text: Português
        href: |
          <button onclick="window.location = location.href.replace('.io/','.io/pt/');" class="btn"><i class="fa fa-language"></button>

Also note that since my base URLs do not contain /en, I replace .io/ with .io/pt/.

Edit this was my first try:

website:
  navbar:
    background: primary
    left:
      (...)
    right:
      - | 
        <link rel="stylesheet" href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css><button onclick="window.location = location.href.replace('.io/','.io/pt/');" class="btn"><i class="fa fa-language"></i> Português</button>

which does not work, returning upon quarto preview:

In file _quarto-english.yml
(line 26, column 9) Array entry 1 is empty but it must instead be a string.
25:       #     <button onclick="window.location = location.href.replace('.io/','.io/pt/');" class="btn"><i class="fa fa-language"></button>
26:       - | 
           ~
27:         <link rel="stylesheet" href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css><button onclick="window.location = location.href.replace('.io/','.io/pt/');" class="btn"><i class="fa fa-language"></i> Português</button>

marioangst / blogComments

en/blog/posts/multi-language-quarto/ #1

Mario Angst - A multi-language (German/ English) Quarto website