代码拉取完成，页面将自动刷新
同步操作将从 鬼画符/translate 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
http://res.zvo.cn/translate/demo.html
var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type= 'text/javascript'; script.src= 'https://res.zvo.cn/translate/inspector_v2.js'; head.appendChild(script);
At the end of the page, </html> before, Add the following code. Generally, the select switch tab for selecting language appears at the bottom of the page. In fact, it is so simple
<script src="https://res.zvo.cn/translate/translate.js"></script>
<script>
translate.setUseVersion2(); //Set to use v2.x version
translate.language.setLocal('chinese_simplified'); //Set the local language (the language of the current page). If not set, the language of the text displayed on the current page will be automatically recognized by default. Can be filled in, such as 'english'、'chinese_simplified' , please refer to the description below the document.
translate.execute(); // Translate
</script>
Where you want to display on your page, just put the following one.
<div id="translate"></div>
Mainly this id="translate" The button for switching languages will be automatically assigned to this ID. Of course, you don't have to be div, you can
<span id="translate"></span>
Css can be used to control the display position and beauty of switching language selection. For example:
<style>
.translateSelectLanguage{
position: absolute;
top:100px;
right:100px;
}
</style>
This is the <select> tag that controls the switching language
/*
* Whether to display the selection box of select language, and true to display; False does not display. Default is true
* Note that this line should be placed in translate.execute(); above
*/
translate.selectLanguageTag.show = false;
translate.execute();
The usage scenario is, if you use:
<a href="javascript:translate.changeLanguage('en');">Switch to English</a>
If this switch mode is used, the selection from the select drop-down box will not be used, and you can use this mode to not display.
Of course, you can also use css to control its display. For example:
<style>
#translate{
display:none;
}
</style>
translate.ignore.tag.push('span'); //When translating, add the tag that you want to ignore and do not translate. Anything in this tag will not be translated.
When translating, add the tag that you want to ignore and do not translate. Anything in this tag will not be translated.
If you want to see which tag tags are currently ignored, you can directly execute console. log (translate. ignore. tag) View
Note that this line should be placed in translate.execute(); above
translate.ignore.class.push('test'); //When translating, add the class tag that you want to ignore and do not translate. Anything in this tag will not be translated.
When translating, add the class tag that you want to ignore and do not translate. Anything in this tag will not be translated.
If you want to see which tag tags are currently ignored, you can directly execute console. log (translate. ignore. class) View
Note that this line should be placed in translate.execute(); above
var documents = [];
documents.push(document.getElementById('test1'));
documents.push(document.getElementById('test2'));
documents.push(document.getElementById('test3'));
translate.setDocuments(documents); //Specifies the collection of elements to be translated. One or more elements can be passed in. If not set, the entire page will be translated by default
You can use translate.setDocuments(...) to specify the collection of elements to be translated, and you can pass in one or more elements. If this is not set, the entire page will be translated by default. Note that this line should be placed in translate.execute(); above
For example, click a link to display the English interface
<a href="javascript:translate.changeLanguage('english');" class="ignore">Switch to English</a>
You can quickly switch to the specified language by passing in the target language of the translation. Specific languages can be consulted: http://api.translate.zvo.cn/doc/language.json.html
Where class="ignore" adds this class, which means that the a tag will not be translated
When the user first opens the web page, the language of the current user's country will be automatically determined to switch to the language of the user's country.
If the user manually switches to another language, and then uses it again, the user's choice will prevail.
translate.setAutoDiscriminateLocalLanguage(); //Set the language of the user's country to switch automatically when the user uses it for the first time
translate.language.setLocal('chinese_simplified'); //Set the local language (the language of the current page). If not set, the language of the text displayed on the current page will be automatically recognized by default.
Specific languages can be consulted： http://api.translate.zvo.cn/doc/language.json.html
If not set, the default is Simplified Chinese : chinese_simplified
When selecting a language, if you use it for the first time, the local language set here is selected by default.
Note that this line should be placed in translate.execute(); above
Under normal circumstances, there is a great possibility of such demand:
msg.info('Hello'); ）This prompt is loaded by js. The prompt text also needs to be translated, You can add the following line of code to meet the above requirements.translate.listener.start(); //Enable the monitoring of html page changes, and automatically translate the changes. Note that the change area here refers to the area set using translate.setDocuments(...) . If it is not set, it is necessary to monitor the change of the whole page
It is recommended to put it before the line translate.execute()
If you manually set translate.setDocuments(...) , you will not listen to the entire page, but only listen to changes in the area set by setDocuments(...) .
In some government agencies and internal projects of large groups, when there are strong requirements for data privacy and security, and you want to provide highly reliable translation services for your own customers, you can privatize the translation service interface and do not go through our open translation interface, so as to achieve full control of security and back-end services.
For the actual deployment method, please refer to: https://github.com/xnx3/translate_service
After deployment, click translate.execute(); Before, add a line of code as follows:
translate.request.api.host='http://121.121.121.121/'; //Replace the IP address in this with the IP address of your server. Pay attention to the beginning and the end
translate.execute();
In this way, the translation request interface will go to your own server.
As shown in the figure below, there should be several language switches at a certain location in the website
Add the following code directly at the end of its html code:
<!-- Add a language switch button. Note that a class="ignore" added to ul means that this code will not be translated -->
<ul class="ignore">
<li><a href="javascript:translate.changeLanguage('english');">English</a></li>|
<li><a href="javascript:translate.changeLanguage('chinese_simplified');">简体中文</a></li>|
<li><a href="javascript:translate.changeLanguage('chinese_traditional');">繁體中文</a></li>
</ul>
<!-- Js introducing multi-language switching -->
<script src="https://res.zvo.cn/translate/translate.js"></script>
<script>
translate.setUseVersion2(); //Set to use v2. x version
translate.selectLanguageTag.show = false; //The selection language of the non-existent select
translate.execute();
</script>
You can fork the project directly. Note that it is the github warehouse [https://github.com/xnx3/translate](https://github.com/xnx3/translate）, non-gitee warehouse
If you have changed any code, please note your name and your personal home page in it, which is your participation and contribution. For example, Mr. Chen participated in the character judgment of Japanese translation, which can be as follows:
/*
If it contains Japanese, return true: contains
Participant: Chen https://www.chenmouren.com/xxxxx.html
*/
japanese:function(str){
if(/.*[\u0800-\u4e00]+.*$/.test(str)){
return true
} else {
return false;
}
},
Note that v1.x is slightly different from v2.x. You can use console. log (translate. version) View the version currently used.
In addition, for the relevant description of v1.x version, see: instructions | online demo
It will be released in February 2022, providing multilingual support, enabling the webpage to quickly switch languages without changing.
It will be released in December 2022, adding more extension methods.
translate.language.connector() to adapt the connector of the sentence independently<!-- --> and do not translate ittranslate.listener.start() It can automatically translate the changed areas of the current page, such as rendering after loading data with ajaxtranslate.execute(...) Add a translation area that can be imported. The imported area is only used for one-time translation and will not affect the value of setDocuments(...)
translate.setAutoDiscriminateLocalLanguage(); When users use it for the first time, they can automatically identify the language of their country for switchingThe ability of automatic translation has been put into the following open source projects:
kefu.js H5 online customer service, introduce a line of js code to use immediately! Support mobile phones, computers, APP, and applets. One-click deployment of your own private SAAS cloud customer service platform
Pear Admin Layui Pearl Admin is an out-of-the-box front-end development template that extends the native UI style of Layui, integrates third-party open source components, provides a convenient and rapid development method, and continues LayuiAdmin
Layui Translation component
...
Featbit A 100% open-source feature flags management platform
LinkWeChat LinkWeChat It is an open source SCRM system based on enterprise WeChat, and a comprehensive solution for enterprise private domain traffic management and marketing.
IoTSharp IoTSharp is an open source Internet of Things basic platform based on. Net Core, supporting HTTP, MQTT and CoAp protocols
Cloud of flow Information and digital service providers
The current version of v2.0 is still in the optimization stage and is not a perfect and stable version. Currently, only most websites have been tested for perfect adaptation, but there will be omissions. As the number of websites used increases, the bugs found will be gradually fixed. The stable version is expected to be released in the next three to four months. When you use the v2 version, you can directly use our js source. If you have localization requirements, you can place localization after the stable version is released later.
I love open source. If you are the author of an open source framework and want to add this multilingual switching capability to your open source project, but encounter difficulties when accessing it, welcome to join the QQ group below to explain which open source software author you are, and I will fully assist you. Friends who are willing to open source are worthy of respect and support.
This cloud server platform can be deployed privately. If you have any needs in this regard, you can also contact me. But this deployment takes several hours to half a day, and we also need to pay our colleagues. The epidemic has been relatively difficult for three years, so there is no way to help with the deployment free of charge. It will cost hundreds of labor costs to provide paid deployment. I hope you can understand.
If you encounter any abnormal situation during use, please mention the issues and write down the problems you encounter in detail. If you can, please also write down your website, so that we can test more fully to quickly locate the problem
Author WeChat:xnx3com
Email: 921153866@qq.com
Communication QQ group:181781514
github: https://github.com/xnx3/translate
gitee: https://gitee.com/mail_osc/translate
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。