9
Styling tables with Hugo
source link: https://willschenk.com/articles/2020/styling_tables_with_hugo/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Published March 2, 2020 #howto #bootstrap #hugo
Markdown is a nice format to write it, but sometimes you need to add HTML classes directly to the output to make it look how you want. Here’s a way to do that using hugo shortcodes.
Create a table shortcode
Put this in /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 }}
Create a table
Like this:
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Item 1 | Item 2 | Item 3 |
| Item 1a | Item 2a | Item 3a |
Which should render like so:
Header 1Header 2Header 3Item 1Item 2Item 3Item 1aItem 2aItem 3aWrap it in shortcodes
{{<table “table table-striped table-bordered">}}
|———-|———-|———-|
| Item 1 | Item 2 | Item 3 |
| Item 1a | Item 2a | Item 3a |
{{</table>}}
Which should render:
Header 1Header 2Header 3Item 1Item 2Item 3Item 1aItem 2aItem 3aReferences
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK