移动端资讯站模板 | 移动优先三页结构 + PhotoSwipe 图文画廊

基于原生 HTML + jQuery + PhotoSwipe 打造的移动端内容站模板。首页、列表页、图文详情页三件套齐全，替换内容即可上线。

一个移动端内容站，核心是阅读体验与加载速度。这套模板把移动优先的版式、文章画廊、图片手势缩放全部做完，你只需填充内容，半天内即可获得一个轻量流畅的移动端资讯站。

模板亮点

1. 移动优先的三页经典结构

首页（聚合推荐）+ 列表页（分页）+ 详情页（图文画廊），内容型站点最经典的信息架构，直接套用到任何资讯 / 自媒体 / 图文站。

2. 320~640px 自适应版式

.wrap 容器 min-width: 320px; max-width: 640px，从 iPhone SE 到大屏安卓全覆盖；详情页根据 userAgent 自动适配图片缩放宽度，PC 端打开也有居中阅读体验。

3. PhotoSwipe 图片画廊

详情页内置 PhotoSwipe 3.0.5 相册组件，配合 hammer.js 实现手势缩放、滑动切换图片，图文内容的阅读体验直接拉满。

4. 轻量高性能

仅依赖 jQuery + PhotoSwipe + hammer.js，无重型框架、无构建步骤，页面体积小、弱网环境加载快。

5. 块状卡片式设计

标签、提示条、标题栏、正文区块均为独立样式模块，增删栏目只是复制粘贴 HTML，运营侧也能轻松改版。

技术栈

技术	版本	用途
HTML5 + CSS3	—	页面结构与样式
jQuery	1.x	DOM 交互
PhotoSwipe	3.0.5	图片画廊 / 相册
hammer.js	—	手势缩放 / 滑动

项目结构

qlmtd/
├── index.html           # 首页（聚合推荐 + 栏目入口）
├── list.html            # 列表页（当前位置 + 分页）
├── article.html         # 详情页（图文画廊 + PhotoSwipe）
├── css/
│   └── style.css        # 全部样式（移动优先）
├── js/                  # jQuery 等脚本
├── photoswipe/          # PhotoSwipe 相册组件
└── img/                 # 图片素材

快速开始

# 直接用浏览器打开 index.html 即可预览
# 或启动本地静态服务（建议用手机模式调试）
npx serve .

无需 Node 环境、无需构建，部署时将整个目录上传至任意静态托管即可。

二次开发指南

需求	操作
更换品牌	替换 img/ 中的 logo 与图片，同名覆盖即可
修改文案 / 栏目	各 HTML 内文案与 href 直接修改
更换配色	修改 css/style.css 中的颜色定义
调整内容宽度	修改 .wrap 的 min-width / max-width
增删列表项	复制对应卡片区块 HTML 即可

适用场景

移动端资讯站、自媒体图文站、创业/副业内容专栏、行业资讯聚合号、小说/画廊类轻阅读产品，也可作为任何 H5 内容页的骨架模板。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	1 周起	半天上线
图片画廊	需自行接入	PhotoSwipe 已内置
移动端适配	需反复调试	320~640px 已验证
页面性能	需优化	无框架依赖，天生轻量
维护成本	自行承担	结构清晰，改文案即可迭代

在线预览

将整个目录部署至任意静态托管（Vercel / Netlify / 虚拟主机）即可，入口为 index.html，手机访问体验最佳。

http://case.fedshare.cn/qlmtd/