website/layouts/news/list.html

{{ define "main" }}

{{ with .Params.section1 }}
<section class="section-1 bg-cover" style='background-image: url("{{ .topImage }}");'>
    <div class="title-div common-layout">
        <h1 class="title-center-h1">{{ .title }}</h1>
        <p class="common-p">{{ .content }}</p>
    </div>
</section>
{{ end }}
<section class='section-list'>
    <div class="common-layout">
        <ul class='blog-tab-ul'>
            <li class='active'>{{ .Params.tip }}</li>
            {{ $tags := slice }}
            {{ range .Data.Pages }}
            {{ $tag := split .Params.tag ","}}
            {{ $tags = $tags | append $tag }}
            {{ end }}
            {{ range ($tags | uniq) }}
            <li data-tag='{{ . }}'>{{ . }}</li>
            {{ end }}
        </ul>
        <ul class='blogs-ul'>
            {{ range (.Data.Pages.ByParam "createTime").Reverse }}
            <li data-tag='{{ .Params.tag }}' class="news-div">
                <p class="time">{{ .Params.createTime }}</p>
                <h2>
                    <a href="{{ .RelPermalink }}" target="_blank" rel="noopener noreferrer">{{ .Params.title }}</a>
                </h2>
                <p>{{ .Params.description }}</p>
                <img src="{{ .Params.image }}" alt="{{ .Params.title }}">
            </li>
            {{ end }}
        </ul>
    </div>
</section>

<script>
    var bindClickBlogLi = function() {
        var tabLi = $('.blog-tab-ul > li')
        var blogs = $('.blogs-ul > li')
        tabLi.click(function() {
            tabLi.removeClass('active')
            var tag = $(this).data('tag')
            $(this).addClass('active')
            blogs.show()
            if (tag) {
                blogs.each(function() {
                    var tags = $(this).data('tag')
                    if (!tags || !tags.includes(tag)) {
                        $(this).hide()
                    }
                })
            }
        })
    }

    bindClickBlogLi()
</script>
{{ end }}