📅 最后修改于: 2023-12-03 15:41:24.260000 🧑 作者: Mango
在网站开发中，经常会涉及到分页和分类的问题。而对于一些特定的分类，我们可能需要自定义分页的样式，以增强用户体验。本文将介绍如何使用CSS以及JavaScript实现自定义分类分页，并同时处理404错误页面的情况。
在开始之前，请确保你具备以下技能：
首先，我们需要定义一个包含分类项的容器。针对某个特定分类，我们需要给容器设置一个id。
<div id="category-1">
<!-- 这里放置该分类的内容和分页 -->
</div>
接下来，我们再定义一个分页器的容器。其中page是分页的类名，用来方便后面的样式控制。
<div id="pagination-1" class="page">
<!-- 这里放置分页的内容 -->
</div>
接下来，我们需要为分页器添加样式。首先，我们需要利用CSS的flexbox属性让“上一页”和“下一页”处于容器的两侧。
.page {
display: flex;
justify-content: space-between;
}
然后，我们需要让分页按钮排列在一行，并添加默认样式。
.page .page-numbers {
display: inline-block;
padding: 0.2em 0.5em;
margin: 0 0.2em;
border-radius: 0.3em;
background-color: #fff;
color: #333;
}
接着，我们需要为当前激活的分页按钮和禁用的分页按钮添加样式。
.page .current-page {
background-color: #0073aa;
color: #fff;
}
.page .disabled {
pointer-events: none;
opacity: 0.6;
}
最后，我们需要为分页器添加响应式设计，以适应不同的屏幕尺寸。
@media screen and (max-width: 767px) {
.page {
display: block;
}
.page .page-numbers {
margin: 0.4em 0;
}
}
我们需要将分页器和分类项结合起来，实现分页的功能。具体实现方式为：点击分页按钮，根据当前所点击的按钮修改分类项的内容，以实现分页效果。这里我们采用jQuery实现，代码如下所示：
// 定义每页显示的数量
var perPage = 5;
// 获取分类项和分页器
var $category = $('#category-1');
var $pagination = $('#pagination-1');
// 获取所有需要分页的项
var $items = $category.find('article');
// 计算总页数
var totalPages = Math.ceil($items.length / perPage);
// 设置默认为第一页
var currentPage = 1;
showPage(currentPage);
// 点击分页按钮的回调函数
$pagination.on('click', '.page-numbers', function(){
var $this = $(this);
if($this.hasClass('current-page') || $this.hasClass('disabled')) {
return;
}
else if($this.hasClass('prev')) {
currentPage--;
}
else if($this.hasClass('next')) {
currentPage++;
}
else {
currentPage = parseInt($this.text());
}
showPage(currentPage);
});
// 分页显示函数
function showPage(pageNum) {
// 计算当前页的项的范围
var startPoint = (pageNum - 1) * perPage;
var endPoint = pageNum * perPage;
// 显示当前页的项
$items.hide()
.slice(startPoint, endPoint)
.show();
// 更新分页器
$pagination.empty();
$('<a href="#" class="prev page-numbers">上一页</a>').appendTo($pagination);
for(var i = 1; i <= totalPages; i++) {
var $pageItem = $('<a href="#" class="page-numbers">' + i + '</a>');
if(i === pageNum) {
$pageItem.addClass('current-page');
}
$pageItem.appendTo($pagination);
}
$('<a href="#" class="next page-numbers">下一页</a>').appendTo($pagination);
// 处理边界情况
if(pageNum === 1) {
$pagination.find('.prev').addClass('disabled');
}
if(pageNum === totalPages) {
$pagination.find('.next').addClass('disabled');
}
}
当用户访问一个不存在的页面时，我们需要给出友好的404提示。这里我们可以利用CSS绘制一个404的页面，以提高用户体验。
为了实现404页面的效果，需要针对所有的404请求，设置一个专门的错误页面。我们可以在服务器端设置一个路由，将所有未找到的页面都路由到一个特定的URL，比如404.html。接下来，我们需要在该页面中添加以下HTML结构。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>404 Not Found</title>
<style>
/* 这里添加CSS样式 */
</style>
</head>
<body>
<div class="container">
<h1>404</h1>
<p>很抱歉，你所请求的页面未找到！</p>
<a href="/" class="back-home">返回首页</a>
</div>
</body>
</html>
这里可以根据自己的喜好，自定义404页面的CSS样式。下面是一份示例代码，供参考。
.container {
margin: 2em auto;
text-align: center;
}
h1 {
font-size: 8em;
font-weight: bold;
color: #0073aa;
text-shadow: 1px 2px 2px #333;
}
p {
font-size: 1.5em;
margin-top: 1em;
}
.back-home {
display: inline-block;
margin-top: 1em;
padding: 0.5em 2em;
border-radius: 0.5em;
background-color: #0073aa;
color: #fff;
text-decoration: none;
box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.back-home:hover {
background-color: #005f88;
}
在服务端，我们需要将所有未找到的页面都路由到特定的404页面。这里以Node.js为例，示例代码如下所示。
// 导入Express框架
const express = require('express');
const app = express();
// 所有未匹配的页面都路由到404.html
app.get('*', function(req, res){
res.status(404).sendFile(__dirname + '/public/404.html');
});
至此，404页面处理也完成了。
总结
本文主要介绍了如何使用CSS和JavaScript实现自定义分类分页和处理404页面的功能，希望能对你有所帮助。在实际开发过程中，还需要考虑更多的细节问题，比如SEO优化、性能优化等。如果你有更好的实现方式，欢迎分享给我们。