我可以在Markdown中使用“ target =“ _ blank””创建链接吗？

460

有没有一种方法可以在Markdown中创建一个在新窗口中打开的链接？如果没有，建议您使用哪种语法。我将其添加到我使用的markdown编译器中。我认为这应该是一个选择。

html  hyperlink  markdown  target  new-window 
— ma11hew28
source
因此，正如答案中指出的那样，它不是markdown的功能。如果您想将其设置为默认的站点范围内的链接对象，David Morrow会给出答案。或者，如果您只是想在一个实例中执行此操作，那么Matchu的回答表明您必须实际上是用HTML编写的。
— JGallardo
— Serge Stroobandt 2014年
您的问题不是关于您正在做什么的特定问题，但是某些Markdown引擎或浏览器（不确定哪个）会识别您所创建的链接何时指向其他域，并将在新标签页中打开它们。对我来说，有时候s从中删除https:足以获得我想要的功能。
— Josh Gust

Answers:

377

就Markdown语法而言，如果要详细说明，则只需使用HTML。

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

我见过的大多数Markdown引擎都允许使用普通的旧HTML，仅在这种情况下，即通用文本标记系统无法将其截断。（例如，StackOverflow引擎。）然后，无论如何，它们都将通过HTML白名单过滤器运行整个输出，因为即使是仅Markdown的文档也可以轻松地包含XSS攻击。这样，如果您或您的用户想要创建_blank链接，那么他们可能仍然可以。

如果这是您将要经常使用的功能，则创建自己的语法可能很有意义，但是通常它并不是至关重要的功能。如果要在新窗口中启动该链接，请自己按住ctrl键单击它，谢谢。

