Menu icon Foundation
How to manage different head parts

I have a multilingual site. All German html resides in /src/pages all English html resides in /src/pages/en.

I would like to have the head html which resides in /src/layouts/default.html in German (language="de") with German Metadata only used to create the German pages and have an additional default.html which mixes with the English pages.

I created therefore an English default.html in /src/layouts/en/default.html.

My Question is now. How can I achieve that the English Pages get created with the English html head and the German pages with the German html head.

I use Foundation CLI V 2.1.0

multilingualhtmlheadmultiplemixedlanguage

I have a multilingual site. All German html resides in /src/pages all English html resides in /src/pages/en.

I would like to have the head html which resides in /src/layouts/default.html in German (language="de") with German Metadata only used to create the German pages and have an additional default.html which mixes with the English pages.

I created therefore an English default.html in /src/layouts/en/default.html.

My Question is now. How can I achieve that the English Pages get created with the English html head and the German pages with the German html head.

I use Foundation CLI V 2.1.0

Matthias Hormann over 2 years ago

On of the easiest solutions that come to mind is the following:

In `src/layouts`, create one file for each language, i.e.

 

`src/layouts/default-en.html`:

{{!-- This is the base layout for ENGLISH. --}}
<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    …
    <link rel="stylesheet" href="{{root}}assets/css/app.css">
  </head>
  <body>
    {{> navigation-en}}
    {{> header-en}}
    {{!-- Pages from src/pages/en go here --}}
    {{> body}}
    {{> footer-en}}
  </body>
</html>

 

`src/layouts/default-de.html`:

{{!-- Dies ist das Basis-Layout für DEUTSCH. --}}
<!doctype html>
<html class="no-js" lang="de">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    …
    <link rel="stylesheet" href="{{root}}assets/css/app.css">
  </head>
  <body>
    {{> navigation-de}}
    {{> header-de}}
    {{!-- Seiten aus src/pages/de werden hier eingefügt --}}
    {{> body}}
    {{> footer-de}}
  </body>
</html>

 

Then, in your actual pages, just specify the desired layout using front matter:

 

`src/pages/index.html`

---
layout: default-de
---
<!-- Start Seiten-Inhalt -->
…
<!-- Ende Seiten-Inhalt -->

 

`src/pages/en/index.html`:

---
layout: default-en
---
<!-- Start page content -->
…
<!-- End page content -->

 

This could probably all structured differently, but it’s an easy solution.

I’d probably even go so far as to have only _one_ `index.html` file in `src/pages` that detects the user’s browser’s accept language and tries to switch to the desired language automatically (if available). To keep it all apart, you might use »language subfolders« below, like `src/pages/en`, `src/pages/de` and so forth.

 

Have fun!

Matthias Hormann over 2 years ago

N.B.: You could even go and have the meta description also in the front matter of each page, like:

`src/pages/de/gallery.html`:

---
layout: default-de
title: Galerie
desc: Fotogalerie
longdesc: Einige Fotos bestehender Installationen.
keywords: Fotos,Galerie,Installationen,Ansichten
---

and then use Panini variables to expand these in your layout file, say `src/layouts/default-de.html`:

<!doctype html>
<html class="no-js" lang="de">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <meta name="description" content="{{ longdesc }}">
    <meta name="keywords" content="{{ keywords }}">
    <link rel="stylesheet" href="{{root}}assets/css/app.css">
    …
  </head>
  <body>
    {{> navigation-de}}
    {{> header-de}}
    {{!-- Seiten aus src/pages/de werden hier eingefügt --}}
    {{> body}}
    {{> footer-de}}

    <script src="{{root}}assets/js/app.js"></script>
  </body>
</html>