繁体   English   中英

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

Change language attribute value in all redirections without use hreflang attribute in links

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

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";
};

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

最后一行:

window.t = new Translator();

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

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

1 hreflang和lang属性的语义用法

这不是 SEO问题。 我很好奇如何以语义正确的方式标记HTML与使用的语言。 如果我的标记错误,请纠正我。 我的问题是:当我已经在link标签中使用hreflang属性时,我是否需要html标签中的lang属性? 这两个指令在语义上是不同的吗? 我的意思是:两个示例中lin ...

2 单一语言网站的毯子hreflang或lang属性

我的营销团队正在修复Semrush和Ahrefs报告的Site Audit错误。 错误是:“218页没有hreflang和lang属性” 这是一个单一语言网站 - 全部使用美国英语。 我意识到我可以进入218页并将&lt;html&gt;更改为&lt;html lang =“en” ...

5 hreflang属性可以用于视频吗?

可以使用hreflang属性来定义链接的视频在通话时的语言吗? 还是仅在链接到包含文本的文档时使用? &lt;a href="video.mp4" hreflang="en" type="video/mp4" download&gt;Download Video&lt;/a&g ...

10 使用jQuery获取页面上所有链接的属性值

我在HTML页面上的所有链接都是以下格式,具有不同的类名。 我所有的“ onclick”值均以ABC_A开头。 我正在尝试使用以下命令捕获“ onclick”的值,但它返回空的“”。 有没有一种方法可以避免使用单个类名,因为它在链接之间是不同的? 否则我将走完全错误的路。 ...

2018-01-20 20:13:57 1 13   jquery
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM