added multilanguage support

This commit is contained in:
Speyll 2023-08-08 03:35:07 +01:00
parent 1df157365d
commit 544efa9724
6 changed files with 350 additions and 144 deletions

View file

@ -47,19 +47,51 @@ Enable listing of pages in the homepage by adding the following code to `config.
list_pages = true
```
#### Header and Footer Nav Links
#### Multilanguage
Customize the header and footer navigation links with the following code in the `extra` section of `config.toml`:
The theme has a built-in feature that allows you to use multiple languages. For detailed instructions on how to use this feature, you can refer to the [Zola Multilingual documentation](https://www.getzola.org/documentation/content/multilingual/). This documentation provides additional information on how to make the most out of this multilingual capability.
```toml
[languages.en]
weight = 1
title = "anemone"
languageName = "English"
languageCode = "en"
relativeURL = false
[languages.fr]
weight = 2
title = "anemone"
languageName = "Français"
languageCode = "fr"
relativeURL = false
taxonomies = [
{name = "tags", feed = true},
]
```
#### Multilanguage-Ready Navigation Bar
Customize the header navigation links with the following code in the `extra` section of `config.toml`:
```toml
[extra]
header_nav = [
{ name = "/home/", url = "/" },
{ name = "/about/", url = "/about" },
{ name = "/journal/", url = "/journal" },
{ name = "/blog/", url = "/blog" },
]
[[extra.header_nav]]
en = { name = "/home/", url = "/" }
fr = { name = "/accueil/", url = "/fr" }
[[extra.header_nav]]
en = { name = "/about/", url = "/about" }
fr = { name = "/concernant/", url = "/about" }
[[extra.header_nav]]
en = { name = "/journal/", url = "/journal" }
fr = { name = "/journal/", url = "/journal" }
[[extra.header_nav]]
en = { name = "/blog/", url = "/blog" }
fr = { name = "/blog/", url = "/blog" }
```
### Webrings

View file

@ -1,13 +1,31 @@
base_url = "https://anemone.pages.dev"
title = "anemone"
description = "A minimalist Zola theme that prioritizes clean CSS and avoids heavy JavaScript. Enjoy a seamless user experience with lightning-fast load times. Let your content take center stage in a clutter-free, elegant design that enhances readability. Responsive and efficient, anemone brings focus to your ideas."
default_language = "en"
compile_sass = false
minify_html = true
generate_feed = true
default_language = "en"
taxonomies = [
{ name = "tags" },
{name = "tags", feed = true},
]
[languages.en]
weight = 1
title = "anemone"
languageName = "English"
languageCode = "en"
relativeURL = false
[languages.fr]
weight = 2
title = "anemone"
languageName = "Français"
languageCode = "fr"
relativeURL = false
taxonomies = [
{name = "tags", feed = true},
]
[markdown]
@ -26,15 +44,24 @@ anchors = "on"
internal_level = "warn"
[extra]
author = "Lyes 'Speyll'"
author = "Speyll"
favicon = "favicon.ico"
image = ""
list_pages = false
twitter_card = true
header_nav = [
{ name = "/home/", url = "/" },
{ name = "/about/", url = "/about" },
{ name = "/journal/", url = "/journal" },
{ name = "/blog/", url = "/blog" },
]
[[extra.header_nav]]
en = { name = "/home/", url = "/" }
fr = { name = "/accueil/", url = "/fr" }
[[extra.header_nav]]
en = { name = "/about/", url = "/about" }
fr = { name = "/concernant/", url = "/about" }
[[extra.header_nav]]
en = { name = "/journal/", url = "/journal" }
fr = { name = "/journal/", url = "/journal" }
[[extra.header_nav]]
en = { name = "/blog/", url = "/blog" }
fr = { name = "/blog/", url = "/blog" }

47
content/_index.fr.md Normal file
View file

@ -0,0 +1,47 @@
+++
+++
## Aperçu
Le thème anemone est conçu pour offrir une expérience quasi sans JavaScript, efficace et minimaliste pour votre site web. Adoptant la simplicité, le thème met l'accent sur le contenu et la lisibilité, garantissant une expérience utilisateur fluide sans distractions inutiles.
> *"Bloc de citation inutile"*
## Articles de Blog
Explorez nos articles de blog instructifs sur une variété de sujets :
- 🥣 [Article de présentation](./blog/overview-post)
- 🈚 [Tests de Langue](./blog/language-tests)
- 🔥 [Titre Très Très Très Long et Contenu Très Très Très Court](./blog/very-very-very-long-title-and-very-very-very-short-content)
- 📺 [Exemple d'Article avec Titres et TOC](./blog/post-example-with-headings-and-toc)
## Étiquettes
Parcourez nos articles par étiquettes :
- [exemple](./tags/example)
## Une Autre Liste
Découvrez du contenu supplémentaire :
- Avec des sous-éléments
- Avec des sous-sous-éléments
- [Exemple de Page](./about)
- Cette liste correspond simplement au contenu de `content/_index.md`, les tests sont honteusement volés depuis [no style, please!](https://www.getzola.org/themes/no-style-please/)
## Présence en Ligne
Restez connecté avec nous :
- Email : [jgll6dij6@mozmail.com](mailto:jgll6dij6@mozmail.com)
- Dépôts de Code : [Speyll@GitHub](https://github.com/Speyll)
- @Speyll partout ailleurs.
## Anneaux Web
Rejoignez nos anneaux web et explorez davantage :
- 🈯 {{ webring(prev="#", webring="#", webringName="Anneau Aléatoire", next="#") }}
- 🎶 {{ webring(prev="#", webring="#", webringName="Autre Anneau", next="#") }}

View file

@ -0,0 +1,78 @@
+++
title = "Article de Présentation"
+++
Lorem ipsum[^1] dolor sit amet, consectetur adipiscing elit. Pellentesque vel lacinia neque. Praesent nulla quam, ullamcorper in sollicitudin ac, molestie sed justo. Cras aliquam, sapien id consectetur accumsan, augue magna faucibus ex, ut ultricies turpis tortor vel ante. In at rutrum tellus.
# Titre d'exemple 1
## Titre d'exemple 2
### Titre d'exemple 3
#### Titre d'exemple 4
##### Titre d'exemple 5
###### Titre d'exemple 6
Mauris viverra dictum ultricies. Vestibulum quis ipsum euismod, facilisis metus sed, varius ipsum. Donec scelerisque lacus libero, eu dignissim sem venenatis at. Etiam id nisl ut lorem gravida euismod.
## Listes
Non ordonnée :
- Fusce non velit cursus ligula mattis convallis vel at metus[^2].
- Sed pharetra tellus massa, non elementum eros vulputate non.
- Suspendisse potenti.
Ordonnée :
1. Quisque arcu felis, laoreet vel accumsan sit amet, fermentum at nunc.
2. Sed massa quam, auctor in eros quis, porttitor tincidunt orci.
3. Nulla convallis id sapien ornare viverra.
4. Nam a est eget ligula pellentesque posuere.
## Bloc de citation
Voici un bloc de citation :
> Suspendisse tempus dolor nec risus sodales posuere. Proin dui dui, mollis a consectetur molestie, lobortis vitae tellus.
## Code
Maintenant un peu de code :
```js
const ultimateTruth = 'ce thème est le meilleur !';
console.log(ultimateTruth);
```
Et voici du `code en ligne` !
## Tableaux
Maintenant un tableau :
| Tables | Sont | Cool |
| ------------- |:-------------:| -----:|
| col 3 est | alignée à droite| $1600 |
| col 2 est | centrée | $12 |
| zèbre | est sympa | $1 |
## Images
{{ img(id="https://uploads-ssl.webflow.com/5ff0b3326e5782a256714165/638b6f3a3d8d2e6bad1cb03b_Random22.1.jpg", alt="logo du thème") }}
image aléatoire d'un chien[^4]
## Prise en charge multilingue
- 🥣 [Ouvrez cette page traduite en français](./blog/fr/overview-post)
## Anneaux Web
- 🈯 {{ webring(prev="#", webring="#", webringName="Anneau Aléatoire", next="#") }}
---
[^1]: Ceci est une note de bas de page. Elle devrait être mise en évidence si vous cliquez sur le chiffre en exposant correspondant.
[^2]: salut toi
[^3]: ceci est une autre note de bas de page.
[^4]: ceci est une note de bas de page très très longue pour tester si une note de bas de page très très longue pose problème ou non. J'espère vivement qu'il n'y a pas de problèmes, mais vous savez parfois les problèmes surgissent de nulle part.

View file

@ -61,6 +61,9 @@ Now a table:
random image of a dog[^4]
## Multilanguage support
- 🥣 [Open this page translated to french](https://anemone.pages.dev/blog/fr/overview-post)
## Webrings
- 🈯 {{ webring(prev="#", webring="#", webringName="Random Webring", next="#") }}

View file

@ -1,134 +1,153 @@
<!doctype html>
<html lang="{{ lang }}">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="robots" content="index, follow">
{% if page.title %}
{% set title = page.title %}
{% elif section.title %}
{% set title = section.title %}
{% elif config.title %}
{% set title = config.title %}
{% endif %}
{% if page.extra.author %}
{% set author = page.extra.author %}
{% elif section.extra.author %}
{% set author = section.extra.author %}
{% elif config.extra.author %}
{% set author = config.extra.author %}
{% endif %}
{% if page.description %}
{% set description = page.description | truncate(length=150) %}
{% elif section.description %}
{% set description = section.description | truncate(length=150) %}
{% elif config.description %}
{% set description = config.description | truncate(length=150) %}
{% endif %}
{% if page.extra.image %}
{% set image = get_url(path=page.extra.image, trailing_slash=false) %}
{% elif section.extra.image %}
{% set image = get_url(path=section.extra.image, trailing_slash=false) %}
{% elif config.extra.favicon %}
{% set image = get_url(path=config.extra.favicon, trailing_slash=false) %}
{% endif %}
{% if page.permalink %}
{% set url = page.permalink %}
{% elif section.permalink %}
{% set url = section.permalink %}
{% elif config.base_url %}
{% set url = config.base_url %}
{% endif %}
{% if title %}<title>{{ title }}</title>{% endif %}
{% block metatags %}
{% if title %}<meta name="title" content="{{ title }}">{% endif %}
{% if author %}<meta name="author" content="{{ author }}">{% endif %}
{% if description %}<meta name="description" content="{{ description }}">{% endif %}
<meta property="og:type" content="website">
<meta property="og:url" content="{{ url | safe }}">
{% if title %}<meta property="og:site_name" content="{{ config.title }}">{% endif %}
{% if title %}<meta property="og:title" content="{{ title }}">{% endif %}
{% if description %}<meta property="og:description" content="{{ description }}">{% endif %}
{% if image %}<meta property="og:image" content="{{ image }}">{% endif %}
{% set twitter_card = config.extra.twitter_card | default(value=true) %}
{% if twitter_card != false %}
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="{{ url | safe }}">
{% if title %}<meta property="twitter:title" content="{{ title }}">{% endif %}
{% if description %}<meta property="twitter:description" content="{{ description }}">{% endif %}
{% if image %}<meta property="twitter:image" content="{{ image }}">{% endif %}
{% endif %}
<link rel="canonical" href="{{ url | safe }}">
{% if image %}<link rel="shortcut icon" type="image/x-icon" href="{{ get_url(path=config.extra.favicon, trailing_slash=false) }}">{% endif %}
{% endblock metatags %}
{% if config.generate_feed %}
{% block feed %}
<link rel="alternate" type="application/atom+xml" title="RSS" href="{{ get_url(path="atom.xml", trailing_slash=false) }}">
{% endblock feed %}
{% endif %}
{% block css %}
<link rel="stylesheet" href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}"/>
{% endblock css %}
</head>
<body>
<div class="wrapper">
<header>
{% if config.extra.header_nav %}
<nav class="navBar">
{% for nav_item in config.extra.header_nav %}
<a href="{{ nav_item.url | safe }}" {% if nav_item.new_tab %}target="_blank" rel="noreferrer noopener"{% endif %}>{{ nav_item.name }}</a>
{% endfor %}
<div class="themeSwitch">
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"></button>
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"></button>
</div>
<script>
const setTheme=(theme)=>{document.documentElement.className=theme;localStorage.setItem('theme',theme)}
const getTheme=()=>{const theme=localStorage.getItem('theme');theme&&setTheme(theme)}
getTheme()
</script>
</nav>
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="robots" content="index, follow">
{% if page.title %}
{% set title = page.title %}
{% elif section.title %}
{% set title = section.title %}
{% elif config.title %}
{% set title = config.title %}
{% endif %}
{% if page.extra.author %}
{% set author = page.extra.author %}
{% elif section.extra.author %}
{% set author = section.extra.author %}
{% elif config.extra.author %}
{% set author = config.extra.author %}
{% endif %}
{% if page.description %}
{% set description = page.description | truncate(length=150) %}
{% elif section.description %}
{% set description = section.description | truncate(length=150) %}
{% elif config.description %}
{% set description = config.description | truncate(length=150) %}
{% endif %}
{% if page.extra.image %}
{% set image = get_url(path=page.extra.image, trailing_slash=false) %}
{% elif section.extra.image %}
{% set image = get_url(path=section.extra.image, trailing_slash=false) %}
{% elif config.extra.favicon %}
{% set image = get_url(path=config.extra.favicon, trailing_slash=false) %}
{% endif %}
{% if page.permalink %}
{% set url = page.permalink %}
{% elif section.permalink %}
{% set url = section.permalink %}
{% elif config.base_url %}
{% set url = config.base_url %}
{% endif %}
{% if title %}
<title>{{ title }}</title>
{% endif %}
{% block metatags %}
{% if title %}
<meta name="title" content="{{ title }}">
{% endif %}
{% if author %}
<meta name="author" content="{{ author }}">
{% endif %}
{% if description %}
<meta name="description" content="{{ description }}">
{% endif %}
<meta property="og:type" content="website">
<meta property="og:url" content="{{ url | safe }}">
{% if title %}
<meta property="og:site_name" content="{{ config.title }}">
{% endif %}
{% if title %}
<meta property="og:title" content="{{ title }}">
{% endif %}
{% if description %}
<meta property="og:description" content="{{ description }}">
{% endif %}
{% if image %}
<meta property="og:image" content="{{ image }}">
{% endif %}
{% set twitter_card = config.extra.twitter_card | default(value=true) %}
{% if twitter_card != false %}
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="{{ url | safe }}">
{% if title %}
<meta property="twitter:title" content="{{ title }}">
{% endif %}
{% if description %}
<meta property="twitter:description" content="{{ description }}">
{% endif %}
{% if image %}
<meta property="twitter:image" content="{{ image }}">
{% endif %}
{% endif %}
<link rel="canonical" href="{{ url | safe }}">
{% if image %}
<link rel="shortcut icon" type="image/x-icon" href="{{ get_url(path=config.extra.favicon, trailing_slash=false) }}">
{% endif %}
{% endblock metatags %}
{% if config.generate_feed %}
{% block feed %}
<link rel="alternate" type="application/atom+xml" title="RSS" href="{{ get_url(path="atom.xml", trailing_slash=false) }}">
{% endblock feed %}
{% endif %}
{% block css %}
<link rel="stylesheet" href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}"/>
{% endblock css %}
</head>
<body>
<div class="wrapper">
<header>
{% if config.extra.header_nav %}
<nav class="navBar">
{% for nav_item in config.extra.header_nav %}
{% set current_nav_item = nav_item[lang] %}
{% if current_nav_item and current_nav_item.name %}
<a href="{{ current_nav_item.url | safe }}" {% if current_nav_item.new_tab %}target="_blank" rel="noreferrer noopener"{% endif %}>{{ current_nav_item.name }}</a>
{% endif %}
{% endfor %}
{% block header %}{% endblock header %}
</header>
<div class="themeSwitch">
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"></button>
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"></button>
</div>
</nav>
{% endif %}
<main>
{% block content %}{% endblock content %}
</main>
<footer>
{% block footer %}{% endblock footer %}
<hr>
<div class=footContainer>
<div class="footLeft">
<p>Licensed under <a target="_blank" rel="noopener noreferrer" href="https://fr.wikipedia.org/wiki/Licence_MIT">MIT</a><br>
Built with <a target="_blank" rel="noopener noreferrer" href="https://www.getzola.org">Zola</a> using <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/anemone">anemone</a> theme &amp; <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/veqev">veqev</a> colors.<br></p>
</div>
<script>
const setTheme = (theme) => {
document.documentElement.className = theme;
localStorage.setItem('theme', theme);
}
const getTheme = () => {
const theme = localStorage.getItem('theme');
theme && setTheme(theme);
}
getTheme()
</script>
</header>
<div class="footRight">
<!-- Size 46x46 -->
<img class="footGif noStyle" loading="lazy" src="https://i.ibb.co/XYDpfcs/foot.gif" alt="footGif">
<a class="metaData" target="_blank" rel="noopener noreferrer" href="{{ get_url(path="atom.xml", trailing_slash=false) }}" title="Subscribe via RSS for updates.">RSS</a>
</div>
<main>
{% block content %}{% endblock content %}
</main>
</div>
</footer>
</div>
</body>
<footer>
{% block footer %}{% endblock footer %}
<hr>
<div class=footContainer>
<div class="footLeft">
<p>Licensed under <a target="_blank" rel="noopener noreferrer" href="https://fr.wikipedia.org/wiki/Licence_MIT">MIT</a><br>
Built with <a target="_blank" rel="noopener noreferrer" href="https://www.getzola.org">Zola</a> using <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/anemone">anemone</a> theme &amp; <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/veqev">veqev</a> colors.<br>
</p>
</div>
<div class="footRight">
<!-- Size 46x46 -->
<img class="footGif noStyle" loading="lazy" src="https://i.ibb.co/XYDpfcs/foot.gif" alt="footGif">
<a class="metaData" target="_blank" rel="noopener noreferrer" href="{{ get_url(path="atom.xml", trailing_slash=false) }}" title="Subscribe via RSS for updates.">RSS</a>
</div>
</div>
</footer>
</div>
</body>
</html>