• 简体中文
  • 导航与菜单

    ModernDuang 提供灵活的多层级导航菜单系统,支持三种菜单项类型:简单链接、扩展链接和下拉子菜单。你可以在 _config.modernduang.ymlmenu 字段中完成所有配置。

    简单菜单项

    最简单的配置方式:键为菜单标签,值为 URL 字符串。若标签名称匹配内置图标名,菜单项会自动显示对应图标。

    menu:
      首页: /
      归档: /archives
      标签: /tags
      分类: /categories
      友链: /links
      关于: /about

    扩展菜单项

    当需要外链或自定义图标时,将值改为一个包含详细选项的对象:

    menu:
      GitHub:
        url: https://github.com/yourname
        icon: '<svg viewBox="0 0 24 24">...</svg>'
        external: true
    属性类型默认值必填描述
    urlstring链接地址,支持相对路径和绝对 URL
    iconstring自定义 SVG 字符串,覆盖内置图标
    externalbooleanfalse设为 true 时在新标签页打开(添加 target="_blank"

    提示: external: true 的菜单项会添加 target="_blank" 属性,在新标签页中打开链接。

    下拉子菜单

    通过 children 字段定义嵌套子菜单,子菜单项同样支持简单或扩展两种格式:

    menu:
      项目:
        icon: '<svg viewBox="0 0 24 24">...</svg>'
        children:
          项目A: /project-a
          项目B:
            url: https://external.com/project-b
            external: true
          项目C: /project-c
    • 父级菜单项可以设置自定义 icon,否则显示默认文件夹图标。
    • 子菜单项完全支持 urliconexternal 属性。
    • 嵌套仅支持一层,不支持更深层级。

    内置图标

    以下菜单标签名拥有内置 SVG 图标,无需手动指定 icon

    菜单标签图标含义
    首页房屋图标
    归档归档盒图标
    标签标签图标
    分类文件夹图标
    友链链接图标
    开往旅行指南针图标
    关于用户信息图标
    RSS信号波纹图标
    更多三点竖排图标

    如果你使用的标签名不在上述列表中(比如英文标签或自定义名称),请通过 icon 属性提供自己的 SVG 字符串。

    移动端菜单行为

    在移动设备(屏幕宽度小于 768px)上,导航菜单会折叠为汉堡按钮。点击后展开全屏覆盖菜单:

    • 简单菜单项和扩展菜单项直接平铺显示。
    • 下拉子菜单以可折叠手风琴方式呈现,点击父级展开/收起子项。
    • 点击菜单项内任意链接后菜单自动关闭。
    • 菜单打开时页面主体滚动被锁定,防止背景滚动穿透。

    完整配置示例

    以下是一个综合示例,涵盖了三种菜单项类型:

    menu:
      首页: /
      归档: /archives
      标签: /tags
      分类: /categories
      友链: /links
      开往:
        url: https://www.travellings.cn/go.html
        external: true
      关于: /about
      GitHub:
        url: https://github.com/yourname
        icon: '<svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>'
        external: true

    相关页面