Hugo. Вкладки jquery
2025-07-03
·
2 мин. для прочтения
Hugo. Вкладки jquery.
Содержание
1 Общая информация
- Сделал на основе сокращения https://yairgadelov.me/simple-tab-widget-for-hugo-blog/.
- Сокращение базируется на JQuery Tab widget (https://www.tutorialspoint.com/jquery/widget-tab.htm)
2 Код
2.1 tabs
{{ $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.14.1/themes/flick/jquery-ui.css"> -->
{{ $css := resources.Get "css/flick/jquery-ui.css" }}
{{ $styles := $css | toCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}">
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js">
</script>
<!-- {{ $js := resources.Get "js/jquery.min.js" | js.Build | minify | fingerprint }} -->
<!-- <script -->
<!-- src="{{ $js.RelPermalink }}" -->
<!-- integrity="{{ $js.Data.Integrity }}" -->
<!-- defer -->
<!-- ></script> -->
<!-- {{ $js := resources.Get "js/jquery-ui.min.js" | js.Build | minify | fingerprint }} -->
<!-- <script -->
<!-- src="{{ $js.RelPermalink }}" -->
<!-- integrity="{{ $js.Data.Integrity }}" -->
<!-- defer -->
<!-- ></script> -->
<!-- {{ $js := resources.Get "js/jquery.min.js" | js.Build }} -->
<!-- <script -->
<!-- src="{{ $js.RelPermalink }}" -->
<!-- defer -->
<!-- ></script> -->
<!-- {{ $js := resources.Get "js/jquery-ui.min.js" | js.Build }} -->
<!-- <script -->
<!-- src="{{ $js.RelPermalink }}" -->
<!-- defer -->
<!-- ></script> -->
<!-- <script type = "text/javascript" -->
<!-- src="/js/jquery.min.js" -->
<!-- ></script> -->
<!-- <script type = "text/javascript" src="/js/jquery-ui.min.js"> -->
<!-- </script> -->
<script>
$(function() {
$( "#tabs, #tabs1, #tabs2, #tabs3, #tabs4, #tabs5, #tabs6, #tabs7, #tabs8" ).tabs();
});
</script>
<div id = "tabs">
{{ $ss:=split .Inner "---" }}
<ul>
{{ range $idx, $el :=$ss }}
{{ if ne $idx 0 }}
{{ $content:=split $el "$$$" }}
<li><a href = "#{{ (printf ("tab-%d") $idx) }}"> {{index $content 0}}</a></li>
{{ end }}
{{ 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}}
2.2 tab
{{ $name := trim (.Get 0) " " }}
---
{{ $name }}
$$$
{{ $.Inner }}
3 Использование
- Использовать можно следующим образом:
{{< tabs "Общее название" >}}
{{< tab "Первый" >}}
Содержание 1
{{< /tab >}}
{{< tab "Второй" >}}
Содержание 2
{{< /tab >}}
{{< tab "Третий" >}}
Содержание 3
{{< /tab >}}
{{< /tabs >}}