Могу ли я создать ссылки с «target =« _ blank »» в Markdown?


462

Есть ли способ создать ссылку в Markdown, которая открывается в новом окне? Если нет, какой синтаксис вы рекомендуете сделать это. Я добавлю это в компилятор уценки, который я использую. Я думаю, что это должен быть вариант.


Таким образом, как указано в ответах, это не функция уценки. Если вы хотите сделать это сайтом по умолчанию для ссылки, Дэвид Морроу найдет ответ . Или, если вы просто хотели сделать это в одном случае, то в ответе Matchu говорится, что вы должны написать это в HTML.
Джаллардо


Ваш вопрос не является конкретным относительно того, что вы делаете, но некоторые механизмы уценки или браузеры (не уверены, какой) распознают, когда создаваемая вами ссылка указывает на другой домен, и открывают их на новой вкладке. Для меня бывают случаи, когда удаление sиз https:достаточно, чтобы получить функциональность, которую я хочу.
Джош Густ

Ответы:


379

Что касается синтаксиса Markdown, если вы хотите получить более подробную информацию, вам просто нужно использовать HTML.

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

Большинство механизмов Markdown, которые я видел, допускают простой старый HTML, просто для ситуаций, подобных этой, когда обычная система разметки текста просто ее не обрежет. (Механизм StackOverflow, например.) Затем они пропускают весь вывод через фильтр белого списка HTML, независимо от того, что даже документ только для Markdown может легко содержать атаки XSS. Таким образом, если вы или ваши пользователи хотите создавать _blankссылки, то они, вероятно, все еще могут.

Если вы часто будете использовать эту функцию, возможно, имеет смысл создать собственный синтаксис, но обычно это не жизненно важная функция. Если я захочу запустить эту ссылку в новом окне, я сам нажму Ctrl, спасибо.


19
Я знаю что? Я согласен с тобой и Алекс . Я решил не использовать _blankвообще. Пользовательский интерфейс лучше хранить в одном браузере. Они могут просто нанести ответный удар или щелкнуть по команде (пользователь Mac здесь :)), как вы говорите.
ma11hew28

1
Я запускаю JavaScript на странице, которая добавляет _blank ко всем ссылкам за пределами моего домена. как @alex в следующем ответе
Дэвид Сильва Смит

3
Я хотел бы предложить (в стремлении быть явным и читабельным для чтения) следующий синтаксис: [Visit this page](http::/link.com(чтобы получить представление об открытии .
Августин Ридингер,

4
Простая цель = "_ blank" может быть опасной! Также добавьте rel = "noopener" в тег! ( sites.google.com/site/bughunteruniversity/nonvuln/… )
Макс Вязников

1
@MaxVyaznikov Интересно. Как вы думаете, было бы безопаснее, если бы браузеры предоставили всплывающее окно выше края для входа в систему? Отделите пользовательский интерфейс входа для веб-сайтов от поддельного и поддельного пользовательского интерфейса, созданного «похожими» веб-страницами. Это может быть более возможно сейчас, где это было сложнее в прошлом.
1,21 гигаватта

351

Крамдаун поддерживает это. Он совместим со стандартным синтаксисом Markdown, но также имеет много расширений. Вы бы использовали это так:

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

7
Похоже, что это не работает с использованием движка Markdown на Mac :-(
Netsi1964

49
Прекрасно работает с Джекилом!
bholagabbar

1
Kramdown синтаксис: [имя ссылки] (URL_LINK) {: TARGET = «_blank»} может быть разобрано в HTML с помощью kramdown редактора: http://trykramdown.herokuapp.com/ Я использовал его , потому что у меня уже было немало kramdown, и хотел избежать перепечатывания их.
algoquant

4
Есть ли способ в jekyll установить это по умолчанию? Мне бы хотелось, чтобы все ссылки в моих сообщениях в блоге открывалисьtarget="_blank"
ahirschberg

10
Не работает Он просто отображает {: target = "_ blank"} как текст.
Бенни

113

Я не думаю, что есть функция уценки.

Хотя могут быть и другие доступные варианты, если вы хотите открывать ссылки, которые автоматически указывают за пределы вашего собственного сайта с помощью JavaScript.

var links = document.links;

for (var i = 0, linksLength = links.length; i < linksLength; i++) {
   if (links[i].hostname != window.location.hostname) {
       links[i].target = '_blank';
   } 
}

jsFiddle .

Если вы используете JQuery, это немного проще ...

$(document.links).filter(function() {
    return this.hostname != window.location.hostname;
}).attr('target', '_blank');

jsFiddle .


1
Я согласен с вами, но в случае, если вы находитесь в iframe, вам нужно взорвать рамку со ссылкой.
Дэвид Морроу

2
Я нахожу, что единственный раз, когда я заставляю людей открывать новое окно, это когда я на полпути разбираю предложение, связывающее где-то внешнее, и я хочу предоставить источники для моих комментариев, не прерывая поток. Этот фрагмент js идеально подходит для этой цели - спасибо, проголосовал :)
tehwalrus

14
Я думаю, что цитата из Якоба Нильсона здесь больше не применима. Он жалуется на открытие новых окон, но вместо этого target = "_ blank" открывается в новой вкладке. Лично мне не нравится, когда ссылки на другие домены не открываются в новых вкладках.
Александр Рехштайнер

3
Кроме того: потому что высказывание Jakob Nielsen says you shouldn't do that- ужасный аргумент.
Ола Тувессон,

2
Я собираюсь добавить здесь, что ЭТО также предпочтительнее в качестве глобального решения. Это держит ваш Markdown в чистоте, что является точкой Markdown.
Адам Майкл Вуд

47

С Markdown-2.5.2 вы можете использовать это:

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

2
Я попробовал это, и это не сработало для меня. Использование с django 1.6
joel goldstick

5
Работает с Jekyll v2.4.0 (может работать и с более ранними версиями)
nicksuch

5
Это kramdown (и поскольку Jekyll использует kramdown, он работает с Jekyll).
z3ntu

1
Не могу заставить этот синтаксис работать в GitLab. Я не уверен, какая версия Markdown сейчас используется.
Rockin4Life33

Есть ли способ сделать это по умолчанию, поэтому мне не нужно указывать его для каждой ссылки?
Коннел

8

Одним из глобальных решений является включение <base target="_blank"> в <head>элемент вашей страницы . Это эффективно добавляет цель по умолчанию к каждому элементу привязки. Я использую markdown для создания контента на своем веб-сайте на базе Wordpress, и мой настройщик тем позволит мне вставлять этот код в верхнюю часть каждой страницы. Если ваша тема не делает этого, есть плагин


8

Я использую Grav CMS, и это прекрасно работает:

Тело / Содержание:
Some text[1]

Тело / Ссылка:
[1]: http://somelink.com/?target=_blank

Просто убедитесь, что целевой атрибут передается первым, если в ссылке есть дополнительные атрибуты, скопируйте / вставьте их в конец ссылочного URL.

Также работайте по прямой ссылке:
[Go to this page](http://somelink.com/?target=_blank)



7

Для призрачной уценки используйте:

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

Нашел это здесь: https://cmatskas.com/open-external-links-in-a-new-window-ghost/


1
Мне нравится ваше решение. Поскольку я пробовал это с различными конфигурациями, кажется, что он работает только при встроенном соединении . может быть, есть способ ссылки с ссылками . что - то вроде: [open new window][1] \n [1]: (https://abc.xyz" target="_blank). может я что-то ошибаюсь или это не так?
MrIsaacs

7

Таким образом, это не совсем так, что вы не можете добавить атрибуты ссылки к 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

Это сработало для меня в нашей пользовательской среде уценки. Спасибо!
Klewis


6

В моем проекте я делаю это, и он отлично работает:

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

Ссылка на сайт

Но не все парсеры позволяют вам это делать.


Почти работает, но даже ваш пример рендерится с URL, закодированным в заголовок attr, а не как новый attrs (просмотрите исходный код или отредактируйте узел как html): <a href="https://example.org/" rel="nofollow" title="title&quot; target=&quot;_blank">Link</a>
Graham P Heath

6

Нет простого способа сделать это, и, как заметил @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/


0

Я столкнулся с этой проблемой при попытке реализовать уценку с помощью PHP.

Так как сгенерированные пользователем ссылки, созданные с помощью markdown, должны открываться на новой вкладке, а ссылки сайта должны оставаться на вкладке, я изменил markdown, чтобы генерировать только те ссылки, которые открываются на новой вкладке. Так что не все ссылки на странице ссылаются, а только те, которые используют уценку.

В уценке я изменил весь вывод ссылки, <a target='_blank' href="...">что было достаточно просто с помощью поиска / замены.


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

За выполненный алекс ответили (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?)групповую конструкцию (это регулярное выражение можно найти здесь: 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 не вариант . Тем не менее, можно выполнить следующую sedкоманду после того, как HTML будет создан из Markdown:

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

Это может быть дополнительно автоматизировано путем добавления вышеуказанной sedкоманды в makefile. Подробности смотрите в GNU makeили посмотрите, как я это сделал на моем сайте .


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.