源码系统概览
文章正文
Bs缘空个人主页是一套静态HTML个人简历网站模板，用的都是前端圈常见的技术。
页面布局是左侧固定导航栏加右侧内容区的经典做法，个人信息、技能履历、作品集这些模块通过单页切换的方式组织在一起。
整体风格偏简洁，配色可以换好几种主题，页面切来切去有过渡动画，手机上和电脑上看效果都还行。
整包 74 个文件，光页面切换动画就有 60 多种，简历、作品集、博客页一应俱全，功能完整度在静态个人站模板里算高的。
源码简介
这套模板的底子是lmpixels做的Pattron系列vCard模板，后来被人拿来做本地化定制，改成了现在这个 Bs缘空 版本。
整个项目是纯前端的静态页面，不依赖后端服务也不需要数据库，浏览器直接打开index.html就能看到完整效果。
源码一共74个文件，里面有4个HTML页面、9个CSS文件、12个JS脚本、28张图片，还有一套完整的字体图标。
主要页面有这么几个：index.html是主入口（首页、关于我、技能、作品集、博客列表都在这里面）、blog-post-1.html是博客文章详情、portfolio-1.html是作品集详情弹窗，另外还自带了一个404错误页。
轮播用的Owl Carousel，图片放大看的Magnific Popup，滚动条样式走的Perfect Scrollbar，页面切换动画有60多种CSS3效果可以选。
适用场景
开发者或者设计师想做个在线简历放作品集的话，这套模板挺合适的，雇主和客户点开就能看到你的背景和项目经验。
高校学生做前端作业也能拿来参考，里面HTML语义化标签的用法、CSS布局怎么写、jQuery交互怎么搞，实际例子都有。
自由职业者和技术博主当个人名片页用也行，把社交链接、联系方式、作品集整合到一起，算是一个统一的对外展示入口。
功能亮点
响应式自适应布局：底层用的是Bootstrap4栅格系统，手机平板电脑屏幕都能自动适配，不会出现排版乱掉的情况。
页面过渡动画多：animating.js这个引擎内置了60多种切入切出效果，可以随机播放也可以指定用哪一种。
作品集展示比较完整：支持按分类筛选（全部、详细、模型、音视频这些类别），每个项目能配多图轮播还能嵌视频，点击后Ajax加载详情不用刷新页面。
技能进度条看着直观：教育经历、工作履历、设计能力、编程技能分别用时间轴和进度条展示，改一下HTML里的数据就能换成自己的真实内容。
带博客文章页：有个标准的文章详情模板，特色图、正文、社交分享按钮都配好了，想扩展成简易博客的话基础已经有了。
技术架构与部署指南
| 维度 | 本套源码 | 同类通用方案 |
|---|---|---|
| 技术栈 | 前端：HTML5 + CSS3 + jQuery 2.1.3 + Bootstrap 4 Grid 后端：纯静态页面， |
依具体方案选型，需自行搭建与维护 |
| 部署方式 | 把源码文件夹整个上传到Web服务器上，根目录或者子目录都行，上传完浏览器直接访问就能看。 | 多托管于第三方平台或订阅云服务 |
| 功能侧重 | 响应式自适应布局：底层用的是Bootstrap4栅格系统，手机平板电脑屏幕都能自动适配，不会出现排版乱掉的情况。 | 功能通用，定制深度有限 |
| 数据归属 | 数据自持，部署在自有服务器，不出站 | 数据通常留存于服务商侧 |
| 成本模式 | 获取后自主部署，无持续授权费用 | 通常按订阅或调用量计费 |
技术栈与运行环境
前端：HTML5 + CSS3 + jQuery 2.1.3 + Bootstrap 4 Grid
后端：纯静态页面，无需后端服务
数据库：无数据库依赖
运行环境：任意现代浏览器（Chrome/Firefox/Edge/Safari）
其他依赖：Owl Carousel、Magnific Popup、Perfect Scrollbar、Linearicons字体图标
整套方案全在客户端渲染，不涉及服务端编程，部署门槛很低，只要服务器能跑静态文件就行。
安装与部署提示
把源码文件夹整个上传到Web服务器上，根目录或者子目录都行，上传完浏览器直接访问就能看。
本地预览的话双击index.html就行，不过有些Ajax加载的功能得走HTTP协议才能正常跑起来，本地文件协议可能会卡住。
要改内容主要动这几个文件：index.html改结构和文字、css/main.css改配色和样式细节、img目录换头像和作品集图片。
有个地方需要注意：index.html里背景图用的是loliapi.com的外部接口拉随机动漫图，想要稳定的话建议换成本地图片路径。
截图与演示说明
下面这张是首页的整体样子，左边那栏是个人信息导航（头像、名字、职业标签、社交图标），右边默认显示的是Portfolio作品集模块。
这张是技能和履历页面，分了Education教育背景、Experience工作经历、Design Skills设计技能、Coding Skills编程技能四个区域，每项技能用带百分比的进度条来展示。
第三张是博客文章详情页的排版，有标题、发布日期、特色配图和正文区域。
第四张是作品集详情弹窗界面，支持多图轮播浏览和视频嵌入播放。
常见问题
问：打开页面后背景图显示不出来怎么办？
答：源码里用了loliapi.com的外部API接口获取随机动漫背景图，这个接口挂了或者被墙了背景就会空白。解决办法是打开css/main.css或者index.html找到.lm-animated-bg那个样式，把background-image的URL改成你本地的一张图片路径就行了。
问：怎么改页面上的个人信息和技能数据？
答：所有文字都是直接写在HTML文件里的，用文本编辑器打开index.html搜到对应文字替换掉就好。技能进度条的百分比改对应progress-bar元素的width属性值就行。
问：作品集图片和头像要怎么换？
答：新图片丢进img目录，然后去HTML里找到对应的img标签把src属性指向新文件名。注意尽量保持图片原始比例不变，不然可能排版会歪，头像用正方形的比较好。
安全风险提示
特别提示：本源码未检测安全风险文件，下载后请务必进行安全审计，删除恶意代码后再部署使用！
下载说明
源码仅供学习研究、测试部署和二次开发参考，商用前请自行确认授权、版权和安全风险。
本源码为第三方模板资源的本地化定制版本，使用者应当遵守原模板作者的开源许可协议，不得用于侵犯他人权益的用途。
最后更新：2026-08-15
