二级页面（Second Page）项目文档

最后更新时间：2026年01月16日

二级页面太多了，放这好记着。

二级页面（Second Page）项目文档

一、项目概述

二级页面（Second Page） 是一个用于集中展示个人项目、实验作品与技术实践记录的静态页面项目。页面以时间轴（按年份）为主线，结合 年份筛选 + 分页机制，实现对多年项目的清晰管理与高可读性展示。

该项目主要服务于：

  • 个人技术项目归档
  • Web 前端 / PHP 项目展示
  • 个人站点的项目索引页（Portfolio / Projects Page）

访问示例：

概览图

桌面端

移动端

二、技术栈说明

1. 前端技术

  • HTML5：页面结构与语义化标签

  • Tailwind CSS v3（CDN）：

    • 响应式布局
    • 原子化样式管理
    • 自定义主题色与字体
  • Font Awesome 4.7：图标库（导航栏、时间、分页等）

  • 原生 JavaScript（Vanilla JS）：

    • 年份筛选逻辑
    • 项目分页逻辑
    • DOM 动态渲染

2. 后端依赖

  • 无后端依赖（纯静态页面）

  • 可直接部署于：

    • Nginx / Apache
    • GitHub Pages
    • 任意静态托管平台

三、页面结构说明

1. 页面整体结构

<body>
 ├─ 顶部导航栏（Nav）
 ├─ 页面标题区（Title Section）
 ├─ 项目统计卡片（Project Count）
 ├─ 年份筛选器（Year Filter）
 ├─ 项目列表（Project Grid）
 ├─ 分页组件（Pagination）
 └─ 页脚（Footer）

2. 导航栏（Nav）

  • 固定顶部（sticky）
  • 支持桌面端与移动端响应式显示

  • 导航内容：

    • 博客主页
    • 项目页（当前页）
    • 关于页面

3. 页面标题区

包含以下信息：

  • 页面主标题（中文）
  • 英文副标题（Secondary Page）
  • 装饰分割线
  • 页面描述性文字（项目理念）

4. 项目统计卡片

  • 当前仅保留 项目总数
  • 使用卡片样式展示
  • 可手动维护或后续改为 JS 自动统计

5. 年份筛选器（核心功能）

  • 支持：

    • 全部项目
    • 按年份（2019–2026）筛选
  • 每个筛选按钮通过 data-year 标记年份

  • 点击后：

    • 自动重置分页为第一页
    • 动态刷新项目列表

示例：

<button class="year-filter" data-year="2025">2025</button>

6. 项目列表（Project List）

布局方式

  • 桌面端：双栏布局（md:grid-cols-2）
  • 移动端：单列布局

单个项目结构

每个项目卡片包含：

  • 项目名称（可点击跳转）
  • 项目日期
  • 项目简要描述
  • 技术标签（Tag）

项目通过以下属性参与筛选与分页：

<div class="project-item" data-year="2025"></div>

7. 分页组件

  • 完全由 JavaScript 动态生成

  • 功能包括：

    • 上一页 / 下一页
    • 当前页高亮
    • 页码自适应项目数量

分页逻辑

  • 每页固定显示 6 个项目
  • 分页与年份筛选联动

四、JavaScript 逻辑说明

1. 核心配置

const pageSize = 6;
let currentPage = 1;
let filterYear = 'all';

2. 年份筛选流程

  1. 点击年份按钮
  2. 更新 filterYear
  3. 重置 currentPage = 1
  4. 调用 renderProjects()

3. 项目渲染流程（renderProjects）

  • 根据 data-year 过滤项目
  • 根据当前页码计算展示区间
  • 动态隐藏 / 显示项目卡片
  • 重新生成分页按钮

4. 分页按钮生成（renderPagination）

  • 自动计算总页数
  • 根据当前页添加禁用状态
  • 支持页码点击跳转

五、响应式与兼容性

  • 完整支持移动端 / 平板 / 桌面端
  • 使用 Tailwind 响应式断点
  • 兼容主流现代浏览器（Chrome / Edge / Firefox）

