ChatGPT解决这个技术问题 Extra ChatGPT

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

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

因此,正如答案中所指出的,它不是降价的功能。如果您想将此设置为整个站点的默认链接,David Morrow 提供了 answer。或者,如果您只想在一个实例中执行此操作,那么 Matchu 的 answer 表示您必须实际用 HTML 编写它。
Markdown open a new window link 的可能重复项
您的问题并不具体关于您在做什么,但是一些降价引擎或浏览器(不确定是哪个)识别您创建的链接何时指向不同的域,并将在新选项卡中打开它们。对我来说,有时从 https: 中删除 s 就足以获得我想要的功能。

M
Matchu

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

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

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

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


你知道吗?我同意你和alex的观点。我决定根本不使用 _blank。将内容保存在一个浏览器中是一种更好的用户体验。就像你说的,他们可以直接回击或点击命令(这里是 Mac 用户 :))。
我在将 _blank 添加到我域之外的所有链接的页面上运行了 javascript。就像@alex 在下一个答案中一样
我建议(为了明确和内联可读)以下语法:[Visit this page](http::/link.com( 来了解 opening 的概念。
简单的 target="_blank" 可能很危险!还将 rel="noopener" 添加到标签中! (sites.google.com/site/bughunteruniversity/nonvuln/…)
将内容保存在一个浏览器中确实并不总是更好的用户体验......如果他们在您的 SPA 中的注册或签出流程中,并且在最后一步他们需要同意外部的某些条件怎么办?页?除非您使用模式,否则在新窗口中打开确实比用户完全失去上下文并不得不再次经历整个过程更可取。
h
honk

Kramdown 支持它。它与标准 Markdown 语法兼容,但也有许多扩展。你会像这样使用它:

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

这似乎不适用于 Mac 上的 Markdown 引擎:-(
与 jekyll 一起使用非常好!
kramdown 语法:[链接名称](url_link){:target="_blank"} 可以使用 kramdown 在线编辑器解析为 HTML:http://trykramdown.herokuapp.com/ 我使用它是因为我已经有很多 kramdown 引用,并且想要以避免重新输入它们。
jekyll 有没有办法将其设置为默认值?我希望我的博文中的所有链接都用 target="_blank" 打开
它不起作用。它只是将 {:target="_blank"} 呈现为文本。
P
Pandapip1

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

Array.from(javascript.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


我同意你的观点,但如果你在 iframe 中,你需要使用链接从框架中弹出。
我发现我强迫人们进入新窗口的唯一一次是当我完成一个链接到外部某处的句子的一半时,我想在不中断流程的情况下为我的评论提供来源。这个 js 片段非常适合这个目的 - 谢谢,赞成 :)
我认为 Jakob Nielson 的那句话在这里不再适用。他抱怨打开新窗口,但现在 target="_blank" 在新选项卡中打开。当指向其他域的链接未在新选项卡中打开时,我个人不喜欢它。
另外:因为说 Jakob Nielsen says you shouldn't do that 是一个可怕的论点。
我要在这里补充一点,这也是一种全球解决方案。它让你的 Markdown 保持干净,这就是 Markdown 的重点。
A
Arash Hatami

使用 Markdown v2.5.2,您可以使用:

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

我试过这个,它对我不起作用。与 django 1.6 一起使用
适用于 Jekyll v2.4.0(可能也适用于早期版本)
这就是 kramdown(因为 Jekyll 使用 kramdown,所以它适用于 Jekyll)。
似乎无法在 GitLab 中使用此语法。我不确定当前使用的是哪个版本的 Markdown。
有没有办法让它成为默认值,所以我不必为每个链接指定它?
c
coatless

因此,不能将链接属性添加到 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

这在我们的自定义降价环境中对我有用。谢谢!
参考链接呢?
a
aholub

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


R
Ren Dev

我正在使用 Grav CMS,这非常有效:

正文/内容:
Some text[1]

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

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

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


作为参考,这里是 relevant documentation chapter
g
guya

对于幽灵降价使用:

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

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


我喜欢你的解决方案。正如我用不同的配置尝试过的,它似乎只适用于内联链接。也许有一种方法可以与 reference links 链接。类似于:[open new window][1] \n [1]: (https://abc.xyz" target="_blank)。也许我弄错了什么,或者这不适合那样工作?
m
moubi

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

如果您使用 GatsbyJS,则有一个插件会自动将 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"

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


M
MrPenguin Pablo

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


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

JSFiddle Code


P
PiotrWolkowski

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

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

Link

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


几乎可以工作,但即使您的示例也使用编码到标题 attr 中的 url 呈现,而不是作为新的 attrs(查看源代码或将节点编辑为 html):<a href="https://example.org/" rel="nofollow" title="title&quot; target=&quot;_blank">Link</a>
m
midudev

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


T
Thomas

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

使用 Pandoc Lua 过滤器

您可以编写自己的 Pandoc Lua Filter,将 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

在标题中注入

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

创建一个新的 HTML 文件,将其命名为例如 links.html

<base target="_blank">

然后更新你的 _output.yml

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

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


u
user3167223

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

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

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


D
Danny

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

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

l
leonardli

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

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


B
Bruno J. S. Lesieur

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

C
Community

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

如果想对所有外部链接系统地执行此操作,CSS is no option。但是,一旦从 Markdown 创建了 (X)HTML,就可以运行以下 sed 命令:

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

这可以通过将上述 sed 命令添加到 makefile 来进一步自动化。有关详细信息,请参阅 my website 上的 GNU makesee how I have done that


F
Faka

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

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

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


W
WalterV

在 Laravel 中,我以这种方式解决了它:

$post->text= Str::replace('<a ', '<a target="_blank"', $post->text);

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


A
Aakash

对于 React + Markdown 环境:

我创建了一个可重用的组件:

export type TargetBlankLinkProps = {
  label?: string;
  href?: string;
};

export const TargetBlankLink = ({
  label = "",
  href = "",
}: TargetBlankLinkProps) => (
  <a href={href} target="__blank">
    {label}
  </a>
);

我在任何需要在新窗口中打开的链接的地方使用它。


a
atazmin

对于 MUI v5 的“markdown-to-jsx”

这似乎对我有用:

import Markdown from 'markdown-to-jsx';

...

  const MarkdownLink = ({ children, ...props }) => (
    <Link {...props}>{children}</Link>
  );

...

          <Markdown
            options={{
              forceBlock: true,
              overrides: {
                a: {
                  component: MarkdownLink,
                  props: {
                    target: '_blank',
                  },
                },
              },
            }}
          >
            {description}
          </Markdown>

J
Jose Espin

这对我有用:[页面链接](您的网址在这里“(目标|_blank)”)