后端前端【免费下载链接】sageWordPress starter theme with Laravel Blade components and templates, Tailwind CSS, and block editor support项目地址https://gitcode.com/gh_mirrors/sa/sage点击查看免费下载Sage 是 Roots 团队出品的 WordPress 起始主题starter theme本仓库所呈现的版本以Laravel Blade 模板引擎、Vite 前端工作流、Tailwind CSS v4 样式体系、AcornLaravel 容器集成以及块编辑器支持为核心组合。读完本文你将掌握这套混合型主题从环境要求、安装启动、目录组织到 Blade 组件化视图、Composer 数据注入、Vite 双入口构建与编辑器样式联动的完整使用与定制方案。一、Sage 是什么一个高级混合型 WordPress 起始主题仓库根目录的 README.md 给出了该项目的精确定位Advanced hybrid WordPress starter theme with Laravel Blade and Tailwind CSS——一个将 Laravel Blade 的组件化模板能力、现代 JavaScript 工具链与 WordPress 主题机制融合在一起的起始主题。它的设计初衷不是提供一套开箱即用的成品皮肤而是为开发者交付一套组织良好的、可组件化复用的代码基座让 PHP 模板与前端工程化能力各司其职。README 提炼的五大核心卖点也正是本仓库代码实际支撑的能力Blade 模板以 Laravel Blade 语法编写干净、高效的 WordPress 主题模板Vite 工作流现代前端开发链路支持热更新与快速构建Tailwind CSS开箱即用的实用优先样式体系Acorn 集成通过 Acorn 把 Laravel 的能力注入 WordPress 主题块编辑器支持内置块编辑器Block Editor / Gutenberg的样式与脚本接入。一句话概括 Sage 的做法Write organized, component-based code using Laravel Blade, enjoy instant builds and CSS hot-reloading with Vite, and leverage Laravels robust feature set through Acorn.用 Laravel Blade 编写有组织的组件化代码借助 Vite 享受即时构建与 CSS 热重载并通过 Acorn 发挥 Laravel 的完整能力。二、环境要求与依赖先看清楚版本门槛Sage 对运行环境有明确要求这些约束直接写在 composer.json、package.json 与 style.css 中项目要求出处PHP 8.3composer.jsonWordPressRequires at least: 6.6style.cssAcornLaravel 容器roots/acorn: ^6.0composer.jsonNode.js^20.19.0 \|\| 22.12.0LTS 或更高package.json前端依赖Vite^8.0.0、Tailwind CSS^4.0.0、laravel-vite-plugin、roots/vite-pluginpackage.json其中roots/acorn是 Sage 的运行时基石它把 Laravel 的容器IoC、服务提供者、Blade 渲染等能力桥接到 WordPress 环境laravel/pint作为开发依赖用于 PHP 代码风格检查。此外composer.json 还通过suggest推荐了log1x/sage-directives——一个为 WordPress 与 Sage 提供实用 Blade 指令的扩展包^1.0属于可选增强项。三、安装与启动从零把主题跑起来3.1 安装依赖主题的引导逻辑位于 functions.php它首先检查vendor/autoload.php是否存在若缺失会直接wp_die提示运行composer install。因此首次使用请先在主题根目录执行composer install随后安装前端依赖npm install3.2 启动开发与构建package.json 预置了三个核心脚本命令作用npm run dev启动 Vite 开发服务器提供 CSS/JS 热更新HMRnpm run build执行vite build产出生产构建产物到public/build目录npm run translate依次执行.pot生成与.po更新完成主题翻译流程值得注意的细节运行开发服务器时Sage 会借助Vite::isRunningHot()判断是否处于热加载模式从而决定依赖脚本的加载方式见下文块编辑器支持一节。3.3 构建产物的去向vite.config.js 将base设置为/app/themes/sage/public/build/意味着最终构建产物含theme.json、editor.deps.json、编译后的 CSS/JS都会落入主题的public/build目录由 WordPress 按固定路径加载。开发环境若未设置APP_URLVite 配置会自动兜底为http://example.test避免 Laravel Vite 插件因缺少站点地址而报错。四、Blade 模板体系组件化思维重写主题视图Sage 的核心体验在于用 Blade 替代传统 PHP 模板拼写。从 resources/views 的目录结构可以看到清晰的职责分层resources/views/ ├── components/ # Blade 组件如 alert ├── forms/ # 表单视图如搜索框 ├── layouts/ # 页面骨架布局 ├── partials/ # 可复用片段文章列表、页头、评论、元信息等 ├── sections/ # 区块页眉、页脚、侧边栏 └── *.blade.php # 顶层模板index、single、page、search、404、自定义模板4.1 布局与区块组装resources/views/layouts/app.blade.php 是全局布局通过php(wp_head())、php(wp_footer())接入 WordPress 钩子用vite([resources/css/app.css, resources/js/app.js])声明前端资源入口并用include(sections.header)/yield(content)/include(sections.footer)完成页面骨架拼装。子模板如 index.blade.php则通过extends(layouts.app)section(content)注入主体内容。4.2 Blade 组件以x-alert为例组件目录 resources/views/components/alert.blade.php 展示了 Sage 的组件化写法props([ type null, message null, ]) php($class match ($type) { success text-green-50 bg-green-400, caution text-yellow-50 bg-yellow-400, warning text-red-50 bg-red-400, default text-indigo-50 bg-indigo-400, }) div {{ $attributes-merge([class px-2 py-1 {$class}]) }} {!! $message ?? $slot !!} /div它利用 Blade 的props声明默认属性、match表达式映射类型到 Tailwind 配色类、$attributes-merge()合并调用方传入的 class然后在模板中这样调用x-alert typewarning {!! __(Sorry, no results were found., sage) !!} /x-alert注意转义边界Blade 中凡输出可信 HTML 处使用{!! !!}如wp_nav_menu、the_excerpt而普通文本用{{ }}自动转义这是 WordPress 模板场景下的安全惯例。4.3 View Composer把数据从 WordPress 注入 BladeSage 通过 Acorn 的View\Composer机制把取数据与渲染解耦。以 app/View/Composers/App.php 为例$views [*]表示服务于所有视图并提供siteName()方法返回get_bloginfo(name, display)——于是页眉模板 sections/header.blade.php 中可以直接使用$siteName变量渲染站点名。更具代表性的是 Post.php它通过$views声明服务于partials.page-header、partials.content及所有partials.content-*模板并依据当前上下文is_home()、is_archive()、is_search()、is_404()返回不同标题pagination()则包装wp_link_pages()输出分页。与之类似的还有 Comments.php把评论数量标题、评论列表、上下页链接、分页状态、关闭状态全部收敛为模板可用的数据方法对应视图 resources/views/partials/comments.blade.php 中$responses()、$title、$paginated()、$previous、$closed()等变量的来源。这套机制的价值在于PHP 侧保持取数据的纯逻辑Blade 侧保持渲染的纯展示更换模板时无需改动数据层。五、Vite 工作流现代前端链路如何接入主题5.1 配置解读vite.config.js 是本仓库前端能力的枢纽import { defineConfig } from vite import tailwindcss from tailwindcss/vite; import laravel from laravel-vite-plugin import { wordpressPlugin, wordpressThemeJson } from roots/vite-plugin; if (! process.env.APP_URL) { process.env.APP_URL http://example.test; } export default defineConfig({ base: /app/themes/sage/public/build/, plugins: [ tailwindcss(), laravel({ input: [ resources/css/app.css, resources/js/app.js, resources/css/editor.css, resources/js/editor.js, ], refresh: true, assets: [resources/images/**, resources/fonts/**], }), wordpressPlugin(), wordpressThemeJson({ disableTailwindColors: false, disableTailwindFonts: false, disableTailwindFontSizes: false, disableTailwindBorderRadius: false, }), ], resolve: { alias: { scripts: /resources/js, styles: /resources/css, fonts: /resources/fonts, images: /resources/images, }, }, })关键点有三双入口设计app.css/app.js服务前台editor.css/editor.js服务块编辑器二者在同一构建中分别产出wordpressPlugin()来自roots/vite-plugin负责生成 WordPress 需要的清单文件与依赖元数据如editor.deps.jsonwordpressThemeJson()在构建期把 Tailwind 的色板、字体、字号、圆角等 token 与基础 theme.json 合并产出最终的public/build/assets/theme.json。5.2 Tailwind CSS v4 的引入方式resources/css/app.css 展示了 Tailwind v4 的新式导入import tailwindcss theme(static); source ../../app/**/*.php; source ../**/*.blade.php; source ../**/*.js;source指令告诉 Tailwind 扫描哪些目录提取 class 名从而只生成实际用到的样式。编辑器样式入口 resources/css/editor.css 则仅需一行import tailwindcss;。5.3 路径别名resolve.alias提供了scripts、styles、fonts、images四个别名分别指向resources/js、resources/css、resources/fonts、resources/images方便在 JS 与模板中书写干净的导入路径。六、Acorn 集成Laravel 容器如何接管主题6.1 引导流程functions.php 是整个主题的引导中枢分为三步注册 Composer 自动加载器requirevendor/autoload.php缺失即报错启动 Acorn 应用Application::configure()-withProviders([ThemeServiceProvider::class])-boot()把 Laravel 容器挂载进 WordPress 生命周期加载 Sage 主题文件通过collect([setup, filters])-each(...)依次引入 app/setup.php 与 app/filters.php这个数组可以按需增删。6.2 服务提供者app/Providers/ThemeServiceProvider.php 继承自 Acorn 的Roots\Acorn\Sage\SageServiceProvider在register()与boot()中先调用父类为你预留扩展点注册自定义服务、绑定单例、注册自定义 Blade 指令等都在这里进行。6.3 入口模板的回调app/setup.php 是主题行为配置的核心注册唯一导航菜单primary_navigation、移除全站编辑FSE的block-templates支持、禁用默认块模式、启用title-tag/post-thumbnails/responsive-embeds/HTML5 标记/自定义器选择性刷新并在widgets_init中注册sidebar-primary与sidebar-footer两个侧边栏。摘要截断则定义在 app/filters.php通过excerpt_more过滤器把默认的[...]替换为带链接的… Continued文案。6.4 极简渲染入口public 外的 index.php 只有一行核心逻辑echo view(app(sage.view), app(sage.data))-render();它从 Acorn 容器取出 Blade 视图名称与数据渲染并输出——Blade 路由视图的解析index.blade.php、single.blade.php等正是由SageServiceProvider完成的。七、块编辑器支持Sage 如何深度适配 Gutenberg块编辑器支持内置是 README 的第四大卖点仓库里有完整的实现链路编辑器样式注入setup.php中的block_editor_settings_all过滤器把resources/css/editor.css的 Vite 产物 URL 注入$settings[styles]使编辑器画布呈现与前台一致的样式编辑器脚本注入admin_head钩子中先判断当前是否处于块编辑器屏幕再根据Vite::isRunningHot()决定走开发热更新链路还是生产链路——生产模式下会读取editor.deps.json逐个wp_enqueue_script补齐依赖再输出editor.js的入口标签theme.json 动态生成theme_file_path过滤器把theme.json的解析指向构建产物public/build/assets/theme.json即 Vite 构建时由wordpressThemeJson()生成的那份合并文件。而仓库根目录的 theme.json 是源文件它声明了contentSize: 48rem的布局宽度、限定间距单位px/%/em/rem/vw/vh、禁用自定义颜色/渐变/字体大小等默认设置并明确注释其作用——用于构建public/build/assets下的 theme.json产物会合入 Tailwind 的颜色、字体与字号 token禁用按需块资源加载should_load_separate_core_block_assets过滤器返回__return_false规避 WordPress 对核心块资源按需拆分加载带来的样式抖动对应 Trac ticket 61965。前台侧resources/js/app.js 与 resources/js/editor.js 是两组各自独立的入口editor.js内部基于wordpress/dom-ready在编辑器就绪后执行逻辑为后续的编辑器交互扩展留好位置。八、目录结构全景一份可收藏的主题地图结合前文本仓库的完整骨架可归纳为路径职责functions.php自动加载 Acorn 引导 主题文件注册app/setup.php主题支持项、菜单、侧边栏、编辑器样式/脚本注入app/filters.php全局过滤器摘要截断app/Providers/ThemeServiceProvider.php继承SageServiceProvider的服务提供者app/View/Composers面向视图的数据注入App / Post / Commentsresources/views全部 Blade 模板layouts / sections / partials / components / formsresources/cssTailwind 样式入口app.css / editor.cssresources/js前台与编辑器 JS 入口vite.config.jsVite Tailwind WordPress 插件配置theme.json块编辑器设置源文件构建期合并 Tailwind tokenstyle.cssWordPress 主题头信息名称、版本、PHP/WP 最低版本composer.json / package.jsonPHP 与 Node 依赖声明另外仓库根目录的public/build目录生产构建产物落点与resources/lang翻译目录会在执行安装与npm run build/ 翻译脚本后生成。九、i18n主题翻译的完整流程package.json 提供了基于 WP-CLI 的翻译流水线适合需要多语言发行的主题# 生成 POT 主模板覆盖 theme.json、patterns、app、resources npm run translate:pot # 依据新 POT 更新各语言 .po 文件 npm run translate:update # 编译生成 .mo 与 JS 翻译 JSON npm run translate:compile底层分别调用wp i18n make-pot、wp i18n update-po、wp i18n make-mo与wp i18n make-json。与此同时全部模板与 Composer 中的用户可见文案均通过__(..., sage)、_x()、_nx()等 WordPress 翻译函数包裹文本域统一为sage见 style.css 的Text Domain声明保证整个主题可被完整本地化。十、从模板开始的定制路线图拿到这份起始主题后推荐按以下顺序上手定制改站点信息Composer 已把siteName注入所有视图页眉模板 sections/header.blade.php 直接复用调整页面结构在 layouts/app.blade.php 修改骨架或为不同页面类型新增顶层.blade.php模板参考已有的single、page、search、404、template-custom新增数据方法在 app/View/Composers 中扩展或新增 Composer 类通过$views声明作用范围扩展编辑器编辑 theme.json 源文件控制块编辑器设置或在 resources/js/editor.js 中接入自定义编辑器逻辑开启 Vite 开发运行npm run dev获得热更新体验上线前执行npm run build产出生产资源按需增删引导文件在 functions.php 的collect([...])数组中追加你自己的app/*.php配置文件。结语Sage 的价值不在于开箱即用而在于它把 WordPress 主题开发推进到了组件化模板 现代工具链 数据逻辑分离的层次。本文围绕 README 定义的五大核心能力逐一用本仓库的源码vite.config.js、functions.php、app/setup.php、View/Composers、resources/views 等做了验证与展开——当你在此基础上动手构建自己的主题时这套骨架既是起点也是最好的参考资料。赞分享后端前端【免费下载链接】sageWordPress starter theme with Laravel Blade components and templates, Tailwind CSS, and block editor support项目地址https://gitcode.com/gh_mirrors/sa/sage点击查看免费下载相关推荐Files文件管理器终极指南5个简单步骤打造你的高效文件管理平台Files文件管理器终极指南5个简单步骤打造你的高效文件管理平台 还在为Windows资源管理器功能单一、操作繁琐而困扰吗Files文件管理器作为Windo桌面应用Sage WordPress主题开发框架现代化主题开发的完整指南Sage WordPress主题开发框架现代化主题开发的完整指南 Sage是一个功能强大的开源WordPress主题开发框架专为开发者打造现代化、高效的主题后端前端Sage: 构建现代化、响应式WordPress主题的框架Sage: 构建现代化、响应式WordPress主题的框架 什么是Sage Sage是一个WordPress主题框架它允许开发者以现代Web开发工具和技术的后端前端上一篇如何用 usrsctp 实现多宿主 SCTP 连接从单链路故障到多路径传输的实战指南下一篇革新Android文件选择体验Material File Picker完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考