html - 我可以在 Markdown 中创建带有 'target="_blank"' 的链接吗？

Question

有没有办法在 Markdown 中创建一个在新窗口中打开的链接？如果不是，您建议使用什么语法来执行此操作？我会将它添加到我使用的 markdown 编译器中。我认为这应该是一种选择。

score 496 · Accepted Answer

就 Markdown 语法而言，如果您想获得详细信息，您只需要使用 HTML。

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

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

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

score 441 · Accepted Answer

克拉姆当支持它。它与标准 Markdown 语法兼容，但也有许多扩展。你会像这样使用它：

[link](url){:target="_blank"}

score 120 · Accepted Answer

我认为没有降价功能，尽管如果您想使用 JavaScript 打开指向您自己网站之外的链接，可能还有其他选项可用。

Array.from(javascript.links)
    .filter(link => link.hostname != window.location.hostname)
    .forEach(link => link.target = '_blank');

js小提琴。

如果您使用 jQuery：

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

js小提琴。

score 65 · Accepted Answer

65

使用 Markdown v2.5.2，您可以使用：

[link](URL){:target="_blank"}

于 2015-01-22T12:54:12.123 回答

score 17 · Accepted Answer

因此，不能将链接属性添加到 Markdown URL 是不完全正确的。要添加属性，请检查正在使用的底层 Markdown 解析器及其扩展名。

特别是，pandoc有一个扩展名 enable link_attributes，它允许在链接中进行标记。例如

[Hello, world!](http://example.com/){target="_blank"}

对于那些来自R的人（例如使用rmarkdown,bookdown等blogdown），这是您想要的语法。
对于那些不使用R的人，您可能需要在调用中启用扩展名pandocwith+link_attributes

注意：这与kramdown解析器的支持不同，这是上面公认的答案之一。特别要注意 kramdown 与 pandoc 不同，因为它需要冒号 -- :-- 在花括号的开头 -- {}，例如

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

尤其是：

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

# Kramdown
{: attribute1="value1" attribute2="value2"}
 ^
 ^ Colon

score 14 · Accepted Answer

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

score 9 · Accepted Answer

我正在使用 Grav CMS，这非常有效：

正文/内容：
Some text[1]

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

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

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

score 9 · Accepted Answer

对于幽灵降价使用：

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

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

score 7 · Accepted Answer

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

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

JSF中间代码

score 7 · Accepted Answer

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

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

关联

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

score 7 · Accepted Answer

不是一个直接的答案，但可能会帮助一些人在这里结束。

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

它被称为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".

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

score 7 · Accepted Answer

没有简单的方法可以做到这一点，就像@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/

score 0 · Accepted Answer

仅对外部链接自动化，使用 GNU sed & make

如果想对所有外部链接系统地执行此操作，CSS 是没有选择的。sed但是，一旦从 Markdown 创建了 (X)HTML ，就可以运行以下命令：

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

这可以通过将上述sed命令添加到makefile. 有关详细信息，请参阅 GNUmake或在我的网站上查看我是如何做到的。

score 0 · Accepted Answer

您可以使用 {[attr]="[prop]"} 添加任何属性

例如 [Google] ( http://www.google.com ){target="_blank"}

score 0 · Accepted Answer

我在尝试使用 PHP 实现 markdown 时遇到了这个问题。

由于使用 markdown 创建的用户生成链接需要在新选项卡中打开，但站点链接需要保留在选项卡中，因此我将 markdown 更改为仅生成在新选项卡中打开的链接。所以不是页面上的所有链接都链接出去，只是那些使用降价的链接。

在降价中，我将所有链接输出更改为<a target='_blank' href="...">使用查找/替换很容易。

score 0 · Accepted Answer

对于已完成的亚历克斯回答（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';
        } 
    }
}

score 0 · Accepted Answer

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

以@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>

score 0 · Accepted Answer

如果您只想在特定链接中执行此操作，只需使用其他人回答的内联属性列表语法，或者仅使用 HTML。

如果您想在所有生成的<a>标签中执行此操作，取决于您的 Markdown 编译器，也许您需要对其进行扩展。

这些天我正在为我的博客做这个，它是由生成的pelican，它使用Python-Markdown. 我找到了Python-Markdown Phuker/markdown_link_attr_modifier的扩展，它运行良好。请注意，一个名为的旧扩展newtab在 Python-Markdown 3.x 中似乎不起作用。

score 0 · Accepted Answer

如果有人正在寻找全局rmarkdown( pandoc) 解决方案。

使用 Pandoc Lua 过滤器

您可以编写自己的Pandoc Lua 过滤器，添加target="_blank"到所有链接：

编写一个 Pandoc Lua 过滤器，例如命名links.lua

function Link(element)

    if 
        string.sub(element.target, 1, 1) ~= "#"
    then
        element.attributes.target = "_blank"
    end
    return element

end

然后更新你的_output.yml

bookdown::gitbook:
  pandoc_args:
    - --lua-filter=links.lua

`<base target="_blank">`在标头中注入

另一种解决方案是使用以下选项注入<base target="_blank">HTMLhead部分：includes

创建一个新的 HTML 文件，例如命名links.html

<base target="_blank">

然后更新你的_output.yml

bookdown::gitbook:
  includes:
    in_header: links.html

注意：此解决方案还可以为哈希 ( #) 指针/URL 打开新选项卡。我尚未使用此类 URL 测试此解决方案。

score -3 · Accepted Answer

-3

这对我有用：[页面链接]（您的网址在这里“（目标|_blank）”）

于 2018-10-23T16:21:34.133 回答

html - 我可以在 Markdown 中创建带有 'target="_blank"' 的链接吗？

20 回答 20

仅对外部链接自动化，使用 GNU sed & make

使用 Pandoc Lua 过滤器

<base target="_blank">在标头中注入

Related

Reference

`<base target="_blank">`在标头中注入