FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Translations and i18n (#60)

Browse source 
* Managing i18n

* Fix absolute path

* Config files

* Home link manage langage

* Fixing footer i18n

* Implemented i18n on newsletter

* Implemented two languages in example

* Removed old section directory

* Using yaml in data to organize home summary

* Fully working for old versions without i18n

* Integrating language menu CSS

* Fix language dropdown CSS

* Refactor translation codes

* Remove duplicate code

* Fix URL issues

* Move customMenus and other site related config into data section

* Fix error during language toggle

* Only show the available translation for the posts

* Handle navbar brand URL properly

* Fix responsiveness

Co-authored-by: Hugo MARTIN <hugo.martin.69@gmail.com>
Co-authored-by: hossainemruz <emruz@appscode.com>
This commit is contained in:
Hugo MARTIN 2020-10-03 05:59:28 +02:00 • committed by GitHub
parent 6c2cca0127
commit 46b21e028c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
56 changed files with 1116 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

19
layouts/partials/navigators/floating-lang-selector.html Normal file
View file

@ -0,0 +1,19 @@
{{ $pageURL:= .RelPermalink }}
{{ if .Site.IsMultiLingual }}
{{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
{{ end }}
<div class="dropdown languageSelector">
<a class="btn dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/16.png">
{{ .Site.Language.LanguageName }}
</a>
<div class="dropdown-menu" aria-labelledby="languageSelector">
{{ range .Translations }}
<a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/24.png">
{{ .Language.LanguageName }}
</a>
{{ end }}
</div>
</div>

19
layouts/partials/navigators/lang-selector-2.html Normal file
View file

@ -0,0 +1,19 @@
{{ $pageURL:= .RelPermalink }}
{{ if .Site.IsMultiLingual }}
{{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
{{ end }}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/16.png">
{{ .Site.Language.LanguageName }}
</a>
<div class="dropdown-menu" aria-labelledby="languageSelector">
{{ range .Translations }}
<a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/24.png">
{{ .Language.LanguageName }}
</a>
{{ end }}
</div>
</li>

14
layouts/partials/navigators/lang-selector.html Normal file
View file

@ -0,0 +1,14 @@
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/16.png">
{{ .Site.Language.LanguageName }}
</a>
<div class="dropdown-menu" aria-labelledby="languageSelector">
{{ range $.Site.Home.AllTranslations }}
<a class="dropdown-item nav-link languages-item" href="{{ .Permalink }}">
<img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/24.png">
{{ .Language.LanguageName }}
</a>
{{ end }}
</div>
</li>

30
layouts/partials/navigators/navbar-2.html
View file

@ -1,30 +1,34 @@
{{ $mainLogo:="assets/images/main-logo.png" }}
{{ $invertedLogo:="assets/images/inverted-logo.png" }}
{{ if .Site.Params.logo.main }}
{{ $mainLogo = .Site.Params.logo.main }}
{{ end }}
{{ if .Site.Params.logo.inverted }}
{{ $invertedLogo = .Site.Params.logo.inverted }}
{{ end }}
<nav class="navbar navbar-expand-xl top-navbar final-navbar shadow">
<div class="container">
{{ $mainLogo:="/assets/images/main-logo.png" }}
{{ $invertedLogo:="/assets/images/inverted-logo.png" }}
{{ if .Site.Params.logo.main }}
{{ $mainLogo = .Site.Params.logo.main }}
{{ end }}
{{ if .Site.Params.logo.inverted }}
{{ $invertedLogo = .Site.Params.logo.inverted }}
{{ end }}
<button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button" onclick="toggleSidebar()">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="{{ site.BaseURL }}">
<img src="{{ $mainLogo }}">
<a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
<img src="{{ $mainLogo | absURL }}">
{{- site.Title -}}
</a>
<button class="navbar-toggler navbar-light" id="toc-toggler" type="button" onclick="toggleTOC()">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="top-nav-items">
<div class="collapse navbar-collapse lang-selector" id="top-nav-items">
<ul class="navbar-nav ml-auto">
{{ if .IsTranslated }}
{{ partial "navigators/lang-selector-2.html" . }}
{{ end }}
</ul>
</div>
</div>
<!-- Store the logo information in a hidden img for the JS -->
<img src="{{ $mainLogo }}" class="d-none" id="main-logo">
<img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo">
<img src="{{ $mainLogo | absURL }}" class="d-none" id="main-logo">
<img src="{{ $invertedLogo | absURL }}" class="d-none" id="inverted-logo">
</nav>

43
layouts/partials/navigators/navbar.html
View file

@ -1,15 +1,21 @@
{{ $mainLogo:="assets/images/main-logo.png" }}
{{ $invertedLogo:="assets/images/inverted-logo.png" }}
{{ if .Site.Params.logo.main }}
{{ $mainLogo = .Site.Params.logo.main }}
{{ end }}
{{ if .Site.Params.logo.inverted }}
{{ $invertedLogo = .Site.Params.logo.inverted }}
{{ end }}
{{ $sections:= .Site.Data.sections }}
{{ if (index .Site.Data .Site.Language.Lang).sections }}
{{ $sections = (index .Site.Data .Site.Language.Lang).sections }}
{{ end }}
<nav class="navbar navbar-expand-xl top-navbar initial-navbar" id="top-navbar">
<div class="container">
{{ $mainLogo:="/assets/images/main-logo.png" }}
{{ $invertedLogo:="/assets/images/inverted-logo.png" }}
{{ if .Site.Params.logo.main }}
{{ $mainLogo = .Site.Params.logo.main }}
{{ end }}
{{ if .Site.Params.logo.inverted }}
{{ $invertedLogo = .Site.Params.logo.inverted }}
{{ end }}
<a class="navbar-brand" href="{{ .Site.BaseURL }}">
<img src="{{ $invertedLogo }}" id="logo">
<a class="navbar-brand" href="{{ .Site.BaseURL | relLangURL }}">
<img src="{{ $invertedLogo | absURL }}" id="logo">
{{- .Site.Title -}}
</a>
<button
@ -25,10 +31,10 @@
<div class="collapse navbar-collapse" id="top-nav-items">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
<a class="nav-link" href="#home">{{ i18n "home" }}</a>
</li>
{{- if .Site.Data.sections }}
{{- range sort .Site.Data.sections "section.weight" }}
{{ if $sections }}
{{ range sort $sections "section.weight" }}
{{ if and (.section.enable) (.section.showOnNavbar)}}
<li class="nav-item">
<a class="nav-link" href="#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
@ -47,18 +53,21 @@
{{ end }}
{{ if site.Params.enableBlogPost }}
<li class="nav-item">
<a class="nav-link" id="blog-link" href="/posts">Posts</a>
<a class="nav-link" id="blog-link" href="{{ "/post" | relLangURL }}">{{ i18n "posts" }}</a>
</li>
{{ end }}
{{ range site.Params.customMenus }}
{{ range (index .Site.Data .Site.Language.Lang).site.customMenus }}
<li class="nav-item">
<a class="nav-link" href="{{ .url }}">{{ .name }}</a>
</li>
{{ end }}
{{ if .IsTranslated }}
{{ partial "navigators/lang-selector.html" . }}
{{ end }}
</ul>
</div>
</div>
<!-- Store the logo information in a hidden img for the JS -->
<img src="{{ $mainLogo }}" class="d-none" id="main-logo">
<img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo">
<img src="{{ $mainLogo | absURL }}" class="d-none" id="main-logo">
<img src="{{ $invertedLogo | absURL }}" class="d-none" id="inverted-logo">
</nav>

4
layouts/partials/navigators/sidebar.html
View file

@ -9,7 +9,7 @@
{{ if .HasChildren }}
<!-- Add current entry -->
<li>
<i class="fas {{ $icon }}"></i><a class="{{$class}}" href="{{.URL}}">{{.Name}}</a>
<i class="fas {{ $icon }}"></i><a class="{{$class}}" href="{{ .URL }}">{{.Name}}</a>
<!-- Add sub-tree -->
<ul class="{{ $class }}">
{{ partial "navigators/sidebar.html" (dict "menus" .Children "ctx" $.ctx) }}
@ -17,6 +17,6 @@
</li>
{{ else }}
<!-- No sub-tree. So, only add current entry -->
<li><a class="{{$class}}" href="{{.URL}}">{{.Name}}</a></li>
<li><a class="{{$class}}" href="{{ .URL }}">{{.Name}}</a></li>
{{ end }}
{{ end }}