Question

我必须在Business Catalyst（不是我的选择）中构建一个多语言网站，这是我对语言切换器的唯一选择，而前者是链接rel =＆＃34; alternate＆＃34;是JS。经过大量的反复试验，我得到了这个工作：

<script type="text/javascript">
document.write("<ul>"); 
document.write("<li><a href=\"http://localhost:8888/en/" + location.pathname + "\">English</a></li>");
document.write("<li><a href=\"http://localhost:8888/fr/" + location.pathname + "\">French</a></li>");
document.write("<ul>"); 
</script>

唯一的问题是它很慢并且写得很糟糕。有没有更好的方法来编写代码？也许一个加载速度更快，可能使用jQuery？

非常感谢您的帮助

安东尼奥

Answer 1

我通常建议避免使用基于字符串的动态html，因为随着时间的推移，它往往难以维护。相反，我建议采用某种基于模板的解决方案。有一些选项，但一个流行的框架是KnockoutJs

http://knockoutjs.com/

Answer 2

1- A a starter。 document.write将用您的列表替换整个DOM，因此，我建议将列表附加到html元素。

2-为了提高性能，尝试减少函数调用以减少开销。选项1：准备html并将其写入一个字符串，然后附加该字符串。例如。

var lang = "<ul><li>stuff...</li><li>other stuff....</li></ul>";

或者，为了便于阅读，

lang = "<ul>";
lang = "<li><a href=\"http://localhost:8888/en/" + location.pathname + "\">English</a></li>";
lang = "<li><a href=\"http://localhost:8888/fr/" + location.pathname + "\">French</a></li>";
lang = "</ul>";

然后

$("#change_lang").html(lang);//change_lang is a div <div id="change_lang"> that you have prepared to put the links inside.

3-也许您可以直接从服务器加载html，，而无需让JS在屏幕上打印。 将其放入.html页面（我不确定您的网页结构，因此，我不知道为什么这种方法可能不适合您），但直接加载html而无需等待对于JS 和JQuery加载将使显示更快。

<ul>
    <li><a href="http://localhost:8888/en/yoursite.html">English</a></li>
    <li><a href="http://localhost:8888/fr/yoursite.html">French</a></li>
</ul>

4-同时尝试将JS代码放在单独的文件中，然后minify将它们缩小，从而减少加载时间。将JS放在单独的文件中允许浏览器cache它们，并且无需每次都加载它们。搜索PageSpeed，向您展示改善网站效果的各种方法。

Answer 3

您可以在html中包含以下内容。

<ul id="multilang">
    <li>
        <a href="http://localhost:8888/en/">English</a>
    </li>
    <li>
        <a href="http://localhost:8888/fr/">French</a>
    </li>
</ul>

然后使用jQuery来操作url。

$(function () {
    $.each($("#multilang a"), function () {
        $(this).attr('href', $(this).attr('href') + location.pathname);
    });
});

使用javascript进行语言重定向

3 个答案: