如何制作多语言网站（自动翻译无需API）

想制作无需调用 API 的自动翻译多语言网站，核心思路是用纯前端的方式实现 —— 要么借助浏览器原生翻译能力，要么提前准备多语言文本库、通过前端逻辑切换，既不用申请 API 密钥，也不用对接第三方接口，完全离线可用。

下面介绍一下制作方法。

第一步：HTML写语言框

语言框包括了几十种语言，可以实现任意的自动切换；

<div class="language-switcher">
<div class="language-btn"> <span class="globe-icon"><img src="static/picture/diqiu.png" style="margin-top: 0px;width: 25px"></span> <span class="current-lang">Language</span> <span class="arrow-icon">▼</span> </div>
<div class="language-dropdown">
<div class="language-list"><!-- 常用语言（默认显示） -->
<div class="language-item"> <img src="static/picture/gb.png" alt="English"> <a href="javascript:translate.changeLanguage('english');">English</a> </div>
<div class="language-item"> <img src="static/picture/vn.png" alt="Vietnamese"> <a href="javascript:translate.changeLanguage('vietnamese');">Vietnamese</a> </div>
<div class="language-item"> <img src="static/picture/id.png" alt="Indonesian"> <a href="javascript:translate.changeLanguage('indonesian');">Indonesian</a> </div>
<div class="language-item"> <img src="static/picture/es.png" alt="Spanish"> <a href="javascript:translate.changeLanguage('spanish');">Spanish</a> </div>
<div class="language-item"> <img src="static/picture/ru.png" alt="Russian"> <a href="javascript:translate.changeLanguage('russian');">Russian</a> </div>
<div class="language-item"> <img src="static/picture/pt.png" alt="Portuguese"> <a href="javascript:translate.changeLanguage('portuguese');">Portuguese</a> </div>
<div class="language-item"> <img src="static/picture/cn.png" alt="Chinese"> <a href="javascript:translate.changeLanguage('chinese_simplified');">中文版</a> </div>
<div class="language-item"> <img src="static/picture/jp.png" alt="Japanese"> <a href="javascript:translate.changeLanguage('japanese');">Japanese</a> </div>
<div class="language-item"> <img src="static/picture/fr.png" alt="French"> <a href="javascript:translate.changeLanguage('french');">French</a> </div>
<div class="language-item"> <img src="static/picture/kr.png" alt="Korean"> <a href="javascript:translate.changeLanguage('korean');">Korean</a> </div>
<div class="language-item"> <img src="static/picture/sa.png" alt="Arabic"> <a href="javascript:translate.changeLanguage('arabic');">Arabic</a> </div>
<!-- 更多语言（初始隐藏） -->
<div class="language-item"> <img src="static/picture/ie.png" alt="Irish"> <a href="javascript:translate.changeLanguage('irish');">Irish</a> </div>
<div class="language-item hidden"> <img src="static/picture/gr.png" alt="Greek"> <a href="javascript:translate.changeLanguage('greek');">Greek</a> </div>
<div class="language-item hidden"> <img src="static/picture/tr.png" alt="Turkish"> <a href="javascript:translate.changeLanguage('turkish');">Turkish</a> </div>
<div class="language-item hidden"> <img src="static/picture/it.png" alt="Italian"> <a href="javascript:translate.changeLanguage('italian');">Italian</a> </div>
<div class="language-item hidden"> <img src="static/picture/dk.png" alt="Danish"> <a href="javascript:translate.changeLanguage('danish');">Danish</a> </div>
<div class="language-item hidden"> <img src="static/picture/ro.png" alt="Romanian"> <a href="javascript:translate.changeLanguage('romanian');">Romanian</a> </div>
<div class="language-item hidden"> <img src="static/picture/cz.png" alt="Czech"> <a href="javascript:translate.changeLanguage('czech');">Czech</a> </div>
<div class="language-item hidden"> <img src="static/picture/za.png" alt="Afrikaans"> <a href="javascript:translate.changeLanguage('afrikaans');">Afrikaans</a> </div>
<div class="language-item hidden"> <img src="static/picture/se.png" alt="Swedish"> <a href="javascript:translate.changeLanguage('swedish');">Swedish</a> </div>
<div class="language-item hidden"> <img src="static/picture/pl.png" alt="Polish"> <a href="javascript:translate.changeLanguage('polish');">Polish</a> </div>
<div class="language-item hidden"> <img src="static/picture/es-ct.png" alt="Catalan"> <a href="javascript:translate.changeLanguage('catalan');">Catalan</a> </div>
<div class="language-item hidden"> <img src="static/picture/in.png" alt="Hindi"> <a href="javascript:translate.changeLanguage('hindi');">Hindi</a> </div>
<!-- 接上文... -->
<div class="language-item hidden"> <img src="static/picture/la.png" alt="Lao"> <a href="javascript:translate.changeLanguage('lao');">Lao</a> </div>
<div class="language-item hidden"> <img src="static/picture/al.png" alt="Albanian"> <a href="javascript:translate.changeLanguage('albanian');">Albanian</a> </div>
<div class="language-item hidden"> <img src="static/picture/et.png" alt="Amharic"> <a href="javascript:translate.changeLanguage('amharic');">Amharic</a> </div>
<div class="language-item hidden"> <img src="static/picture/am.png" alt="Armenian"> <a href="javascript:translate.changeLanguage('armenian');">Armenian</a> </div>
<div class="language-item hidden"> <img src="static/picture/az.png" alt="Azerbaijani"> <a href="javascript:translate.changeLanguage('azerbaijani');">Azerbaijani</a> </div>
<div class="language-item hidden"> <img src="static/picture/bd.png" alt="Bengali"> <a href="javascript:translate.changeLanguage('bengali');">Bengali</a> </div>
<div class="language-item hidden"> <img src="static/picture/ba.png" alt="Bosnian"> <a href="javascript:translate.changeLanguage('bosnian');">Bosnian</a> </div>
<div class="language-item hidden"> <img src="static/picture/bg.png" alt="Bulgarian"> <a href="javascript:translate.changeLanguage('bulgarian');">Bulgarian</a> </div>
<div class="language-item hidden"> <img src="static/picture/hr.png" alt="Croatian"> <a href="javascript:translate.changeLanguage('croatian');">Croatian</a> </div>
<div class="language-item hidden"> <img src="static/picture/nl.png" alt="Dutch"> <a href="javascript:translate.changeLanguage('dutch');">Dutch</a> </div>
<div class="language-item hidden"> <img src="static/picture/ee.png" alt="Estonian"> <a href="javascript:translate.changeLanguage('estonian');">Estonian</a> </div>
<div class="language-item hidden"> <img src="static/picture/ph.png" alt="Filipino"> <a href="javascript:translate.changeLanguage('filipino');">Filipino</a> </div>
<div class="language-item hidden"> <img src="static/picture/fi.png" alt="Finnish"> <a href="javascript:translate.changeLanguage('finnish');">Finnish</a> </div>
<div class="language-item hidden"> <img src="static/picture/in.png" alt="Gujarati"> <a href="javascript:translate.changeLanguage('gujarati');">Gujarati</a> </div>
<div class="language-item hidden"> <img src="static/picture/ht.png" alt="Haitian"> <a href="javascript:translate.changeLanguage('haitian_creole');">Haitian</a> </div>
<div class="language-item hidden"> <img src="static/picture/il.png" alt="Hebrew"> <a href="javascript:translate.changeLanguage('hebrew');">Hebrew</a> </div>
<div class="language-item hidden"> <img src="static/picture/hu.png" alt="Hungarian"> <a href="javascript:translate.changeLanguage('hungarian');">Hungarian</a> </div>
<div class="language-item hidden"> <img src="static/picture/is.png" alt="Icelandic"> <a href="javascript:translate.changeLanguage('icelandic');">Icelandic</a> </div>
<div class="language-item hidden"> <img src="static/picture/in.png" alt="Kannada"> <a href="javascript:translate.changeLanguage('kannada');">Kannada</a> </div>
<div class="language-item hidden"> <img src="static/picture/kh.png" alt="Khmer"> <a href="javascript:translate.changeLanguage('khmer');">Khmer</a> </div>
<div class="language-item hidden"> <img src="static/picture/iq.png" alt="Kurdish"> <a href="javascript:translate.changeLanguage('kurdish');">Kurdish</a> </div>
<div class="language-item hidden"> <img src="static/picture/lv.png" alt="Latvian"> <a href="javascript:translate.changeLanguage('latvian');">Latvian</a> </div>
<div class="language-item hidden"> <img src="static/picture/lt.png" alt="Lithuanian"> <a href="javascript:translate.changeLanguage('lithuanian');">Lithuanian</a> </div>
<div class="language-item hidden"> <img src="static/picture/mg.png" alt="Malagasy"> <a href="javascript:translate.changeLanguage('malagasy');">Malagasy</a> </div>
<div class="language-item hidden"> <img src="static/picture/my.png" alt="Malay"> <a href="javascript:translate.changeLanguage('malay');">Malay</a> </div>
<div class="language-item hidden"> <img src="static/picture/in.png" alt="Malayalam"> <a href="javascript:translate.changeLanguage('malayalam');">Malayalam</a> </div>
<div class="language-item hidden"> <img src="static/picture/mt.png" alt="Maltese"> <a href="javascript:translate.changeLanguage('maltese');">Maltese</a> </div>
<div class="language-item hidden"> <img src="static/picture/nz.png" alt="Maori"> <a href="javascript:translate.changeLanguage('maori');">Maori</a> </div>
<div class="language-item hidden"> <img src="static/picture/in.png" alt="Marathi"> <a href="javascript:translate.changeLanguage('marathi');">Marathi</a> </div>
<div class="language-item hidden"> <img src="static/picture/mm.png" alt="Burmese"> <a href="javascript:translate.changeLanguage('burmese');">Burmese</a> </div>
<div class="language-item hidden"> <img src="static/picture/np.png" alt="Nepali"> <a href="javascript:translate.changeLanguage('nepali');">Nepali</a> </div>
<div class="language-item hidden"> <img src="static/picture/no.png" alt="Norwegian"> <a href="javascript:translate.changeLanguage('norwegian');">Norwegian</a> </div>
<div class="language-item hidden"> <img src="static/picture/af.png" alt="Pashto"> <a href="javascript:translate.changeLanguage('pashto');">Pashto</a> </div>
<div class="language-item hidden"> <img src="static/picture/ir.png" alt="Persian"> <a href="javascript:translate.changeLanguage('persian');">Persian</a> </div>
<div class="language-item hidden"> <img src="static/picture/in.png" alt="Punjabi"> <a href="javascript:translate.changeLanguage('punjabi');">Punjabi</a> </div>
<div class="language-item hidden"> <img src="static/picture/sk.png" alt="Slovak"> <a href="javascript:translate.changeLanguage('slovak');">Slovak</a> </div>
<div class="language-item hidden"> <img src="static/picture/ws.png" alt="Samoan"> <a href="javascript:translate.changeLanguage('samoan');">Samoan</a> </div>
<div class="language-item hidden"> <img src="static/picture/tz.png" alt="Swahili"> <a href="javascript:translate.changeLanguage('swahili');">Swahili</a> </div>
<div class="language-item hidden"> <img src="static/picture/in.png" alt="Tamil"> <a href="javascript:translate.changeLanguage('tamil');">Tamil</a> </div>
<div class="language-item hidden"> <img src="static/picture/in.png" alt="Telugu"> <a href="javascript:translate.changeLanguage('telugu');">Telugu</a> </div>
<div class="language-item hidden"> <img src="static/picture/th.png" alt="Thai"> <a href="javascript:translate.changeLanguage('thai');">Thai</a> </div>
<div class="language-item hidden"> <img src="static/picture/ua.png" alt="Ukrainian"> <a href="javascript:translate.changeLanguage('ukrainian');">Ukrainian</a> </div>
<div class="language-item hidden"> <img src="static/picture/pk.png" alt="Urdu"> <a href="javascript:translate.changeLanguage('urdu');">Urdu</a> </div>
<div class="language-item hidden"> <img src="static/picture/gb-wls.png" alt="Welsh"> <a href="javascript:translate.changeLanguage('welsh');">Welsh</a> </div>
<div class="language-item hidden"> <img src="static/picture/in.png" alt="Oriya"> <a href="javascript:translate.changeLanguage('oriya');">Oriya</a> </div>
<div class="language-item hidden"> <img src="static/picture/fr.png" alt="Corsican"> <a href="javascript:translate.changeLanguage('corsican');">Corsican</a> </div>
<div class="language-item hidden"> <img src="static/picture/py.png" alt="Guarani"> <a href="javascript:translate.changeLanguage('guarani');">Guarani</a> </div>
<div class="language-item hidden"> <img src="static/picture/rw.png" alt="Kinyarwanda"> <a href="javascript:translate.changeLanguage('kinyarwanda');">Kinyarwanda</a> </div>
<div class="language-item hidden"> <img src="static/picture/ng.png" alt="Hausa"> <a href="javascript:translate.changeLanguage('hausa');">Hausa</a> </div>
<div class="language-item hidden"> <img src="static/picture/ng.png" alt="Yoruba"> <a href="javascript:translate.changeLanguage('yoruba');">Yoruba</a> </div>
<div class="language-item hidden"> <img src="static/picture/va.png" alt="Latin"> <a href="javascript:translate.changeLanguage('latin');">Latin</a> </div>
<div class="language-item hidden"> <img src="static/picture/ge.png" alt="Georgian"> <a href="javascript:translate.changeLanguage('georgian');">Georgian</a> </div>
<div class="language-item hidden"> <img src="static/picture/in.png" alt="Bhojpuri"> <a href="javascript:translate.changeLanguage('bhojpuri');">Bhojpuri</a> </div>
<div class="language-item hidden"> <img src="static/picture/by.png" alt="Belarusian"> <a href="javascript:translate.changeLanguage('belarusian');">Belarusian</a> </div>
<div class="language-item hidden"> <img src="static/picture/us.png" alt="Hawaiian"> <a href="javascript:translate.changeLanguage('hawaiian');">Hawaiian</a> </div>
<div class="language-item hidden"> <img src="static/picture/by.png" alt="Yiddish"> <a href="javascript:translate.changeLanguage('yiddish');">Yiddish</a> </div>
<div class="language-item hidden"> <img src="static/picture/gh.png" alt="Twi"> <a href="javascript:translate.changeLanguage('twi');">Twi</a> </div>
<div class="language-item hidden"> <img src="static/picture/tm.png" alt="Turkmen"> <a href="javascript:translate.changeLanguage('turkmen');">Turkmen</a> </div>
<div class="language-item hidden"> <img src="static/picture/in.png" alt="Assamese"> <a href="javascript:translate.changeLanguage('assamese');">Assamese</a> </div>
<div class="language-item hidden"> <img src="static/picture/lk.png" alt="Singapore"> <a href="javascript:translate.changeLanguage('singapore');">Singapore</a> </div>
<div class="language-item hidden"> <img src="static/picture/ph.png" alt="Cebuano"> <a href="javascript:translate.changeLanguage('cebuano');">Cebuano</a> </div>
<div class="language-item hidden"> <img src="static/picture/gb.png" alt="Scottish-Gaelic"> <a href="javascript:translate.changeLanguage('scottish-gaelic');">Scottish-Gaelic</a> </div>
<div class="language-item hidden"> <img src="static/picture/in.png" alt="Sanskrit"> <a href="javascript:translate.changeLanguage('sanskrit');">Sanskrit</a> </div>
<div class="language-item hidden"> <img src="static/picture/es.png" alt="Galician"> <a href="javascript:translate.changeLanguage('galician');">Galician</a> </div>
<div class="language-item hidden"> <img src="static/picture/ru.png" alt="Tatar"> <a href="javascript:translate.changeLanguage('tatar');">Tatar</a> </div>
<div class="language-item hidden"> <img src="static/picture/bo.png" alt="Aymara"> <a href="javascript:translate.changeLanguage('aymara');">Aymara</a> </div>
<div class="language-item hidden"> <img src="static/picture/mv.png" alt="Dhivehi"> <a href="javascript:translate.changeLanguage('dhivehi');">Dhivehi</a> </div>
<div class="language-item hidden"> <img src="static/picture/lu.png" alt="Luxembourgish"> <a href="javascript:translate.changeLanguage('luxembourgish');">Luxembourgish</a> </div>
<div class="language-item hidden"> <img src="static/picture/pk.png" alt="Sindhi"> <a href="javascript:translate.changeLanguage('sindhi');">Sindhi</a> </div>
<div class="language-item hidden"> <img src="static/picture/mk.png" alt="Macedonian"> <a href="javascript:translate.changeLanguage('macedonian');">Macedonian</a> </div>
<div class="language-item hidden"> <img src="static/picture/ug.png" alt="Luganda"> <a href="javascript:translate.changeLanguage('luganda');">Luganda</a> </div>
<div class="language-item hidden"> <img src="static/picture/si.png" alt="Slovene"> <a href="javascript:translate.changeLanguage('slovene');">Slovene</a> </div>
<div class="language-item hidden"> <img src="static/picture/ng.png" alt="Igbo"> <a href="javascript:translate.changeLanguage('igbo');">Igbo</a> </div>
<div class="language-item hidden"> <img src="static/picture/et.png" alt="Oromo"> <a href="javascript:translate.changeLanguage('oromo');">Oromo</a> </div>
<div class="language-item hidden"> <img src="static/picture/nl.png" alt="Frisian"> <a href="javascript:translate.changeLanguage('frisian');">Frisian</a> </div>
<div class="language-item hidden"> <img src="static/picture/so.png" alt="Somali"> <a href="javascript:translate.changeLanguage('somali');">Somali</a> </div>
<div class="language-item hidden"> <img src="static/picture/mw.png" alt="Nyanja"> <a href="javascript:translate.changeLanguage('nyanja');">Nyanja</a> </div>
<div class="language-item hidden"> <img src="static/picture/es.png" alt="Basque"> <a href="javascript:translate.changeLanguage('basque');">Basque</a> </div>
<div class="language-item hidden"> <img src="static/picture/tj.png" alt="Tajik"> <a href="javascript:translate.changeLanguage('tajik');">Tajik</a> </div>
<div class="language-item hidden"> <img src="static/picture/kg.png" alt="Kyrgyz"> <a href="javascript:translate.changeLanguage('kyrgyz');">Kyrgyz</a> </div>
<div class="language-item hidden"> <img src="static/picture/gh.png" alt="Ewe"> <a href="javascript:translate.changeLanguage('ewe');">Ewe</a> </div>
<div class="language-item hidden"> <img src="static/picture/ht.png" alt="Creole"> <a href="javascript:translate.changeLanguage('creole');">Creole</a> </div>
<div class="language-item hidden"> <img src="static/picture/pe.png" alt="Quechua"> <a href="javascript:translate.changeLanguage('quechua');">Quechua</a> </div>
<div class="language-item hidden"> <img src="static/picture/ml.png" alt="Bambara"> <a href="javascript:translate.changeLanguage('bambara');">Bambara</a> </div>
<div class="language-item hidden"> <img src="static/picture/zw.png" alt="Shona"> <a href="javascript:translate.changeLanguage('shona');">Shona</a> </div>
<div class="language-item hidden"> <img src="static/picture/in.png" alt="Maithili"> <a href="javascript:translate.changeLanguage('maithili');">Maithili</a> </div>
<div class="language-item hidden"> <img src="static/picture/cn.png" alt="Hmong"> <a href="javascript:translate.changeLanguage('hmong');">Hmong</a> </div>
<div class="language-item hidden"> <img src="static/picture/kd.png" alt="Kurdish_sorani"> <a href="javascript:translate.changeLanguage('kurdish_sorani');">Kurdish</a> </div>
<div class="language-item hidden"> <img src="static/picture/de.png" alt="Deutsch"> <a href="javascript:translate.changeLanguage('deutsch');">Deutsch</a> </div>
<div class="language-item hidden"> <img src="static/picture/no.png" alt="Norwegian"> <a href="javascript:translate.changeLanguage('norwegian');">Norwegian</a> </div>
</div>
<div class="more-languages">More Language</div>
</div>
</div>

