Shortcodes per inserire url con target="_blank"

Ti ho già detto che per sviluppare questo blog ho utilizzato Hugo ? 😄

Appena ho iniziato a scrivere i primi articoli ho notato che, ogni volta che inserivo un link (sia esterno che interno), con la sola sintassi markdown non avevo la possibilità di specificare l’attributo target.

Ti faccio un esempio: [Link alla home](https://progressify.dev)

Ti faccio un esempio: Link alla home

Ho fatto qualche ricerca su Google per risolvere questo “problema” ed a quanto pare non vi è una vera e propria soluzione. In molti hanno consigliato, nei vari forum che ho trovato, di scrivere manualmente il tag <a href="..." target="_blank">...</a> al posto di utilizzare markdown. Ed infatti scrivendo direttamente il tag html funziona, però… Non mi piace come soluzione, preferivo qualcosa di un pochino più elegante ed integrato direttamente in Hugo.

Non mi sono arreso quindi ed ho continuato a cercare su Google e nella documentazione di Hugo.

“Ho tanto girato, ho tanto viaggiato” (per citare un grande) ed alla fine arrivo su questa pagina. Qui è spiegato in modo molto semplice e preciso cos’è uno shortcode, a cosa serve e ti indica alcuni shortcodes che Hugo integra nativamente. Uno shortcode è uno snippet di codice, contenuto in un file che Hugo andrà a renderizzare nella pagina.

Mi è subito sembrata una feature con molte potenzialità e volevo capirne di più, quindi ho fatto un’ulteriore ricerca ed ho trovato questa pagina di supporto. Qui ci sono spiegazioni su come implementare ed utilizzare degli shortcodes personalizzati.

Ovviamente ho iniziato subito a risolvere la necessità che ti ho indicato sopra.

Nella root del mio progetto Hugo, nella cartella layouts/shortcodes (se non la trovi puoi crearla tu manualmente), ho creato un nuovo file con nome url-target-blank.html, ed al suo interno ho scritto:

<a href="{{ .Get "url" }}" target="_blank">{{ with .Get "title" }}{{.}}{{else}}{{.Get "url"}}{{end}}</a>

Ti ripropongo lo stesso esempio di prima per farti vedere il risultato finale e come si utilizza lo shortcode che ho appena creato.

Ti faccio un esempio: {{< url-target-blank title="Link alla home" url="https://progressify.dev" >}}

Ti faccio un esempio: Link alla home

L’attributo title non è necessario, solo url lo è. Se non inserisci l’attributo title lo shortcode inserirà all’interno del tag <a> il link.

Ti faccio un altro esempio: {{< url-target-blank url="https://progressify.dev" >}}

Ti faccio un altro esempio: https://progressify.dev

Che ne pensi degli shortcodes di Hugo? Io ho iniziato ad abusarne e ne ho creati tanti altri per velocizzarmi quando scrivo contenuti sul blog. Fammi sapere la tua opinione nei commenti, ti aspetto.

AP