logo标签列表

我能否在Markdown中使用'target="_blank"'创建链接？

htmlhyperlinkmarkdowntargetnew-window
776

有没有一种在Markdown中创建在新窗口打开链接的方法？如果没有，您推荐使用哪种语法来实现这一点？我会将其添加到我使用的Markdown编译器中。我认为这应该是一个选项。

3
正如答案中所指出的，这不是 Markdown 的一项功能。如果您想要将其设为全站默认链接，David Morrow 给出了答案。或者如果您只想在一个实例中使用它，那么 Matchu 的答案 表明您必须实际上写入 HTML。 - JGallardo
可能是Markdown打开新窗口链接的重复问题。 - Serge Stroobandt
你的问题并没有具体说明你正在做什么，但是一些Markdown引擎或浏览器（不确定哪一个）会识别你创建的链接是否指向不同的域，并在新标签页中打开它们。对我来说，有时候从https:中删除s就足以获得我想要的功能。 - Josh Gust
24个回答
574

就Markdown语法而言，如果你想要更加详细的内容，你就必须使用HTML。

<a href="http://example.com/" target="_blank">Hello, world!</a>

大多数我见过的Markdown引擎都允许使用纯粹的HTML，特别是在通用文本标记系统无法满足要求的情况下。（例如StackOverflow引擎。）即使是仅包含Markdown的文档也容易包含XSS攻击，因此它们会将整个输出通过HTML白名单过滤器进行过滤。因此，如果您或您的用户想要创建 _blank 链接，他们可能仍然可以这样做。

如果这是您经常使用的功能，那么创建自己的语法可能是有意义的，但它通常并不是关键功能。如果我想在新窗口中打开链接，我会自己使用ctrl-click，谢谢。

35
知道吗？我同意你和alex的观点。我决定不再使用_blank。将所有内容保持在一个浏览器中，这样用户体验更好。他们可以像你说的那样点击“后退”或按下命令键 + 单击（我是Mac用户 :)）。 - ma11hew28
2
我在页面上运行了JavaScript，它会为所有不在我的域名范围内的链接添加"_blank"，就像@alex在下一个答案中所示。 - David Silva Smith
4
我建议（为了表述清晰并使语句易于阅读）使用以下语法：[访问此页面](http::/link.com) 以了解“打开”的概念。 - Augustin Riedinger
9
简单的target="_blank"标签可能存在安全风险！在标签中加入rel="noopener"来防范风险！（https://sites.google.com/site/bughunteruniversity/nonvuln/phishing-with-window-opener） - Max Vyaznikov
23
将所有内容都保留在一个浏览器中并不总是提供更好的用户体验。例如，如果用户在您的单页面应用程序中进行注册或结账流程，并且在最后一步需要同意外部页面的某些条件，那么除非使用模态框，否则在新窗口中打开页面会比用户完全失去上下文并不得不重新开始整个过程更可取。 - Adam Reis
显示剩余7条评论
510

Kramdown 支持此功能。它与标准 Markdown 语法兼容，但也有许多扩展功能。使用方法如下：

[link](url){:target="_blank"}
10
在Mac上使用Markdown引擎似乎无法正常工作 :-( - Netsi1964
90
与jekyll很搭配！ - gabbar0x
2
kramdown 语法：链接名称{:target="_blank"}可以使用 kramdown 在线编辑器将其解析为 HTML：http://trykramdown.herokuapp.com/我使用它是因为我已经有了很多 kramdown 引用，并且想避免重新输入它们。 - algoquant
4
在Jekyll中是否有一种设置方式可以将此设置为默认值？我希望所有博客文章中的链接都用target="_blank"打开。 - ahirschberg
26
不起作用，它只是将 {:target="_blank"} 渲染为文本。 - Benny Schmidt
显示剩余7条评论
133
我不认为有一个降价功能，尽管如果你想要使用JavaScript自动打开指向站外链接的选项，可能还有其他可用的选择。
Array.from(document.links)
    .filter(link => link.hostname != window.location.hostname)
    .forEach(link => link.target = '_blank');

jsFiddle。

如果你正在使用jQuery：

$(document.links).filter(function() {
    return this.hostname != window.location.hostname;
}).attr('target', '_blank');

jsFiddle。

3
我发现唯一需要强制人们在新窗口打开链接的情况是当我正在句子的中间插入外部链接，并且想要提供评论的来源，而不会打断句子的流畅性。这个JavaScript代码片段非常适合这个目的——谢谢，我已经点赞了 :) - tehwalrus
23
我认为Jakob Nielson的那个引用不再适用于这里了。他抱怨打开新窗口，但现在target="_blank"会在新标签页中打开。我个人不喜欢链接到其他域名的链接不在新标签页中打开。 - Alexander Rechsteiner
4
此外：因为说“Jakob Nielsen说你不应该那样做”是一个很糟糕的论点。 - Ola Tuvesson
1
不确定这里的“答案”在哪里。您开始评论了UX，这是错误的（Jakob Nielsen在这里完全错了，但我不值得花时间争论）。然后又讨论了Javascript，尽管上下文是markdown。 - JGallardo
2
我要补充一点，这也是更可取的全局解决方案。它可以保持你的Markdown干净，这也是Markdown的目的。 - Adam Michael Wood
显示剩余4条评论
92

