added multilanguage support

README.md

@@ -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 = [
+[[extra.header_nav]]
-  { name = "/home/", url = "/" },
+en = { name = "/home/", url = "/" }
-  { name = "/about/", url = "/about" },
+fr = { name = "/accueil/", url = "/fr" }
-  { name = "/journal/", url = "/journal" },
+
-  { name = "/blog/", url = "/blog" },
+[[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

config.toml

@@ -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 = [
+[[extra.header_nav]]
-  { name = "/home/", url = "/" },
+en = { name = "/home/", url = "/" }
-  { name = "/about/", url = "/about" },
+fr = { name = "/accueil/", url = "/fr" }
-  { name = "/journal/", url = "/journal" },
+
-  { name = "/blog/", url = "/blog" },
+[[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" }

content/_index.fr.md

@@ -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="#") }}

content/blog/2020-07-07-overview-post.fr.md

@@ -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.

content/blog/2020-07-07-overview-post.md

@@ -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="#") }}
 

templates/base.html

@@ -6,7 +6,6 @@
       <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 %}
@@ -14,7 +13,6 @@
       {% elif config.title %}
       {% set title = config.title %}
       {% endif %}
-
       {% if page.extra.author %}
       {% set author = page.extra.author %}
       {% elif section.extra.author %}
@@ -22,7 +20,6 @@
       {% elif config.extra.author %}
       {% set author = config.extra.author %}
       {% endif %}
-
       {% if page.description %}
       {% set description = page.description | truncate(length=150) %}
       {% elif section.description %}
@@ -30,7 +27,6 @@
       {% 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 %}
@@ -38,7 +34,6 @@
       {% 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 %}
@@ -46,31 +41,51 @@
       {% elif config.base_url %}
       {% set url = config.base_url %}
       {% endif %}
-
+      {% if title %}
-    {% if title %}<title>{{ title }}</title>{% endif %}
+      <title>{{ title }}</title>
+      {% endif %}
       {% block metatags %}
-    {% if title %}<meta name="title" content="{{ title }}">{% endif %}
+      {% if title %}
-    {% if author %}<meta name="author" content="{{ author }}">{% endif %}
+      <meta name="title" content="{{ title }}">
-    {% if description %}<meta name="description" content="{{ description }}">{% endif %}
+      {% 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 %}
-    {% if title %}<meta property="og:title" content="{{ title }}">{% endif %}
+      <meta property="og:site_name" content="{{ config.title }}">
-    {% if description %}<meta property="og:description" content="{{ description }}">{% endif %}
+      {% endif %}
-    {% if image %}<meta property="og:image" content="{{ image }}">{% 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 title %}
-    {% if description %}<meta property="twitter:description" content="{{ description }}">{% endif %}
+      <meta property="twitter:title" content="{{ title }}">
-    {% if image %}<meta property="twitter:image" content="{{ image }}">{% endif %}
+      {% 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 %}
+      {% 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 %}
@@ -81,31 +96,36 @@
       <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>
+               {% 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 %}
 
                <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>
             {% endif %}
 
-      {% block header %}{% endblock header %}
+            <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>
 
          <main>
@@ -118,15 +138,14 @@
             <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>
+                     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>