mcpField
B
bagisto-shop-theme-development

bagisto-shop-theme-development

github.com/bagisto设计与 UI13126 次安装2 周前更新
代码仓库

关于 bagisto-shop-theme-development

用于将 Bagisto 店铺主题构建并维护为可分发 Laravel 包的技能，涵盖主题架构、配置与定制，并指向资源、布局和包结构参考。

主要功能

  1. 01将主题组织为 Laravel 包
  2. 02配置视图与资源路径
  3. 03定制店铺页面区块
  4. 04注册图片缓存模板
  5. 05参考 Vite 资源和 Blade 布局

适用场景

  1. 01创建自定义店铺主题
  2. 02打包主题以供分发
  3. 03覆盖店铺模板和页面区块

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/bagisto/agent-skills --skill bagisto-shop-theme-development

安装后在 Claude Code 中输入/bagisto-shop-theme-development确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

assets.md
creating-a-theme.md
layouts.md
reference.md

详细介绍

Shop 主题开发

概述

在 Bagisto 中，Shop 主题开发包括创建打包为 Laravel 包的自定义店面主题。最终产物是一个自包含的包，可以独立分发和维护。

适用场景

在以下情况下启用此技能：

  • 创建打包为软件包的自定义店面主题
  • 构建用于分发的主题包
  • 使用由 Vite 驱动的资源
  • 自定义面向客户的页面
  • 覆盖默认 Shop 模板

Bagisto Shop 主题架构

核心组件
组件用途位置
主题配置定义可用主题config/themes.php
视图路径Blade 模板文件在主题配置中定义
资源路径CSS、JS、图片在主题配置中定义
主题中间件解析当前主题packages/Webkul/Shop/src/Http/Middleware/Theme.php
主题 Facade管理主题操作packages/Webkul/Theme/src/Themes.php
关键配置属性
// config/themes.php
use Webkul\Theme\Enums\SectionTypeEnum;

'shop-default' => 'default',

'shop' => [
    'default' => [
        'name' => 'Default',
        'assets_path' => 'public/themes/shop/default',
        'views_path' => 'resources/themes/default/views',
        'vite' => [
            'hot_file' => 'shop-default-vite.hot',
            'build_directory' => 'themes/shop/default/build',
            'package_assets_directory' => 'src/Resources/assets',
        ],
        'customize' => [
            'sections' => [
                SectionTypeEnum::IMAGE_CAROUSEL,
                SectionTypeEnum::PRODUCT_CAROUSEL,
                SectionTypeEnum::CATEGORY_CAROUSEL,
                SectionTypeEnum::FOOTER_LINKS,
                SectionTypeEnum::STATIC_CONTENT,
                SectionTypeEnum::SERVICES_CONTENT,
            ],
            'image_cache' => [
                'templates' => [],
                'product_images' => [],
            ],
        ],
    ],
],

customize 是主题注册其在店面中自定义内容的唯一位置； config/themes.php 以 Laravel 风格的注释块说明了每个键。其下的每个键 都是可选的。

customize.sections：如果没有此项，主题会按 SectionTypeEnum 中的顺序提供所有核心区块类型。主题自有的区块类型是列在此处的 SectionType 类 — 参见 bagisto-theme-sections 技能和 UPGRADE.md → 为主题添加区块。

customize.image_cache.templates：将 cache/{template}/{path} 名称映射到具有公共 applyFilter() 的类，并与运行该主题的渠道所用的核心 imagecache.templates（small、medium、large）合并 — 主题可以覆盖核心名称或添加新名称，但绝不会修改 config/imagecache.php。 Webkul\ImageCache\TemplateRegistry 会按请求主机解析这些模板；参见 UPGRADE.md → 主题图片缓存模板。

customize.image_cache.product_images 用于指定哪些模板应加入产品图片数组：产品图片辅助函数（以及每个产品 API、图库和购物车商品）始终包含 small、medium、large 和 original，并且仅为此处列出的名称添加 {name}_image_url — 绝不会包含所有已注册的模板。管理员请求始终解析核心模板（在 admin url 下，TemplateRegistry::currentTheme() 为 null），而 CatalogApiCache 会按渠道主题为商品列表设置缓存键。

参考文件 — 仅加载当前任务所需的文件

文件加载时机
creating-a-theme.md搭建主题包并注册主题时
assets.mdVite 流程、构建和开发服务器工作流
layouts.mdShop 布局、Blade 组件、自定义布局
reference.md包结构、关键文件、注意事项、测试

必需子技能： 在宣布任何更改完成前，使用 bagisto-change-verification。

评论

支持 Markdown