为本站添加多语言实时翻译服务
为本站开启即时多语言的自动翻译功能。虽然是机翻,准确性可能不足,但基本能满足阅读需求。语言切换选择框悬浮于页面右上方,选择语言后,当前浏览全站实时翻译为目标语言。
效果
代码
<style>
.language-switcher-minimal {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
width: 45px;
height: 45px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
overflow: hidden;
}
.language-switcher-minimal .main-button {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.language-switcher-minimal .main-button img {
width: 40px;
height: 40px;
display: block;
}
.language-switcher-minimal > a:not(.main-button) {
display: none;
padding: 4px 10px;
color: #333;
text-decoration: none;
font-size: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.language-switcher-minimal:hover {
width: auto;
height: auto;
background: rgba(200, 200, 200, 0.3);
}
.language-switcher-minimal:hover > a:not(.main-button) {
display: flex;
align-items: center;
gap: 8px;
}
.language-switcher-minimal > a:not(.main-button) img {
width: 20px;
height: 20px;
}
.language-switcher-minimal > a:not(.main-button):hover,
.language-switcher-minimal > a:not(.main-button).active {
background: rgba(13, 148, 136, 0.3);
}
</style>
<div class="language-switcher-minimal">
<a class="main-button"><img src="/wp-content/uploads/T/lan.png" alt="Language"></a>
<a href="javascript:translate.changeLanguage('chinese_simplified');" data-lang="zh-CN" title="简体中文"><img src="/wp-content/uploads/T/cn.svg" alt="CN"> 简体中文</a>
<a href="javascript:translate.changeLanguage('chinese_traditional');" data-lang="zh-TW" title="繁體中文"><img src="/wp-content/uploads/T/tw.svg" alt="TW"> 繁體中文</a>
<a href="javascript:translate.changeLanguage('english');" data-lang="en" title="English"><img src="/wp-content/uploads/T/us.svg" alt="US"> English</a>
<a href="javascript:translate.changeLanguage('russian');" data-lang="ru" title="Русский"><img src="/wp-content/uploads/T/ru.svg" alt="RU"> Русский</a>
<a href="javascript:translate.changeLanguage('deutsch');" data-lang="de" title="Deutsch"><img src="/wp-content/uploads/T/de.svg" alt="DE"> Deutsch</a>
<a href="javascript:translate.changeLanguage('japanese');" data-lang="ja" title="日本語"><img src="/wp-content/uploads/T/jp.svg" alt="JP"> 日本語</a>
<a href="javascript:translate.changeLanguage('korean');" data-lang="ko" title="한국어"><img src="/wp-content/uploads/T/kr.svg" alt="KR"> 한국어</a>
</div>
<script src="https://cdn.staticfile.net/translate.js/3.15.6/translate.min.js"></script>
<script>
translate.language.setLocal('chinese_simplified');
translate.ignore.class.push('language-switcher-minimal')
translate.selectLanguageTag.show = false;
translate.service.use('client.edge');
translate.execute();
</script>
