diff options
| -rw-r--r-- | README.md | 10 | ||||
| -rw-r--r-- | assets/sass/_partial/_header.scss | 11 | ||||
| -rw-r--r-- | assets/sass/_partial/_language-selector.scss | 25 | ||||
| -rw-r--r-- | assets/sass/_partial/_slideout.scss | 4 | ||||
| -rw-r--r-- | assets/sass/main.scss | 1 | ||||
| -rw-r--r-- | exampleSite/config.toml | 3 | ||||
| -rw-r--r-- | layouts/partials/header.html | 4 | ||||
| -rw-r--r-- | layouts/partials/header/language-selector.html | 25 | ||||
| -rw-r--r-- | layouts/partials/slideout.html | 4 |
9 files changed, 83 insertions, 4 deletions
@@ -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 = '<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>' 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 @@ </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>
\ No newline at end of file +</nav> 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 @@ +<!-- + 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 }} 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 @@ </a> {{- end }} </ul> -</nav>
\ No newline at end of file + + {{ partial "header/language-selector.html" . }} +</nav> |