有没有办法在Markdown中创建一个在新窗口中打开的链接?如果不是,您建议使用什么语法来完成此操作?我将把它添加到我使用的markdown编译器中。我认为这应该是一个选择。
当前回答
不是一个直接的答案,但可能会帮助一些人在这里结束。
如果你正在使用GatsbyJS,有一个插件可以自动在markdown中添加target="_blank"到外部链接。
它被称为gatsby-remark-external-links,用法如下:
Yarn添加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=");
JSFiddle Code
所以,这不是完全正确的,你不能添加链接属性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
您可以使用{[attr]="[prop]"}添加任何属性
例如[谷歌](http://www.google.com){target="_blank"}
完成alex回答(12月13日至10日)
一个更聪明的注入目标可以用下面的代码完成:
/*
* 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?)组构造中添加更多扩展来更改regexp异常(请在这里了解这个regexp: 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';
}
}
}
我不认为停留在一个浏览器选项卡中会有更好的用户体验。如果你想让人们留在你的网站上,或者回来读完那篇文章,在一个新的标签中把他们发送出去。
在@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>
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 我如何用javascript编程点击链接?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?