在所有重定向中更改语言属性值，而无需在链接中使用hreflang属性

Question

我正在多语言网站上工作，请问是否有办法在重定向到其他页面时在所有语言环境页面中保持实际语言属性值，但我不喜欢使用hreflang因为我有很多链接并且没有传递查询字符串参数。 提前致谢。

Answer 1

我可以基于localStorage提出简单的解决方案。 让我们看一下三个html文件和一个JavaScript的示例：

的index.html

<html>
    <head></head>
    <body>
        <header>
            <span data-text="lang.select"></span>
            <ul>
                <li><a data-action="set.lang" data-lang="en" data-text="lang.en"></a></li>
                <li><a data-action="set.lang" data-lang="zh" data-text="lang.zh"></a></li>
            </ul>
        </header>
        <main>
            <h1 data-text="pages.list"></h1>
            <ol>
                <li><a href="a.html" data-text="pages.first"></a></li>
                <li><a href="b.html" data-text="pages.second"></a></li>
            </ol>
        </main>
        <script src="app.js"></script>
    </body>
</html>

在索引中，我们有两个链接用于选择页眉中的语言，还有两个链接至子页面。 让我们来看看data属性。 我们将在我们的翻译器对象中使用它们。 其余页面相对简单，仅附加以在重定向时保留语言。

a.html

<html>
    <body>
        <h1 data-text="page.first.title"></h1>
        <a href="index.html" data-text="pages.index"></a>
        <script src="app.js"></script>
    </body>
</html>

b.html

<html>
    <body>
        <h1 data-text="page.second.title"></h1>
        <a href="index.html" data-text="pages.index"></a>
        <script src="app.js"></script>
    </body>
</html>

这些文件几乎相同，区别在于data-text属性。 现在该展示app.js 。

app.js

const DICT = {
    en: {
        'page.first.title': 'First Page Title',
        'pages.index': 'Go to Index',
        'page.second.title': 'Second Page Title',
        'lang.select': 'Select Language',
        'lang.en': 'English',
        'lang.zh': 'Chinese',
        'pages.first': 'Go do First',
        'pages.second': 'Go to second',
        'pages.list': 'List of pages'
    },
    zh: {
        'page.first.title': '第一页标题',
        'pages.index': '转到索引',
        'page.second.title': '第二页标题',
        'lang.select': '选择语言',
        'lang.en': '英语',
        'lang.zh': '中文',
        'pages.first': '先做吧',
        'pages.second': '转到第二个',
        'pages.list': '页面列表'
    }
};

该文件包含两个级别的字典。 第一个包含语言，第二个键用作data-text值。 您可以在实际项目中将字典与逻辑分开，为简单起见，现在它在同一文件中。

现在我们要定义Translator对象。

function Translator() {
    const lang = this.getLang();
    this.setLang(lang);
    console.log(lang);
    const self = this;

    document.querySelectorAll('[data-action][data-lang]').forEach(
        e => e.addEventListener('click', function () {
            console.log(this.dataset.lang);
            self.setLang(this.dataset.lang)
        })
    );
}

在构造函数中，我们首先使用将很快介绍的方法getLang 。 它返回带有语言代码的字符串。 然后我们使用setLang设置此lang，此方法使用DICT的文本填充html元素。 最后，我们通过单击更改语言的链接来创建事件侦听器。

现在我们可以介绍翻译器的方法：

Translator.prototype.setLang = (lang) => {
    document.querySelectorAll('[data-text]').forEach(
        e => e.innerText = DICT[lang][e.dataset.text]
    );
    localStorage.setItem('lang', lang);
};

setLang获取lang并找到具有属性data-text所有元素，然后将其放入DICT定义的这些元素转换中。 将这种语言保存到localStorage 。 这是在任何刷新或重定向中保留语言的关键。

Translator.prototype.getLang = () => {
    const lang = localStorage.getItem('lang');
    return lang ? lang : "en";
};

方法getLang从localStorage获取lang ，但将english设置为默认值。 在这里，您可以从url或浏览器配置中获取默认值。

最后一行：

window.t = new Translator();

在窗口中分配一些东西不是一个好习惯，但是在此示例中，允许访问控制台中的翻译器以进行调试。

当然，有许多很棒的库可用于管理网站上的语言，我建议您学习如何在没有它们的情况下进行翻译，但是在更复杂的项目中，请遵循框架文档，这些文档可能具有允许管理延迟加载或缓存的解决方案。