tp5+双语言

1.配置

?
1
2
3
4
5
6
// 是否开启多语言
'lang_switch_on'         => true,
//多语言列表
'lang_list' => ['id-id','en-us'],
// 默认语言
'default_lang'           => 'id-id',

2.控制器

复制代码
<?php
namespace app\api\controller;
use think\Controller;
class Langchange extends Controller
{
  
    public function change(){
        $lang=input("lang");
        switch($lang){
            case 'en':
                cookie('think_var','en-us');
                break;
            case 'id':
                cookie('think_var','id-id');
                break;
            case '':
                cookie('think_var','id-id');
                break;
            default:
                break;
        }
        echo json_encode(array("status"=>1));
    }
    
    public function choice(){
        return $this->fetch();   
    }
   
}
复制代码

3.视图层

复制代码
<!DOCTYPE html>
<html data-n-head="" lang="zh-tw">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta data-n-head="true" content="Meta description" name="description" data-hid="description">
    <meta data-n-head="true" content="telephone=no" name="format-detection">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no, user-scalable=no,minimum-scale=1.0, maximum-scale=1.0,viewport-fit=contain" data-n-head="true">
    <!--<meta name="viewport" content="... viewport-fit=cover"/>-->
    <title data-n-head="true">Language</title>
    <style>



* {
    margin: 0;
    padding: 0
}

body, html {
    height: 100%;
    width: 100%;
    background: #1c1a25 !important;
}

body {
    margin: 0;
    padding: 0;
    font-family: Microsoft YaHei, Arial, Verdana, Sans-serif;
    font-size: .14rem;
    -webkit-overflow-scrolling: touch;
}
section.tradBC,#msgContentC,#msgPubContentC,.zhushouContent,#advContentC {
    background: url(../img/index/homeBg.jpg) no-repeat 0 !important;
    background-size: cover !important;
}
html {
    font-size: 625%;
    background: #fff
}

img {
    width: 100%
}

img, legend {
    border: 0
}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    background-color: transparent
}

:focus, a:active, a:hover {
    outline: 0
}

dd, dl, legend, ol, td, th, ul, ul > li {
    list-style: none
}

a {
    background-color: transparent;
    text-decoration: none;
    cursor: pointer;
    color: inherit
}

abbr[title] {
    border-bottom: 1px dotted
}

b, optgroup, strong {
    font-weight: 400
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

pre, textarea {
    overflow: auto
}

code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
    border-radius: 0
}

button {
    overflow: visible
}

button, select {
    text-transform: none
}

button, html input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled], html input[disabled] {
    cursor: default
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0;
    vertical-align: middle
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    height: auto;
    -webkit-appearance: none
}

input[type=search] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

.clearfix, .jiathis_style_m {
    zoom: 1
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden
}

button, input, optgroup, select, textarea {
    outline: none;
    border: none
}

em, i {
    font-style: normal
}

#head, #head1, .head {
    width: 100%;
    height: .5rem;
    text-align: center;
    background: #1c1a25;
    box-shadow: inset 0 0 0 0 #e5e5e5;
    color: #ffbf23;
    position: fixed;
    z-index: 1000;
    top: 0
}

#head1 h3, #head h3, .head h3 {
    height: .5rem;
    line-height: .5rem;
    margin: 0;
    font-size: .16rem;
    font-weight: 400;
    overflow: hidden
}

.product-name {
    position: relative
}

#head1 h3 span:first-of-type, #head h3 span:first-of-type, .head h3 span:first-of-type {
    display: block;
    font-size: .16rem
}

.product-name em {
    position: absolute;
    top: .18rem;
    font-size: .12rem;
    left: 50%;
    margin-left: -.32rem
}

#head1 .head_content .left, #head .head_content .left, .head .head_content .left {
    position: absolute;
    top: 0;
    left: .2rem
}

#head1 .head_content .left a, #head .head_content .left a, .head .head_content .left {
    font-size: .2rem
}

#head1 .head_content .left a, #head1 .head_content .right a, #head .head_content .left a, #head .head_content .right a, .head .head_content .left a, .head .head_content .right a {
    color: #fff;
    line-height: .5rem
}

.arrow_left:after {
    content: " ";
    display: inline-block;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    height: 13px;
    width: 13px;
    border-width: 2px 2px 0 0;
    border-color: #fff;
    border-style: solid;
    position: relative;
    top: -2px;
    position: absolute;
    left: 0;
    top: 19px
}

.footer {
    width: 100%;
    height: .49rem;
    line-height: .49rem;
    position: fixed;
    bottom: 0;
    /*border-top: 1px solid #e9e9e9;*/
    z-index: 99
}

