有没有办法在 Markdown 中创建一个在新窗口中打开的链接?如果不是,您建议使用什么语法来执行此操作?我会将它添加到我使用的 markdown 编译器中。我认为这应该是一种选择。
就 Markdown 语法而言,如果您想获得详细信息,您只需要使用 HTML。
<a href="http://example.com/" target="_blank">Hello, world!</a>
我见过的大多数 Markdown 引擎都允许使用普通的旧 HTML,仅适用于通用文本标记系统无法解决的这种情况。 (例如 StackOverflow 引擎。)然后,无论如何,他们都会通过 HTML 白名单过滤器运行整个输出,因为即使是仅 Markdown 的文档也很容易包含 XSS 攻击。因此,如果您或您的用户想要创建 _blank
链接,那么他们可能仍然可以。
如果这是您将经常使用的功能,创建自己的语法可能是有意义的,但它通常不是重要功能。如果我想在新窗口中启动该链接,我会自己按住 ctrl 单击它,谢谢。
Kramdown 支持它。它与标准 Markdown 语法兼容,但也有许多扩展。你会像这样使用它:
[link](url){:target="_blank"}
target="_blank"
打开
我认为没有降价功能,尽管如果您想使用 JavaScript 打开指向您自己网站之外的链接,可能还有其他选项可用。
Array.from(javascript.links)
.filter(link => link.hostname != window.location.hostname)
.forEach(link => link.target = '_blank');
如果您使用 jQuery:
$(document.links).filter(function() {
return this.hostname != window.location.hostname;
}).attr('target', '_blank');
Jakob Nielsen says you shouldn't do that
是一个可怕的论点。
使用 Markdown v2.5.2,您可以使用:
[link](URL){:target="_blank"}
因此,不能将链接属性添加到 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
一种全局解决方案是将 <base target="_blank">
放入页面的 <head>
元素中。这有效地为每个锚元素添加了默认目标。我使用 Markdown 在基于 Wordpress 的网站上创建内容,我的主题定制器将让我将该代码注入每个页面的顶部。如果您的主题不这样做,有一个 plug-in
我正在使用 Grav CMS,这非常有效:
正文/内容:
Some text[1]
正文/参考:
[1]: http://somelink.com/?target=_blank
只需确保首先传递目标属性,如果链接中有其他属性,请将它们复制/粘贴到参考 URL 的末尾。
也可用作直接链接:
[Go to this page](http://somelink.com/?target=_blank)
对于幽灵降价使用:
[Google](https://google.com" target="_blank)
在这里找到它:https://cmatskas.com/open-external-links-in-a-new-window-ghost/
[open new window][1] \n [1]: (https://abc.xyz" target="_blank)
。也许我弄错了什么,或者这不适合那样工作?
不是一个直接的答案,但可能会帮助一些人在这里结束。
如果您使用 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"
。
如果您需要更多选项,请参考文档。
您可以通过本机 javascript 代码执行此操作,如下所示:
var pattern = /a href=/g;
var sanitizedMarkDownText = rawMarkDownText.replace(pattern,"a target='_blank' href=");
在我的项目中,我正在这样做并且效果很好:
[Link](https://example.org/ "title" target="_blank")
但并非所有解析器都允许您这样做。
<a href="https://example.org/" rel="nofollow" title="title" target="_blank">Link</a>
没有简单的方法可以做到这一点,就像@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/
如果有人正在寻找全局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 测试此解决方案。
我在尝试使用 PHP 实现 markdown 时遇到了这个问题。
由于使用 markdown 创建的用户生成链接需要在新选项卡中打开,但站点链接需要保留在选项卡中,因此我将 markdown 更改为仅生成在新选项卡中打开的链接。所以不是页面上的所有链接都链接出去,只是那些使用降价的链接。
在 Markdown 中,我将所有链接输出更改为 <a target='_blank' href="...">
,这很容易使用查找/替换。
我不同意留在一个浏览器选项卡中会带来更好的用户体验。如果您希望人们留在您的网站上,或者回来读完那篇文章,请将他们发送到新标签中。
以@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>
对于已完成的亚历克斯回答(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';
}
}
}
仅对外部链接自动化,使用 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 make
或 see how I have done that。
如果您只想在特定链接中执行此操作,只需使用其他人回答的内联属性列表语法,或者仅使用 HTML。
如果您想在所有生成的 <a>
标记中执行此操作,取决于您的 Markdown 编译器,也许您需要对其进行扩展。
这些天我正在为我的博客做这个,它是由 pelican
生成的,它使用 Python-Markdown
。我找到了 Python-Markdown
Phuker/markdown_link_attr_modifier 的扩展程序,效果很好。请注意,一个名为 newtab
的旧扩展似乎在 Python-Markdown 3.x 中不起作用。
在 Laravel 中,我以这种方式解决了它:
$post->text= Str::replace('<a ', '<a target="_blank"', $post->text);
不适用于特定链接。编辑 Markdown 文本中的所有链接。 (在我的情况下很好)
对于 React + Markdown 环境:
我创建了一个可重用的组件:
export type TargetBlankLinkProps = {
label?: string;
href?: string;
};
export const TargetBlankLink = ({
label = "",
href = "",
}: TargetBlankLinkProps) => (
<a href={href} target="__blank">
{label}
</a>
);
我在任何需要在新窗口中打开的链接的地方使用它。
对于 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>
这对我有用:[页面链接](您的网址在这里“(目标|_blank)”)
_blank
。将内容保存在一个浏览器中是一种更好的用户体验。就像你说的,他们可以直接回击或点击命令(这里是 Mac 用户 :))。[Visit this page](http::/link.com(
来了解 opening 的概念。