From fcf20219586e4c66d703e249aac5bb6a42a4320d Mon Sep 17 00:00:00 2001 From: Egor Lynko Date: Sun, 17 Jan 2021 17:32:33 +0300 Subject: feat(language-selector): Implement optional language selector (#298) --- README.md | 10 ++++++++++ assets/sass/_partial/_header.scss | 11 +++++++++-- assets/sass/_partial/_language-selector.scss | 25 +++++++++++++++++++++++++ assets/sass/_partial/_slideout.scss | 4 ++++ assets/sass/main.scss | 1 + exampleSite/config.toml | 3 +++ layouts/partials/header.html | 4 +++- layouts/partials/header/language-selector.html | 25 +++++++++++++++++++++++++ layouts/partials/slideout.html | 4 +++- 9 files changed, 83 insertions(+), 4 deletions(-) create mode 100644 assets/sass/_partial/_language-selector.scss create mode 100644 layouts/partials/header/language-selector.html diff --git a/README.md b/README.md index 9a3648b..979287a 100644 --- a/README.md +++ b/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. diff --git a/assets/sass/_partial/_header.scss b/assets/sass/_partial/_header.scss index d81f17c..9c4de56 100644 --- a/assets/sass/_partial/_header.scss +++ b/assets/sass/_partial/_header.scss @@ -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; + } } } diff --git a/assets/sass/_partial/_language-selector.scss b/assets/sass/_partial/_language-selector.scss new file mode 100644 index 0000000..7640e61 --- /dev/null +++ b/assets/sass/_partial/_language-selector.scss @@ -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; + } + } + } + } +} diff --git a/assets/sass/_partial/_slideout.scss b/assets/sass/_partial/_slideout.scss index 2dc757d..58891fd 100644 --- a/assets/sass/_partial/_slideout.scss +++ b/assets/sass/_partial/_slideout.scss @@ -13,6 +13,10 @@ -webkit-overflow-scrolling: touch; z-index: 0; display: none; + + .language-selector { + padding-left: 30px; + } } .slideout-panel { diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 5bdac04..2b843f7 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -16,3 +16,4 @@ @import "_partial/mobile"; @import "_partial/back-to-top"; @import "_partial/404"; +@import "_partial/language-selector"; diff --git a/exampleSite/config.toml b/exampleSite/config.toml index a9e84ab..05a3998 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -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 = '' diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 3592e88..24d5b37 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -8,6 +8,8 @@ +{{ partial "header/language-selector.html" . }} + \ No newline at end of file + diff --git a/layouts/partials/header/language-selector.html b/layouts/partials/header/language-selector.html new file mode 100644 index 0000000..e28650e --- /dev/null +++ b/layouts/partials/header/language-selector.html @@ -0,0 +1,25 @@ + +{{ if (and (.Site.IsMultiLingual) ($.Site.Params.showLanguageSelector)) }} +
+ +
+{{ end }} diff --git a/layouts/partials/slideout.html b/layouts/partials/slideout.html index 42ed13e..da0885c 100644 --- a/layouts/partials/slideout.html +++ b/layouts/partials/slideout.html @@ -22,4 +22,6 @@ {{- end }} - \ No newline at end of file + + {{ partial "header/language-selector.html" . }} + -- cgit v1.2.3