README

概述

支持块编辑器和 Vite 构建器的 WordPress 起步主题。

要求

Acorn v3
PHP >= 8.0 (启用 php-mbstring)
Composer
Vite >= 3.1.0
Node.js >= 18.0.0
Yarn

主题安装

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

# /wp-content/themes/
$ composer create-project onepixnet/sage-vite theme-name

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

# /wp-content/themes/
$ composer create-project onepixnet/sage-vite theme-name dev-main

然后转到您的 theme-name 并安装 Acorn

# /wp-content/themes/theme-name
$ composer require roots/acorn

然后安装依赖项并编译资源

$ yarn
$ yarn build

您就可以开始了！

要启动开发服务器和 HMR，只需运行

$ yarn dev

命令列表

# /wp-content/themes/
$ composer create-project onepixnet/sage-vite theme-name dev-main

# /wp-content/themes/theme-name
$ composer require roots/acorn
$ yarn
$ yarn build
$ yarn dev

主题结构

themes/your-theme-name/   # → Root of your Sage based theme
├── app/                  # → Theme PHP
│   ├── Providers/        # → Service providers
│   ├── View/             # → View models
│   ├── filters.php       # → Theme filters
│   ├── helpers.php       # → Global helpers
│   ├── medias.php        # → Medias helper
│   └── setup.php         # → Theme setup
├── composer.json         # → Autoloading for `app/` files
├── public/               # → Built theme assets (never edit)
├── functions.php         # → Theme bootloader
├── index.php             # → Theme template wrapper
├── node_modules/         # → Node.js packages (never edit)
├── package.json          # → Node.js dependencies and scripts
├── resources/            # → Theme assets and templates
│   ├── fonts/            # → Theme fonts
│   ├── images/           # → Theme images
│       ├── icons/        # → Theme icons
│   ├── scripts/          # → Theme scripts
│   ├── styles/           # → Theme styles
│   └── views/            # → Theme templates
│       ├── components/   # → Component templates
│       ├── forms/        # → Form templates
│       ├── layouts/      # → Base templates
│       ├── partials/     # → Partial templates
        └── sections/     # → Section templates
├── screenshot.png        # → Theme screenshot for WP admin
├── style.css             # → Theme meta information
├── vendor/               # → Composer packages (never edit)
└── vite.config.ts        # → Vite configuration

主题开发

从主题目录运行 yarn 以安装依赖项
更新 vite.config.ts 以进行打包器微调

构建命令

yarn dev — 启动开发服务器和热模块替换
yarn build — 编译资源
yarn lint — 检查样式表和javascripts
yarn lint:css — 检查样式表
yarn lint:js — 检查javascripts

热模块替换

项目侧

在您的项目 .env 中添加以下变量

# Endpoint where the bundler serve your assets
HMR_ENTRYPOINT=https://:3000

主题侧

对于高级开发服务器配置，根据 Vite 命名约定和加载顺序复制 .env.example 并更新变量

注意事项

运行 HMR 模式会删除 public/manifest.json 文件，所以如果需要，请务必使用 yarn build 重新运行资源编译。

onepixnet / sage-vite

维护者

详细信息