feat: enhance pagination UI and add RSS feed link in navbar
This commit is contained in:
1 parent
16d2ad0ae2
commit
88692cf602
4 files changed
+81
-17
No files matched your search
+29
-1
@@ -949,11 +949,20 @@ img.nav-svg-icon {
|
|||||||
/* ========================================
|
/* ========================================
|
||||||
PAGINATION
|
PAGINATION
|
||||||
======================================== */
|
======================================== */
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
.pagination .page-link {
|
.pagination .page-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 2.6rem;
|
||||||
background: var(--bg-surface);
|
background: var(--bg-surface);
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
padding: 0.55rem 1.1rem;
|
padding: 0.55rem 0.9rem;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
@@ -966,6 +975,25 @@ img.nav-svg-icon {
|
|||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Compact prev/next arrow buttons */
|
||||||
|
.pagination .page-link.is-arrow {
|
||||||
|
min-width: 0;
|
||||||
|
padding: 0.55rem 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination .page-link.is-arrow .bd-icon {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Current page: highlighted, non-interactive */
|
||||||
|
.pagination .page-item.active .page-link {
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--accent-contrast);
|
||||||
|
border-color: var(--accent);
|
||||||
|
transform: none;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
.pagination .page-item.disabled .page-link {
|
.pagination .page-item.disabled .page-link {
|
||||||
background: var(--bg-subtle);
|
background: var(--bg-subtle);
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
|
|||||||
@@ -7,6 +7,8 @@
|
|||||||
"Toggle theme": "Toggle theme",
|
"Toggle theme": "Toggle theme",
|
||||||
"Author": "Author",
|
"Author": "Author",
|
||||||
"Skip to content": "Skip to content",
|
"Skip to content": "Skip to content",
|
||||||
|
"Pagination": "Pagination",
|
||||||
|
"RSS": "RSS",
|
||||||
"Copy": "Copy",
|
"Copy": "Copy",
|
||||||
"Copied": "Copied",
|
"Copied": "Copied",
|
||||||
"Copy code": "Copy code",
|
"Copy code": "Copy code",
|
||||||
|
|||||||
+42
-16
@@ -16,15 +16,17 @@
|
|||||||
<?php endif ?>
|
<?php endif ?>
|
||||||
|
|
||||||
<?php $networks = Theme::socialNetworks(); ?>
|
<?php $networks = Theme::socialNetworks(); ?>
|
||||||
<?php if (!empty($networks)) : ?>
|
|
||||||
<div class="profile-social">
|
<div class="profile-social">
|
||||||
<?php foreach ($networks as $key => $label) : ?>
|
<?php foreach ($networks as $key => $label) : ?>
|
||||||
<a href="<?php echo $site->{$key}(); ?>" target="_blank" rel="noopener" title="<?php echo htmlspecialchars($label, ENT_QUOTES, 'UTF-8') ?>">
|
<a href="<?php echo $site->{$key}(); ?>" target="_blank" rel="noopener" title="<?php echo htmlspecialchars($label, ENT_QUOTES, 'UTF-8') ?>">
|
||||||
<img class="profile-social-icon" src="<?php echo DOMAIN_THEME . 'img/' . $key . '.svg' ?>" alt="<?php echo htmlspecialchars($label, ENT_QUOTES, 'UTF-8') ?>" />
|
<img class="profile-social-icon" src="<?php echo DOMAIN_THEME . 'img/' . $key . '.svg' ?>" alt="<?php echo htmlspecialchars($label, ENT_QUOTES, 'UTF-8') ?>" />
|
||||||
</a>
|
</a>
|
||||||
<?php endforeach ?>
|
<?php endforeach ?>
|
||||||
|
<!-- RSS feed (served by the RSS plugin at /rss.xml) -->
|
||||||
|
<a href="<?php echo rtrim(Theme::siteUrl(), '/') . '/rss.xml'; ?>" target="_blank" rel="noopener" title="<?php echo $L->get('RSS'); ?>">
|
||||||
|
<img class="profile-social-icon" src="<?php echo DOMAIN_THEME . 'img/rss.svg' ?>" alt="<?php echo $L->get('RSS'); ?>" />
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<?php endif ?>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Search box, relocated from the sidebar (Popeye-style) -->
|
<!-- Search box, relocated from the sidebar (Popeye-style) -->
|
||||||
@@ -85,30 +87,54 @@
|
|||||||
|
|
||||||
<!-- Pagination -->
|
<!-- Pagination -->
|
||||||
<?php if (Paginator::numberOfPages() > 1) : ?>
|
<?php if (Paginator::numberOfPages() > 1) : ?>
|
||||||
<nav class="paginator mt-5">
|
<?php
|
||||||
|
$totalPages = Paginator::numberOfPages();
|
||||||
|
$currentPage = Paginator::currentPage();
|
||||||
|
|
||||||
|
// Derive a per-page URL template by borrowing Bludit's own next/prev URL
|
||||||
|
// (always of the form ...?page=N) and turning the number into a token. Use
|
||||||
|
// a page >= 2 as the source so the "page=N" token is always present.
|
||||||
|
$pageTemplate = null;
|
||||||
|
if (Paginator::showNext()) {
|
||||||
|
$pageTemplate = str_replace('page=' . ($currentPage + 1), 'page={N}', Paginator::nextPageUrl());
|
||||||
|
} elseif (Paginator::showPrev() && ($currentPage - 1) >= 2) {
|
||||||
|
$pageTemplate = str_replace('page=' . ($currentPage - 1), 'page={N}', Paginator::previousPageUrl());
|
||||||
|
}
|
||||||
|
// Adjacent pages use Bludit's exact URLs; non-adjacent use the template.
|
||||||
|
$pageUrl = function ($n) use ($currentPage, $pageTemplate) {
|
||||||
|
if ($n == $currentPage - 1) { return Paginator::previousPageUrl(); }
|
||||||
|
if ($n == $currentPage + 1) { return Paginator::nextPageUrl(); }
|
||||||
|
return $pageTemplate ? str_replace('{N}', $n, $pageTemplate) : '#';
|
||||||
|
};
|
||||||
|
?>
|
||||||
|
<nav class="paginator mt-5" aria-label="<?php echo $L->get('Pagination'); ?>">
|
||||||
<ul class="pagination flex-wrap justify-content-center">
|
<ul class="pagination flex-wrap justify-content-center">
|
||||||
|
|
||||||
<!-- Previous button -->
|
<!-- Previous -->
|
||||||
<?php if (Paginator::showPrev()) : ?>
|
<?php if (Paginator::showPrev()) : ?>
|
||||||
<li class="page-item mr-2">
|
<li class="page-item">
|
||||||
<a class="page-link" href="<?php echo Paginator::previousPageUrl() ?>" tabindex="-1">
|
<a class="page-link is-arrow" href="<?php echo Paginator::previousPageUrl() ?>" aria-label="<?php echo $L->get('Previous'); ?>">
|
||||||
<?php echo blowdit_icon('chevron-left'); ?> <?php echo $L->get('Previous'); ?>
|
<?php echo blowdit_icon('chevron-left'); ?>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<!-- Home button -->
|
<!-- Numbered pages -->
|
||||||
<li class="page-item mx-2 <?php if (Paginator::currentPage() == 1) echo 'disabled' ?>">
|
<?php for ($i = 1; $i <= $totalPages; $i++) : ?>
|
||||||
<a class="page-link" href="<?php echo Theme::siteUrl() ?>">
|
<li class="page-item<?php echo ($i == $currentPage) ? ' active' : ''; ?>">
|
||||||
<?php echo blowdit_icon('house'); ?> Home
|
<?php if ($i == $currentPage) : ?>
|
||||||
</a>
|
<span class="page-link" aria-current="page"><?php echo $i; ?></span>
|
||||||
|
<?php else : ?>
|
||||||
|
<a class="page-link" href="<?php echo $pageUrl($i); ?>"><?php echo $i; ?></a>
|
||||||
|
<?php endif; ?>
|
||||||
</li>
|
</li>
|
||||||
|
<?php endfor; ?>
|
||||||
|
|
||||||
<!-- Next button -->
|
<!-- Next -->
|
||||||
<?php if (Paginator::showNext()) : ?>
|
<?php if (Paginator::showNext()) : ?>
|
||||||
<li class="page-item ml-2">
|
<li class="page-item">
|
||||||
<a class="page-link" href="<?php echo Paginator::nextPageUrl() ?>">
|
<a class="page-link is-arrow" href="<?php echo Paginator::nextPageUrl() ?>" aria-label="<?php echo $L->get('Next'); ?>">
|
||||||
<?php echo $L->get('Next'); ?> <?php echo blowdit_icon('chevron-right'); ?>
|
<?php echo blowdit_icon('chevron-right'); ?>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|||||||
@@ -33,6 +33,14 @@
|
|||||||
</li>
|
</li>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
|
|
||||||
|
<!-- RSS feed (served by the RSS plugin at /rss.xml) -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="<?php echo rtrim(Theme::siteUrl(), '/') . '/rss.xml'; ?>" target="_blank" rel="noopener" title="<?php echo $L->get('RSS'); ?>">
|
||||||
|
<img class="d-none d-md-block nav-svg-icon" src="<?php echo DOMAIN_THEME . 'img/rss.svg' ?>" alt="<?php echo $L->get('RSS'); ?>" />
|
||||||
|
<span class="d-inline d-md-none"><?php echo $L->get('RSS'); ?></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
<!-- Theme picker -->
|
<!-- Theme picker -->
|
||||||
<li class="nav-item ml-md-2 mt-2 mt-md-0 theme-picker-wrap">
|
<li class="nav-item ml-md-2 mt-2 mt-md-0 theme-picker-wrap">
|
||||||
<button type="button" id="theme-toggle" class="theme-toggle" aria-label="<?php echo $L->get('Toggle theme') ?>" title="<?php echo $L->get('Toggle theme') ?>" aria-haspopup="true" aria-expanded="false">
|
<button type="button" id="theme-toggle" class="theme-toggle" aria-label="<?php echo $L->get('Toggle theme') ?>" title="<?php echo $L->get('Toggle theme') ?>" aria-haspopup="true" aria-expanded="false">
|
||||||
|
|||||||
Reference in new issue
Block a user