使用 Markdown v2.5.2，你可以这样做：

[link](URL){:target="_blank"}
3
我尝试了这个方法，但对我没用。使用的是Django 1.6版本。 - joel goldstick
10
适用于Jekyll v2.4.0（较早版本也可能适用）。 - nicksuch
9
这是kramdown（由于Jekyll使用kramdown，因此它可以与Jekyll一起使用）。 - z3ntu
3
无法在GitLab中让这个语法正常工作。我不确定当前正在使用哪个版本的Markdown。 - Rockin4Life33
1
我发现下划线 _ 是可选的。使用 {:target="blank"} 也可以达到同样的效果。而在我的有缺陷的文本编辑器中，下划线会使文件的其余部分看起来是斜体。 - Jeff Irwin
显示剩余6条评论
28

所以，并不完全是不能在Markdown URL上添加链接属性。要添加属性，请查看所使用的基础Markdown解析器以及它们的扩展。

特别地，pandoc有一个扩展程序可启用link_attributes，允许在链接中使用标记，例如：

[Hello, world!](http://example.com/){target="_blank"}
  • 对于那些来自于R(例如使用rmarkdown, bookdown, blogdown等)的人，这是你想要的语法。
  • 对于不使用R的人，你可能需要在调用pandoc时使用+link_attributes启用扩展（查看文档）

注意: 这与kramdown解析器的支持不同，后者是上面接受的答案之一。特别地，注意kramdown与pandoc的区别在于它需要在花括号{}的开头加上冒号:，例如：

[link](http://example.com){:hreflang="de"}

特别是：

# Pandoc
{ attribute1="value1" attribute2="value2"}

# Kramdown
{: attribute1="value1" attribute2="value2"}
 ^
 ^ Colon
1
这在我们的自定义Markdown环境中对我有效。谢谢！ - klewis
参考链接怎么办？ - khatchad
18

一个全球性的解决方案是将<base target="_blank">标签放置在您网页的<head>元素中。这有效地为每个锚点元素添加了一个默认的目标。我使用Markdown在我的基于WordPress的网站上创建内容，我的主题定制器会让我将该代码注入到每个页面的顶部。如果您的主题不支持，请使用插件。

13

虽然不是直接回答，但可能会对一些人有所帮助。

如果你正在使用GatsbyJS，则有一个插件可以在您的markdown中自动添加target="_blank"到外部链接。

它被称为gatsby-remark-external-links，并且可以像这样使用：

yarn add gatsby-remark-external-links

plugins: [      
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [{
        resolve: "gatsby-remark-external-links",
        options: {
          target: "_blank",
          rel: "noopener noreferrer"
        }
      }]
    }
  },

它还处理了rel="noopener noreferrer"。

如果您需要更多选项，请参考文档。

12
1
我喜欢你的解决方案。因为我已经尝试了不同的配置，似乎它只适用于内联链接。也许有一种方法可以使用引用链接进行链接。类似于：[在新窗口中打开][1] \n [1]: (https://abc.xyz" target="_blank)。也许我弄错了什么，或者这不是那样工作的意思？ - MrIsaacs
11
我正在使用Grav CMS，它可以完美地工作：
正文/内容：
一些文本[1] 正文/引用：
[1]: http://somelink.com/?target=_blank 只需确保target属性首先传递，如果链接中有其他属性，请将它们复制/粘贴到引用URL的末尾。
也可直接使用链接：
[前往该页面](http://somelink.com/?target=_blank)
2
参考文献，这里是相关文档章节。 - domsson
谢谢。如果URL已经有查询参数，这个方法仍然适用，只需添加&target=_blank：[转到此页面](http://somelink.com/?param=42&target=_blank)。 - undefined
7

在我的项目中，我正在做这件事，并且它运行良好：

[Link](https://example.org/ "title" target="_blank")

链接

但并非所有解析器都能做到这一点。

几乎可以工作，但是即使你的示例在标题属性中呈现为URL编码，而不是作为新属性（查看源代码或将节点编辑为HTML）：<a href="https://example.org/" rel="nofollow" title="title&quot; target=&quot;_blank">链接</a>。 - Graham P Heath
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接