[英]Can I create links with 'target="_blank"' in Markdown?
有沒有辦法在 Markdown 中創建一個在新窗口中打開的鏈接？ 如果不是，您建議使用什么語法來執行此操作？ 我會將它添加到我使用的 markdown 編譯器中。 我認為這應該是一種選擇。
就 Markdown 語法而言，如果您想獲得詳細信息，您只需要使用 HTML。
<a href="http://example.com/" target="_blank">Hello, world!</a>
我見過的大多數 Markdown 引擎都允許使用普通的舊 HTML，僅適用於通用文本標記系統無法解決的這種情況。 （例如 StackOverflow 引擎。）然后，無論如何，他們都會通過 HTML 白名單過濾器運行整個輸出，因為即使是僅 Markdown 的文檔也很容易包含 XSS 攻擊。 因此，如果您或您的用戶想要創建_blank鏈接，那么他們可能仍然可以。
如果這是您將經常使用的功能，創建自己的語法可能是有意義的，但它通常不是重要功能。 如果我想在新窗口中啟動該鏈接，我會自己按住 ctrl 單擊它，謝謝。
克拉姆當支持它。 它與標准 Markdown 語法兼容，但也有許多擴展。 你會像這樣使用它：
[link](url){: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');
使用 Markdown v2.5.2，您可以使用：
[link](URL){:target="_blank"}
因此，不能將鏈接屬性添加到 Markdown URL 是不完全正確的。 要添加屬性，請檢查正在使用的底層 Markdown 解析器及其擴展名。
特別是pandoc有一個擴展來啟用link_attributes ，它允許在鏈接中進行標記。 例如
[Hello, world!](http://example.com/){target="_blank"}
rmarkdown 、 bookdown 、 blogdown等），這是您想要的語法。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 的網站上創建內容，我的主題定制器將讓我將該代碼注入每個頁面的頂部。 如果您的主題不這樣做，那么有一個插件
對於幽靈降價使用：
[Google](https://google.com" target="_blank)
在這里找到它：https ://cmatskas.com/open-external-links-in-a-new-window-ghost/
我正在使用 Grav CMS，這非常有效：
正文/內容：
Some text[1]
正文/參考：
[1]: http://somelink.com/?target=_blank
只需確保首先傳遞目標屬性，如果鏈接中有其他屬性，請將它們復制/粘貼到參考 URL 的末尾。
也可以作為直接鏈接：
[Go to this page](http://somelink.com/?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=");
沒有簡單的方法可以做到這一點，就像@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 過濾器，將target="_blank"添加到所有鏈接：
links.luafunction Link(element)
if
string.sub(element.target, 1, 1) ~= "#"
then
element.attributes.target = "_blank"
end
return element
end
_output.ymlbookdown::gitbook:
pandoc_args:
- --lua-filter=links.lua
<base target="_blank"> 另一種解決方案是使用includes選項在 HTML head部分注入<base target="_blank"> ：
links.html<base target="_blank">
_output.ymlbookdown::gitbook:
includes:
in_header: links.html
注意：此解決方案還可以為哈希 ( # ) 指針/URL 打開新選項卡。 我尚未使用此類 URL 測試此解決方案。
我在嘗試使用 PHP 實現 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>
您可以使用 {[attr]="[prop]"} 添加任何屬性
例如 [Google] ( http://www.google.com ){target="_blank"}
對於已完成的亞歷克斯回答（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';
}
}
}
如果您只想在特定鏈接中執行此操作，只需使用其他人回答的內聯屬性列表語法，或者僅使用 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）”）
我可以使用 Markdown 在 hugo 帖子內容中創建帶有 'target="_blank"' 的鏈接嗎？
[英]Can I create links with 'target="_blank"' in hugo posts content using Markdown?
是否可以在 GitHub Flavored Markdown 中創建帶有 'target="_blank"' 的鏈接？
[英]Is it possible to create links with 'target=“_blank”' in GitHub Flavored Markdown?
如何為目標=“ _ blank”的外部鏈接確定引薦來源網址？
[英]How to determine Referrer for external links with target=“_blank”?
正則表達式將target =“ _ blank”添加到所有鏈接，但排除已經具有target =“ _ blank”的鏈接或具有<a name=“…”>和的</a>鏈接
[英]regex adding target=“_blank” to all links but exclude ones that already have target=“_blank” or links that have <a name=“…”> and <a href=“#…”>
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.