演示
0

页头页脚构建器

￥68.00 ￥88.00
无货
强大的页头页脚可视化配置工具，支持顶部广告、服务图标、公司介绍、链接栏、联系信息、版权信息等模块
加入收藏

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)