feat: add multilingual navbar
This commit is contained in:
parent
c76672d234
commit
dce42dc771
64
README.md
64
README.md
|
@ -21,15 +21,64 @@ Go into your sites directory, and type `zola serve`. You should see your new sit
|
||||||
## Deployment
|
## Deployment
|
||||||
[Zola](https://www.getzola.org) already has great documentation for deploying to [Netlify](https://www.getzola.org/documentation/deployment/netlify/) or [Github Pages](https://www.getzola.org/documentation/deployment/github-pages/). I won't bore you with a regurgitated explanation.
|
[Zola](https://www.getzola.org) already has great documentation for deploying to [Netlify](https://www.getzola.org/documentation/deployment/netlify/) or [Github Pages](https://www.getzola.org/documentation/deployment/github-pages/). I won't bore you with a regurgitated explanation.
|
||||||
|
|
||||||
## Theme Options
|
## Multilingual Navbar
|
||||||
```toml
|
|
||||||
|
|
||||||
|
If you want to have a multilingual navbar on your blog, you must add your new code language in the [languages](https://www.getzola.org/documentation/content/multilingual/#configuration) array in the `config.toml` file.
|
||||||
|
|
||||||
|
**NOTE**: Don't add you default language to this array
|
||||||
|
|
||||||
|
```toml
|
||||||
|
languages = [
|
||||||
|
{code = "fr"},
|
||||||
|
{code = "es"},
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
And then create and array of nav item for each language:
|
||||||
|
|
||||||
|
**NOTE**: Include your default language in this array
|
||||||
|
|
||||||
|
```toml
|
||||||
navbar_items = [
|
navbar_items = [
|
||||||
{ url = "$BASE_URL/", name = "Home" },
|
{ code = "en", nav_items = [
|
||||||
{ url = "$BASE_URL/posts", name = "Posts" },
|
{ url = "$BASE_URL/", name = "Home" },
|
||||||
{ url = "$BASE_URL/docs", name = "Docs" },
|
{ url = "$BASE_URL/posts", name = "Posts" },
|
||||||
{ url = "$BASE_URL/tags", name = "Tags" },
|
{ url = "$BASE_URL/docs", name = "Docs" },
|
||||||
{ url = "$BASE_URL/categories", name = "Categories" },
|
{ url = "$BASE_URL/tags", name = "Tags" },
|
||||||
|
{ url = "$BASE_URL/categories", name = "Categories" },
|
||||||
|
]},
|
||||||
|
{ code = "fr", nav_items = [
|
||||||
|
{ url = "$BASE_URL/", name = "Connexion" },
|
||||||
|
]},
|
||||||
|
{ code = "es", nav_items = [
|
||||||
|
{ url = "$BASE_URL/", name = "Publicationes" },
|
||||||
|
{ url = "$BASE_URL/", name = "Registrar" },
|
||||||
|
]}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
en:
|
||||||
|
|
||||||
|
![DeepThought](./screenshot_navbar_en.png)
|
||||||
|
|
||||||
|
fr:
|
||||||
|
|
||||||
|
![DeepThought](./screenshot_navbar_fr.png)
|
||||||
|
|
||||||
|
es:
|
||||||
|
|
||||||
|
![DeepThought](./screenshot_navbar_es.png)
|
||||||
|
## Theme Options
|
||||||
|
|
||||||
|
```toml
|
||||||
|
navbar_items = [
|
||||||
|
{ code = "en", nav_items = [
|
||||||
|
{ url = "$BASE_URL/", name = "Home" },
|
||||||
|
{ url = "$BASE_URL/posts", name = "Posts" },
|
||||||
|
{ url = "$BASE_URL/docs", name = "Docs" },
|
||||||
|
{ url = "$BASE_URL/tags", name = "Tags" },
|
||||||
|
{ url = "$BASE_URL/categories", name = "Categories" },
|
||||||
|
]}
|
||||||
]
|
]
|
||||||
|
|
||||||
# Add links to favicon, you can use https://realfavicongenerator.net/ to generate favicon for your site
|
# Add links to favicon, you can use https://realfavicongenerator.net/ to generate favicon for your site
|
||||||
|
@ -115,3 +164,4 @@ katex.auto_render = true
|
||||||
- [x] Categories
|
- [x] Categories
|
||||||
- [x] Social Links
|
- [x] Social Links
|
||||||
- [x] Post Sharing
|
- [x] Post Sharing
|
||||||
|
- [x] Multilingual Navbar
|
||||||
|
|
14
config.toml
14
config.toml
|
@ -27,14 +27,14 @@ anchors = "on"
|
||||||
[translations]
|
[translations]
|
||||||
|
|
||||||
[extra]
|
[extra]
|
||||||
|
|
||||||
|
|
||||||
navbar_items = [
|
navbar_items = [
|
||||||
{ url = "$BASE_URL/", name = "Home" },
|
{ code = "en", nav_items = [
|
||||||
{ url = "$BASE_URL/posts", name = "Posts" },
|
{ url = "$BASE_URL/", name = "Home" },
|
||||||
{ url = "$BASE_URL/docs", name = "Docs" },
|
{ url = "$BASE_URL/posts", name = "Posts" },
|
||||||
{ url = "$BASE_URL/tags", name = "Tags" },
|
{ url = "$BASE_URL/docs", name = "Docs" },
|
||||||
{ url = "$BASE_URL/categories", name = "Categories" },
|
{ url = "$BASE_URL/tags", name = "Tags" },
|
||||||
|
{ url = "$BASE_URL/categories", name = "Categories" },
|
||||||
|
]}
|
||||||
]
|
]
|
||||||
|
|
||||||
[extra.favicon]
|
[extra.favicon]
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
After Width: | Height: | Size: 4.5 KiB |
|
@ -92,9 +92,13 @@
|
||||||
<div class="navbar-menu" id="navMenu">
|
<div class="navbar-menu" id="navMenu">
|
||||||
<div class="navbar-end has-text-centered">
|
<div class="navbar-end has-text-centered">
|
||||||
{% for item in config.extra.navbar_items %}
|
{% for item in config.extra.navbar_items %}
|
||||||
<a class="navbar-item" href='{{ item.url | replace(from='$BASE_URL', to=config.base_url) }}'>
|
{% if lang == item.code %}
|
||||||
{{ item.name }}
|
{% for nav in item.nav_items %}
|
||||||
</a>
|
<a class="navbar-item" href='{{ nav.url | replace(from='$BASE_URL', to=config.base_url) }}'>
|
||||||
|
{{ nav.name }}
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
<a class="navbar-item" id="nav-search" title="Search" data-target="#search-modal">
|
<a class="navbar-item" id="nav-search" title="Search" data-target="#search-modal">
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
|
|
Loading…
Reference in New Issue