layouts/partials/navbar-lang-selector.html

{{/* Link directly to documentation etc., if possible. */}}
{{ $languages := (dict "中文" "/zh-cn/" "EN" "/en/") }}
{{ $langPage := cond (gt (len .Translations) 0) . .Site.Home }}
{{ $currentLangCode := "中文" }} <!-- 默认语言 -->
{{ if $langPage.Language }}
{{ $currentLangCode = $langPage.Language.LanguageName }} <!-- 获取当前语言 -->
{{ end }}


<!-- {{.RelPermalink}} -->
<!-- 当前选中的 -->
<!-- {{$langPage.Language.LanguageName}} 
	{{ $firstTranslation := index $langPage.Translations 0 }} -->
<!-- 未选中的 -->
<!-- {{$firstTranslation.Language.LanguageName}} -->


<div class="nav nav-tabs languagetab-contain " id="languageTabs" role="tablist">
  {{ range $langCode, $langURL := $languages }}
  <a class="languagetab-btn nav-item nav-link {{ if eq $langCode $currentLangCode }}active{{ end }}"
    href="{{ $langURL }}" role="tab" aria-selected="{{ if eq $langCode $currentLangCode }}true{{ else }}false{{ end }}">
    {{ $langCode }}
  </a>
  {{ end }}
</div>
<style>
  .languagetab-contain {
    width: 135px;
    height: 40px;
    border-radius: 32px;
    background-color: #EBECEF;
    padding: 3px 6px;
  }


  .languagetab-btn {
    width: 60px !important;
    height: 32px !important;
    border-radius: 32px !important;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px !important;
  }

  .languagetab-btn.active {
    background-color: #DDDEE4 !important;
    border: 0px;
  }
</style>