README

• 基于 Sage 版本 10
• 使用 Vite

特性

• Solar（基于：Locomotive with Lenis、Gsap、Barba、Mouse Follower、Bulma 以及一些其他好东西的甜味实现）
• Laravel 路由
• Laravel Blade
• Laravel 组件、Composers 和控制器
• Sage 指令
• Sage WooCommerce
• Alpine

技术

• Acorn v4
• PHP >= 8.2（需启用 php-mbstring）
• Composer
• Vite >= 3.1.0
• Node.js >= 20.0.0
• Yarn

主题安装

• 此框架包含 Acorn v3。请阅读文档（https://roots.io/acorn/docs/）
• 从 WordPress 主题目录使用 Composer 安装 Alma（将下面的 your-theme-name 替换为您的主题名称）

# @ app/themes/ or wp-content/themes/
$ composer create-project salvatori/alma your-theme-name

要安装 Alma 的最新开发版本，请在命令末尾添加 dev-lightning

$ composer create-project salvatori/alma your-theme-name dev-lightning

主题结构

themes/alma/              # → Root of your Alma 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
├── routes/web.php        # → Place non WP routes here.
├── 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
│   └── views/            # → Theme templates
│       ├── components/   # → Component templates
│       ├── forms/        # → Form templates
│       ├── layouts/      # → Base templates
│       ├── partials/     # → Partial templates
        └── woocommerce/  # → Woocommerce templates
├── screenshot.png        # → Theme screenshot for WP admin
├── style.css             # → Theme meta information
├── vendor/               # → Composer packages (never edit)
└── vite.config.js        # → Vite configuration

主题开发

• 在主题目录中运行 yarn 以安装依赖项
• 更新 vite.config.js 以调整打包器

构建命令

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

热模块替换

项目侧

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

# Hot module reload enabled? This should be turned off in production.
HMR_ENABLED=true
# Endpoint where the bundler serve your assets
HMR_ENTRYPOINT=https://:5173
# Add an APP_KEY for LiveWire
APP_KEY= #some 32 characters randomized string

维护模式

Alma 集成了一个基本的简单维护模式。如果您想启用它，只需使用这个 .env 变量

WP_MAINTAINANCE_MODE="true"

文档

• Sage 文档
• 控制器文档
• Vite