.footer ul {
    width: 100%;
    height: 100%;
    display: flex;
    display: -webkit-flex
}

.footer ul li {
    height: 100%;
    text-align: center;
    flex: 1;
    -webkit-flex: 1
}

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .footer {
        height: .8rem
    }
}


.page-main {
    padding: .5rem 0;
    color: #999999 !important;
}

::-webkit-input-placeholder {
    color: #ddd;
    font-size: .15rem
}

:-moz-placeholder, ::-moz-placeholder {
    color: #ddd;
    font-size: .15rem
}

:-ms-input-placeholder {
    color: #ddd;
    font-size: .15rem
}



@-webkit-keyframes swiper-preloader-spin {
    to {
        -webkit-transform: rotate(1turn)
    }
}

@keyframes swiper-preloader-spin {
    to {
        transform: rotate(1turn)
    }
}
</style>
<!--<link href="/Public/Qts/Home/css/common.css" rel="stylesheet">-->
    <style data-vue-ssr-id="4cddb420:0 cf79f97a:0">
    .li-main > span[data-v-adff73de] {
        position: relative;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        justify-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding-left: .4rem
    }
    
    .li-main > span[data-v-adff73de]:before {
        position: absolute;
        left: 0;
        width: .32rem;
        height: .38rem;
        margin-top: .08rem;
        content: "";
        background-repeat: no-repeat
    }
    
    .history span[data-v-7ecec926] {
        display: block;
        width: .8rem;
        height: .2rem;
        line-height: .2rem;
        text-align: center;
        font-size: .14rem;
        border-radius: .1rem 0 0 .1rem;
        margin-top: .1rem;
        margin-right: -.01rem
    }
    
    .history span.order[data-v-7ecec926] {
        border: 1px solid #2187f7;
        color: #2187f7
    }
    
    .history span.recharge[data-v-7ecec926] {
        background: #2289f8;
        color: #fff
    }
    
    .titles > div[data-v-7ecec926] {
        width: 25%;
        float: left;
        text-align: center;
        line-height: .36rem
    }
    
    .titles > div.on[data-v-7ecec926] {
        color: #2187f7;
        position: relative
    }
    
    .titles > div[data-v-7ecec926]:last-child {
        -webkit-box-shadow: none;
        box-shadow: none
    }
    
    .titles > div.on span[data-v-7ecec926] {
        display: inline-block;
        width: 30%;
        height: .02rem;
        background: #2187f7;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -15%;
        border-radius: .2rem
    }
    
    .lists ul[data-v-7ecec926] {
        width: 100%;
        padding: .15rem;
        padding-bottom: .7rem;
        height: 100%;
        overflow-y: scroll
    }
    
    .lists ul li[data-v-7ecec926] {
        width: 100%;
        padding: .1rem .2rem;
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        display: -webkit-flex;
        position: relative;
        -webkit-box-shadow: 0 2px 5px #ebeff3;
        box-shadow: 0 2px 5px #ebeff3;
        border-radius: .1rem;
        margin-bottom: .2rem
    }
    
    .lists ul li > div.left[data-v-7ecec926] {
        -webkit-box-flex: 4;
        -ms-flex: 4;
        flex: 4;
        -webkit-flex: 4;
        border-right: .01rem solid #e5e5e5;
        padding-left: .1rem
    }
    
    .lists ul li > div.right[data-v-7ecec926] {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -webkit-flex: 1;
        padding-left: .1rem
    }
    
    .lists ul li p[data-v-7ecec926] {
        line-height: .3rem
    }
    
    .lists ul li span.hands[data-v-7ecec926], .lists ul li span.name[data-v-7ecec926] {
        font-size: .14rem;
        color: #333
    }
    
    .lists ul li span.tag[data-v-7ecec926] {
        display: inline-block;
        vertical-align: middle;
        width: .16rem;
        height: .16rem;
        text-align: center;
        line-height: .16rem;
        color: #fff;
        font-size: .1rem;
        border-radius: .08rem;
        margin: 0 .05rem
    }
    
    .lists ul li span.ask[data-v-7ecec926], .lists ul li span.open[data-v-7ecec926] {
        font-size: 12px;
        color: #999
    }
    
    .lists ul li span.ask[data-v-7ecec926] {
        padding-left: .1rem
    }
    
    .exitOut[data-v-4dec191d] {
        height: .45rem;
        line-height: .45rem;
        background: #fff;
        margin-top: .1rem;
        font-size: 15px;
        color: #ffbf23 !important;
        letter-spacing: 0
    }
    
    .list[data-v-4dec191d] {
        margin-top: 0
    }
    
    .list .all-same2[data-v-4dec191d], .list .all-same[data-v-4dec191d] {
        height: .5rem;
        line-height: .5rem;
        position: relative;
        background: #171520;
        padding: 0 .14rem;
        font-size: 15px;
        color: #b0afa5;
        letter-spacing: -.46px
    }
    
    .list .all-same[data-v-4dec191d]:nth-of-type(3) {
        margin-bottom: .1rem
    }
    
    .list .all-same > p[data-v-4dec191d] {
        color: #999;
        font-size: .14rem;
        position: absolute;
        right: .28rem;
        top: 0
    }
    
    .list > div[data-v-4dec191d]:last-child {
        border-bottom: none
    }
    
    #div1[data-v-4dec191d] {
        width: .54rem;
        height: .3rem;
        border-radius: 50px;
        position: absolute;
        top: .12rem;
        right: .14rem
    }
    
    #div2[data-v-4dec191d] {
        width: .28rem;
        height: .28rem;
        border-radius: 48px;
        position: absolute;
        background: #fff;
        -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .4)
    }
    
    .open1[data-v-4dec191d] {
        background: #ffbf23
    }
    
    .open2[data-v-4dec191d] {
        top: 1px;
        right: 0
    }
    
    .pccode[data-v-4dec191d] {
        position: absolute;
        right: .28rem;
        top: 0;
        color: #999;
        font-size: .14rem
    }
    .close1[data-v-4dec191d] {
        background: hsla(0,0%,100%,.4);
        border: 1px solid rgba(0,0,0,.15);
        border-left: transparent;
    }
    .close2[data-v-4dec191d] {
        left: 0;
        top: 0;
        border: 1px solid rgba(0,0,0,.1);
    }
    body {
        background: #1c1a25
    }</style>
