本页目录
Sage 是一个 WordPress 入门主题，具有现代开发工作流程。
**详情
之前在 reddit 发过一个问题，WordPress 上是否有类似 Laravel Blade 这样的模板系统。
第一个回复我的大哥，推荐了 Sage，第一眼看到 Sage 感觉是个庞然大物，加之我对 WordPress 也完全不了解，不明白这货有什么用。
于是最初选择了 bladerunner 。
但是，使用 bladerunner 开发的过程中，我逐步发现，影响我开发效率的绝不仅仅是模板的问题，还有前端组件的积累问题； 同时，我也体会到了使用 Sass 写模块化可复用的样式的重要性。
于是，我对于 WordPress 主题开发工具栈又有了新的要求
- Sass
- 模板系统
- 基础代码框架
转了一圈，发现 Sage 9 完全符合我的这 3 个需求
- 采用了 Laravel Blade 模板引擎
- 使用 Webpack/npm 替代了 gulp/bower。webpack 我不太熟悉，需要了解，但是 bower 在多年前我就觉得是个垃圾，果然现在死翘翘了。
- ES6. 大兄弟，这个有点激进了。
还在我也乐于折腾。
- 内置 bootstrap 4。这个比较鸡肋，而且我用 sass 的主要目的是 fuck off bootstrap
来源于：GitHub
Sage 是一个 WordPress 入门主题，具有现代开发工作流程。
特征
- Sass 的样式表
- 现代 JavaScript
- Webpack 用于编译资产，优化图像以及连接和缩小文件
- Browsersync 用于同步浏览器测试
- 刀片作为模板引擎
- 用于将数据传递到 Blade 模板的控制器
- CSS 框架（可选）：
Bootstrap 4，Bulma，Foundation，Tachyons，Tailwind
请参阅 roots-example-project.com 上的工作示例。
要求
在继续之前，请确保已安装所有依赖项：
- WordPress > = 4.7
- PHP > = 7.1.3（已 php-mbstring 启用）
- 作曲家
- Node.js > = 8.0.0
- 纱
主题结构
themes / your-theme-name / ＃ →基于Sage的主题├──app/ ＃ →主题PHP│├──控制器/ ＃ →控制器文件│├──admin.php ＃ →主题定制器设置│├─ ─filters.php ＃ →主题过滤器│├──helpers.php ＃ →辅助功能│└──setup.php ＃ →主题设置├──composer.json ＃ →自动加载的应用程序`/`文件├──作曲家。锁定 ＃ →作曲家锁定文件（永不编辑）├──dist/ ＃→内置主题资产（从未编辑）├──node_modules / ＃ →Node.js的包（从未编辑）├──的package.json ＃ →Node.js的依赖性和脚本├──资源/ ＃ →主题素材和模板│├──resources / ＃ →前端资产 ││├──config.json ＃ →编译资产设置││├──构建/ ＃ →Webpack和ESLint配置││├──字体/ ＃ →主题字体││ ├──图片/ ＃ →主题图片││├──脚本/ ＃→主题JS││└──风格/ ＃ →主题风格│├──的functions.php ＃ →作曲家自动加载，主题包括│├──的index.php ＃ →切勿手动编辑│├──screenshot.png ＃ →主题WP管理员的截图│├──style.css ＃ →主题元信息│└──视图/ ＃ →主题模板│├──布局/ ＃ →基本模板│└──部分/ ＃ →部分模板└──供应商/ ＃ →Composer包（永不编辑）主题设置
编辑 app/setup.php 以启用或禁用主题功能，设置导航菜单，发布缩略图大小和侧边栏。
主题发展
-
yarn 从主题目录运行以安装依赖项
-
更新 resources/assets/config.json 设置：
-
devUrl 应该反映您的本地开发主机名
-
publicPath 应反映您的 WordPress 文件夹结构（/wp-content/themes/sage 适用于非 Bedrock 安装）
看完后一脸懵逼？没关系，我也是，所以我用了这个