0%

NexT主题 Group Pictures添加超链接

鄙人向NexT主题提交的PR已经得到合并,大家可以在下一个版本的NexT尝试。

NexT主题在博文中插入图片时,一张图片会单独占满一行。如果想要将多个尺寸较小的图片放在同一行就比较麻烦。好在NexT主题集成了一个扩展标签Group Pictures,允许在同一行放多张图片(最多3张)。

但是遇到我們这种非常特殊的需求,要在关于页面的同一行放置多个徽章并且还要能点击跳转。这就需要将图片设置超链接。Group Pictures并不支持超链接。如果直接使用Markdown图片超链接标签,则超链接效果包括<a>标签都会被吞掉。

经过反复的查找相关JS代码包括编译站点的NodeJS代码,最终在group-pictures.js文件找到了问题所在。获取图片DOM的代码是通过正则表达式判断的,他会先把Hexo那边包裹在特定标签的内容生成出来的HTML代码取出来,然后通过正则表达式来找图片HTML标签。但是这个标签是按<img>标签去找的。这样会把包裹在<img>标签外面的<a>标签忽略,导致超链接无法生成。

我們需要将这里的正则表达式改成既找<img>标签也找<a>标签。打开group-pictures.js,将下边的groupPicture函数的正则表达式修改。

1
2
3
4
5
6
7
8
9
10
11
12
function groupPicture(args, content) {
args = args[0].split('-');
const group = parseInt(args[0], 10);
const layout = parseInt(args[1], 10);

content = hexo.render.renderSync({text: content, engine: 'markdown'});

// const pictures = content.match(/<img[\s\S]*?>/g);
const pictures = content.match(/(<a[^>]*>((?!<\/a)(.|\n))+<\/a>)|(<img[^>]+>)/g); // 这一行改成这样

return `<div class="group-picture">${templates.dispatch(pictures, group, layout)}</div>`;
}

这样再使用Group Pictures的时候就可以直接放图片超链接了。例如:

1
2
3
4
5
{% grouppicture 3-1 %}
[![](/images/docs/next.svg)](https://theme-next.js.org/)
![](/images/docs/next.svg)
[![](/images/docs/next.svg)](https://theme-next.js.org/)
{% endgrouppicture %}
隐藏
推进创文常态化 共建文明襄阳城 · 🄽🄾5️⃣9️⃣7️⃣2️⃣ · 做文明襄阳人 建文明襄阳城 凝聚文明正能量 筑梦千年古襄阳 · 🄽🄾5️⃣9️⃣7️⃣2️⃣ · 创建全国文明城市 加快建设汉江流域中心城市 · 🄽🄾5️⃣9️⃣7️⃣2️⃣ · 讲文明 树新风 · 🄽🄾5️⃣9️⃣7️⃣2️⃣ · 用微笑融化陌生 用文明美化襄阳 · 🄽🄾5️⃣9️⃣7️⃣2️⃣ · 争当文明使者 播撒文明新风