theme-machine项目结构全解析data.json、SCSS与三种起步模板各司其职的秘密【免费下载链接】theme-machineA collection of stylized Bootstrap Themes项目地址: https://gitcode.com/gh_mirrors/th/theme-machine本文带你快速读懂theme-machine 项目结构这是一个由 HackerThemes 提供的免费 Bootstrap 4 主题合集每个主题都由data.json元数据、SCSS配色样式和三种起步模板index / app / form共同组成。理清它们各自动什么、怎么配合你就能 10 分钟看懂全部 14 套主题还能动手造出自己的第 15 套。 一分钟鸟瞰theme-machine 目录长什么样克隆仓库到本地即可开始探索git clone https://gitcode.com/gh_mirrors/th/theme-machine整个仓库的核心逻辑可以概括为一句话themes/是素材库dist/是成品仓。目录结构如下theme-machine/ ├── themes/ # ★ 所有主题的源码核心目录 │ └── harbor/ # 以 Harbor 主题为例 │ ├── data.json # 主题身份证名称、字体、导航样式等 │ ├── css/ │ │ └── bootstrap4-harbor.scss # 主题配色 SCSS │ ├── images/ # 可选主题专属图片 │ ├── index.html # 起步模板 1落地页 │ ├── app.html # 起步模板 2应用页 │ └── form.html # 起步模板 3表单页 ├── html/ # 共享 Nunjucks 布局_layouts/ 与 _includes/ ├── scss/ # 所有主题共用的工具样式_common-utils.scss ├── dist/ # 构建输出每个主题一个即用文件夹 ├── gulpfile.js # 构建入口HTML 渲染 CSS 编译 ├── scsslint.yml # SCSS 代码检查规则 └── package.json # 依赖清单Bootstrap 4.3、gulp 全家桶三个关键角色模块职责关键文件themes/存放每个主题的完整素材一个文件夹就是一个主题themes/harbor/data.jsonhtml/存放所有主题共享的页面骨架子模板只需填空html/_layouts/base.htmlgulpfile.js把 HTML 模板 data.json 渲染成页面把 SCSS 编译成 CSSgulpfile.js data.json每张主题名片的身份证打开 themes/harbor/data.json你会看到类似这样的内容{ title: Harbor, navbarClass: bg-info navbar-dark text-white, css: css/bootstrap4-harbor.min.css, font: https://fonts.googleapis.com/css?familyOswald|Raleway, excerpt: An open source Bootstrap theme., filename: hackerthemes-harbor.zip }它的全部价值在于构建时由 gulpfile.js 读取后注入到 Nunjucks 模板里。共享布局 html/_layouts/base.html 中的{{ css }}、{{ font }}、{{ navbarClass }}、{{ title }}等占位符最终全部来自这份 JSON。字段作用title主题名称决定页面title和导航显示css指向编译后的主题 CSS 文件名font主题专用 Google 字体引入地址navbarClass导航栏的背景与文字样式类excerpt主题一句话简介filename打包下载时的 zip 文件名所以换主题身份只改这一个文件页面结构一行都不用动——这就是机器machine批量产主题的秘密。⚡ SCSS 主题样式为什么一个文件就是一个完整主题以 themes/harbor/css/bootstrap4-harbor.scss 为例套路非常清晰$primary: #3ea1e6; $secondary: #3ecae6; $success: #32c466; $danger: #e63e52; // ……先重新定义 Bootstrap 的颜色变量 import ../../../node_modules/bootstrap/scss/bootstrap; import ../../../scss/common-utils; // 再引入 Bootstrap 本体与公用工具样式先改变量、后引 Bootstrap——Bootstrap 编译时会使用你定制的颜色于是一套完整的主题 CSS 就诞生了。构建时 gulpfile.js 会依次执行scss-lint检查 →sass编译 →autoprefixer补浏览器前缀 →clean-css压缩并生成.min.css最终输出到dist/主题名/css/。 三种起步模板index、app、form 各司其职每个主题文件夹下都有三个 HTML 文件它们只是填空卷模板定位典型用法index.html落地页大标题 背景图 按钮官网首页、产品展示app.html应用页侧栏式后台布局管理后台、工具站form.html表单页注册/联系表单登录、询价、订阅它们的工作方式是模板继承主题文件写{% extends html/_layouts/index.html %}声明我要用共享骨架共享布局再继承html/_layouts/base.html后者提供导航栏、字体、脚本等公共部分主题只需覆写{% block jumbotron %}等局部区块即可定制。比如 themes/harbor/index.html 就覆写了jumbotron区块配上了 Harbor 自己的蓝色大横幅而app.html、form.html直接复用 html/_includes/app.html、html/_includes/form.html 的通用内容零改动。⚙️ 三步构建运行把 themes 变成 dist按照 readme.md 的说明准备工作只需三步gem install scss_lint # SCSS 代码检查工具 npm install # 安装 Bootstrap、gulp 等依赖 npm install gulp -g # 全局安装 gulp之后随时构建gulp # 构建一次 gulp watch # 开启监听改文件自动重建构建完成后dist/下每个主题都是一个独立、可拖进浏览器直接打开的完整站点——这就是一个文件夹就是一个成品的含义。 新手常见疑问Q1一共有多少套主题themes/下有 15 个文件夹14 套完整主题bubblegum、harbor、wizardry、vibrant-sea 等 1 个仅含data.json的default目录Bootstrap 默认样式的对照展示。Q2我能加一套自己的主题吗可以。复制任意主题文件夹改名修改data.json的标题与配色、重写 SCSS 里的$primary等变量跑一次gulpdist/里就会出现你的新主题。Q3为什么源码里没有网站的选色器README 里说明了交互式选色表单与官网深度耦合仓库只保留构建和使用主题本身所需的一切。 一句话总结data.json 管身份、SCSS 管长相、三种起步模板管页面gulp 把三者组装成成品——记住这条流水线theme-machine 项目结构就再也不会让你迷路。【免费下载链接】theme-machineA collection of stylized Bootstrap Themes项目地址: https://gitcode.com/gh_mirrors/th/theme-machine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考