如何使用Twig提取HTML的lang属性值并实现多语言链接展示

这事儿其实挺简单的，用原生JavaScript或者jQuery都能轻松实现，我给你分两种方案详细讲讲：

方案一：原生JavaScript实现 #

这种方法不需要依赖任何库，直接用浏览器自带的API就能搞定：

1. 获取lang属性值：通过document.documentElement.lang可以直接拿到<html>标签的lang属性值
2. 创建或切换链接：根据获取到的语言值，动态生成对应的链接元素，插入到页面指定位置

// 获取页面根元素的lang属性值
const pageLanguage = document.documentElement.lang;

// 选择页面中用来放置链接的容器（假设你已经在页面里加了一个id为"lang-link-container"的元素）
const linkContainer = document.getElementById('lang-link-container');

// 根据语言值生成对应的链接
let targetLink;
if (pageLanguage === 'en') {
  targetLink = document.createElement('a');
  targetLink.href = '/your-english-target-url'; // 替换成你的英文链接地址
  targetLink.textContent = 'Visit English Content'; // 替换成你的英文链接文本
} else if (pageLanguage === 'ch') {
  targetLink = document.createElement('a');
  targetLink.href = '/your-chinese-target-url'; // 替换成你的中文链接地址
  targetLink.textContent = '查看中文内容'; // 替换成你的中文链接文本
}

// 如果生成了链接，就把它添加到容器里
if (targetLink) {
  linkContainer.appendChild(targetLink);
}

方案二：jQuery实现（如果你项目里已经在用jQuery） #

如果你的项目依赖jQuery，代码会更简洁：

// 获取html标签的lang属性
const pageLang = $('html').attr('lang');
// 选择链接容器
const $linkContainer = $('#lang-link-container');

// 根据语言值替换容器内的链接
if (pageLang === 'en') {
  $linkContainer.html('<a href="/your-english-target-url">Visit English Content</a>');
} else if (pageLang === 'ch') {
  $linkContainer.html('<a href="/your-chinese-target-url">查看中文内容</a>');
}

额外提示 #

• 如果你的lang属性值是类似zh-CN这种带地区后缀的，可以把判断条件改成pageLanguage.includes('ch')来匹配所有中文相关的语言代码
• 记得提前在页面里准备好用来放置链接的容器（比如<div id="lang-link-container"></div>），不然代码找不到插入位置哦

内容的提问来源于stack exchange，提问作者Shanks