主题开发框架Sage使代码生成器入门主题傻瓜式主题后台配置开发框架下载

<a class="sr-only focus:not-sr-only" href="#main">
  {{ __('Skip to content') }}
</a>

<div class="flex flex-col h-screen">
  <div>
    @include('sections.header')
  </div>

  <main id="main" class="w-full max-w-5xl px-4 mx-auto mt-6 mb-auto">
    @yield('content')
  </main>

  @include('sections.footer')
</div>

全部都配置傻瓜式生成好了，是不是节省了开发时间的呢？？？

使用 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

要求

在继续之前，请确保已安装所有依赖项：

• WordPress > = 4.7
• PHP > = 7.1.3（已php-mbstring启用）
• 作曲家
• Node.js > = 8.0.0
• 纱

主题结构

1. themes / your–theme–name / ＃ →基于Sage的主题
2. ├──app/ ＃ →主题
3. PHP│├──控制器/ ＃ →控制器文件
4. │├──admin.php ＃ →主题定制器设置
5. │├─ ─filters.php ＃ →主题过滤器
6. │├──helpers.php ＃ →辅助功能
7. │└──setup.php ＃ →主题设置
8. ├──composer.json ＃ →自动加载的应用程序`/`文件
9. ├──作曲家。锁定 ＃ →作曲家锁定文件（永不编辑）
10. ├──dist/ ＃→内置主题资产（从未编辑）
11. ├──node_modules / ＃ →Node.js的包（从未编辑）
12. ├──的package.json ＃ →Node.js的依赖性和脚本
13. ├──资源/ ＃ →主题素材和模板
14. │├
15. ──resources / ＃ →前端资产 ││├──config.json ＃ →编译资产设置
16. ││├──构建/ ＃ →Webpack和ESLint配置
17. ││├──字体/ ＃ →主题字体
18. ││ ├──图片/ ＃ →主题图片
19. ││├──脚本/ ＃→主题JS
20. ││└──风格/ ＃ →主题风格
21. │├──的functions.php ＃ →作曲家自动加载，主题包括
22. │├──的index.php ＃ →切勿手动编辑
23. │├──screenshot.png ＃ →主题WP管理员的截图
24. │├──style.css ＃ →主题元信息
25. │└──视图/ ＃ →主题模板
26. │├──布局/ ＃ →基本模板
27. │└──部分/ ＃ →部分模板
28. └──供应商/ ＃ →Composer包（永不编辑）

主题设置

编辑app/setup.php以启用或禁用主题功能，设置导航菜单，发布缩略图大小和侧边栏。

主题发展

• yarn从主题目录运行以安装依赖项
• 更新resources/assets/config.json设置：
• devUrl 应该反映您的本地开发主机名
• publicPath应反映您的WordPress文件夹结构（/wp-content/themes/sage适用于非Bedrock安装）

V10.3.1下载地址：