Layui Shortcodes Demo

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!-- 引入 layui.css -->
<link href="//unpkg.com/layui@2.9.3/dist/css/layui.css" rel="stylesheet">
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.9.3/dist/layui.js"></script>

{{- .Page.Scratch.Add "tabset-counter" 1 -}}
{{- $tab_set_id := .Get "name" | default (printf "tabset-%s-%d" (.Page.RelPermalink) (.Page.Scratch.Get "tabset-counter") ) | anchorize -}}
{{- $tabs := .Scratch.Get "layui-tabs" -}}

{{- if .Inner -}}{{- /* We don't use the inner content, but Hugo will complain if we don't reference it. */ -}}{{- end -}}

<div class="layui-tab layui-tab-card" lay-filter="{{ $tab_set_id }}" >
    <ul class="layui-tab-title">
        {{- range $i, $e := $tabs -}}
            {{- if (eq $i 0) -}}
                <li class="layui-this" > {{-  trim .title " " -}} </li>
            {{ else }}
                <li> {{-  trim .title " " -}} </li>
            {{- end -}}

        {{- end -}}
    </ul>
    <div class="layui-tab-content">
        {{- range $i, $e := $tabs -}}

            {{- if (eq $i 0) -}}
                <div class="layui-tab-item layui-show" >
                    {{- .content -}}
                </div>
            {{ else }}
                <div class="layui-tab-item">
                    {{- .content -}}
                </div>
            {{- end -}}
        {{- end -}}
       
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<!-- 
参考 hugo-stellar
https://github.com/Yharimium/hugo-stellar/blob/main/layouts/shortcodes/mkdocs/tab.html
https://github.com/kubernetes/website/blob/main/layouts/shortcodes/tabs.html
-->

{{- $title :=  cond .IsNamedParams (.Get "title") (.Get 0) | markdownify  -}}
{{- $content := .Inner | safeHTML -}}

{{- if not (.Parent.Scratch.Get "layui-tabs") -}}
    {{- .Parent.Scratch.Set "layui-tabs" slice -}}
{{- end -}}

{{- .Parent.Scratch.Add "layui-tabs" (dict "title" $title "content" $content) -}}

<div class="layui-tab-item">
	{{ .Inner }}
</div>