php - 硅胶 : allow user to change langage by clicking on html element and keeping clean URL

Question

我正在为网站使用 Silex 和 Twig，我希望允许用户更改网站的语言。

我的问题

现在，如果我更改 URL 中的语言环境，它就会起作用:

/my-account : 我的页面内容是英文的(默认 _locale)

/fr/my-account : 我的页面内容是法语

/en/my-account : 我的页面内容是英文的

如何通过单击 html 元素来执行相同的操作？

我正在寻找一些想法来解决我的问题，如果可能的话，我正在寻找一些“以正确的方式”做到这一点的良好实践。

我的代码

这是我用来管理多语言的 Silex 组件:

// TRANSLATION
$app->register(new Silex\Provider\LocaleServiceProvider());
$app->register(new Silex\Provider\TranslationServiceProvider());
$app->register(new \Pmaxs\Silex\Locale\Provider\LocaleServiceProvider(), [
    'locale.locales' => ['en', 'fr'],
    'locale.default_locale' => 'en',
    'locale.resolve_by_host' => false,
    'locale.exclude_routes' => ['^_']
]);
$app->extend('translator', function($translator, $app) {
    $translator->addLoader('yaml', new YamlFileLoader());

    $translator->addResource('yaml', __DIR__.'/../src/locales/en.yml', 'en');
    $translator->addResource('yaml', __DIR__.'/../src/locales/fr.yml', 'fr');

    return $translator;
});

这是我供用户更改语言的 html:

<li id="drop-langue" data-lg="en">
    <span id="current-lg">EN</span> // My current langue
    <div class="drop-langue">
        // The list of langage the user can choose : here ONE -> FR
        <div id="list_langue">
          <a class="change_langue" href="#" data-lg="fr"> <span>FR</span></a> // Could be nice to change the langue staying on the same page
        </div>
    </div>
</li>

现在我的 jQuery 获取值:

$(document).ready(function() {
    $(".change_langue").on("click", function() {
        var new_langue = $(this).data("lg");

        $.ajax({
            url: "{{ path('new-langue') }}",
            type: 'POST',
            data: {'langue': new_langue},
            success: function (resp) {
                console.log(resp);
            },
            error: function (resp) {
                console.log(resp);
            }
        });
    });
});

我的 Ajax Controller :

$app->match('/new-langue', function (Request $request) use ($app) {
    $new_langue = $request->get('langue');

    // some code to change the langage

    return New Response($new_langue);
})->bind('new-langue');

如果我这样做，我的 Ajax 成功 console.log(resp);给我en如我所愿。

关于如何做的一些想法/问题

1. 使用 Ajax 调用是个好主意吗？
2. 如果我改变fr通过 en在我的网址中它有效，尝试使用 window.location.href 在 javascript 中执行此操作是个好主意吗？例如？ (我想不是但还是问)
3. 我看到了 this solution对于其他问题，请在我的 Controller 中尝试，但出现此错误:500 (Internal Server Error) (我做了同样的事情，用 $new_langue 代替了 $app['defaultLanguage'] 并为我的主页使用了正确的名称)。

这是我第一次使用 Silex 创建一个完整的网站，我是 php 框架的初学者，所以如果有人可以帮助实现我想要的...提前感谢!

编辑:

根据我得到的答案和我想要实现的目标，是否可以更改语言环境并与 Silex/Twig 保持在同一页面？

例如，这给我当前的路线:global.request.get('_route')还有这个global.request.get('_locale')给我语言环境。

如果我以我的主页为例，这就是我的 Controller 现在的样子(我只显示模板):

$app->match('/', function (Request $request) use ($app) {
    return $app['twig']->render('home.html.twig');
})->bind('home');

如您所见，我的 URL 中没有 {_locale} 参数。 那么我可以保留这个没有 {_locale} 的“干净的 URL”并在同一页面中进行点击并更改当前语言吗？

我想做这样的事情:<a href="{{ path(global.request.get('_route')), global.request.set('_locale', 'FR') }}">FR</a>

但这肯定行不通...我可以这样做吗？

Answer 1

因此，从您的消息中，我可以提取您的目标是允许在您单击 HTML 元素时更改语言。

a标签的用法定义了一个超链接，用于从一个页面链接到另一个页面，可以用来实现你想要的。

我以前做过多语言网站，您可以通过多种方式实现这一目标。

////////////////////////////方法1:在HTML中定义位置属性 href

在您的 HTML 代码中，您在超链接中使用了哈希 - #。

超链接需要 href 属性，因为它指定了一个位置。

查看您的代码，您有标签，但它缺少指向您要将用户重定向到的特定位置的链接。

假设您希望它以法语转到 my-account 页面。

因此，您的 HTML 代码应该是:

<li id="drop-langue" data-lg="en">
    <span id="current-lg">EN</span> // My current langue
    <div class="drop-langue">
        // The list of langage the user can choose : here ONE -> FR
        <div id="list_langue">
          <a class="change_langue" href="http://yourwebsite.com/fr/my-account" data-lg="fr"><span>FR</span></a> 
        </div>
    </div>
</li>

注意:将 yourwebsite.com 替换为您网站的域。

///////////////////////////方法 1 结束

在您的 HTML 代码中，您提到 //可以很好地更改保持在同一页面上的语言。

可以使用 AJAX 来完成，是的。

但我不建议您这样做，因为从查看也有多种语言网站的大公司来看，例如 SAP或 Apple他们都重定向到不同的页面。

///////////////////////////////////////更新: 到目前为止的答案是因为我认为您的需求只是允许在您单击 HTML 元素时更改语言。

显然，您的目标比这稍微复杂一些。

根据 Silex 文档，_locale 的用法是 the way to go .

在this question you can see working code :

<?php

require_once __DIR__.'/../vendor/autoload.php';

$app = new Silex\Application();
$app['debug'] = true;

$app->register(new Silex\Provider\UrlGeneratorServiceProvider());
$app->register(new Silex\Provider\TwigServiceProvider(), array(
    'twig.path' => __DIR__.'/../views',
));

$app->register(new Silex\Provider\TranslationServiceProvider(array(
    'locale_fallbacks' => array('hr'),
)));


$app['translator'] = $app->share($app->extend('translator', function($translator) {

    $translator->addLoader('xlf', new \Symfony\Component\Translation\Loader\XliffFileLoader());

    $translator->addResource('xlf', __DIR__.'/../locales/hr.xlf', 'hr');
    $translator->addResource('xlf', __DIR__.'/../locales/en.xlf', 'en');
    $translator->addResource('xlf', __DIR__.'/../locales/sl.xlf', 'sl');

    return $translator;
}));


$app->get('/', function () use ($app) {

    $app['translator']->setLocale('hr');

    return $app['twig']->render('home.twig', array('d' => $app['translator']->getLocale()));

});


$app->get('/{_locale}/', function() use ($app) {
    $app['translator']->setLocale($app['request']->get('locale'));

    return $app['twig']->render('home.twig', array('d' => $app['translator']->getLocale()));
});



$app->run();