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从lang获取localStorage，但将english设置为默认值。在这里，您可以从url或浏览器配置中获取默认值。

最后一行：

window.t = new Translator();

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

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

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

1 个答案: