我在部分文章中引入了较多的外链,而这些外链统一使用md语法[链接文字](外链地址),这使得渲染得到的网页直接在本标签页打开外链,不仅影响阅读体验,还不利于网站安全和SEO优化。因此查阅相关资料并进行下面的优化调整。
自定义配置
在非本站的外链中添加target="_blank"字段可新建标签页打开,添加rel="noopener noreferrer"字段可以阻止新开页面通过 window.opener 操作原页面,并防止 Referer 泄漏。基于上述原理,在hexo根目录下新建/scripts/external-links.js并写入:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| 'use strict';
hexo.extend.filter.register('after_post_render', function (data) { const siteHost = hexo.config.url.replace(/https?:\/\//, '').replace(/\/$/, ''); data.content = data.content.replace(/<a\s+([^>]*href="([^"]+)"[^>]*)>/gi, (match, attr, href) => { try { if (!href.includes(siteHost) && !href.startsWith('#') && !href.startsWith('/')) { if (!/target=/.test(attr)) attr += ' target="_blank"'; if (!/rel=/.test(attr)) attr += ' rel="noopener noreferrer"'; } } catch (e) {} return `<a ${attr}>`; }); return data; });
|
这样可以无需手动添加外链标签,而是在渲染阶段自动执行。重新部署生成,打开 public/ 文件夹里的文章 HTML,找到外链 <a> 标签,可以看到渲染成功:
1
| <a href="https://example.com" target="_blank" rel="noopener noreferrer">
|
hexo插件配置
也可以使用hexo插件对外链进行配置。
1
| npm install hexo-external-link --save
|
在Hexo根目录的_config.yml文件中添加下面的配置:
1 2 3 4 5 6 7 8 9 10 11 12
| hexo_external_link: enable: true enable_base64_encode: true url_param_name: 'u' html_file_name: 'go.html' target_blank: true link_rel: 'external nofollow noopener noreferrer' domain: 'your_domain' safety_chain: true ignore_attrs: - 'data-fancybox' - 'ignore-external-link'
|
各参数含义及配置说明参见原作者的项目 hexo-external-link。