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

776

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


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

7
您可以通过原生JavaScript代码来实现这一点,如下所示:
 
var pattern = /a href=/g;
var sanitizedMarkDownText = rawMarkDownText.replace(pattern,"a target='_blank' href=");

JSFiddle Code


7

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


3

如果有人正在寻找一个涵盖全球的rmarkdown (pandoc) 解决方案

使用Pandoc Lua Filter

您可以编写自己的Pandoc Lua Filter,它将target="_blank"添加到所有链接中:

  1. 编写一个Pandoc Lua筛选器,例如命名为links.lua
function Link(element)

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

end
  1. 然后更新您的 _output.yml
bookdown::gitbook:
  pandoc_args:
    - --lua-filter=links.lua

在Header中注入<base target="_blank">

另一种解决方案是使用includes选项,在HTML head部分中注入<base target="_blank">

  1. 创建一个新的HTML文件,例如命名为links.html
<base target="_blank">
  1. 然后更新你的_output.yml
bookdown::gitbook:
  includes:
    in_header: links.html

注意:此解决方案还可能为哈希(#)指针/URL打开新标签页。我尚未测试此解决方案与此类URL的兼容性。

1
在Laravel中,我是这样解决的:
$post->text= Str::replace('<a ', '<a target="_blank"', $post->text);

不仅适用于特定链接,还可以编辑Markdown文本中的所有链接。(在我的情况下这很好)


1
如果你正在使用MkDocs,那么你可能会对在新标签页中打开 - 插件感兴趣。
该插件添加了JS以在新标签页中打开外部链接和PDF文件。
使用pip从PyPI安装该插件:
pip3 install mkdocs-open-in-new-tab

只需添加插件:

plugins:
  - search
  - open-in-new-tab

更多关于插件的信息。


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';
        } 
    }
}

0

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

如果想要系统地对所有外部链接进行处理,CSS不是一个选择。然而,一旦从Markdown创建了(X)HTML,可以运行以下sed命令:

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

这可以通过将上述的sed命令添加到一个makefile中进一步自动化。详情请参阅GNU make查看我是如何做到的我的网站上。

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>

0

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

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


0

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

由于使用Markdown生成的用户链接需要在新标签页中打开,而站点链接需要保留在当前标签页中,所以我将Markdown更改为仅生成在新标签页中打开的链接。因此,页面上并非所有的链接都是外部链接,只有使用Markdown的链接才是。

在Markdown中,我将所有的链接输出更改为<a target='_blank' href="...">,这很容易通过查找/替换来实现。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接