diff options
| author | Eltrac <hi@guhub.cn> | 2025-04-02 14:11:29 +0800 |
|---|---|---|
| committer | Eltrac <hi@guhub.cn> | 2025-04-02 14:11:29 +0800 |
| commit | db127b598d0c01b7a07933d3369b4d1dd7c0c9e0 (patch) | |
| tree | 5c800adc9dbf91d7796e3acae7cd0dae2e099961 | |
| parent | b68d42bd1e778fa3bc78fe99dba5a137210c3161 (diff) | |
feat: card pagination
Former-commit-id: 139e2aeaf35c73e32b746f7373a817313744ab1e
| -rw-r--r-- | assets/css/components/_card.scss | 16 | ||||
| -rw-r--r-- | layouts/cards/section.html | 19 |
2 files changed, 32 insertions, 3 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 3735c861..9dd10d32 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss @@ -66,3 +66,19 @@ } } } + +.card-list { + .pagination { + display: flex; + @media screen and (min-width: 768px) { + padding: 1rem; + } + .pagination-prev, .pagination-next { + font-size: 2rem; + padding: 0.2rem 0.6rem; + text-decoration: none; + background-color: var(--block-background-color); + border-radius: 50%; + } + } +} diff --git a/layouts/cards/section.html b/layouts/cards/section.html index 1067c629..5aaed0c3 100644 --- a/layouts/cards/section.html +++ b/layouts/cards/section.html @@ -2,7 +2,9 @@ <article class="card-list"> {{ partial "header.html" . }} <div id="cards-section"> - {{- range .Pages }} + {{- $cards := .Site.GetPage "section" "cards" }} <!-- 获取 "cards" 部分的内容 --> + {{- $paginator := .Paginate $cards.Pages 8 }} <!-- 对该部分内容进行分页 --> + {{- range $paginator.Pages }} <div class="card" style="view-transition-name: card-{{ .File.UniqueID }}"> <div class="card-header"> @@ -22,7 +24,18 @@ {{ .Summary }} </div> </div> - {{- end }} - </div> + {{- end }} + </div> + + <!-- 分页导航 --> + <div class="pagination"> + {{ if $paginator.HasPrev }} + <a href="{{ $paginator.Prev.URL }}" class="pagination-prev">👈</a> + {{ end }} + <div style="width:100%"></div> + {{ if $paginator.HasNext }} + <a href="{{ $paginator.Next.URL }}" class="pagination-next">👉</a> + {{ end }} + </div> </article> {{ end }} |