HTML作品集

mdbootstrap-academic — HTML 作品集模板

作者 mingfengwan

基于 MDBootstrap 5 的学术个人主页模板，含课程、论文、学术服务与照片轮播页，提供 Webpack 构建。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图

演示站首页的真实桌面布局。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。本截图因高度限制未包含整页。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

围绕学术履历设计，含 Coursework、Publication、Academic Service 三个专门板块

基于 MDBootstrap 5 与 Font Awesome 7 Pro，Material Design 风格

独立照片轮播页，带开花动画背景，用于集中展示大图

提供 dist 静态文件，可直接改 HTML 使用；也可用 Webpack 5 构建定制

README 称经 tree shaking 后 Lighthouse 性能为 100/100

模板详细介绍

这是一个面向学术个人主页的静态模板，技术栈是 HTML 加 MDBootstrap 5（Material Design for Bootstrap），图标使用 Font Awesome 7 Pro。与常见的通用作品集模板不同，它的内容结构围绕学术履历组织：Coursework、Publication、Academic Service 三个板块都有独立设计，另有一个带开花动画背景的照片轮播页，用于把大图集中展示以改善加载。

使用方式偏轻量。README 说明无需定制时，只需下载 dist 目录下的 index.html、main.css、main.js 三个文件，放在同一目录后直接改 index.html 内容即可；照片页对应 photos.html、photos.css、photos.js。需要额外定制才引入 Webpack 5.98.0 构建，配套 sass-loader 与 jest，源码在 src/js 和 src/scss 下。项目声称经过 tree shaking 后 Lighthouse 性能达到 100/100，并导入了 Collapse、Tooltip、Ripple、Carousel 等 MDB 组件，不用的可以移除。

适用场景是个人学术主页、研究者简历页或课程主页。需要注意：模板本身是纯静态页面，不含后端或内容管理系统，论文、课程等条目需要手工维护 HTML；Font Awesome 在依赖中是付费版本，若要公开部署需确认授权，或按 README 建议降级为免费版。上线前建议自行核对实际性能得分、移动端表现与无障碍情况。

HTML作品集

适合你的项目吗？

适用场景

高校研究者或博士生的个人学术主页
需要展示论文列表、授课经历与学术服务的简历型页面
希望用静态 HTML 快速搭建、不引入后端的内容页

适合人群

能直接编辑 HTML 维护内容的个人用户
偏好 Material Design 视觉风格、接受 Bootstrap 体系的开发者
需要单独照片展示页的学术或摄影类个人站点

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
无需定制时，从 dist 取 index.html、main.css、main.js 放同一目录，直接改 index.html；照片页另取 photos.html、photos.css、photos.js
2
需要定制再执行 npm install，用 npm run start 起开发服务器，npm run build 构建
3
依赖中 Font Awesome 为付费版本，公开部署前需确认授权，或按 README 说明降级为免费版
4
模板为静态页面，论文、课程等条目需手工编辑 HTML，无后台或数据源
5
颜色调整建议遵循 MDBootstrap 的配色规范；不用的 Tooltip、Carousel 等组件可移除

查看仓库使用说明