website/layouts/blogs/list.html

{{ define "main" }}
{{- partial "openSource.html" . -}}
<section class='section-1'>
    <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 }}'>
                <div class='img-div'>
                    <img src="{{ .Params.snapshot }}" alt="{{ .Title }}">
                </div>
                <div class='content-div'>
                    <p class='time'>{{ .Params.createTime }}</p>
                    <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
                    <div class='author'>
                        <!-- <img src="" alt=""> -->
                        <span>{{ .Params.author }}</span>
                    </div>
                    <p class='summary'>{{ substr .Summary 0 120 }}</p>
                    <ul>
                        {{ range (split .Params.tag ",") }}
                        <li>{{ . }}</li>
                        {{ end }}
                    </ul>
                </div>
                <a href="{{ .RelPermalink }}" aria-label="{{ .RelPermalink }}">
                    {{ "/static/images/blogs/right-arrow.svg" | readFile | safeHTML }}
                </a>
            </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 }}