</head>
<body>
<div id="__nuxt">
    <div class="progress" data-v-4a8a9a01=""
         style="width: 0%; height: 2px; background-color: rgb(1, 40, 97); opacity: 0;"></div>
    <div data-v-4dec191d="" class="content">
        <div data-v-4dec191d="" id="head">
            <div class="head_content"><h3 class="product-name"><span style="color: #ffbf23">Language</span><em></em></h3>
                <div class="left" onclick="window.location.href='/'"><a class="arrow_left"></a></div>
                <div class="right arrow_right"><b></b></div>
            </div>
        </div>
        <section data-v-4dec191d="" class="page-main" style="padding-bottom: 0.5rem;">
            
            <div data-v-4dec191d="" class="list">
                
                    <!--<div data-v-4dec191d="" class="all-same exitOut">
                        <div data-v-4dec191d="">简体中文  {$Think.lang.yes}{$Think.cookie.think_var}</div>
                    </div>-->
                                
                        {if condition="$Think.cookie.think_var eq 'en-us'"}        
                            <div data-v-4dec191d="" class="all-same" onclick="changelang('id')">
                                <div data-v-4dec191d="">Bahasa Indonesia</div>
                            </div>
                            <div data-v-4dec191d="" class="all-same exitOut">
                                <div data-v-4dec191d="">English</div>
                            </div>
                                    
                        {else/}    
                        <div data-v-4dec191d="" class="all-same exitOut">
                                <div data-v-4dec191d="">Bahasa Indonesia</div>
                        </div>
                        <div data-v-4dec191d="" class="all-same"  onclick="changelang('en')">
                            <div data-v-4dec191d="">English</div>
                        </div>
                        {/if}
                            
        </section>
    </div>
</div>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
        <script>
         function changelang(lang){
            var data={'lang':lang};
            $.get("{:url('/api/Langchange/change')}",data,function(){
                window.history.back();
                location.reload();
                //window.self.close();
                //location.parent.reload();
            })
        }
        </script>
</body>
</html>
View Code
复制代码

4.语言文件

 

 

5.引用

在视图中
{:lang('xxxx')}或者{$Think.lang.xxxx}
在控制器中
lang('xxxx')

 6.切换按钮

复制代码
    <!--语言切换-->
    <a href="/api/Langchange/choice">
    <div style="position: fixed;
    right: 20px;
    top: 10px;
    padding: 5px;
    background: rgba(255,255,0,0.2);text-align: center;">
        <img src="/static/lang/lang.png" style="width:20px;height:20px;">
        <br/>
        <span style="color:#fff;">Language</span>
        
    </div>
   </a>
   <!--语言切换-->
复制代码

 

posted @   zhang_you_wu  阅读(458)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae