关于文章过多时跳转指定页面

[ZejunCao]

将 layout_partial\paging.ejs文件代码修改如下，即可得到跳转指定页效果

<div class="container paging">
    <div class="row">
        <div class="col s6 m4 l4">
            <% if (page.prev) { %>
            <a href="<%- url_for(page.prev_link) %>"
               class="left btn-floating btn-large waves-effect waves-light bg-color">
                <i class="fas fa-angle-left"></i>
            </a>
            <% } else { %>
            <a class="left btn-floating btn-large disabled">
                <i class="fas fa-angle-left"></i>
            </a>
            <% } %>
        </div>
        <div class="page-info col m4 l4">
            <div class="center-align page-nav-wrapper">
                <% 
                let showPages = 5; // 显示的页码数量
                let currentPage = parseInt(page.current);
                let totalPages = parseInt(page.total);
                let start = Math.max(1, currentPage - Math.floor(showPages/2));
                let end = Math.min(totalPages, start + showPages - 1);
                
                if (end - start + 1 < showPages) {
                    start = Math.max(1, end - showPages + 1);
                }
                %>
                
                <% if (start > 1) { %>
                    <a href="<%- url_for('/') %>" class="page-num waves-effect">1</a>
                    <% if (start > 2) { %>
                        <span class="page-dots">...</span>
                    <% } %>
                <% } %>

                <% for(let i = start; i <= end; i++) { %>
                    <% if(i === currentPage) { %>
                        <a class="page-num active bg-color"><%= i %></a>
                    <% } else { %>
                        <a href="<%- url_for(page.base + (i === 1 ? '' : '/page/' + i + '/')) %>" 
                           class="page-num waves-effect"><%= i %></a>
                    <% } %>
                <% } %>

                <% if (end < totalPages - 1) { %>
                    <span class="page-dots">...</span>
                <% } %>
                <% if (end < totalPages) { %>
                    <a href="<%- url_for(page.base + '/page/' + totalPages + '/') %>" 
                       class="page-num waves-effect"><%= totalPages %></a>
                <% } %>
            </div>
        </div>
        <div class="col s6 m4 l4">
            <% if (page.next) { %>
            <a href="<%- url_for(page.next_link) %>"
               class="right btn-floating btn-large waves-effect waves-light bg-color">
                <i class="fas fa-angle-right"></i>
            </a>
            <% } else { %>
            <a class="right btn-floating btn-large disabled">
                <i class="fas fa-angle-right"></i>
            </a>
            <% } %>
        </div>
    </div>
</div>

<style>
.page-nav-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 4px;
    color: #555;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s;
}

.page-num:hover {
    background-color: #eee;
}

.page-num.active {
    color: white;
}

.page-dots {
    color: #999;
    padding: 0 3px;
}

@media only screen and (max-width: 601px) {
    .page-nav-wrapper {
        display: none;
    }
}
</style>