8butubb.github.io/layouts/gallery/list.html

{{- define "main" -}}

{{- if .Title }}
<header class="page-header">
    <h1>{{ .Title }}</h1>
    {{- with .Description }}
    <div class="post-description">{{ . | markdownify }}</div>
    {{- end }}
</header>
{{- end }}

<div class="gallery-page-content">
    {{- $albums := where .Site.RegularPages "Type" "gallery" }}
    {{- range $album := $albums }}
        {{- $images := findRE `!\[.*?\]\((.*?)\)` $album.RawContent }}
        {{- if $images }}
        <section class="gallery-album">
            <div class="gallery-album-header">
                <h2 class="gallery-album-title">{{ $album.Title }}</h2>
                <span class="gallery-album-count">{{ len $images }} 张</span>
            </div>
            {{- with $album.Params.description }}
            <p class="gallery-album-desc">{{ . }}</p>
            {{- end }}
            <div class="gallery-grid">
                {{- range $image := $images }}
                {{- $url := replaceRE `!\[.*?\]\((.*?)\)` "$1" $image }}
                <div class="gallery-card" data-src="{{ $url }}">
                    <div class="gallery-card-img">
                        <img src="{{ $url }}" alt="{{ $album.Title }}" loading="lazy">
                    </div>
                </div>
                {{- end }}
            </div>
        </section>
        {{- end }}
    {{- end }}

    {{- if not $albums }}
    <div class="gallery-empty">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="48" height="48">
            <rect x="3" y="3" width="18" height="18" rx="2"/>
            <circle cx="8.5" cy="8.5" r="1.5"/>
            <path d="M21 15l-5-5L5 21"/>
        </svg>
        <p>暂无图片</p>
    </div>
    {{- end }}
</div>

<div class="lightbox" id="lightbox">
    <div class="lightbox-backdrop" id="lightbox-backdrop"></div>
    <div class="lightbox-body">
        <img id="lightbox-img" src="" alt="">
    </div>
    <button class="lightbox-btn lightbox-close-btn" id="lightbox-close" title="关闭">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="6" x2="6" y2="18"/>
            <line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
    </button>
    <button class="lightbox-btn lightbox-prev-btn" id="lightbox-prev" title="上一张">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="15,18 9,12 15,6"/>
        </svg>
    </button>
    <button class="lightbox-btn lightbox-next-btn" id="lightbox-next" title="下一张">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="9,18 15,12 9,6"/>
        </svg>
    </button>
    <div class="lightbox-counter" id="lightbox-counter"></div>
</div>

{{- end -}}