0°

WordPress 主题开发框架:Sage

一个Wordpress主题开发框架

Github:

https://github.com/roots/sage

本站下载:

当前内容已被隐藏,您需要登录才能查看

官方文档

https://roots.io/sage/docs/theme-installation/

来源于:

https://www.sunzhongwei.com/develop-wordpress-themes-using-sage

之前在 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

智者

Packagist devDependency Status 建立状态

Sage是一个WordPress入门主题,具有现代开发工作流程。

特征

请参阅roots-example-project.com上的工作示例。

要求

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

主题安装

使用Composer从WordPress主题目录安装Sage(your-theme-name在下面替换为您的主题名称):

# @ app / themes /或wp-content / themes / 
$ composer create-project roots / sage your-theme-name

要安装最新的Sage开发版本,请添加dev-master到命令的末尾:

$ composer create-project roots / sage your-theme-name dev-master

在主题安装期间,您可以选择更新style.css主题标题,选择CSS框架并配置Browsersync。

主题结构

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安装)

构建命令

  • yarn start – 在进行文件更改时编译资产,启动Browsersync会话
  • yarn build – 编译和优化资产目录中的文件
  • yarn build:production – 编制资产用于生产

文档

特约

欢迎大家的贡献。我们提供了帮助您入门的贡献指南

0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论