Layui Shortcodes Demo

layui风格shortcodes示例

注意
这是介绍一个依赖layui的shortcodes示例,的实现和使用方法

为什么使用Layui

  • 不善前端
  • ui组件全
  • 符合我的审美

tabs-选项卡

  • 示例代码
  • 实现
1
2
3
4
5
6
{{< layui-tabs name="layui-tabs-2" >}}
  {{% layui-tab title="t1" %}}
这是t1内容,支持`MD`语法
  {{% /layui-tab %}}
  {{< layui-tab title="t2" >}}这是t2的内容{{< /layui-tab >}}
{{< /layui-tabs >}}

自定义shortcodes,实现tabs功能,自定义shortcodes请参考官方文档

/lauout/shortcodes/目录下创建layui-tabs.htmllayui-tab.html 文件,内容如下:

 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>

demo

  • t1
  • t2

这是t1内容,支持MD语法

这是t2的内容

timeline-时间轴

  • 使用
  • 效果
  • 实现
1
2
3
4
5
6
7
8
{{< timeline >}}
{{% tl-event title="2024-01-03" %}}
支持`MD`语法
{{% /tl-event %}}
{{% tl-event title="2023-11-03" %}}
> hello world
{{% /tl-event %}}
{{< /timeline >}}

2024-01-03

<p>支持<code>MD</code>语法</p>

2023-11-03

<blockquote>

hello world

这里是实现方法

2024-01-03

支持MD语法

2023-11-03

hello world

相关内容

Buy me a coffee
geekswg 支付宝支付宝
geekswg 微信微信
0%