基于 jQuery 打造的 PC 端人力资源资讯门户模板。开箱即用，替换品牌素材即可上线。
行业资讯门户是「页面多、频道杂、工期紧」的典型项目：首页、频道页、列表页、详情页、搜索、关于我们……一套齐全动辄二十余页。这套模板以「中国劳动人才网」为原型，把 HR / 社保 / 人才行业的完整门户页面体系一次性做完，导航频道、栏目列表、文章详情、搜索链路、关于我们子站全部就位，改品牌与栏目名即可交付。
模板亮点
1. 23 个页面，门户全链路覆盖
- 首页：日期天气栏、登录注册入口、全站搜索、九大频道导航、焦点图轮播、频道 Tab、专家指导委员会、法律顾问、合作伙伴等版块齐备
- 九大频道页：新闻资讯、政策解读、理论实践、基层平台、易保通、HR园地、八面来风、文化长廊、编读往来
- 三级页面体系：频道页 → 「新闻资讯-更多」三级列表页 → 详情页，另有图片详情页，稿件层次完整
- 搜索链路：搜索页 + 搜索结果页，全站检索闭环
- 关于我们 8 个子页：关于我们、本网编辑、会员、理事单位、联系我们、免责声明、通讯员队伍建设、专家指导委员会
2. 首页信息密度与节奏
经典门户式首页编排：顶部便民信息条 → 品牌区 + 搜索框 → 频道导航 → 焦点图 → 多 Tab 频道聚合区 → 专家 / 顾问 / 合作伙伴展示区，信息密度高而不乱，符合资讯类用户的浏览习惯。
3. SuperSlide 焦点图轮播
首页 banner 基于 SuperSlide 2.1.1 实现 effect:"left" 横向自动轮播，带圆点控制条，是老牌门户最稳用的轮播方案。
4. 双套 Tab 选项卡引擎
global.js 内置两套 Tab 切换逻辑：tab() 悬停驱动选项卡与 setTab() 经典切换函数，首页频道聚合区直接套用，频道页亦可复用。
5. 行业语感现成
示例文案全部采用人力资源与社保领域真实语境（政策解读、社保资讯、基层平台等），交付给行业客户时几乎不需要重写信息架构。
技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| jQuery | 1.7.2 | DOM 操作 / Tab 切换 |
| SuperSlide | 2.1.1 | 首页焦点图自动轮播 |
| HTML + CSS | — | 页面结构（XHTML）与样式 |
项目结构
ldrcw/
├── index.html # 门户首页（轮播 / Tab / 专家 / 合作伙伴）
├── 新闻资讯.html # 新闻资讯频道页
├── 新闻资讯-更多-三级页面.html # 栏目三级列表页
├── 政策解读.html # 政策解读频道页
├── 理论实践.html # 理论实践频道页
├── 基层平台.html # 基层平台频道页
├── 易保通.html # 易保通频道页
├── HR园地.html # HR园地频道页
├── 八面来风.html # 八面来风频道页
├── 文化长廊.html # 文化长廊频道页
├── 编读往来.html # 编读往来频道页
├── 详情页.html # 文章详情页
├── 图片详情页.html # 图片类稿件详情页
├── 搜索.html # 搜索页
├── 搜索结果页.html # 搜索结果页
├── 关于我们.html # 关于我们主页
├── 关于我们—本网编辑.html # 本网编辑介绍
├── 关于我们—会员.html # 会员说明
├── 关于我们—理事单位.html # 理事单位展示
├── 关于我们—联系我们.html # 联系我们
├── 关于我们—免责声明.html # 免责声明
├── 关于我们—通讯员队伍建.html # 通讯员队伍建设
├── 关于我们—专家指导委员会.html # 专家指导委员会
├── css/
│ └── style.css # 全部样式（主色 #0069b7）
├── js/
│ ├── jquery.js # jQuery 1.7.2
│ ├── jquery.SuperSlide.2.1.1.js # 焦点图轮播
│ └── global.js # Tab 选项卡切换引擎
└── img/ # Logo、banner、栏目配图等素材快速开始
纯静态模板，无需安装任何依赖。
# 方式一：浏览器直接打开
双击 index.html 即可预览
# 方式二：本地静态服务器
cd ldrcw
python3 -m http.server 8080
# 访问 http://localhost:8080/index.html也可使用 VS Code 的 Live Server 插件一键预览。
二次开发指南
| 需求 | 操作 |
|---|---|
| 更换品牌 | 替换 img/ 下 logo.jpg、banner.jpg 等素材，同名覆盖 |
| 修改频道 / 文案 | 各页面顶部 nav 区与正文文案直接编辑 |
| 更换主题色 | 修改 css/style.css 中的 #0069b7（导航 / 标题主色） |
| 增删频道页 | 复制任一频道页（如 政策解读.html），改标题与列表数据即可 |
| 新增详情页样式 | 详情页.html 为通用模板，直接替换正文内容 |
| 接入后端 | 各列表 / 详情区块改为后端模板引擎渲染，链接指向真实文章 ID |
适用场景
人才网、人力资源门户、社保 / 劳动资讯站、行业协会官网、政企行业信息平台，也可作为任何「频道 + 列表 + 详情」结构的 PC 端资讯门户底稿。
从零自研 vs 使用本模板
| 维度 | 从零自研 | 使用本模板 |
|---|---|---|
| 交付周期 | 4~6 周起 | 改品牌改栏目，2~3 天交付 |
| 页面还原度 | 逐页设计开发 | 23 页门户体系现成 |
| 交互与动画 | 自行实现 | 焦点图轮播 / Tab 切换已内置 |
| 适配 | 自行调试 | PC 端门户版式已定型 |
| 维护成本 | 自行承担 | 页面同构，改一处通全站 |
在线预览
将整个目录部署至任意静态托管（GitHub Pages / 静态服务器 / OSS）即可在线浏览。
http://8.166.93.126:8989/ldrcw
原文链接：https://www.fedshare.cn/archives/1617，转载请注明出处。
评论0