在所有重定向中更改語言屬性值，而無需在鏈接中使用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();

在窗口中分配一些東西不是一個好習慣，但是在此示例中，允許訪問控制台中的翻譯器以進行調試。

當然，有許多很棒的庫可用於管理網站上的語言，我建議您學習如何在沒有它們的情況下進行翻譯，但是在更復雜的項目中，請遵循框架文檔，這些文檔可能具有允許管理延遲加載或緩存的解決方案。