From 686c88ee9363cb9f06686ba57f6f2d7c5c4aad7d Mon Sep 17 00:00:00 2001 From: Adrian Winterstein Date: Wed, 4 Dec 2024 13:08:57 +0100 Subject: [PATCH] Use internal Zola translation feature and documented usage of translations --- README.md | 59 +++++++++++++++++++++++++++---- templates/layout.html | 72 ++++++++++---------------------------- templates/macros.html | 29 +++++++++------ templates/skills/list.html | 12 +++---- theme.toml | 47 +++++-------------------- 5 files changed, 104 insertions(+), 115 deletions(-) diff --git a/README.md b/README.md index 70b4072..0765a7e 100644 --- a/README.md +++ b/README.md @@ -9,17 +9,16 @@ Check out the [live demo of the example project](https://awinterstein.github.io/ ## Features - Project types and skills taxonomies -- Dark / light modes (with syntax highlighting depending on selected theme) -- Customizable navbar links +- Automatically selected dark / light modes (with syntax highlighting depending the mode) - Search functionality supporting `Meta` + `K` shortcut - Social links (github, gitlab, twitter, linkedin, email) - Pagination -- Sidemenu menu with sections links -- Table of content (2 levels and currently viewed part highlighted) -- Multilingue +- Multilingual - Error 404 page - Mobile responsive - Favicon +- Customizable navbar links +- Customizable footer ## Quick Start @@ -44,7 +43,7 @@ theme = "project-portfolio" # The site theme to use. Create the files `projects.md` and `skills.md` in your `content` directory that are used to show the "Projects" and "Skills" [taxonomies](https://www.getzola.org/documentation/content/taxonomies/). They both need a title and can optionally get a descriptive text that will be shown above the terms of the taxonomy. See the following `projects.md` file as an example: -```toml +```markdown +++ title = "Projects" +++ @@ -67,8 +66,11 @@ The `skills.md` file can be created the same way. The corresponding page will ju Finally, create the first project page in the `content` directory: -```toml +```markdown +++ +``` + +```toml title = "Project Title" description = "Here is a short description of the project." date = 2022-05-31 # The date when the project finished @@ -81,6 +83,9 @@ top_project = true # Optional parameter to show the project on the projects over [taxonomies] projects=["Consumer"] # The category of the project (could be industry, type etc.) skills=["Thinking", "Hype Technology"] # The skills & technologies used for the project +``` + +```markdown +++ The content of the project description page follows here. @@ -103,6 +108,16 @@ taxonomies = [ {name = "projects", paginate_by = 5, feed = true}, {name = "skills", paginate_by = 5, feed = true}, ] + +[translations] +language_symbol = "🇬🇧" +home = "Home" +projects = "Projects" +skills = "Skills" +read_more = "Read More" +skills_technologies = "Skills & Technologies" +main_skills = "Main Skills" +other_skills = "Additional Skills" ``` This would, however, lead to an empty index page. The `config.toml` can be extended by the following configuration parameters for the index page: @@ -152,3 +167,33 @@ To overwrite the default footer (copyright notice), extend the `layout.html` tem Here is my own footer with a link. {% endblock %} ``` + +## Multiple Languages + +To enable multilingual support, add the following to the `config.toml` file (adapted to the additional language that you want to support): + +```toml +[languages.de] +title = "Projekt-Portfolio" +taxonomies = [ + {name = "projects", paginate_by = 5, feed = true}, + {name = "skills", paginate_by = 5, feed = true}, +] + +[languages.de.translations] +language_symbol = "🇩🇪" +home = "Home" +projects = "Projekte" +skills = "Qualifikationen" +read_more = "Weiterlesen" +skills_technologies = "Qualifikationen & Technologien" +main_skills = "Top-Fähigkeiten" +other_skills = "Weitere Fähigkeiten" + +[extra] +enable_multilingual = true +``` + +For the language switching of the theme to work best, it is recommended not to change the names of the taxonomies and to also keep the filenames for all pages of the site the same in all languages. Right now, the theme only supports websites with up to two languages. The default language and one additional language. + +Proceed to add translated markdown files. \ No newline at end of file diff --git a/templates/layout.html b/templates/layout.html index ae3f3c1..29854f7 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -1,43 +1,25 @@ +{% import "macros.html" as macros -%} - - + - {% if config.extra.favicon.webmanifest %} - - {% endif %} - {% if config.extra.favicon.favicon_16x16 %} - - {% endif %} - {% if config.extra.favicon.favicon_32x32 %} - - {% endif %} - {% if config.extra.favicon.android_chrome_512 %} - - {% endif %} - {% if config.extra.favicon.android_chrome_192 %} - - {% endif %} - {% if config.extra.favicon.apple_touch_icon %} - - {% endif %} - {% if config.extra.favicon.apple_touch_icon %} - - {% endif %} + {%- if config.extra.favicon.webmanifest %}{% endif %} + {% if config.extra.favicon.favicon_16x16 %}{% endif %} + {% if config.extra.favicon.favicon_32x32 %}{% endif %} + {% if config.extra.favicon.android_chrome_512 %}{% endif %} + {% if config.extra.favicon.android_chrome_192 %}{% endif %} + {% if config.extra.favicon.apple_touch_icon %}{% endif %} + {% if config.extra.favicon.apple_touch_icon %}{% endif %} - - {% block title %} - {{ config.title }} - {% endblock title %} - + {% block title %}{{ config.title }}{% endblock title %} @@ -79,20 +61,9 @@ +{% endmacro %} + +{% macro navbar_button(url, text) %} +{%if lang == config.default_language %}{% set language_url_part = '' %}{% else %}{% set language_url_part = lang %}{% endif %} {# Empty for default language and language for others. #} +{{ text }} {% endmacro %} \ No newline at end of file diff --git a/templates/skills/list.html b/templates/skills/list.html index acbac53..631f486 100644 --- a/templates/skills/list.html +++ b/templates/skills/list.html @@ -3,18 +3,18 @@ {% block content %} -{% set page = get_page(path="skills.md", lang=lang) %} +{%- set page = get_page(path="skills.md", lang=lang) -%}

{{ page.title }}

{{ page.content | safe }}
- {% if config.extra.skills.main_skills_threshold %} - {% if config.extra.skills.main_skills_heading[lang] %}

{{ config.extra.skills.main_skills_heading[lang] }}

{% endif %} - {{ macros::terms_list_skills_main(terms=terms, threshold=config.extra.skills.main_skills_threshold) }} + {%- if config.extra.main_skills_threshold -%} +

{{ trans(key="main_skills", lang=lang) }}

+ {{ macros::terms_list_skills_main(terms=terms, threshold=config.extra.main_skills_threshold) }} - {% if config.extra.skills.other_skills_heading[lang] %}

{{ config.extra.skills.other_skills_heading[lang] }}

{% endif %} - {{ macros::terms_list_skills_other(terms=terms, threshold=config.extra.skills.main_skills_threshold) }} +

{{ trans(key="other_skills", lang=lang) }}

+ {{ macros::terms_list_skills_other(terms=terms, threshold=config.extra.main_skills_threshold) }} {% else %} {{ macros::terms_list_skills(terms=terms) }} {% endif %} diff --git a/theme.toml b/theme.toml index c8267bc..8d52d72 100644 --- a/theme.toml +++ b/theme.toml @@ -15,32 +15,9 @@ homepage = "https://www.winterstein.biz" # Use snake_casing to be consistent with the rest of Zola [extra] enable_search = false -enable_multilingue = false +enable_multilingual = false -[extra.languages.en] -symbol = "🇬🇧" - -[extra.languages.de] -symbol = "🇩🇪" - -[extra.languages.fr] -symbol = "🇫🇷" - - -[extra.navbar] -title = "Project Portfolio" -items = [ - { lang = "en", links = [ - { url = "", name = "Home" }, - { url = "projects", name = "Projects" }, - { url = "skills", name = "Skills" }, - ] }, - { lang = "de", links = [ - { url = "de", name = "Home" }, - { url = "de/projects", name = "Projekte" }, - { url = "de/skills", name = "Qualifikationen" }, - ] }, -] +#main_skills_threshold = 5 # Set this variable to show all skills with at least n projects as main skills [extra.sidebar] #items = [ @@ -72,16 +49,10 @@ telegram = "" email = "" [extra.favicon] -favicon = "/icons/favicon.ico" -favicon_16x16 = "/icons/favicon-16x16.png" -favicon_32x32 = "/icons/favicon-32x32.png" -apple_touch_icon = "/icons/apple-touch-icon.png" -android_chrome_512 = "/icons/android-chrome-512x512.png" -android_chrome_192 = "/icons/android-chrome-192x192.png" -manifest = "/icons/site.webmanifest" - -# Configuration parameters for the skills taxonomy overview page -[extra.skills] -#main_skills_threshold = 5 # Set this variable to show all skills with at least n projects as main skills -#main_skills_heading = { en = "Main Skills", de = "Top-Fähigkeiten" } # The heading for the main skills list (only relevant, if main_skills_threshold is set) -#other_skills_heading = { en = "Additional Skills", de = "Weitere Fähigkeiten" } # The heading for the list of the other skills (only relevant, if main_skills_threshold is set) \ No newline at end of file +#favicon = "/icons/favicon.ico" +#favicon_16x16 = "/icons/favicon-16x16.png" +#favicon_32x32 = "/icons/favicon-32x32.png" +#apple_touch_icon = "/icons/apple-touch-icon.png" +#android_chrome_512 = "/icons/android-chrome-512x512.png" +#android_chrome_192 = "/icons/android-chrome-192x192.png" +#manifest = "/icons/site.webmanifest"