主页/ 电商学院/网站开发/PHP通过js做简体和繁体切换

PHP通过js做简体和繁体切换

归类:网站开发
做中文繁体的网站可以通过js语言包去做简体到繁体的切换,不用像中文转英文怕用插件机翻让人摸不着头脑,下面介绍一下具体实现方法:
这里用的是Thinkphp框架
在通用控制器HomeController.class.php中 保存一个cookie 记录当前的语言,
<?php
function __construct() {
    parent::__construct();
    $zh_web_lang = array();
    $lang = cookie('zh_web_lang');
    //谁放在前面,谁为默认的显示。
    if ($lang == "jianti") {
        $zh_web_lang['hreflang'] = "s";
        $zh_web_lang['atuolang'] = "t";
        $zh_web_lang['lang'] = "fanti";
        $zh_web_lang['html'] = "简体中文";
    } else {
        $zh_web_lang['hreflang'] = "t";
        $zh_web_lang['atuolang'] = "s";
        $zh_web_lang['lang'] = "jianti";
        $zh_web_lang['html'] = "繁體中文";
    }
    $this->assign('zh_web_lang', $zh_web_lang); //输出默认语言
}
 
2创建一个方法用于切换cookie
 
<?php
public function trunlang() {
    if (IS_POST) {
        $lang = cookie('zh_web_lang');
        if ($lang == "jianti") {
            cookie('zh_web_lang', 'fanti');
        } else {
            cookie('zh_web_lang', 'jianti');
        }
    } else {
        $this->redirect('Index/index');
    }
}
 
 
3. 在前端文件中用js去切换语言
<a href="javascript:zh_lang('{$zh_web_lang.hreflang}');" id="zh_lang"
   data-lang="{$zh_web_lang.lang}">{$zh_web_lang.html}
</a>
<script type="text/javascript" src="/Public/js/lang.js?v=2"></script>
<script type="text/javascript">
    // 简体繁體中文切换
    function zh_lang(go) {
        $.ajax({ url: "{:U('Index/trunlang')}",
            type: "POST",
            cache: false,
            success: function () {
                var tran_a = $('#zh_lang');
                if (tran_a.attr("data-lang") == "fanti") {
                    // 转换成简体
                    tran_a.attr("href", "javascript:zh_lang('t');");
                    tran_a.attr("data-lang", 'jianti');
                    tran_a.html('繁體中文');
                } else {
                    // 转换成繁體
                    tran_a.attr("href", "javascript:zh_lang('s');");
                    tran_a.attr("data-lang", 'fanti');
                    tran_a.html('简体中文');
                }
                zh_tran(go);
            }
        });
    }
    window.onload = $(function () {
        zh_tran("{$zh_web_lang.atuolang}");
    });
</script>
 
上面的引入的js文件如下
https://github.com/Irrelon/jquery-lang-js
 
如果简体和繁体的切换标识需要分开的,可以把上面的a标签修改成下面的即可
 
<li class="{:$zh_web_lang['atuolang']=='s'?'on':''}">
    <a
    <if condition="$zh_web_lang['atuolang'] eq 't'">href="javascript:zh_lang('{$zh_web_lang.hreflang}','j');"</if>
    class="zh_lang" data-lang="{$zh_web_lang.lang}">{$Think.lang.Zh-cn}</a>
</li>
<li class="{:$zh_web_lang['atuolang']=='t'?'on':''}">
    <a
    <if condition="$zh_web_lang['atuolang'] eq 's'">href="javascript:zh_lang('{$zh_web_lang.hreflang}','f');"</if>
    class="zh_lang" data-lang="{$zh_web_lang.lang}">{$Think.lang.Tw-cn}</a>
</li>
 
 
这样就能实现全站文字简体转成繁体,缺点就是图上的文字要单独切成文字,不能做成和图片一体的,还有就是个别文字会出现没有转译,还是简体的情况,但是作为同种同源的字体大部分人还是能看懂。优点就是不用做两个后台对资料进行两次输入还是比较方便的,不像中文转译英文,后台录入比用插件好,最起码意思不会乱,搞得别人看不懂。

1.下面是简体的效果:

网站导航设计1

2. 点击切换效果:

网站导航设计2

  • 切换页面依然保持着繁体效果,以前介绍过通过谷歌插件中文切换英文也是通过js实现的,每次切换页面都收从中文变成英文体验不好。还有一种通过接口去翻译后台输出的每一句文字,可以解决这个问题,比较麻烦。

网站导航设计3

  • 转英文具体可以:https://gtranslate.io/#pricing 可以在这里了解相关的介绍

网站功能费用

0 喜欢
362 浏览数

优加商学院

APP开发微信小程序开发网站开发
您好,直接联系技术沟通需求
扫码添加我的微信,直谈需求
非工作时间技术回复慢请谅解
咨询更详细需求
提交信息后我们会第一时间与你取得联系,请大致把需求填写在"咨询内容"里。
姓名
手机
咨询内容
立即提交