🧭 导航栏自动隐藏提示勋章开关说明

纸鸢博客的导航栏支持智能自动隐藏功能，当用户不操作页面时，导航栏会自动隐藏以提供更沉浸的阅读体验同时，系统会在页面顶部显示一个提示勋章，引导用户如何唤出隐藏的导航栏

✨ 功能说明

自动隐藏机制

• 触发条件：当用户 5 秒内没有与导航栏交互时，导航栏会自动向上隐藏
• 唤出方式：将鼠标移动到页面顶部中心区域，导航栏会自动显示
• 移动端适配：移动端不会自动隐藏导航栏，以保证操作便利性

提示勋章机制

• 显示时机：导航栏隐藏后，每隔 18 秒会显示一次提示勋章
• 显示时长：每次显示 3 秒后自动渐隐
• 提示内容：默认显示「鼠标移动到页面顶部中心显示导航栏」的引导信息

⚙️ 配置方法

提示勋章的开关和样式可以在导航栏配置文件中进行设置

配置文件路径

src/config/navbar.ts

勋章配置项

在配置文件中，找到 badge 对象进行配置：

/* 🎖️ 提示勋章 */
badge: {
  /* ☀️ 是否显示 */
  enabled: true,
  /* 🎨 勋章图标 */
  icon: '🛰️',
  /* 📝 提示文本 */
  text: '鼠标移动到 \n页面顶部中心 \n显示导航栏😎',
},

📋 配置参数详解

🎯 配置示例

关闭提示勋章

如果你不希望显示提示勋章，可以将 enabled 设置为 false：

/* 🎖️ 提示勋章 */
badge: {
  enabled: false,  // 关闭提示勋章
  icon: '🛰️',
  text: '鼠标移动到 \n页面顶部中心 \n显示导航栏😎',
},

自定义提示内容

你可以修改图标和提示文本，使其更符合你的博客风格：

/* 🎖️ 提示勋章 */
badge: {
  enabled: true,
  icon: '👆',  // 自定义图标
  text: '向上滑动\n显示导航栏',  // 自定义提示文本
},

使用自定义图标

支持使用 emoji 或任意字符作为图标：

/* 🎖️ 提示勋章 */
badge: {
  enabled: true,
  icon: '🧭',  // 指南针图标
  text: '导航栏已隐藏\n鼠标移到顶部唤出',
},

💡 最佳实践

1. 保持简洁：提示文本建议控制在 2-3 行，避免过长影响美观
2. 图标选择：使用与导航相关的 emoji，如 🧭、👆、🖱️ 等
3. 适时关闭：如果你的博客用户群体熟悉操作，可以关闭提示勋章
4. 换行使用：使用 \n 可以让文本分行显示，提升可读性

⚠️ 注意事项

1. 移动端不显示：提示勋章仅在桌面端显示，移动端导航栏不会自动隐藏
2. 不影响功能：关闭提示勋章不会影响导航栏的自动隐藏和唤出功能
3. 热区始终有效：即使关闭提示勋章，页面顶部的热区依然可以唤出导航栏

🔄 完整配置参考

以下是导航栏配置文件中与自动隐藏和提示勋章相关的完整配置：

/* 🧭 导航栏默认配置 */
const defaultNavbarConfig: NavBarConfig = {
 
 ... ....

  /* 🎖️ 提示勋章 */
  badge: {
    enabled: true,  // true 为开启，false 为关闭
    icon: '🛰️',
    text: '鼠标移动到 \n页面顶部中心 \n显示导航栏😎',
  },
};

🕊️ 白木 原创开发 🔗 gl.baimu.live