文档Commerce云基础架构上的 Commerce 指南

自定义主题

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主题：
  • 云

创建对象：

  • 管理员
  • 开发人员

您可以安装一个或多个主题以用于项目中的一个或多个商店和网站。 主题包括多个静态文件(包括图像、字体、CSS、JavaScript、PHP等)，以完全设计您的商店。 您可以通过提取主题代码到文件系统或使用编辑器来添加主题。

手动安装主题

要手动安装主题，主题代码必须位于压缩存档中或类似于以下内容的目录结构中：

<VendorName>
  ├── composer.json
      ├── etc
      │   └── view.xml
      ├── media
      ├── registration.php
      ├── theme.xml
      └── web
          ├── css
          │   └── source
          ├── fonts
          ├── images
          └── js

手动安装主题：

  1. 复制店面主题的<Project root dir>/app/design/frontend下的主题代码或管理主题的<Project root dir>/app/design/adminhtml。 验证顶层目录是否为<VendorName>；否则，该主题安装不正确。

    code language-bash 
    cp -r ExampleTheme <project-root>/app/design/frontend

  2. 确认将主题复制到正确位置。

    • 店面主题： ls <project-root>/app/design/frontend
    • 管理主题： ls <project-root>/app/design/adminhtml

    下面是一个示例：

    示例主题Adobe Commerce

  3. 添加和提交文件。

    code language-bash 
    git add -A && git commit -m "Add theme"

  4. 将文件推送到您的分支。

    code language-bash 
    git push origin <branch name>

  5. 等待部署完成。

  6. 登录到管理员。

  7. 单击​ 内容 >设计> 主题。

    主题显示在右侧窗格中。

使用编辑器安装主题

使用Composer安装主题与使用Composer安装任何其他扩展相同。 有关详细信息，请参阅安装、管理和升级模块。

要使用编辑器安装主题，请执行以下操作：

  1. 从Commerce Marketplace购买主题。

  2. 获取主题的编辑器名称。

  3. 转到Adobe Commerce根目录并输入命令：

    code language-bash 
    composer require <vendor>/<name>:<version>

    例如，

    code language-bash 
    composer require zero1/theme-fashionista-theme:1.0.0

  4. 等待依赖项更新。

  5. 输入以下命令：

    code language-bash 
    git add -A && git commit -m "Add theme"
    code language-bash 
    git push origin <branch name>

  6. 登录到管理员。

  7. 单击​ 内容 >设计> 主题。

    主题显示在右侧窗格中。

多个主题

使用多个主题时（如每种区域设置使用不同的主题），请查看SCD_MATRIX环境变量以自定义主题部署。 查看环境配置中的生成或部署阶段。

recommendation-more-help
05f2f56e-ac5d-4931-8cdb-764e60e16f26