ravorona/sage

基于 Sage 启动主题，使用 Vite 构建的 WordPress 主题

维护者

详细信息

github.com/ravorona/sage

源代码

问题

安装: 284

依赖: 0

建议: 0

安全: 0

星标: 37

关注者: 4

分支: 2

公开问题: 2

语言:SCSS

4.3.1 2024-04-07 18:34 UTC

Requires

  • php: ^8.1

Requires (Dev)

Suggests

  • log1x/sage-directives: A collection of useful Blade directives for WordPress and Sage (^1.0).
  • log1x/sage-svg: A useful SVG directive for inlining SVG's within Blade views (^1.0).

MIT c84003a6e586131e27d88fba935f370ebea19681

  • яαvoroηα <h.rakotonjanahary.woop@gmail.com>

wordpress

This package is auto-updated.

Last update: 2024-09-13 22:47:34 UTC

README

Development Release

🧩 WordPress 启动主题

要求

主题安装

  • 请确保您已安装 Acorn
  • 使用 Composer 从您的 WordPress 主题目录中安装 Sage（将下面的 your-theme-name 替换为您主题的名称）
# @ app/themes/ or wp-content/themes/
$ composer create-project ravorona/sage your-theme-name

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

$ composer create-project ravorona/sage your-theme-name dev-develop

主题结构

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
│   ├── scripts/          # → Theme javascript
│   ├── styles/           # → Theme stylesheets
│   ├── svg/              # → Theme svgs
│   └── 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 — 检查样式表和 JavaScript
  • yarn lint:css — 检查样式表
  • yarn lint:js — 检查 JavaScript

热模块替换

项目侧

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

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

主题侧

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

注意事项

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

文档