— 抹茶
source
19
雅知道吗？我同意你和亚历克斯的看法。我决定根本不使用_blank。将内容保存在一个浏览器中是一种更好的用户体验。他们可以像您说的那样进行回击或单击命令（Mac用户在这里：）。
— ma11hew28 2011年
1
我在将_blank添加到域之外的所有链接的页面上运行了javascript。就像@alex在下一个答案中一样
— David Silva Smith
3
我建议（在被显式和内嵌可读的欲望）的语法如下：[Visit this page](http::/link.com(获得的想法开幕。
— 奥古斯丁·里丁格
4
简单的target =“ _ blank”可能很危险！还在标签中添加rel =“ noopener”！（sites.google.com/site/bughunteruniversity/nonvul​​n/...）
— 最大Vyaznikov
1
@MaxVyaznikov有趣。如果浏览器在边缘弹出窗口上方提供登录窗口，您认为这会更安全吗？将网站的登录UI与“相似”网页创建的欺骗性和虚假登录UI分开。在过去更困难的地方，现在可能更有可能。
— 1.21吉瓦，
350

Kramdown支持它。它与标准Markdown语法兼容，但也有许多扩展。您可以这样使用它：

[link](url){:target="_blank"}
— 法尔诺
source
7
在Mac上使用Markdown引擎似乎不起作用：-（
— Netsi1964年
48
与jekyll搭配使用效果很好！
— bholagabbar's
1
可以使用kramdown在线编辑器将kramdown语法：[link name]（url_link）{：target =“ _ blank”}解析为HTML：http ://trykramdown.herokuapp.com/ 我使用它是因为我已经拥有很多kramdown参考，并希望避免重新键入它们。
— algoquant
4
jekyll中是否可以将其设置为默认值？我希望博客文章中的所有链接以target="_blank"
— ahirschberg '17
10
没用 它只是将{：target =“ _ blank”}呈现为文本。
— 本尼（Benny）
113

我认为没有降价功能。

但是，如果您想使用JavaScript自动打开指向自己网站之外的链接，则可能会有其他选项。 

var links = document.links;

for (var i = 0, linksLength = links.length; i < linksLength; i++) {
   if (links[i].hostname != window.location.hostname) {
       links[i].target = '_blank';
   } 
}

jsFiddle。

如果您使用的是jQuery，则有点简单...

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

jsFiddle。

— 亚历克斯
source
1
我同意您的意见，但在您处于iframe的情况下，您需要使用链接将其炸开。
— David Morrow
2
我发现唯一一次迫使人们进入新窗口的时间是我在句子中途链接到外部某个地方时的中途，并且我想提供我的评论的来源而不中断流程。此js代码段非常适合该目的-谢谢，已投票:)
— tehwalrus 2012年
14
我认为Jakob Nielson的引用在这里不再适用。他抱怨打开新窗口，但是如今target =“ _ blank”而是在新标签页中打开。当到其他域的链接未在新选项卡中打开时，我个人不喜欢它。
— Alexander Rechsteiner 2013年
3
另外：因为说Jakob Nielsen says you shouldn't do that是一个可怕的论点。
— 奥拉·图维森
2
我要在这里补充一点，THIS作为全局解决方案也是可取的。它可以使Markdown保持清洁，这是Markdown的重点。
— 亚当·迈克尔·伍德
47

使用Markdown-2.5.2，您可以使用以下命令：

[link](url){:target="_blank"}
— 中毒
source
2
我试过了，对我没用。与django 1.6一起使用
— joel goldstick 2015年
5
可与Jekyll v2.4.0一起使用（也可以与早期版本一起使用）
— nicksuch
5
这是kramdown（并且因为Jekyll使用kramdown，它与Jekyll一起使用）。
— z3ntu 2015年
1
似乎无法在GitLab中使用此语法。我不确定当前使用的是Markdown版本。
— Rockin4Life33
有没有办法使它成为默认值，这样我就不必为每个链接都指定它了？
— 康奈尔
8

一种全局解决方案是将<base target="_blank"> 页面<head>元素放入其中。这实际上为每个锚元素添加了默认目标。我使用markdown在基于Wordpress的网站上创建内容，而主题定制器将使我可以将该代码注入到每个页面的顶部。如果您的主题不这样做，那么有一个插件

— 阿鲁卜
source
8

我正在使用Grav CMS，它可以完美运行：

正文/内容：
Some text[1]

正文/参考：
[1]: http://somelink.com/?target=_blank

只要确保首先传递了target属性，如果链接中还有其他属性，请将它们复制/粘贴到参考URL的末尾。

也可以作为直接链接：
[Go to this page](http://somelink.com/?target=_blank)

— 彼得·丹肖夫
source
作为参考，这是相关的文档章节。
— domsson
7

对于幽灵降价使用：

[Google](https://google.com" target="_blank)

在这里找到它：https : //cmatskas.com/open-external-links-in-a-new-window-ghost/

— 古亚
source
1
我喜欢你的解决方案。因为我尝试过使用不同的配置，它似乎只能在内联链接中工作。也许有一种方法可以链接参考链接。是这样的：[open new window][1] \n [1]: (https://abc.xyz" target="_blank)。也许我弄错了什么，或者这不是要那样工作吗？
— MrIsaacs'Apr
7

因此，不能将链接属性添加到Markdown URL并不是很正确。要添加属性，请检查所使用的基础markdown解析器及其扩展名。

尤其是pandoc具有enable的扩展名link_attributes，它允许在链接中进行标记。例如

[Hello, world!](http://example.com/){target="_blank"}
  • 对于那些从未来- [R （例如，使用rmarkdown，bookdown，blogdown等），这是你想要的语法。
  • 对于未使用R的用户，您可能需要在对with 的调用中启用扩展pandoc+link_attributes

注意：这与kramdown解析器的支持不同，后者是上面接受的答案之一。特别要注意的是，kramdown与pandoc有所不同，因为它需要一个冒号:--在大括号的开头- {}例如

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

特别是：

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

# Kramdown
{: attribute1="value1" attribute2="value2"}
 ^
 ^ Colon
— 无涂层的
source
这在我的自定义降价环境中为我工作。谢谢！
— klewis
6

您可以通过本地javascript代码执行此操作，如下所示：

 
var pattern = /a href=/g;
var sanitizedMarkDownText = rawMarkDownText.replace(pattern,"a target='_blank' href=");

JSFiddle代码

— 企鹅先生
source
6

在我的项目中，我正在这样做，并且效果很好：

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

链接

但并非所有解析器都允许您这样做。

— 用户名
source
几乎可以使用，但是即使您的示例使用URL编码也显示为标题attr，而不是作为新的attrs渲染（查看源代码或将节点编辑为html）： <a href="https://example.org/" rel="nofollow" title="title&quot; target=&quot;_blank">Link</a>
— Graham P Heath 2015年
6

没有简单的方法可以做到，就像@alex指出的那样，您需要使用JavaScript。他的答案是最好的解决方案，但是为了对其进行优化，您可能只想过滤内容后链接。

<script>
    var links = document.querySelectorAll( '.post-content a' );  
    for (var i = 0, length = links.length; i < length; i++) {  
        if (links[i].hostname != window.location.hostname) {
            links[i].target = '_blank';
        }
    }
</script>

该代码与IE8 +兼容，您可以将其添加到页面底部。请注意，您需要将“ .post-content a”更改为用于帖子的类。

如此处所示：http : //blog.hubii.com/target-_blank-for-links-on-ghost/

— Midudev
source
0

尝试使用PHP实现降价时，我遇到了这个问题。

由于用户生成的使用markdown创建的链接需要在新选项卡中打开，而站点链接需要保留在选项卡中，因此我将markdown更改为仅生成在新选项卡中打开的链接。因此，并非页面上的所有链接都链接出去，只有使用markdown的链接会链接出去。

在markdown中，我<a target='_blank' href="...">使用find / replace 将所有链接输出更改为足够容易的输出。

— 用户名
source
0

我不同意留在一个浏览器选项卡中会带来更好的用户体验。如果您希望人们留在您的网站上，或者回来阅读完该文章，请在新标签中将其发送出去。

以@davidmorrow的答案为基础，将此JavaScript放入您的网站，然后仅将外部链接变成具有target = _blank的链接：

    <script type="text/javascript" charset="utf-8">
      // Creating custom :external selector
      $.expr[':'].external = function(obj){
          return !obj.href.match(/^mailto\:/)
                  && (obj.hostname != location.hostname);
      };

      $(function(){
        // Add 'external' CSS class to all external links
        $('a:external').addClass('external');

        // turn target into target=_blank for elements w external class
        $(".external").attr('target','_blank');

      })

    </script>
— 丹尼
source
0

对于完整的Alex回答（2010年12月13日）

可以使用以下代码来实现更智能的注入目标：

/*
 * For all links in the current page...
 */
$(document.links).filter(function() {
    /*
     * ...keep them without `target` already setted...
     */
    return !this.target;
}).filter(function() {
    /*
     * ...and keep them are not on current domain...
     */
    return this.hostname !== window.location.hostname ||
        /*
         * ...or are not a web file (.pdf, .jpg, .png, .js, .mp4, etc.).
         */
        /\.(?!html?|php3?|aspx?)([a-z]{0,3}|[a-zt]{0,4})$/.test(this.pathname);
/*
 * For all link kept, add the `target="_blank"` attribute. 
 */
}).attr('target', '_blank');

您可以通过在(?!html?|php3?|aspx?)组构造中添加更多扩展名来更改正则表达式例外（在此处了解此正则表达式：https : //regex101.com/r/sE6gT9/3）。

对于没有jQuery版本的代码，请检查以下代码：

var links = document.links;
for (var i = 0; i < links.length; i++) {
    if (!links[i].target) {
        if (
            links[i].hostname !== window.location.hostname || 
            /\.(?!html?)([a-z]{0,3}|[a-zt]{0,4})$/.test(links[i].pathname)
        ) {
            links[i].target = '_blank';
        } 
    }
}
— 布鲁诺·莱瑟尔
source
0

使用GNU sed和make仅针对外部链接自动进行

如果要对所有外部链接系统地执行此操作，则CSS是不可选项。但是，sed一旦从Markdown创建（X）HTML ，就可以运行以下命令：

sed -i 's|href="http|target="_blank" href="http|g' index.html

通过将上述sed命令添加到中，可以进一步实现自动化makefile。有关详细信息，请参见GNU make或在我的网站上了解如何做到这一点。

— Serge Stroobandt
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.