本文首发于我的博客,更多精彩内容请移步Brayn的博客
作为一种简单的写作语言,markdown对图片和链接的支持并不好。幸运的是,markdown语言脱胎于HTML语言,因此我们可以直接在markdown文本中使用HTML语言实现特定功能。<!--more-->
起因
在写博客展示那篇文章的时候,我发现如果默认以markdown的语法去写,那么浏览器默认会在本页面打开链接。对于老手来说,可以熟练地使用ctrl+鼠标左键点击实现在新标签页打开,但这未必适合所有人。因此,为了避免读者跳转后再回来重新加载页面造成麻烦,只好在写作时受累使用复杂一点的HTML语言了。
情景复现
使用markdown语言:[欢迎来到Brayn的博客](https://brayn.top)
得到的结果会是:欢迎来到Brayn的博客
(PS:由于简书的机制不同,可能会在新页面打开。但是个人博客中,会在本页面打开)
大家可以尝试一下:
使用鼠标左键直接点击
使用ctrl+鼠标左键点击(Mac用户使用⌘+鼠标左键)
解决方案
使用HTML语言:
<a href="https://brayn.top" target="_blank">欢迎来到Brayn的博客 </a>
得到的结果是:欢迎来到Brayn的博客
这里的关键是在HTML的链接命令中,target属性规定了被链接的文档或网页在哪里显示,而_blank参数指定链接在新页面打开。
更多的关于HTML语言中链接使用语法的知识可以参阅W3school的系列文章。
优化方案
那么如果一篇文章里需要引用的链接很多,挨个使用HTML语言书写的话,还是很麻烦的,毕竟markdown提供了更轻松也更优美的插入链接方式,不用白不用。
于是,继续翻阅文档,我又发现了新的方法:HTML<base>标签。
<base> 标签为页面上的所有链接规定默认地址或默认目标。
通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。
值得注意的是,<base> 标签必须位于 head 元素内部。也就是说,在单独的文章里使用<base> 标签是没有用的,必须要到Jekyll或者Hexo的layout模板文件里,在<head>头文件之间插入语句<base target="_blank" />才可以。
更多关于<base>的解释和具体的实例,可以前往这里查看。