2014-11-23 9 views
9

Comprendo che l'attributo target di un collegamento <a> non può essere specificato dai CSS. Mi piacerebbe essere in grado di generare i collegamenti esterni in un documento basato Markdown Jekyll con il seguente risultato:Jekyll: produce codice HTML personalizzato per collegamenti esterni (classe target e CSS)

<a href="the-url" class="external" target="_blank">the text</a> 

senza ricorrere a qualcosa di simile:

[the text](the url){:target"_blank" class="external"} 

io non voglio hard-code il target in ogni link, perché potrei voler cambiarlo a un certo punto, anche è rumoroso. Quindi idealmente avrei

[the text](the url){:class="external"} 

... ma poi i CSS non posso aggiungere il target="_blank".

Quindi la mia idea sarebbe quella di un plugin personalizzato che mi permette di scrivere

{% ext-link the-url the text %} 

Fa un plugin esiste? Ci sono modi migliori per raggiungere questo obiettivo?

risposta

8

Sembra che scrivere un plug-in sia semplice. Questo è quello che sono venuto su con: l'utilizzo

module Jekyll 
    class ExtLinkTag < Liquid::Tag 
    @text = '' 
    @link = '' 

    def initialize(tag_name, markup, tokens) 
     if markup =~ /(.+)(\s+(https?:\S+))/i 
     @text = $1 
     @link = $3 
     end 
     super 
    end 

    def render(context) 
     output = super 
     "<a class='external' target='_blank' href='"[email protected]+"'>"[email protected]+"</a>" 
    end 
    end 
end 

Liquid::Template.register_tag('extlink', Jekyll::ExtLinkTag) 

Esempio: uscita

Exhibition at {% extlink Forum Stadtpark http://forum.mur.at %}. 

HTML:

<p>Exhibition at <a class="external" target="_blank" href="http://forum.mur.at">Forum Stadtpark</a>.</p> 
11

Quando avete bisogno di fare questo su Github pagesand quindi non è possibile utilizzare i plugin, puoi farlo con javascript:

// any link that is not part of the current domain is modified 

(function() { 
    var links = document.links; 
    for (var i = 0, linksLength = links.length; i < linksLength; i++) { 
    // can also be 
    // links[i].hostname != 'subdomain.example.com' 
    if (links[i].hostname != window.location.hostname) { 
     links[i].target = '_blank'; 
     links[i].className += ' externalLink'; 
    } 
    } 
})(); 

Ispirato a this answer.

2

C'è un piccolo plug-in Jekyll applicare target="_blank", rel="nofollow", i nomi delle classi, e tutti gli altri attributi di vostra scelta per link esterni automaticamente:

Jekyll ExtLinks Plugin

una lista di host da omettere quando si applica rel può essere configurato se si desidera mantenere intatti alcuni collegamenti. In questo modo, non devi più manipolare con Markdown.

UPD: Questo plugin è stato rilasciato a RubyGems ora: jekyll-extlinks. Utilizzare gem install jekyll-extlinks per installarlo. Anche available on GitHub.

+0

Questo plugin non funziona per me su jekyll 3.3.1. –

+0

Testato su Jekyll 3.4.0, ha avuto un problema con nokogiri - risolto specificando gem 'nokogiri' nel progetto Gemfile. Oltre a questo, il plugin ha funzionato bene. – nourish

Problemi correlati