Boldo 是一套面向企业、创业团队与服务机构的 Bootstrap 5 网站模板，提供首页、关于和博客列表三个静态页面。它以深蓝背景、绿色按钮和图表插画组织品牌介绍、服务卖点与内容展示，适合先搭建一个清楚说明业务、展示团队和文章的企业官网前台。
首屏将大标题与两组行动按钮放在左侧，右侧用条形图、柱状图和圆环图构成产品感较强的插画。向下滚动，页面会转入白底服务区，再穿插深蓝色评价区与邮件输入区。深浅背景的交替让长首页有了段落感，绿色主要承担按钮、重点数字与局部图形的强调。
三页的内容分工
index.html 适合放产品主张、服务卡片、优势说明、客户评价、FAQ 与文章摘要。首屏下方有品牌标识轮播，评价区也使用 Swiper；两者可以复用来展示客户或合作方，但现有名称和推荐语都需要换成真实资料。
about.html 从企业介绍、照片组合延伸到业务数字、管理团队与价值观，适合承接首页没有展开的公司故事。示例中的团队姓名、职位和统计数字只是排版内容，不代表模板提供了真实的企业数据或后台维护功能。
blogs.html 提供一篇突出展示的内容和下方文章卡片列表，卡片包含封面、分类、日期和作者信息。当前 public/ 目录没有与之配套的文章详情页，卡片链接多为 #；如果计划长期发文章，需要继续制作详情布局，或将列表接到已有的博客、CMS 内容系统。
这三页已经能够串起“首页了解业务、关于页认识团队、博客页查看内容”的访问路径。没有对应内容的导航和行动按钮，应先删减或改成实际可用的询盘入口。
页面修改与源码维护
直接修改成品
包内 public/ 已有编译好的 HTML、CSS、脚本和图片，保持目录结构即可通过静态 HTTP 服务预览。只替换文案、图片和链接时，可以从这里开始，无需先安装构建工具。
维护共享源码
需要统一调整多个页面时，源码中的 Pug 与 Sass 更方便维护。三个 Pug 页面入口与 public/ 对应，共用导航、页脚和邮件输入区；主要修改位置包括：
src/pug/mixins/Shared/Navbar.pug：Home、About、Blogs 导航和 Log In 入口。src/pug/mixins/Shared/Promo.pug：三页共用的邮件输入与行动按钮区。src/pug/mixins/home/Reviews.pug：评价内容、头像和轮播参数；data-swiper负责传递屏幕断点、间距、循环和前后按钮设置。src/pug/mixins/blog/AllBlogs.pug：文章卡片的封面、标题、分类、日期、作者与头像数据。src/scss/theme/_colors.scss：深蓝色与绿色等主题颜色，当前深蓝为#0A2640、绿色为#65E4A3。
- 轮播初始化集中在
src/js/swiper.js，导航滚动时的背景变化则由src/js/navbar-darken-on-scroll.js处理。 - 评价轮播根据断点显示不同数量的卡片，移动端折叠菜单和 FAQ 折叠由 Bootstrap 组件承担。
- 改动卡片数量、轮播容器或按钮类名时，要同步核对相应的
data-swiper配置。
项目保留了 Gulp、Pug 与 Sass 构建脚本，npm start 对应开发任务，npm run build 执行生产任务。本次演示直接采用现成静态文件，没有执行这套旧依赖的安装或重新编译。包内还存在多份输出目录和旧模板残留，定制时优先从与当前 Pug 入口对应的 public/ 开始，避免把其他模板页面误接进来。
链接与业务接入
- Log In、部分服务入口、文章卡片和页脚菜单仍是占位链接。
- 邮件区域只有输入框与按钮，没有提交地址、收件后端或成功反馈逻辑；它也不会自动提供订阅名单、用户登录或客户管理功能。
- 接入真实业务时，需要确定表单服务、输入校验、隐私告知和失败处理，再把按钮接到明确的流程。
页面引用了包内未提供的 assets/css/user.css。如果需要添加自定义覆盖样式，可以自行创建该文件；不使用时则移除引用。本次演示副本已移除这项缺失引用和旧的外部 polyfill 脚本，保留必要的 Manrope 字体依赖，原始下载源码保持不变。
Boldo 适合展示内容较明确的企业或服务团队。产品目录、完整博客、账户或在线交易所需的页面与后端，需要另行开发。
暂无评论内容