当前位置: 首页 > 面试题库 >

Silex:允许用户通过单击html元素并保持干净的URL来更改语言

鲁龙野
2023-03-14
问题内容

我正在为网站使用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控制器:

$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在我的网址它的工作原理,它是一个好主意,尝试用做在JavaScript window.location.href的例子吗?(我认为不是,但仍在询问)
  3. 我看到了另一个问题的解决方案,并在控制器中尝试了此方法,但出现了这个错误:(500 (Internal Server Error)我做了同样的事情,用$new_langue代替$app['defaultLanguage']和并为我的主页使用了正确的名称)。

这是我第一次使用Silex创建一个完整的网站,并且我是php框架的初学者,因此,如果有人可以帮助实现我想要的…,请先感谢!

编辑:

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

例如,这给了我当前路线:global.request.get('_route')global.request.get('_locale')给了我区域设置。

如果以我的主页为例,这就是我的控制器现在的外观(我只是显示模板):

$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>

但这不能肯定…我可以这样做吗?


问题答案:

我终于找到了使用pmaxs/silex-locale(https://github.com/pmaxs/silex-
locale
)做我想要的解决方案。

就像我在问题中说的那样,我已经在翻译时使用了它,但是我并没有使用“ Url generation” …所以这里是使用方法的概述(如果您使用Silex
v1,请阅读文档。X):

1 /加载提供者

$app->register(new \Pmaxs\Silex\Locale\Provider\LocaleServiceProvider(), [
    'locale.locales' => ['en', 'fr'],  //I want to translate my site in English and French
    'locale.default_locale' => 'en',   // By default, the locale is "en"
    'locale.resolve_by_host' => false,
    'locale.exclude_routes' => ['^_']
]);
$app->register(new Silex\Provider\LocaleServiceProvider());

2 /用法

这是我的家庭路线控制器:

// this page is accessible by urls '/', '/fr/' or '/en/'
$app->match('/', function (Request $request) use ($app) {

    // my code

     return $app['twig']->render('home.html.twig');
})->bind('home');

如您所见,{_locale}我的路由中没有变量,但是仍然可以使用它来更改页面的语言。

3 /网址生成器

现在,这是我如何更改语言的方法:

{% set locale_list = ["en", "fr"] %} // the list of all langage in my website
{% set current_locale = global.request.getLocale() %} // the current langage of my page

<li id="drop-langue">
    // I display the current langage
    <span id="current-lg">{{ current_locale|upper }}</span> 
    <div class="drop-langue">
        <div id="list_langue">
            {% for locale in locale_list %}
                {% if locale != current_locale %}
                    // I create one link to change the langage according to all the langage I want, minus the current langage
                    <a class="change_langue" href="{{ locale_generate(locale , global.request.get('_route')) }}" >
                        <span>{{ locale|upper }}</span>
                    </a>
                 {% endif %}
             {% endfor %}
         </div>
     </div>
 </li>

我正在使用“网址生成器”,它的工作方式如下:(locale_generate('es', $name, $parameters = array(),$referenceType = UrlGeneratorInterface::ABSOLUTE_PATH)文档中有更多详细信息)。

这样,当我进入我的网站时,我的英语是“ clean Url”(默认语言环境)/。然后,单击FR我的url
/fr/并使用新的选择菜单将我的内容翻译成法语(current-langue = FR,然后我可以选择“ EN”)。



 类似资料:
  • 问题内容: 我正在开发一个Java应用程序来帮助构建硒测试,并且我想知道是否有可能强制该应用程序等待单击,然后在单击之后确定单击了html的哪个元素。 问候 问题答案: 回答您的问题: 如果可以迫使应用程序等待单击 :从技术上讲,的调用由最终用户控制,该最终用户还是脚本/程序的所有者。同样,在功能上,您的脚本/程序无需等待,但需要等待预期的 WebElement 可 交互 (即, clickabl

  • 问题内容: 我有一个具有,沿。在此之下,我还有更多元素。 目前,当我在叠加层外部单击时,我可以单击基础元素。但是,当直接在叠加层上单击时,我无法单击基础元素。 我希望能够单击此按钮,以便可以单击基础元素。 问题答案: 是的,你CAN做到这一点。 使用与IE11 CSS条件语句一起(在IE10或低于不工作),就可以得到这个问题的跨浏览器兼容的解决方案。 使用,您甚至可以将透明放置在叠加层中,并使点击

  • 在谷歌航班页面上,我想点击对话框底部的右箭头(增加天数)(附图)。第二次点击给了我错误。 这是我的代码: 截图

  • 在WooCommerce中,当订单处于处理状态时,我希望在“我的帐户”页面上显示一个操作按钮,允许客户通过更改订单状态以完成来确认订单已经到达。 我已经看到允许客户通过电子邮件相关的问题代码改变订单的状态(没有答案),这并没有真正帮助实现我的目标。 客户是否可以通过将订单状态更改为“已完成”来确认订单是否已到达?

  • 问题内容: 我正在尝试切换两个元素,因此如果单击一个元素,它将删除my-class的所有引用并将其应用于自身。有任何想法吗? 干杯! 问题答案: 创建一个名为selectedIndex的范围属性,以及一个itemClicked函数: 然后,我的模板将如下所示: 仅供参考,$ index是ng-repeat指令中可用的不可思议的变量。 您也可以在指令和模板中使用相同的示例。 这是一个工作的plnkr

  • 问题内容: 我的代码在这里检测the 是否等于某种MIME类型,如果是,它将进行一定的转换 我缩短了代码,因为它包含许多其他if语句,哪种设计模式适合于删除许多if and else or else if语句? 问题答案: 你可以有一个接口。然后,你可以为每个Mimetype创建一个类,如下所示: 每个转换器都需要一个这样的类。然后,你可以像这样设置地图: 然后,你的convertToMp3方法将