Browse Source

feat(language-switch): 语言切换

master
peijunlei 2 weeks ago
parent
commit
d3ce819a8d
  1. 5
      public/themes/dist_static/static/css/common.css
  2. 57
      public/themes/dist_static/static/js/common.js
  3. 19
      public/themes/website/1/zh/demo/components/header.html

5
public/themes/dist_static/static/css/common.css

@ -1196,7 +1196,10 @@ body {
font-weight: 400; font-weight: 400;
line-height: 1; line-height: 1;
white-space: nowrap; white-space: nowrap;
}.site-header__lang-active {
}.site-header__lang-opt {
color: inherit;
}
.site-header__lang-active {
color: rgb(175, 181, 185); color: rgb(175, 181, 185);
}.site-header__search { }.site-header__search {
display: flex; display: flex;

57
public/themes/dist_static/static/js/common.js

@ -102,6 +102,63 @@ $(function() {
$item.attr("data-expanded", String(!isExpanded)); $item.attr("data-expanded", String(!isExpanded));
$(this).attr("aria-expanded", String(!isExpanded)); $(this).attr("aria-expanded", String(!isExpanded));
}); });
// 语言切换:默认语言无前缀,其它语言用 /{lang}/ 前缀(与 getLang 一致)
(function initLangSwitch() {
const ALLOWED = ["zh", "tc", "en", "ja", "de", "fa", "id", "th", "ru"];
const defaultLang =
document.querySelector(".site-header__lang")?.getAttribute("data-lang-default") || "zh";
const getPathLang = () => {
const seg = location.pathname.replace(/^\//, "").split("/")[0] || "";
return ALLOWED.includes(seg) ? seg : defaultLang;
};
const buildLangUrl = (targetLang) => {
const parts = location.pathname.replace(/^\//, "").split("/").filter(Boolean);
if (parts.length && ALLOWED.includes(parts[0])) parts.shift();
const rest = parts.join("/");
let path;
if (!targetLang || targetLang === defaultLang) {
path = rest ? `/${rest}` : "/";
} else {
path = rest ? `/${targetLang}/${rest}` : `/${targetLang}/`;
}
return path + location.search + location.hash;
};
const goLang = (targetLang) => {
if (!targetLang) return;
const cur = getPathLang();
const uiCur = cur === "en" ? "en" : "zh";
if (targetLang === uiCur || targetLang === cur) return;
location.href = buildLangUrl(targetLang);
};
const syncActive = () => {
const uiLang = getPathLang() === "en" ? "en" : "zh";
$(".site-header__lang [data-lang]").removeClass("site-header__lang-active");
$(`.site-header__lang [data-lang="${uiLang}"]`).addClass("site-header__lang-active");
};
$(document).on("click", ".site-header__lang [data-lang]", function(e) {
e.preventDefault();
e.stopPropagation();
goLang(this.getAttribute("data-lang"));
});
$(document).on("click", ".site-header__lang", function(e) {
if ($(e.target).closest("[data-lang]").length) return;
goLang(getPathLang() === "en" ? "zh" : "en");
});
$(document).on("click", ".site-header__extra-btn.lang, .mask-header__icon-btn.lang", function(e) {
e.preventDefault();
goLang(getPathLang() === "en" ? "zh" : "en");
});
syncActive();
})();
// $(".section-contact-form").on("submit", function(e) { // $(".section-contact-form").on("submit", function(e) {
// e.preventDefault(); // e.preventDefault();
// const $form = $(this); // const $form = $(this);

19
public/themes/website/1/zh/demo/components/header.html

@ -120,7 +120,18 @@
</span> </span>
</a> </a>
</div> </div>
<button type="button" class="site-header__lang" aria-label="切换语言">
{php}
$hc_lang = function_exists('getLang') ? getLang() : 'zh';
$hc_default_lang = config('lang.default_lang') ?: 'zh';
$hc_lang_ui = ($hc_lang === 'en') ? 'en' : 'zh';
{/php}
<button
type="button"
class="site-header__lang"
aria-label="切换语言"
data-lang-default="{$hc_default_lang}"
data-lang-current="{$hc_lang}"
>
<span class="site-header__icon" aria-hidden="true"> <span class="site-header__icon" aria-hidden="true">
<svg <svg
viewBox="0 0 16 16" viewBox="0 0 16 16"
@ -139,9 +150,9 @@
/> />
</svg> </svg>
</span> </span>
<span>EN</span>
<span class="site-header__lang-opt{if $hc_lang_ui=='en'} site-header__lang-active{/if}" data-lang="en">EN</span>
<span>/</span> <span>/</span>
<span class="site-header__lang-active">CN</span>
<span class="site-header__lang-opt{if $hc_lang_ui=='zh'} site-header__lang-active{/if}" data-lang="zh">CN</span>
</button> </button>
</div> </div>
<div class="site-header__main"> <div class="site-header__main">
@ -499,7 +510,7 @@
<a class="s-btn s-btn--primary site-header__cta" href="/contact.html">联系我们</a> <a class="s-btn s-btn--primary site-header__cta" href="/contact.html">联系我们</a>
</div> </div>
<div class="site-header__extras"> <div class="site-header__extras">
<button class="site-header__extra-btn lang" type="submit" aria-label="语言">
<button class="site-header__extra-btn lang" type="button" aria-label="切换语言">
<svg <svg
viewBox="0 0 32 32" viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

Loading…
Cancel
Save