告别单调导航：Halo 2.20 主题菜单图标与动态数据传递全攻略

告别单调导航：Halo 2.20 主题菜单图标与动态数据传递全攻略

【免费下载链接】halo 强大易用的开源建站工具。 项目地址: https://gitcode.com/GitHub_Trending/ha/halo

你是否还在为主题菜单单调乏味而烦恼？是否想让模板数据传递更灵活高效？本文将带你深入 Halo 2.20 主题开发的两大核心实践——菜单图标自定义与动态模板数据传递，通过实用案例和代码解析，让你的主题既美观又智能。

菜单图标系统：从内置到自定义

Halo 2.20 采用模块化菜单结构，核心定义位于 ui/console-src/router/constant.ts，其中声明了内容、界面、系统等菜单组。每个模块通过 module.ts 注册菜单元数据，如文章模块的定义：

// [ui/console-src/modules/contents/posts/module.ts](https://link.gitcode.com/i/c9c7596f783aba87d3e9e79297fcf35e)
export default defineModule({
  menu: {
    name: "core.sidebar.menu.items.posts",
    icon: markRaw(IconFileText),
    priority: 10
  }
})

内置图标库使用

系统内置 ri-icons 图标库，支持直接引入使用：

<!-- [ui/console-src/modules/dashboard/widgets/presets/core/quick-action/QuickActionWidget.vue](https://link.gitcode.com/i/90b8ec04051d70de0404f287a63318e3) -->
import IconPages from "~icons/ri/pages-line";

const actions = [
  {
    icon: markRaw(IconPages),
    label: "新建页面",
    action: () => router.push("/contents/pages/new")
  }
]

自定义 SVG 图标

1. 将 SVG 文件放入主题 assets/icons 目录
2. 在菜单配置中使用 import 引入：

import CustomIcon from "@/assets/icons/custom-menu.svg?raw";

export default defineModule({
  menu: {
    name: "theme.menu.custom",
    icon: h('svg', { innerHTML: CustomIcon }),
    priority: 20
  }
})

图标布局控制

通过 CSS 变量调整图标尺寸和间距：

:root {
  --menu-icon-size: 18px;
  --menu-icon-margin-right: 8px;
}

动态模板数据传递：响应式主题开发

组件通信基础

Halo 2.20 推荐使用组合式 API 进行数据传递，核心文件 ui/console-src/composables/use-global-info.ts 提供全局状态管理。基础示例：

<!-- 父组件 -->
<script setup>
import { ref } from 'vue'
const userInfo = ref({ name: 'Halo', avatar: '/avatar.png' })
</script>

<template>
  <UserMenu :user="userInfo" />
</template>

<!-- 子组件 -->
<script setup>
const props = defineProps({
  user: {
    type: Object,
    required: true
  }
})
</script>

跨组件状态共享

使用 provide/inject 实现深层数据传递：

// [ui/console-src/modules/dashboard/Dashboard.vue](https://link.gitcode.com/i/84ec7190c2f978ef02a9d219c20fd83a)
import { provide } from 'vue'

export default {
  setup() {
    const siteStats = ref({ posts: 128, comments: 456 })
    provide('siteStats', siteStats)
  }
}

在子组件中接收：

import { inject } from 'vue'

export default {
  setup() {
    const siteStats = inject('siteStats')
    return { siteStats }
  }
}

响应式数据更新

结合 ref 和 watch 实现动态数据响应：

// [ui/console-src/modules/dashboard/DashboardDesigner.vue](https://link.gitcode.com/i/b856316ccc79b154ef5413beff817720)
const currentBreakpoint = ref("lg");
const widgets = ref([]);

watch(currentBreakpoint, (newVal) => {
  // 断点变化时重新计算布局
  calculateWidgetPositions(newVal);
})

实战案例：个性化仪表盘菜单

以下是一个完整的自定义菜单实现，包含图标和动态数据：

<!-- 自定义菜单组件 -->
<template>
  <MenuGroup>
    <MenuItem 
      v-for="item in menuItems" 
      :key="item.name"
      :icon="item.icon"
      :path="item.path"
    >
      {{ item.label }}
      <Badge v-if="item.badge" :value="item.badge" />
    </MenuItem>
  </MenuGroup>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useDashboardStore } from '@/stores/dashboard'

const menuItems = ref([])
const dashboardStore = useDashboardStore()

onMounted(async () => {
  // 从 API 获取动态菜单数据
  const dynamicItems = await dashboardStore.getCustomMenuItems()
  menuItems.value = [
    {
      name: 'dashboard',
      label: '仪表盘',
      icon: markRaw(IconDashboard),
      path: '/dashboard'
    },
    ...dynamicItems
  ]
})
</script>

总结与进阶

通过本文学习，你已掌握 Halo 2.20 主题开发中菜单图标定制和动态数据传递的核心技巧。建议进一步探索：

• 主题配置接口：docs/extension-points/content.md
• 组件扩展机制：ui/console-src/composables/use-entity-extension-points.ts
• 状态管理最佳实践：ui/console-src/stores/theme.ts

掌握这些技能后，你可以构建更具个性化和交互性的 Halo 主题。如有疑问，欢迎在社区分享你的实现方案！

【免费下载链接】halo 强大易用的开源建站工具。 项目地址: https://gitcode.com/GitHub_Trending/ha/halo