README

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

WordPress + Vite 的动机

这是 Sage 的修改版，结合了 github 用户 andrefilipe 的 Vite 配置，允许开发者在 WordPress 网站中使用 Vite。它通过在开发期间从 localhost:3000 服务器资源，以及在编译为生产环境时从 dist 文件夹中提供资源来工作。它通过围绕 wp_enqueue_script 的简单抽象，使注册和加载资源尽可能容易。

因为 Vite 非常快，并支持 HMR，所以你不再需要重新加载整个页面来查看你的 js、css 变更。此外，对 php 文件或 blade 模板的任何更改都将自动触发浏览器为你刷新页面。我相信这比使用内置的 sage 工具，甚至是 laravel-mix，都要好得多。此外，所有顶级文件都自动添加为入口点，因此在开发期间管理的内容更少，你可以立即开始编码。WordPress 已经有很多功能，无需担心前端。

特性

Vite 工具支持 TypeScript、React 和 Vue，并内置热模块替换 (HMR)。
Scss 用于样式表
图片懒加载。
基本样式
现代 JavaScript
Blade 作为模板引擎
Controller 用于向 Blade 模板传递数据
不支持 IE！不想支持它 - 就不添加它。

要求

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

WordPress >= 4.7
PHP >= 7.1.3（已启用 php-mbstring）
Composer
Node.js >= 8.0.0
Yarn

主题安装

使用 Composer 从您的 WordPress 主题目录中安装 Sage（将下面的 your-theme-name 替换为您主题的名称）

# @ app/themes/ or wp-content/themes/
$ composer create-project 8bit-echo/sage your-theme-name

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

$ composer create-project 8bit-echo/sage your-theme-name dev-master

主题结构

themes/your-theme-name/         # → Root of your Sage based theme
├── app/                        # → Theme PHP
│   ├── Controllers/            # → Controller files
│   ├── Classes/                # → Other PHP files
│   ├── admin.php               # → Theme customizer setup
│   ├── filters.php             # → Theme filters
│   ├── helpers.php             # → Helper functions
│   └── setup.php               # → Theme setup
├── composer.json               # → Autoloading for `app/` files
├── composer.lock               # → Composer lock file (never edit)
├── dist/                       # → Built theme assets (never edit)
├── node_modules/               # → Node.js packages (never edit)
├── package.json                # → Node.js dependencies and scripts
├── resources/                  # → Theme assets and templates
│   ├── assets/                 # → Front-end assets
│   │   ├── fonts/              # → Theme fonts
│   │   ├── images/             # → Theme images
│   │   ├── scripts/            # → Theme JS
│   │   └── styles/             # → Theme stylesheets
│   ├── functions.php           # → Composer autoloader, theme includes
│   ├── functions-default.php   # → Opinionated default functions.
│   ├── functions-app.php       # → Write all your custom functionality here.
│   ├── index.php               # → Never manually edit
│   ├── screenshot.png          # → Theme screenshot for WP admin
│   ├── style.css               # → Theme meta information
│   └── views/                  # → Theme templates
│       ├── layouts/            # → Base templates
│       └── partials/           # → Partial templates
└── vendor/                     # → Composer packages (never edit)

主题设置

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

将 .env.example 重命名为 .env 并选择 APP_ENV 的预设值之一。

注意：当您运行下面的 Yarn 脚本时，此值将自动更改。

主题开发

从主题目录运行 yarn 以安装依赖项
默认情况下，scripts 目录中的所有顶级文件都将用作构建过程的入口点。
要在页面上注册脚本，请转到页面控制器并在 __before 方法中编写

Vite::register('scriptName.ts');

此行是使 HMR 在开发期间工作以及将生产脚本直接注册到生产中的关键。

构建命令

yarn dev —— 当文件更改时，使用 HMR 编译资源。
yarn build —— 编译并优化您资产目录中的文件

8bit-echo / sage

维护者

详细信息