halo/theme-earth
1
0
Fork 0
mirror of https://github.com/halo-dev/theme-earth.git synced 2025-12-11 02:00:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: improve posts pagination with direct page navigation (#210)

Browse Source 
Signed-off-by: Ryan Wang <i@ryanc.cc>
This commit is contained in:
Ryan Wang
2024-11-16 10:13:31 +08:00
committed by GitHub
parent 43616aff40
commit 4d8475cfc0
9 changed files with 66 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/styles/main.scss
View File

@@ -95,3 +95,14 @@ body {
.tailwind-typography {
@apply prose prose-base mt-4 dark:prose-invert prose-pre:p-0;
}
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z'/%3E%3C/svg%3E")
right 0.3em center no-repeat;
align-items: center;
padding-right: 1.85em;
display: inline-flex;
}

4
templates/assets/dist/main.iife.js vendored
View File

File diff suppressed because one or more lines are too long

2
templates/assets/dist/style.css vendored
View File

File diff suppressed because one or more lines are too long

20
templates/category.html
View File

@@ -24,22 +24,8 @@
<span class="text-sm font-light text-gray-600 dark:text-slate-200">此分类下没有文章</span>
</div>
<div class="mt-6 flex items-center justify-between" th:if="${posts.hasPrevious() || posts.hasNext()}">
<a
th:href="@{${posts.prevUrl}}"
class="whitespace-no-wrap group inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
>
<span class="i-tabler-arrow-left text-lg transition-all group-hover:-translate-x-1"></span>
<span>上一页</span>
</a>
<span class="text-sm text-gray-900 dark:text-slate-50" th:text="|${posts.page} / ${posts.totalPages}|"></span>
<a
th:href="@{${posts.nextUrl}}"
class="whitespace-no-wrap group inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
>
<span>下一页</span>
<span class="i-tabler-arrow-right text-lg transition-all group-hover:translate-x-1"></span>
</a>
</div>
<th:block
th:replace="~{modules/pagination :: pagination(context = |${category.status.permalink}/|, prevUrl = ${posts.prevUrl}, nextUrl = ${posts.nextUrl}, totalPages = ${posts.totalPages}, page = ${posts.page}, hasPrevious = ${posts.hasPrevious()}, hasNext = ${posts.hasNext()})}"
/>
</th:block>
</html>

20
templates/index.html
View File

@@ -24,22 +24,8 @@
<span class="text-sm font-light text-gray-600">当前没有文章</span>
</div>
<div class="mt-6 flex items-center justify-between" th:if="${posts.hasPrevious() || posts.hasNext()}">
<a
th:href="@{${posts.prevUrl}}"
class="whitespace-no-wrap group inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
>
<span class="i-tabler-arrow-left text-lg transition-all group-hover:-translate-x-1"></span>
<span>上一页</span>
</a>
<span class="text-sm text-gray-900 dark:text-slate-50" th:text="|${posts.page} / ${posts.totalPages}|"></span>
<a
th:href="@{${posts.nextUrl}}"
class="whitespace-no-wrap group inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
>
<span>下一页</span>
<span class="i-tabler-arrow-right text-lg transition-all group-hover:translate-x-1"></span>
</a>
</div>
<th:block
th:replace="~{modules/pagination :: pagination(context = '/', prevUrl = ${posts.prevUrl}, nextUrl = ${posts.nextUrl}, totalPages = ${posts.totalPages}, page = ${posts.page}, hasPrevious = ${posts.hasPrevious()}, hasNext = ${posts.hasNext()})}"
/>
</th:block>
</html>

37
templates/modules/pagination.html Normal file
View File

@@ -0,0 +1,37 @@
<div th:fragment="pagination(context,prevUrl,nextUrl,totalPages,page,hasPrevious,hasNext)">
<div class="mt-6 flex items-center justify-between" th:if="${hasPrevious || hasNext}">
<a
th:href="@{${prevUrl}}"
class="whitespace-no-wrap group inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
th:classappend="${!hasPrevious ? 'pointer-events-none opacity-60' : ''}"
>
<span class="i-tabler-arrow-left text-lg transition-all group-hover:-translate-x-1"></span>
<span>上一页</span>
</a>
<select id="pagination" class="bg-transparent text-sm text-gray-900 outline-none dark:text-slate-50">
<option
th:each="i : ${#numbers.sequence(1,totalPages)}"
th:selected="${i == page}"
th:value="${i}"
th:text="|${i} / ${totalPages}|"
></option>
</select>
<a
th:href="@{${nextUrl}}"
class="whitespace-no-wrap group inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
th:classappend="${!hasNext ? 'pointer-events-none opacity-60' : ''}"
>
<span>下一页</span>
<span class="i-tabler-arrow-right text-lg transition-all group-hover:translate-x-1"></span>
</a>
</div>
<script th:inline="javascript">
document.addEventListener("DOMContentLoaded", () => {
document.getElementById("pagination").addEventListener("change", (event) => {
const selectedPage = event.target.value;
window.location.href = `[(${context})]page/${selectedPage}`;
});
});
</script>
</div>

