Z-Blog Olila主题四大Bug修复实录：Swiper拖动、移动端适配、栏目页空白
背景
zhang.jiuhui.net 是基于 Z-Blog 的 Olila 暗色主题个人网站，首页使用 Swiper.js 实现卡片翻转特效。近期发现多个影响体验的 Bug，今天集中修复。
Bug 1：移动端底部多余箭头按钮
问题：手机端底部导航栏出现左右翻页箭头按钮，影响视觉体验。
修复：删除 index.php 模板中的 ara-prev 和 ara-next 按钮 HTML，仅保留视图切换功能。
Bug 2：Swiper 拖动失效
问题：点击卡片进入详情 → 点击右上角 X 关闭 → 再拖动卡片，Swiper 翻页效果失效。
根因：原代码在 .front 点击时 toggle allowTouchMove，但 .return 关闭详情时没有恢复。
修复：改为监听 .front 和 .return 两个事件，根据卡片 .flipped 状态决定是否允许拖动：
$('.front, .return').on('click', function () {
let card = $(this).closest('.main-card');
setTimeout(function() {
let isFlipped = card.hasClass('flipped');
swiper.allowTouchMove = !isFlipped;
swiper.update();
}, 50);
});Bug 3：博客文章移动端文字溢出
问题：手机浏览器打开文章页，文字不自动换行，内容溢出屏幕。
修复：在 style.min.css 追加响应式规则：
.blog-body { overflow-wrap: break-word; word-break: break-word; }
.blog-body * { max-width: 100%; box-sizing: border-box; }
.blog-body img { max-width: 100%; height: auto; }
@media(max-width:767px) {
.blog-body p { font-size: 15px; line-height: 1.8; }
}Bug 4：栏目页无文章显示
问题：访问分类页面（如 category-2.html）一片空白，没有任何文章。
原因：主题缺少 catalog.php 模板文件，Z-Blog 无法渲染栏目列表。
修复：新建 catalog.php，复用文章详情页的卡片翻转布局风格，展示分类文章列表，含封面图、标题、摘要和分页。
技术要点总结
1. Z-Blog 编译缓存：修改 template/ 后必须同步更新 cache/compiled/，否则不生效。
2. Swiper 状态管理：不要用 toggle 模式控制 allowTouchMove，应根据 UI 状态（如翻转 class）判断。
3. 移动端 CSS：overflow-wrap: break-word + max-width: 100% 是解决文字溢出的基础组合。
4. Z-Blog 栏目模板：文件名必须是 catalog.php，URL 格式为 category-{id}.html。