六、代码全览

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>二级页面 - 探索与实践的足迹</title>
  <!-- Tailwind CSS v3 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- 自定义配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#64748B',
            success: '#10B981',
            warning: '#F59E0B',
            dark: '#1E293B',
            light: '#F8FAFC'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .text-shadow-sm {
        text-shadow: 0 1px 2px rgba(0,0,0,0.1);
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
      }
      .tag {
        @apply inline-block px-2 py-1 text-xs rounded-full mr-2 mb-2;
      }
      .link-text {
        @apply cursor-pointer hover:underline transition-all;
      }
      .page-active {
        @apply bg-primary text-white;
      }
      .page-disable {
        @apply opacity-50 cursor-not-allowed pointer-events-none;
      }
    }
  </style>
</head>

<body class="bg-gray-50 text-gray-800 min-h-screen">
  <!-- 顶部导航 -->
  <nav class="bg-white shadow-sm sticky top-0 z-10">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
      <a href="#" class="text-xl font-bold text-primary flex items-center">
        <i class="fa fa-code-fork mr-2"></i>
        <span>二级页面</span>
      </a>
      <div class="hidden md:flex space-x-6">
        <a href="http://mxzfun.xyz/" class="text-gray-600 hover:text-primary transition-colors">博客</a>
        <a href="http://mxzfun.xyz/secondpage/secondpage.html" class="text-primary font-medium">项目</a>
        <a href="http://mxzfun.xyz/index.php/start-page.html"
          class="text-gray-600 hover:text-primary transition-colors">关于</a>
      </div>
      <button class="md:hidden text-gray-600">
        <i class="fa fa-bars text-xl"></i>
      </button>
    </div>
  </nav>

  <!-- 主要内容 -->
  <main class="container mx-auto px-4 py-8 md:py-12">
    <!-- 页面标题 -->
    <div class="text-center mb-12">
      <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-dark mb-2">二级页面</h1>
      <p class="text-xl text-gray-500 mb-4">Secondary Page</p>
      <div class="w-24 h-1 bg-primary mx-auto mb-6 rounded-full"></div>
      <p class="text-lg text-gray-600 max-w-2xl mx-auto">
        探索与实践的足迹 · 记录每一次技术探索 · 沉淀每一份实践经验
      </p>
    </div>

    <!-- 统计卡片 - 只保留【项目总数】，已删除开放项目卡片 -->
    <div class="mb-12">
      <div class="bg-white rounded-xl shadow p-6 text-center card-hover w-full md:w-auto mx-auto">
        <div class="text-4xl font-bold text-primary mb-2">15</div>
        <div class="text-gray-600">项目总数</div>
      </div>
    </div>

    <!-- 筛选器 - 年份筛选+全部项目 -->
    <div class="flex flex-wrap items-center justify-between mb-8">
      <div class="text-lg font-medium mb-4 md:mb-0">项目列表</div>
      <div class="flex flex-wrap gap-3">
        <button class="year-filter px-4 py-2 bg-primary text-white rounded-lg flex items-center active" data-year="all">
          <i class="fa fa-th-list mr-2"></i>全部项目
        </button>
        <button
          class="year-filter px-4 py-2 bg-white text-gray-700 rounded-lg shadow flex items-center hover:bg-gray-50 transition-colors"
          data-year="2026">
          <i class="fa fa-calendar mr-2"></i>2026
        </button>
        <button
          class="year-filter px-4 py-2 bg-white text-gray-700 rounded-lg shadow flex items-center hover:bg-gray-50 transition-colors"
          data-year="2025">
          <i class="fa fa-calendar mr-2"></i>2025
        </button>
        <button
          class="year-filter px-4 py-2 bg-white text-gray-700 rounded-lg shadow flex items-center hover:bg-gray-50 transition-colors"
          data-year="2023">
          <i class="fa fa-calendar mr-2"></i>2023
        </button>
        <button
          class="year-filter px-4 py-2 bg-white text-gray-700 rounded-lg shadow flex items-center hover:bg-gray-50 transition-colors"
          data-year="2022">
          <i class="fa fa-calendar mr-2"></i>2022
        </button>
        <button
          class="year-filter px-4 py-2 bg-white text-gray-700 rounded-lg shadow flex items-center hover:bg-gray-50 transition-colors"
          data-year="2020">
          <i class="fa fa-calendar mr-2"></i>2020
        </button>
        <button
          class="year-filter px-4 py-2 bg-white text-gray-700 rounded-lg shadow flex items-center hover:bg-gray-50 transition-colors"
          data-year="2019">
          <i class="fa fa-calendar mr-2"></i>2019
        </button>
      </div>
    </div>


    <!-- 项目列表 - 双栏布局 移动端单列 -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="project-list">


      <!-- 2026 -->

      <!-- 项目项 6 - http://mxzfun.xyz/secondpage/secondpage.html -->
      <div class="bg-white rounded-xl shadow overflow-hidden card-hover project-item" data-year="2026">
        <div class="p-6">
          <div class="flex flex-wrap justify-between items-start mb-4">
            <a href="http://mxzfun.xyz/secondpage/secondpage.html" target="_blank"
              class="text-xl font-bold text-dark link-text">二级页面展示</a>
          </div>
          <div class="text-gray-500 text-sm mb-4 flex items-center">
            <i class="fa fa-calendar-o mr-2"></i>2026-01-16
          </div>
          <a href="http://mxzfun.xyz/secondpage/secondpage.html" target="_blank"
            class="text-gray-600 mb-4 block link-text">
            二级页面太多了，放这好记着。</a>
          <div class="flex flex-wrap">
            <span class="tag bg-pink-100 text-pink-800">PHP</span>
            <span class="tag bg-purple-100 text-purple-800">Tailwind CSS</span>
            <span class="tag bg-purple-100 text-purple-800">jQuery</span>
          </div>
        </div>
      </div>

      <!-- 2025 -->

      <!-- 项目项 6 - http://mxzfun.xyz/GB/fontPage.html -->
      <div class="bg-white rounded-xl shadow overflow-hidden card-hover project-item" data-year="2025">
        <div class="p-6">
          <div class="flex flex-wrap justify-between items-start mb-4">
            <a href="http://mxzfun.xyz/GB/fontPage.html" target="_blank"
              class="text-xl font-bold text-dark link-text">PHP构建实现高斯模糊处理平台</a>
          </div>
          <div class="text-gray-500 text-sm mb-4 flex items-center">
            <i class="fa fa-calendar-o mr-2"></i>2025-12-30
          </div>
          <a href="http://mxzfun.xyz/GB/fontPage.html" target="_blank" class="text-gray-600 mb-4 block link-text">
            PHP构建实现高斯模糊处理平台（做这一切的起因是小米的澎湃os太拉了）。</a>
          <div class="flex flex-wrap">
            <span class="tag bg-pink-100 text-pink-800">PHP</span>
            <span class="tag bg-purple-100 text-purple-800">CSS</span>
            <span class="tag bg-purple-100 text-purple-800">JavaScript</span>
          </div>
        </div>
      </div>




      <!-- 项目项 6 - http://mxzfun.com/videoAll/public/index.php -->
      <div class="bg-white rounded-xl shadow overflow-hidden card-hover project-item" data-year="2025">
        <div class="p-6">
          <div class="flex flex-wrap justify-between items-start mb-4">
            <a href="http://mxzfun.com/videoAll/public/index.php" target="_blank"
              class="text-xl font-bold text-dark link-text">PHP 视频展示插件</a>
          </div>
          <div class="text-gray-500 text-sm mb-4 flex items-center">
            <i class="fa fa-calendar-o mr-2"></i>2025-11-08
          </div>
          <a href="http://mxzfun.com/videoAll/public/index.php" target="_blank"
            class="text-gray-600 mb-4 block link-text">
            轻量级 PHP 插件，在网页中以网格布局展示视频，支持搜索（以后一定做）、分类过滤、分页和移动端自适应。</a>
          <div class="flex flex-wrap">
            <span class="tag bg-pink-100 text-pink-800">PHP</span>
            <span class="tag bg-purple-100 text-purple-800">CSS</span>
            <span class="tag bg-purple-100 text-purple-800">Hack</span>
            <span class="tag bg-purple-100 text-purple-800">JavaScript</span>
          </div>
        </div>
      </div>





      <!-- 项目项 6 - http://resume.mxzfun.xyz/ -->
      <div class="bg-white rounded-xl shadow overflow-hidden card-hover project-item" data-year="2025">
        <div class="p-6">
          <div class="flex flex-wrap justify-between items-start mb-4">
            <a href="http://resume.mxzfun.xyz/" target="_blank" class="text-xl font-bold text-dark link-text">在线简历</a>
          </div>
          <div class="text-gray-500 text-sm mb-4 flex items-center">
            <i class="fa fa-calendar-o mr-2"></i>2025-09-17
          </div>
          <a href="http://resume.mxzfun.xyz/" target="_blank" class="text-gray-600 mb-4 block link-text">
            秋招用的，想搞个好的简历吧，木及简历我以前挺喜欢的，但后面他这md语法好像变了，怎么都排版不出我想要的格式
            ，那再看看其他平台呢，怎么全都要收费，那淘宝呢，真俗套，思来想去，真不如自己搞个页面来，排版？so easy。</a>
          <div class="flex flex-wrap">
            <span class="tag bg-pink-100 text-pink-800">HTML</span>
            <span class="tag bg-purple-100 text-purple-800">CSS</span>
            <span class="tag bg-purple-100 text-purple-800">JavaScript</span>
          </div>
        </div>
      </div>

      <!-- 项目项 6 - http://ll.mxzfun.xyz/ -->
      <div class="bg-white rounded-xl shadow overflow-hidden card-hover project-item" data-year="2025">
        <div class="p-6">
          <div class="flex flex-wrap justify-between items-start mb-4">
            <a href="http://ll.mxzfun.xyz/" target="_blank"
              class="text-xl font-bold text-dark link-text">LoveLive数据库</a>
          </div>
          <div class="text-gray-500 text-sm mb-4 flex items-center">
            <i class="fa fa-calendar-o mr-2"></i>2025-07-02
          </div>
          <a href="http://ll.mxzfun.xyz/" target="_blank"
            class="text-gray-600 mb-4 block link-text">后台管理是给弱者用的，强者直接写死数据（）。</a>
          <div class="flex flex-wrap">
            <span class="tag bg-pink-100 text-pink-800">HTML</span>
            <span class="tag bg-purple-100 text-purple-800">Python</span>
          </div>
        </div>
      </div>


      <!-- 项目项 2 - http://index.mxzfun.xyz/ -->
      <div class="bg-white rounded-xl shadow overflow-hidden card-hover project-item" data-year="2023">
        <div class="p-6">
          <div class="flex flex-wrap justify-between items-start mb-4">
            <a href="http://index.mxzfun.xyz/" target="_blank" class="text-xl font-bold text-dark link-text">测试首页</a>
          </div>
          <div class="text-gray-500 text-sm mb-4 flex items-center">
            <i class="fa fa-calendar-o mr-2"></i>2023-02-09
          </div>
          <a href="http://index.mxzfun.xyz/" target="_blank" class="text-gray-600 mb-4 block link-text">
            当时是为了测试index的三级域名的，无意义。

          </a>
          <div class="flex flex-wrap">
            <span class="tag bg-blue-100 text-blue-800">Markdown</span>
            <span class="tag bg-purple-100 text-purple-800">HTML</span>
          </div>
        </div>
      </div>

      <!-- 2022年 -->

      <!-- 项目项 5 - https://yosoroq.github.io/#/ -->
      <div class="bg-white rounded-xl shadow overflow-hidden card-hover project-item" data-year="2022">
        <div class="p-6">
          <div class="flex flex-wrap justify-between items-start mb-4">
            <a href="https://yosoroq.github.io/#/" target="_blank"
              class="text-xl font-bold text-dark link-text">yosoroq.github.io</a>
          </div>
          <div class="text-gray-500 text-sm mb-4 flex items-center">
            <i class="fa fa-calendar-o mr-2"></i>2022-11-19
          </div>
          <a href="https://yosoroq.github.io/#/" target="_blank" class="text-gray-600 mb-4 block link-text">
            github.io的Docsify使用指南，当初github.io的国内文档是一个比一个抽象，这么简单的东西搞这么复杂。</a>
          <div class="flex flex-wrap">
            <span class="tag bg-yellow-100 text-yellow-800">github</span>
            <span class="tag bg-purple-100 text-purple-800">Docsify</span>
            <span class="tag bg-green-100 text-green-800">Typora</span>
          </div>
        </div>
      </div>

      <!-- 项目项 1 - Docsify使用指南 -->
      <div class="bg-white rounded-xl shadow overflow-hidden card-hover project-item" data-year="2022">
        <div class="p-6">
          <div class="flex flex-wrap justify-between items-start mb-4">
            <a href="http://docs.mxzfun.xyz/#/" target="_blank"
              class="text-xl font-bold text-dark link-text">Docsify使用指南</a>
          </div>
          <div class="text-gray-500 text-sm mb-4 flex items-center">
            <i class="fa fa-calendar-o mr-2"></i>2022-11-17
          </div>
          <a href="http://docs.mxzfun.xyz/#/" target="_blank" class="text-gray-600 mb-4 block link-text">
            Docsify使用指南，当初测试Docsify用的，没想到这么久了还在。
          </a>
          <div class="flex flex-wrap">
            <span class="tag bg-blue-100 text-blue-800">Typora</span>
            <span class="tag bg-purple-100 text-purple-800">Docsify</span>
          </div>
        </div>
      </div>

      <!-- 项目项 2 - http://gis.mxzfun.xyz/ -->
      <div class="bg-white rounded-xl shadow overflow-hidden card-hover project-item" data-year="2022">
        <div class="p-6">
          <div class="flex flex-wrap justify-between items-start mb-4">
            <a href="http://gis.mxzfun.xyz/" target="_blank" class="text-xl font-bold text-dark link-text">智慧校园</a>
          </div>
          <div class="text-gray-500 text-sm mb-4 flex items-center">
            <i class="fa fa-calendar-o mr-2"></i>2022-05-03
          </div>
          <a href="http://gis.mxzfun.xyz/" target="_blank" class="text-gray-600 mb-4 block link-text">
            智慧校园，基于高德api开发，现在看来也挺有意思的，虽然简单。
          </a>
          <div class="flex flex-wrap">
            <span class="tag bg-blue-100 text-blue-800">Amap</span>
            <span class="tag bg-purple-100 text-purple-800">HTML</span>
          </div>
        </div>
      </div>

      <!-- 项目项 4 - http://qny.expressisland.cn/ -->
      <div class="bg-white rounded-xl shadow overflow-hidden card-hover project-item" data-year="2022">
        <div class="p-6">
          <div class="flex flex-wrap justify-between items-start mb-4">
            <a href="http://qny.expressisland.cn/" target="_blank" class="text-xl font-bold text-dark link-text">图床</a>
          </div>
          <div class="text-gray-500 text-sm mb-4 flex items-center">
            <i class="fa fa-calendar-o mr-2"></i>2022-04-06
          </div>
          <a href="http://qny.expressisland.cn/" target="_blank" class="text-gray-600 mb-4 block link-text">基于
            七牛云的图床，主要也是我这个小水管服务器加载图片太慢了。</a>
          <div class="flex flex-wrap">
            <span class="tag bg-green-100 text-green-800">qiniu</span>
          </div>
        </div>
      </div>


      <!-- 项目项 3 - http://r-18.mxzfun.xyz/ -->
      <div class="bg-white rounded-xl shadow overflow-hidden card-hover project-item" data-year="2022">
        <div class="p-6">
          <div class="flex flex-wrap justify-between items-start mb-4">
            <a href="http://r-18.mxzfun.xyz/" target="_blank"
              class="text-xl font-bold text-dark link-text">随机涩图-R-18</a>
          </div>
          <div class="text-gray-500 text-sm mb-4 flex items-center">
            <i class="fa fa-calendar-o mr-2"></i>2022-02-07
          </div>
          <a href="http://r-18.mxzfun.xyz/" target="_blank" class="text-gray-600 mb-4 block link-text">
            title是这样写的，但并没有涩图好哇，原来是有的，通过调用阿里云oss里的数据，随机给你打开一张涩图，但还是怕举报，
            现在点击自动跳转《never gonna give you up》，Never gonna give you up~~
          </a>
          <div class="flex flex-wrap">
            <span class="tag bg-purple-100 text-purple-800">HTML</span>
          </div>
        </div>
      </div>



      <!-- 2021 -->
      <!-- 项目项 5 -http://mxzfun.xyz/ -->
      <div class="bg-white rounded-xl shadow overflow-hidden card-hover project-item" data-year="2020">
        <div class="p-6">
          <div class="flex flex-wrap justify-between items-start mb-4">
            <a href="http://mxzfun.xyz/" target="_blank" class="text-xl font-bold text-dark link-text">三二一的一的二</a>
          </div>
          <div class="text-gray-500 text-sm mb-4 flex items-center">
            <i class="fa fa-calendar-o mr-2"></i>2021-01-09
          </div>
          <a href="http://mxzfun.xyz/" target="_blank" class="text-gray-600 mb-4 block link-text">
            后面创建的技术博客。</a>
          <div class="flex flex-wrap">
            <span class="tag bg-yellow-100 text-yellow-800">typecho</span>
            <span class="tag bg-purple-100 text-purple-800">PHP</span>
          </div>
        </div>
      </div>

      <!-- 2020 -->
      <!-- 项目项 5 -https://mxzfun.blog.fc2.com/ -->
      <div class="bg-white rounded-xl shadow overflow-hidden card-hover project-item" data-year="2020">
        <div class="p-6">
          <div class="flex flex-wrap justify-between items-start mb-4">
            <a href="https://mxzfun.blog.fc2.com/" target="_blank" class="text-xl font-bold text-dark link-text">fc2
              blog（知行）</a>
          </div>
          <div class="text-gray-500 text-sm mb-4 flex items-center">
            <i class="fa fa-calendar-o mr-2"></i>2020-08-23
          </div>
          <a href="https://mxzfun.blog.fc2.com/" target="_blank" class="text-gray-600 mb-4 block link-text">
            一开始是想作为博客备份的，但转移过来发现效果并不理想。</a>
          <div class="flex flex-wrap">
            <span class="tag bg-yellow-100 text-yellow-800">jQuery</span>
            <span class="tag bg-purple-100 text-purple-800">fc2</span>
          </div>
        </div>
      </div>

      <!-- 项目项 5 -http://mxzfun.com/ -->
      <div class="bg-white rounded-xl shadow overflow-hidden card-hover project-item" data-year="2020">
        <div class="p-6">
          <div class="flex flex-wrap justify-between items-start mb-4">
            <a href="http://mxzfun.com/" target="_blank" class="text-xl font-bold text-dark link-text">前行 连接</a>
          </div>
          <div class="text-gray-500 text-sm mb-4 flex items-center">
            <i class="fa fa-calendar-o mr-2"></i>2020-05-25
          </div>
          <a href="http://mxzfun.com/" target="_blank" class="text-gray-600 mb-4 block link-text">
            日常博客。</a>
          <div class="flex flex-wrap">
            <span class="tag bg-yellow-100 text-yellow-800">WordPress</span>
            <span class="tag bg-purple-100 text-purple-800">PHP</span>
          </div>
        </div>
      </div>



      <!-- 2019 -->
      <!-- 项目项 5 -https://yohane.home.blog/ -->
      <div class="bg-white rounded-xl shadow overflow-hidden card-hover project-item" data-year="2019">
        <div class="p-6">
          <div class="flex flex-wrap justify-between items-start mb-4">
            <a href="https://yohane.home.blog/" target="_blank"
              class="text-xl font-bold text-dark link-text">早期wp测试博客</a>
          </div>
          <div class="text-gray-500 text-sm mb-4 flex items-center">
            <i class="fa fa-calendar-o mr-2"></i>2019-09-05
          </div>
          <a href="https://yohane.home.blog/" target="_blank" class="text-gray-600 mb-4 block link-text">
            我都忘了我有这个博客了。</a>
          <div class="flex flex-wrap">
            <span class="tag bg-yellow-100 text-yellow-800">WordPress</span>
            <span class="tag bg-purple-100 text-purple-800">PHP</span>
          </div>
        </div>
      </div>


    </div>

    <!-- 分页组件 - 空容器，JS动态生成页码 -->
    <div class="text-center mt-12" id="pagination">
      <div class="flex items-center justify-center gap-2" id="pagination-buttons">
        <!-- 页码按钮由JS动态生成 -->
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-10 mt-16">
    <div class="container mx-auto px-4">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="mb-6 md:mb-0">
          <div class="text-xl font-bold mb-2 flex items-center">
            <i class="fa fa-code-fork mr-2"></i>二级页面
          </div>
          <p class="text-gray-400">探索与实践的技术足迹</p>
        </div>
        <div class="flex space-x-6">
          <a href="https://github.com/yosoroQ" class="text-gray-400 hover:text-white transition-colors">
            <i class="fa fa-github text-xl"></i>
          </a>
          <a href="http://mxzfun.xyz/" class="text-gray-400 hover:text-white transition-colors">
            <i class="fa fa-twitter text-xl"></i>
          </a>
          <a href="http://mxzfun.com" class="text-gray-400 hover:text-white transition-colors">
            <i class="fa fa-linkedin text-xl"></i>
          </a>
        </div>
      </div>
      <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
        © 2026 二级页面. 保留所有权利.
      </div>
    </div>
  </footer>

  <!-- JavaScript - 年份筛选+分页联动+动态页码 完整无错 -->
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // 基础配置 - 每页固定6个项目
      const pageSize = 6;
      let currentPage = 1;
      let filterYear = 'all';
      const projectItems = document.querySelectorAll('.project-item');
      const paginationContainer = document.getElementById('pagination-buttons');

      // 1. 平滑滚动
      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
          e.preventDefault();
          document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
        });
      });

      // 2. 年份筛选功能
      const yearFilters = document.querySelectorAll('.year-filter');
      yearFilters.forEach(btn => {
        btn.addEventListener('click', function () {
          yearFilters.forEach(b => {
            b.classList.remove('bg-primary', 'text-white');
            b.classList.add('bg-white', 'text-gray-700', 'shadow');
          });
          this.classList.remove('bg-white', 'text-gray-700', 'shadow');
          this.classList.add('bg-primary', 'text-white');
          filterYear = this.dataset.year;
          currentPage = 1; // 筛选后重置为第一页
          renderProjects();
        });
      });

      // 核心方法1：动态生成分页按钮
      function renderPagination(totalPages) {
        paginationContainer.innerHTML = '';
        // 上一页按钮
        const prevBtn = document.createElement('button');
        prevBtn.className = `px-4 py-2 rounded-lg border border-primary text-primary hover:bg-primary/5 transition-colors ${currentPage <= 1 ? 'page-disable' : ''}`;
        prevBtn.innerHTML = '<i class="fa fa-angle-left mr-1"></i>上一页';
        prevBtn.addEventListener('click', () => {
          if (currentPage > 1) {
            currentPage--;
            renderProjects();
          }
        });
        paginationContainer.appendChild(prevBtn);

        // 生成数字页码
        for (let i = 1; i <= totalPages; i++) {
          const pageBtn = document.createElement('button');
          pageBtn.className = i === currentPage
            ? 'px-4 py-2 rounded-lg page-active'
            : 'px-4 py-2 rounded-lg bg-white text-gray-700 shadow hover:bg-gray-50 transition-colors';
          pageBtn.dataset.page = i;
          pageBtn.textContent = i;
          pageBtn.addEventListener('click', () => {
            currentPage = i;
            renderProjects();
          });
          paginationContainer.appendChild(pageBtn);
        }

        // 下一页按钮
        const nextBtn = document.createElement('button');
        nextBtn.className = `px-4 py-2 rounded-lg border border-primary text-primary hover:bg-primary/5 transition-colors ${currentPage >= totalPages ? 'page-disable' : ''}`;
        nextBtn.innerHTML = '下一页<i class="fa fa-angle-right ml-1"></i>';
        nextBtn.addEventListener('click', () => {
          if (currentPage < totalPages) {
            currentPage++;
            renderProjects();
          }
        });
        paginationContainer.appendChild(nextBtn);
      }

      // 核心方法2：筛选+分页 联动渲染项目
      function renderProjects() {
        const filteredItems = Array.from(projectItems).filter(item => {
          return filterYear === 'all' || item.dataset.year === filterYear;
        });
        const filteredTotal = filteredItems.length;
        const totalPages = Math.ceil(filteredTotal / pageSize);

        projectItems.forEach(item => item.classList.add('hidden'));
        const start = (currentPage - 1) * pageSize;
        const end = start + pageSize;
        filteredItems.slice(start, end).forEach(item => item.classList.remove('hidden'));
        renderPagination(totalPages);
      }

      // 初始化渲染
      renderProjects();
    });
  </script>
</body>

</html>

作者：mxzfun / yosoroQ
更新时间：2026-01-16

声明：三二一的一的二|版权所有，违者必究|如未注明，均为原创|本网站采用BY-NC-SA协议进行授权

转载：转载请注明原文链接 - 二级页面（Second Page）项目文档

三二一的一的二