主题开发指南 ​

说明 ​

本文档旨在指导开发者如何开发和发布新的主题，以供InnoShop电商系统使用。

发布主题 ​

使用以下Artisan命令将 innopacks/front 目录下的主题发布为默认主题到 /themes/default。

php artisan inno:publish-theme

在后台的“设计-模板主题列表”中，选择并启用名为 default 的主题，即可轻松切换至该主题。

主题文件结构 ​

您可以基于 /themes/default 文件夹改名或复制以创建新的主题。以下是推荐的主题结构：

• /css - 存放主题的CSS源码样式文件,推荐使用SCSS编写, 非必须。
• /js - 存放主题的JavaScript脚本文件，包含主题的交互逻辑, 非必须。
• /public - 存放主题的公共静态资源，如图片、字体、编译后的 css 和js等, 非必须。
• /views - 存放主题的Blade模板文件, 必须。
• /config.json - 主题配置文件，包含主题的名称、版本、作者等信息, 非必须(如果需要发布到主题市场必须包含)。

若您需要撤销对主题模板的更改并恢复系统默认的模板，可以通过删除 views 目录下自定义的 blade.php 文件来实现。 一旦删除，系统将自动重新采用 innopacks/front 目录中的原始 Blade 模板进行渲染。

1. CSS样式 ​

在 /css 目录下，您可以组织多个CSS或者SCSS文件，以模块化的方式管理样式。

2. JavaScript脚本 ​

/js 目录用于存放JavaScript文件，可以包含主题的交互逻辑和第三方库。

3. 公共静态资源 ​

/public 目录用于存放主题的静态资源，这些资源可以通过Web访问, 在blade中用theme_asset()引入 。

4. 模板文件 ​

/views 目录包含主题的Blade模板文件，这些模板定义了主题的布局和页面结构。

5. 配置文件 ​

config.json 是主题的配置文件，示例如下：

{
    "code": "default",
    "name": {
        "zh_cn": "InnoShop 默认模板",
        "en": "InnoShop Default Theme"
    },
    "description": {
        "zh_cn": "InnoShop 默认模板",
        "en": "InnoShop Default Theme"
    },
    "version": "v1.0.0",
    "author": {
        "name": "InnoShop",
        "email": "team@innoshop.com"
    }
}

6. 编译自定义主题的 css 和 js ​

在系统根目录下的 webpack.mix.js 文件中，找到 const theme = ''; 这一行，将其中的空字符串替换为您的主题目录名称。 完成后，执行以下命令来编译您的主题资源：

npm run prod