Czy mogę tworzyć linki z „target =„ _ blank ”” w Markdown?

460

Czy istnieje sposób na utworzenie łącza w Markdown, które otwiera się w nowym oknie? Jeśli nie, jaką składnię zalecamy to zrobić. Dodam go do kompilatora Markdown, którego używam. Myślę, że powinna to być opcja.

html hyperlink markdown target new-window ma11hew28
źródło
Jak wskazano w odpowiedziach, nie jest to cecha w przecenianiu. Jeśli chcesz, aby był to domyślny link do strony, David Morrow ma odpowiedź . Lub jeśli chcesz to zrobić tylko w jednym przypadku, odpowiedź Matchu mówi, że musisz napisać to w HTML.
JGallardo
możliwy duplikat Markdown otwórz nowy link do okna
Serge Stroobandt
Twoje pytanie nie jest szczegółowe na temat tego, co robisz, ale niektóre wyszukiwarki lub przeglądarki (nie jestem pewien, które) rozpoznają, kiedy tworzony link wskazuje inną domenę i otworzą je w nowej karcie. Dla mnie są chwile, kiedy usunięcie sz https:jest wystarczające, aby uzyskać pożądaną funkcjonalność.
Josh Gust

Odpowiedzi:

377

Jeśli chodzi o składnię Markdown, jeśli chcesz uzyskać szczegółowe informacje, musisz po prostu użyć HTML.

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

Większość silników Markdown, które widziałem, zezwala na zwykły stary HTML, tylko w takich sytuacjach, w których ogólny system znaczników tekstu po prostu go nie wycina. (Na przykład silnik StackOverflow). Następnie analizują cały wynik przez filtr białej listy HTML, niezależnie od tego, że nawet dokument zawierający tylko Markdown może łatwo zawierać ataki XSS. W związku z tym, jeśli Ty lub Twoi użytkownicy chcesz utworzyć _blanklinki, prawdopodobnie nadal mogą.

Jeśli jest to funkcja, z której często będziesz korzystać, warto stworzyć własną składnię, ale generalnie nie jest to istotna funkcja. Jeśli chcę uruchomić ten link w nowym oknie, kliknę go, przytrzymując klawisz Ctrl.

