全站搜索

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

网站开发 320

做中文繁体的网站可以通过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.下面是简体的效果:

2. 点击切换效果:

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

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

上一篇: 下一篇:

相关推荐

  • 网站前端制作-不定高度的元素实现transition动画

    354

    在网站页面的制作中,不少效果是由transition实现过渡动画做成的。最近的工作,需要做一个div的hover效果,hover的时候文字内容自适应高度即是height: 70px(固定高度)变化到height: auto; 从下往上产生一个过渡动画,过程中由中间圆形遮罩中间扩散到消失,显示底图...

    查看全文
  • 根据预算做网站的四种策略

    392

    很多企业都会追问这样一个问题:我如何能够靠谱地做一个网站?在我们看来,如果企业建站的预算不同,那么,也应该采取不同的建站策略。预算少 建站快适合客户:小微企业、初创公司、中小企业可选策略:模板网站、系统建站如果企业预算少,但是还希望能够快速地完成网...

    查看全文
  • 网站前端开发Swiper3轮播插件的使用

    355

    轮播图在网站中使用的比例非常之高,自己手写一个轮播比较费时间,而使用swiper(swiper3)轮播插件能很方便做出图片轮播效果,兼容性好,而且还支持响应式轮播。在项目引入swiper.jquery.min.js和swiper.jquery.min.css文件,html如图:js如图:   如此一个...

    查看全文
展开更多