Blog članak

Stiliziranje tablica pomoću Hugo shortcodea

Markdown je odličan za pisanje objava u modernim static site generatorima, ali ponekad trebate dodati HTML klase izravno u output. Tu pomažu Hugo shortcodeovi.

Markdown je odličan način za pisanje objava za moderne static site generatore, ali ponekad trebate dodati HTML klase izravno u izlaz kako bi sadržaj izgledao bolje. Tu na scenu stupaju Hugo shortcodeovi koji vam omogućuju da programski dodate prilagođeni HTML u markdown datoteke.

Kreirajte table shortcode

Ovaj kod stavite u /layouts/shortcodes/table.html.

{{ $htmlTable := .Inner | markdownify }}
{{ $class := .Get 0 }}
{{ $old := "<table>" }}
{{ $new := printf "<table class=\"%s\">" $class }}
{{ $htmlTable := replace $htmlTable $old $new }}
{{ $htmlTable | safeHTML }}

Kako koristiti kreirani shortcode

{{</*table "table table-striped table-bordered"*/>}}
| -  -  - -| -  -  - -| -  -  - -|
| Item 1   | Item 2   | Item 3   |
| Item 1a  | Item 2a  | Item 3a  |
{{</*/table*/>}}

Povezane usluge

Ove su usluge usklađene s temom članka i daju čišći prijelaz od edukativnog sadržaja do konkretne implementacije.

Nastavite čitati

Prvo po zajedničkim kategorijama, a zatim po najjačem preklapanju u tagovima.