feat(language-selector): Implement optional language selector (#298)

This commit is contained in:
Egor Lynko 2021-01-17 17:32:33 +03:00 committed by GitHub
parent 9d2f923023
commit fcf2021958
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 83 additions and 4 deletions

View file

@ -41,6 +41,16 @@ Can also support any other languages as well. For example, to support german, cr
P.S. In multilingual mode, the language which currently being used to render the website will be used. P.S. In multilingual mode, the language which currently being used to render the website will be used.
### Language selector
It is possible to enable language selector for multilingual site. It will be displayed in the header or in the slide menu.
To enable it, set `showLanguageSelector` parameter to `true`.
```toml
showLanguageSelector = true
```
## Favicon ## Favicon
In order to customize the favicon you need to place **all** the following files in the `static` folder at the root of your site, which will overwrite those files in the [`themes/even/static/`](https://github.com/olOwOlo/hugo-theme-even/tree/master/static) folder. In order to customize the favicon you need to place **all** the following files in the `static` folder at the root of your site, which will overwrite those files in the [`themes/even/static/`](https://github.com/olOwOlo/hugo-theme-even/tree/master/static) folder.

View file

@ -3,17 +3,24 @@
// ============================== // ==============================
.header { .header {
@include clearfix; @include clearfix;
padding: $header-padding; padding: $header-padding;
@import '_header/logo'; @import '_header/logo';
@import '_header/menu'; @import '_header/menu';
}
.language-selector {
float: right;
}
}
@include max-screen() { @include max-screen() {
.header { .header {
padding: 50px 0 0; padding: 50px 0 0;
text-align: center; text-align: center;
.language-selector {
display: none;
}
} }
} }

View file

@ -0,0 +1,25 @@
.language-selector {
width: max-content;
.languages-list {
padding: 0;
background: darken($deputy-color, 3%);
.language-item {
display: inline-block;
list-style-type: none;
text-transform: uppercase;
font-family: $global-serif-font-family;
font-size: 18px;
padding: 0 10px;
&.active {
background: $theme-color;
> a {
color: #fff;
}
}
}
}
}

View file

@ -13,6 +13,10 @@
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
z-index: 0; z-index: 0;
display: none; display: none;
.language-selector {
padding-left: 30px;
}
} }
.slideout-panel { .slideout-panel {

View file

@ -16,3 +16,4 @@
@import "_partial/mobile"; @import "_partial/mobile";
@import "_partial/back-to-top"; @import "_partial/back-to-top";
@import "_partial/404"; @import "_partial/404";
@import "_partial/language-selector";

View file

@ -111,6 +111,9 @@ copyright = "" # default: author.name ↓ # 默认为下面配
uglyURLs = false # please keep same with uglyurls setting uglyURLs = false # please keep same with uglyurls setting
# Show language selector for multilingual site.
showLanguageSelector = false
[params.publicCDN] # load these files from public cdn # 启用公共CDN需自行定义 [params.publicCDN] # load these files from public cdn # 启用公共CDN需自行定义
enable = true enable = true
jquery = '<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>' jquery = '<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>'

View file

@ -8,6 +8,8 @@
</a> </a>
</div> </div>
{{ partial "header/language-selector.html" . }}
<nav class="site-navbar"> <nav class="site-navbar">
<ul id="menu" class="menu"> <ul id="menu" class="menu">
{{ range .Site.Menus.main -}} {{ range .Site.Menus.main -}}
@ -16,4 +18,4 @@
</li> </li>
{{- end }} {{- end }}
</ul> </ul>
</nav> </nav>

View file

@ -0,0 +1,25 @@
<!--
Language selector.
If current page has version in another language, language link will lead
to the translated page. If not, the link will be to the home page of the site
with specified language.
-->
{{ if (and (.Site.IsMultiLingual) ($.Site.Params.showLanguageSelector)) }}
<div class="language-selector">
<ul class="languages-list">
{{ range $homeTranslation := .Site.Home.AllTranslations }}
{{ $active := eq $homeTranslation.Language $.Site.Language }}
{{ $pageTranslation := (index (where $.Page.AllTranslations "Language.Lang" "eq" $homeTranslation.Language.Lang) 0) }}
<li class="language-item {{if $active}}active{{end}}">
{{ with $pageTranslation }}
<a href="{{ .Permalink }}">{{ .Language.Lang }}</a>
{{ else }}
<a href="{{ $homeTranslation.Permalink }}">{{ .Language.Lang }}</a>
{{ end }}
</li>
{{ end }}
</ul>
</div>
{{ end }}

View file

@ -22,4 +22,6 @@
</a> </a>
{{- end }} {{- end }}
</ul> </ul>
</nav>
{{ partial "header/language-selector.html" . }}
</nav>