InnoShop Header/Footer Builder Plugin

为 InnoShop 提供页头广告、页脚装修与页头导航菜单的可视化配置。

功能特性

Header Builder

• ✅ 顶部广告栏配置
  • 背景颜色
  • 文字颜色
  • 启用/禁用开关
  • 多语言广告内容
  • 自定义链接

Footer Builder

• ✅ 服务图标模块（4个图标展示）
• ✅ 公司介绍模块（Logo + 简介 + 社交媒体）
• ✅ 3个链接栏（自定义标题 + 链接列表）
• ✅ 联系信息（邮箱、电话、地址）
• ✅ 版权信息（文字 + 支付图标）

安装

1. 将插件目录复制到 plugins/HeaderFooter/
2. 在后台插件管理中启用该插件
3. 导航到 Design → Header Builder 或 Footer Builder

使用方式

访问后台

1. 登录后台管理
2. 导航到 Design → Header Builder
3. 导航到 Design → Footer Builder

配置 Header

1. Header Ads 部分

   • 设置启用/禁用
   • 选择背景颜色和文字颜色
   • 添加广告条目（支持多语言）

2. 点击 保存 按钮保存配置

配置 Footer

1. 服务图标 部分

   • 启用/禁用服务图标
   • 添加图标、标题、副标题
   • 拖拽排序

2. 公司介绍 部分

   • 设置 Logo
   • 输入介绍文字（多语言）
   • 添加社交媒体图标和链接

3. 链接栏 部分（3列）

   • 设置每列标题（多语言）
   • 添加链接（文本 + URL）
   • 拖拽排序

4. 联系信息 部分

   • 输入邮箱、电话
   • 输入地址（多语言）

5. 版权信息 部分

   • 输入版权文字（多语言，支持HTML）
   • 设置支付图标图片

6. 点击 保存 按钮保存配置

前台显示

插件会自动替换前台主题的 Header/Footer：

• Header Ads: 显示在页面顶部
• Footer Services: 显示在 Footer 上方
• Footer 其他模块: 按 Footer 顺序显示

数据存储

配置存储在 settings 表：

• header_setting - Header 配置（JSON）
• footer_setting - Footer 配置（JSON）

目录结构

plugins/HeaderFooter/
├── Boot.php                          # 插件启动文件
├── config.json                       # 插件配置
├── Controllers/
│   └── Panel/
│       ├── HeaderBuilderController.php  # 顶部广告配置
│       ├── MenuBuilderController.php    # 导航菜单配置
│       └── FooterBuilderController.php  # 页脚装修配置
├── Views/
│   ├── front/                         # 前台（店铺）输出
│   │   ├── partials/                  # Blade hook 片段（由 Boot 引用）
│   │   │   ├── header-ads.blade.php           # 顶部广告条
│   │   │   ├── header-menu-desktop.blade.php    # 桌面端完整导航
│   │   │   └── header-menu-mobile.blade.php   # 移动端侧栏导航
│   │   └── footer.blade.php           # 可选：整页 Footer 示例（主题/hook 对接时可参考）
│   └── panel/                         # 后台管理页
│       ├── header-builder.blade.php
│       ├── menu-builder.blade.php
│       ├── footer-builder.blade.php
│       └── partials/
│           └── footer-link-column.blade.php
├── Lang/
│   ├── en/
│   │   ├── common.php
│   │   ├── header.php
│   │   └── footer.php
│   └── zh-cn/
│       ├── common.php
│       ├── header.php
│       └── footer.php
├── Routes/
│   └── panel.php                      # 后台路由
├── Public/
│   └── icon.png                       # 插件图标
└── README.md                          # 说明文档

技术特性

• ✅ 多语言支持（所有文本字段）
• ✅ Vue.js + Element UI 界面
• ✅ 拖拽排序（使用 Vue Draggable）
• ✅ 实时数据绑定
• ✅ Hook 扩展支持
• ✅ 响应式设计

API 端点

Header Builder

• GET /panel/inno_header_footer/header - 获取配置页面
• PUT /panel/inno_header_footer/header - 保存配置
• POST /panel/inno_header_footer/header/preview - 预览配置

Footer Builder

• GET /panel/inno_header_footer/footer - 获取配置页面
• PUT /panel/inno_header_footer/footer - 保存配置
• POST /panel/inno_header_footer/footer/preview - 预览配置

扩展性

插件通过 Hook 机制实现：

Hook 注入点

1. Panel Menu Hook

   listen_hook_filter('panel.component.sidebar.design.routes', function($menus) {
       // 添加菜单项
   });
   

2. Front Header Hook（插件已注册：顶部广告使用 front.partials.header-ads）

   listen_blade_insert('layout.header.top', function ($data) {
       return view('HeaderFooter::front.partials.header-ads')->render();
   });
   

3. Front Footer Hook（可参考 Views/front/footer.blade.php 整页结构自行接入主题）

   listen_blade_insert('layout.footer.top', function ($data) {
       return view('HeaderFooter::front.footer')->render();
   });
   

后续优化建议

1. 实时预览功能

   • 添加 iframe 预览窗口
   • 实时显示配置效果

2. 组件库扩展

   • 支持自定义组件
   • 通过 Hook 注册新组件

3. 模板市场

   • 预设 Header/Footer 模板
   • 一键应用

4. 版本管理

   • 保存多个配置版本
   • A/B 测试

版权

Copyright (c) Since 2024 InnoShop - All Rights Reserved

许可证

Open Software License (OSL 3.0)