mirror of
https://git.adityakumar.xyz/hugo-theme-even.git
synced 2024-09-07 22:40:39 +00:00
feat(language-selector): Implement optional language selector (#298)
This commit is contained in:
parent
9d2f923023
commit
fcf2021958
10
README.md
10
README.md
|
@ -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.
|
||||
|
||||
### 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
|
||||
|
||||
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.
|
||||
|
|
|
@ -3,17 +3,24 @@
|
|||
// ==============================
|
||||
|
||||
.header {
|
||||
@include clearfix;
|
||||
@include clearfix;
|
||||
padding: $header-padding;
|
||||
|
||||
@import '_header/logo';
|
||||
@import '_header/menu';
|
||||
}
|
||||
|
||||
.language-selector {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
@include max-screen() {
|
||||
.header {
|
||||
padding: 50px 0 0;
|
||||
text-align: center;
|
||||
|
||||
.language-selector {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
25
assets/sass/_partial/_language-selector.scss
Normal file
25
assets/sass/_partial/_language-selector.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -13,6 +13,10 @@
|
|||
-webkit-overflow-scrolling: touch;
|
||||
z-index: 0;
|
||||
display: none;
|
||||
|
||||
.language-selector {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.slideout-panel {
|
||||
|
|
|
@ -16,3 +16,4 @@
|
|||
@import "_partial/mobile";
|
||||
@import "_partial/back-to-top";
|
||||
@import "_partial/404";
|
||||
@import "_partial/language-selector";
|
||||
|
|
|
@ -111,6 +111,9 @@ copyright = "" # default: author.name ↓ # 默认为下面配
|
|||
|
||||
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,需自行定义
|
||||
enable = true
|
||||
jquery = '<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>'
|
||||
|
|
|
@ -8,6 +8,8 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
{{ partial "header/language-selector.html" . }}
|
||||
|
||||
<nav class="site-navbar">
|
||||
<ul id="menu" class="menu">
|
||||
{{ range .Site.Menus.main -}}
|
||||
|
@ -16,4 +18,4 @@
|
|||
</li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
</nav>
|
||||
</nav>
|
||||
|
|
25
layouts/partials/header/language-selector.html
Normal file
25
layouts/partials/header/language-selector.html
Normal 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 }}
|
|
@ -22,4 +22,6 @@
|
|||
</a>
|
||||
{{- end }}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{{ partial "header/language-selector.html" . }}
|
||||
</nav>
|
||||
|
|
Loading…
Reference in a new issue