第二步：CSS控制语言框样式

通过CSS来控制语言选择框的各项语言项目的样式；

/* 语言切换按钮容器 */
.language-switcher {
position: relative;
display: inline-block;float: right;padding: 23px 10px 0 0;

}

/* 语言切换按钮 */
.language-btn {
display: flex;
border-radius: 4px;
cursor: pointer;
gap: 5px;
font-size: 14px;
color: #333;
}

.language-btn .globe-icon {
font-size: 16px;
}

.language-btn .arrow-icon {
margin-left: 5px;
transition: transform 0.3s;
}
.language-list .hidden{ display:none}

/* 下拉框容器 */
.language-dropdown {
position: absolute;
top: calc(100% + 5px);
right: 0;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
display: none;
z-index: 1000;
width:400px;
}

/* 语言列表 */
.language-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
padding: 10px;
max-height: 230px;
overflow-y: auto;
}

/* 语言选项 */
.language-item {
display: flex;
align-items: center;
padding: 6px 8px;
cursor: pointer;
border-radius: 4px;
gap: 5px;
font-size: 13px;
color: #333;
height: 30px;overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.language-item a{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.language-item:hover {
background: #f5f5f5;
}

.language-item img {
width: 16px;
height: 12px;
object-fit: cover;
}

/* More Language按钮 */
.more-languages {
text-align: center;
padding: 8px;
border-top: 1px solid #eee;
cursor: pointer;
color: #666;
font-size: 13px;
height: 40px;
line-height: 40px;
}

.more-languages:hover {
color: #333;
background: #f5f5f5;
}

/* 展开状态 */
.language-dropdown.active {
display: block;
background: white;
}

.language-list.show-all {
max-height: 400px;
}

/* 滚动条样式 */
.language-list::-webkit-scrollbar {
width: 6px;
}

.language-list::-webkit-scrollbar-track {
background: #f1f1f1;
}

.language-list::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}

.language-list::-webkit-scrollbar-thumb:hover {
background: #999;
}

第三步：JS实现自动翻译

要实现自动翻译的效果，自动翻译JS插件是最关键的；JS文件包括二个文件：一个是translate.js，另一个是fanyi.js；

在网站代码的</head>上方引入translate.js; (注意路径)

<script type="text/javascript" src="js/translate.js"></script>

在网站代码的</body>上方引入fanyi.js;

<script type="text/javascript" src="js/fanyi.js"></script>

这样就可以实现网页的自动翻译了。