Simple Tab Widget For Hugo Blog
Published at May 10, 2021 · Last Modified at September 22, 2021 · 2 min read · Tags: hugo tab-widget jquery
I have create a simple tab widget to use in my hugo based blog. It is based on JQuery Tab widget and simpple hugo shortcode templae. The code template is in the shotcodes/tab-widget.
{{ $title := "tabe widget" }}
{{ if .IsNamedParams }}
{{ with .Get "title" }}
{{ $title = . }}
{{ end }}
{{ else }}
{{ with .Get 0 }}
{{ $title = . }}
{{ end }}
{{ end }}
<link rel = "stylesheet"
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel = "stylesheet"
href = "https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
</script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id = "tabs">
{{ $ss:=split .Inner "---" }}
<ul>
{{ range $idx, $el :=$ss }}
{{ $content:=split $el "$$$" }}
<li><a href = "#{{ (printf ("tab-%d") $idx) }}"> {{index $content 0}}</a></li>
{{ end }}
</ul>
{{ range $idx, $el :=$ss }}
{{ $content:=split $el "$$$" }}
{{ $tab := index $content 1 }}
<div id ="{{ (printf ("tab-%d") $idx) }}">
{{ $tab | markdownify }}
</div>
{{ end }}
</div>
{{ $title}}
Here is exmaple how to use tab-widget in markdown docuement:
{{< tab-widget "DOT Language (GraphViz) Example" >}}
bash code example
$$$
\`\`\`bash
#!/usr/bin/bash
while [ 1 ] ; do echo "hello world";done
\`\`\`\
---
c code example
$$$
\`\`\`\c
#include <stdio.h>
int main() {
printf ("hello world\r\n")
}
\`\`\`
---
python code example
$$$
\`\`\`python
#!/usb/bin/python
print ("hello world")
\`\`\`
{{< /tab-widget >}}
Here is how it apears on the blog:
#!/usr/bin/bash
while [ 1 ] ; do echo "hello world";done
#include <stdio.h>
int main() {
printf ("hello world\r\n")
}
#!/usb/bin/python
print ("hello world")