Matchu
źródło
19
Wiesz co? Zgadzam się z tobą i Alex . Postanowiłem w ogóle nie używać _blank. Lepszym doświadczeniem użytkownika jest trzymanie rzeczy w jednej przeglądarce. Mogą po prostu nacisnąć wstecz lub kliknąć z wciśniętym klawiszem Command (tutaj użytkownik Mac :)), jak mówisz.
ma11hew28,
1
Mam skrypt JavaScript, który działa na stronie, która dodaje _blank do wszystkich linków poza moją domeną. jak @alex ma w następnej odpowiedzi
David Silva Smith
3
Sugerowałbym ( [Visit this page](http::/link.com(chcąc być wyraźny i czytelny w tekście) następującą składnię: aby uzyskać pomysł otwarcia .
Augustin Riedinger
4
Prosty cel = „_ puste” może być niebezpieczne! Dodaj także tag = rel = "noopener"! ( sites.google.com/site/bughunteruniversity/nonvuln/… )
Max Vyaznikov,
1
@MaxVyaznikov Ciekawe. Czy uważasz, że bezpieczniej byłoby, gdyby przeglądarki udostępniały wyskakujące okienko nad krawędzią do logowania? Oddziel interfejs użytkownika dla stron internetowych od sfałszowanego i fałszywego interfejsu użytkownika utworzonego przez „wyglądające” strony internetowe. Teraz może być bardziej możliwe tam, gdzie było trudniej w przeszłości.
1.21 gigawatów
350

Kramdown obsługuje to. Jest kompatybilny ze standardową składnią Markdown, ale ma także wiele rozszerzeń. Użyłbyś tego w ten sposób:

[link](url){:target="_blank"}
farnoy
źródło
7
Nie działa to przy użyciu silnika Markdown na Macu :-(
Netsi1964
48
Działa świetnie z jekyll!
bholagabbar
1
Kramdown składnia: [nazwa link] (URL_LINK) {: target = „_ blank”} może być analizowany w HTML przy użyciu kramdown edytora online: http://trykramdown.herokuapp.com/ użyłem go, bo miałem już sporo kramdown, i chciałem uniknąć ich ponownego wpisywania.
algoquant
4
Czy istnieje sposób w jekyll, aby ustawić to jako domyślne? Chciałbym, aby wszystkie linki w moich postach na blogu otwierały siętarget="_blank"
ahirschberg,
10
To nie działa Po prostu renderuje {: target = "_ blank"} jako tekst.
Benny
113

Nie sądzę, że istnieje funkcja przeceny.

Chociaż mogą być dostępne inne opcje, jeśli chcesz otwierać linki prowadzące automatycznie poza Twoją witrynę za pomocą 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 .

Jeśli używasz jQuery, jest to odrobinę prostsze ...

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

jsFiddle .

alex
źródło
1
Zgadzam się z tobą, ale przy okazji, gdy jesteś w ramce iframe, musisz wysadzić ramkę za pomocą linku.
David Morrow,
2
Uważam, że jedynym czasem, gdy zmuszam ludzi do nowego okna, jest moment, w którym jestem w połowie zdania łączącego coś zewnętrznego, i chcę podać źródła moich komentarzy bez przerywania przepływu. Ten fragment kodu js jest idealny do tego celu - dziękuję, głosowałem :)
tehwalrus
14
Myślę, że cytat Jakoba Nielsona nie ma już tutaj zastosowania. Skarży się na otwarcie nowych okien, ale obecnie cel = "_ blank" zamiast tego otwiera się w nowej karcie. Osobiście nie lubię, gdy linki do innych domen nie otwierają się w nowych kartach.
Alexander Rechsteiner,
3
Także: ponieważ powiedzenie Jakob Nielsen says you shouldn't do thatjest okropnym argumentem.
Ola Tuvesson
2
Dodam tutaj, że TO jest również preferowane jako rozwiązanie globalne. Utrzymuje twój Markdown w czystości, co jest celem Markdown.
Adam Michael Wood
47

Z Markdown-2.5.2 możesz użyć tego:

[link](url){:target="_blank"}
meduvigo
źródło
2
Próbowałem tego i nie działało to dla mnie. Korzystanie z django 1.6
joel goldstick
5
Działa z Jekyll v2.4.0 (może również współpracować z wcześniejszymi wersjami)
nicksuch
5
To jest kramdown (a ponieważ Jekyll używa kramdown, działa z Jekyll).
z3ntu
1
Nie wydaje się, aby ta składnia działała w GitLab. Nie jestem pewien, która wersja Markdown jest obecnie używana.
Rockin4Life33
Czy istnieje sposób, aby ustawić to jako domyślne, więc nie muszę podawać tego dla każdego linku?
Connel,
8

Jednym z rozwiązań jest globalny umieścić <base target="_blank"> na swojej stronie w <head>elemencie. To skutecznie dodaje domyślny cel do każdego elementu kotwicy. Korzystam z markdown do tworzenia treści na mojej stronie internetowej opartej na Wordpress, a moje dostosowywanie motywu pozwoli mi wstrzyknąć ten kod na górę każdej strony. Jeśli Twój motyw tego nie robi, jest wtyczka

aholub
źródło
8

Używam Grav CMS i działa to idealnie:

Treść / treść:
Some text[1]

Body / Reference:
[1]: http://somelink.com/?target=_blank

Upewnij się tylko, że atrybut docelowy jest przekazywany jako pierwszy, jeśli w linku znajdują się dodatkowe atrybuty, skopiuj / wklej je na końcu referencyjnego adresu URL.

Działa również jako bezpośredni link:
[Go to this page](http://somelink.com/?target=_blank)

Peter Danshov
źródło
W celach informacyjnych znajduje się odpowiedni rozdział dotyczący dokumentacji .
domsson,
7

Aby użyć markdown ghosta:

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

Znalazłem go tutaj: https://cmatskas.com/open-external-links-in-a-new-window-ghost/

guya
źródło
1
podoba mi się twoje rozwiązanie. ponieważ próbowałem go z różnymi konfiguracjami, wydaje się, że działa tylko w połączeniu bezpośrednim . może istnieje sposób na połączenie z linkami referencyjnymi . coś takiego: [open new window][1] \n [1]: (https://abc.xyz" target="_blank). może coś pomylę, czy to nie działa tak?
MrIsaacs
7

Nie jest więc prawdą, że nie można dodawać atrybutów łącza do adresu URL Markdown. Aby dodać atrybuty, sprawdź przy użyciu bazowego analizatora składni i jakie są ich rozszerzenia.

W szczególności pandocma rozszerzenie umożliwiające link_attributes, które umożliwiają znaczniki w łączu. na przykład

[Hello, world!](http://example.com/){target="_blank"}
  • Dla tych pochodzących z R (na przykład za pomocą rmarkdown, bookdown,blogdown i tak dalej), to jest składnia chcesz.
  • Dla tych, którzy nie używają R , może być konieczne włączenie numeru wewnętrznego w połączeniu pandocz+link_attributes

Uwaga: Różni się to od obsługi kramdownparsera, czyli jednej z powyższych odpowiedzi. W szczególności należy pamiętać, że kramdown różni się od pandoc, ponieważ wymaga dwukropka :- na początku nawiasów klamrowych - {}np.

[link](http://example.com){:hreflang="de"}

W szczególności:

# Pandoc
{ attribute1="value1" attribute2="value2"}

# Kramdown
{: attribute1="value1" attribute2="value2"}
 ^
 ^ Colon
bez płaszcza
źródło
To działało dla mnie w naszym niestandardowym środowisku przeceny. Dzięki!
klewis
6

Możesz to zrobić za pomocą natywnego kodu javascript:

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

Kod JSFiddle

MrPenguin Pablo
źródło
6

W moim projekcie robię to i działa dobrze:

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

Połączyć

Ale nie wszystkie parsery pozwalają na to.

użytkownik5036455
źródło
Prawie działa, ale nawet twój przykład renderuje z url zakodowanym w tytule attr, a nie jako nowe attrs (wyświetl źródło lub edytuj węzeł jako html): <a href="https://example.org/" rel="nofollow" title="title&quot; target=&quot;_blank">Link</a>
Graham P Heath,
6

Nie ma łatwego sposobu na zrobienie tego i jak @alex zauważył, że musisz użyć JavaScript. Jego odpowiedź jest najlepszym rozwiązaniem, ale aby go zoptymalizować, możesz filtrować tylko do linków post-content.

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

Kod jest kompatybilny z IE8 + i możesz go dodać na dole strony. Pamiętaj, że musisz zmienić „.post-content a” na klasę, której używasz do swoich postów.

Jak widać tutaj: http://blog.hubii.com/target-_blank-for-links-on-ghost/

midudev
źródło
0

Natknąłem się na ten problem, gdy próbowałem zaimplementować obniżkę cen za pomocą PHP.

Ponieważ linki wygenerowane przez użytkownika utworzone za pomocą Markdown muszą zostać otwarte w nowej karcie, ale linki witryny muszą pozostać na karcie, zmieniłem Markdown, aby generować tylko linki, które otwierają się w nowej karcie. Więc nie wszystkie linki na stronie odsyłają, tylko te, które używają przecen.

W systemie Markdown zmieniłem wszystkie dane wyjściowe łącza, <a target='_blank' href="...">które były dość łatwe przy użyciu find / replace.

użytkownik3167223
źródło
0

Nie zgadzam się, że lepszym doświadczeniem dla użytkownika jest pozostawanie w obrębie jednej karty przeglądarki. Jeśli chcesz, aby ludzie pozostali w Twojej witrynie lub wrócili, aby dokończyć czytanie tego artykułu, wyślij je w nowej karcie.

Opierając się na odpowiedzi @ davidmorrow, wrzuć javascript do swojej witryny i zamień tylko zewnętrzne linki w linki z 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>
Danny
źródło
0

Możesz dodać dowolne atrybuty za pomocą {[attr] = "[prop]"}

Na przykład [Google] ( http://www.google.com ) {target = "_ blank"}

leonardli
źródło
0

Za ukończone odpowiedzi Alex (13 grudnia 10)

Bardziej inteligentny cel wstrzykiwania można zrobić za pomocą tego kodu:

/*
 * 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');

Możesz zmienić wyjątki wyrażeń regularnych, dodając więcej rozszerzeń w (?!html?|php3?|aspx?)konstrukcjach grupowych (zrozumienie tego wyrażenia regularnego tutaj: https://regex101.com/r/sE6gT9/3 ).

a dla wersji bez jQuery sprawdź kod poniżej:

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';
        } 
    }
}
Bruno Lesieur
źródło
0

Zautomatyzowane tylko dla zewnętrznych linków, używając GNU sed & make

Jeśli ktoś chciałby to robić systematycznie dla wszystkich linków zewnętrznych, CSS nie ma opcji . Można jednak uruchomić następującą sedkomendę po utworzeniu (X) HTML z Markdown:

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

Można to dodatkowo zautomatyzować, dodając powyższe sedpolecenie do makefile. Aby uzyskać szczegółowe informacje, zobacz GNU makelub zobacz, jak to zrobiłem na mojej stronie internetowej .

Serge Stroobandt
źródło
-3

To działa dla mnie: [Link do strony] (Twój adres URL tutaj „(target | _blank)”)

Jose Espin
źródło