23
templates/moments.html
View File

@@ -159,26 +159,9 @@
</ul>
</div>
<div class="mt-6 flex items-center justify-between" th:if="${moments.hasPrevious() || moments.hasNext()}">
<a
th:href="@{${moments.prevUrl}}"
class="whitespace-no-wrap group inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
>
<span class="i-tabler-arrow-left text-lg transition-all group-hover:-translate-x-1"></span>
<span>上一页</span>
</a>
<span
class="text-sm text-gray-900 dark:text-slate-50"
th:text="|${moments.page} / ${moments.totalPages}|"
></span>
<a
th:href="@{${moments.nextUrl}}"
class="whitespace-no-wrap group inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
>
<span>下一页</span>
<span class="i-tabler-arrow-right text-lg transition-all group-hover:translate-x-1"></span>
</a>
</div>
<th:block
th:replace="~{modules/pagination :: pagination(context = '/moments/', prevUrl = ${moments.prevUrl}, nextUrl = ${moments.nextUrl}, totalPages = ${moments.totalPages}, page = ${moments.page}, hasPrevious = ${moments.hasPrevious()}, hasNext = ${moments.hasNext()})}"
/>
</div>
</th:block>
</html>

20
templates/photos.html
View File

@@ -43,23 +43,9 @@
</div>
</div>
<div class="mt-6 flex items-center justify-between" th:if="${photos.hasPrevious() || photos.hasNext()}">
<a
th:href="@{${photos.prevUrl}}"
class="whitespace-no-wrap group inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
>
<span class="i-tabler-arrow-left text-lg transition-all group-hover:-translate-x-1"></span>
<span>上一页</span>
</a>
<span class="text-sm text-gray-900 dark:text-slate-50" th:text="|${photos.page} / ${photos.totalPages}|"></span>
<a
th:href="@{${photos.nextUrl}}"
class="whitespace-no-wrap group inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
>
<span>下一页</span>
<span class="i-tabler-arrow-right text-lg transition-all group-hover:translate-x-1"></span>
</a>
</div>
<th:block
th:replace="~{modules/pagination :: pagination(context = '/photos/', prevUrl = ${photos.prevUrl}, nextUrl = ${photos.nextUrl}, totalPages = ${photos.totalPages}, page = ${photos.page}, hasPrevious = ${photos.hasPrevious()}, hasNext = ${photos.hasNext()})}"
/>
</div>
</th:block>
</html>

20
templates/tag.html
View File

@@ -26,22 +26,8 @@
<span class="text-sm font-light text-gray-600 dark:text-slate-200">此标签下没有文章</span>
</div>
<div class="mt-6 flex items-center justify-between" th:if="${posts.hasPrevious() || posts.hasNext()}">
<a
th:href="@{${posts.prevUrl}}"
class="whitespace-no-wrap group inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
>
<span class="i-tabler-arrow-left text-lg transition-all group-hover:-translate-x-1"></span>
<span>上一页</span>
</a>
<span class="text-sm text-gray-900 dark:text-slate-50" th:text="|${posts.page} / ${posts.totalPages}|"></span>
<a
th:href="@{${posts.nextUrl}}"
class="whitespace-no-wrap group inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
>
<span>下一页</span>
<span class="i-tabler-arrow-right text-lg transition-all group-hover:translate-x-1"></span>
</a>
</div>
<th:block
th:replace="~{modules/pagination :: pagination(context = |${tag.status.permalink}/|, prevUrl = ${posts.prevUrl}, nextUrl = ${posts.nextUrl}, totalPages = ${posts.totalPages}, page = ${posts.page}, hasPrevious = ${posts.hasPrevious()}, hasNext = ${posts.hasNext()})}"
/>
</th:block>
</html>