• 简体中文
  • Hero 区域

    Hero 区域是博客首页最顶部的视觉焦点区域,展示站点标题和副标题。ModernDuang 支持两种显示模式:固定模式(fixed)随机模式(random)

    基础配置

    所有 Hero 配置都在 _config.modernduang.ymlhero 字段下:

    hero:
      mode: fixed
      text: 欢迎来到我的博客
      texts:
        - 欢迎来到我的博客
        - 用文字记录思考,用代码改变世界
    属性类型默认值描述
    modestring'fixed'显示模式:'fixed''random'
    textstring副标题文字(固定模式使用)
    textsstring[]副标题候选池(随机模式使用)

    固定模式(fixed)

    固定模式始终显示同一条副标题文字。适合希望传达固定口号或签名的博客。

    hero:
      mode: fixed
      text: 欢迎来到我的博客

    站点标题自动取自 Hexo 主配置 _config.yml 中的 title 字段。你可以在标题下方看到一条固定的副标题文字。

    提示: 如果不设置 text,Hero 区域将只显示站点标题,不显示副标题。

    随机模式(random)

    随机模式在每次页面加载时从 texts 数组中随机选取一条作为副标题。适合展示多样化的个性签名、名言语录或每日一句。

    hero:
      mode: random
      texts:
        - 欢迎来到我的博客
        - 用文字记录思考,用代码改变世界
        - 今天也是元气满满的一天!
        - Stay hungry, stay foolish.
        - 种一棵树最好的时间是十年前,其次是现在。
    • 每次刷新页面,副标题随机切换。
    • texts 数组长度不限,建议 3~7 条以获得丰富的体验而不显冗杂。
    • 在随机模式下,text 字段将被忽略。

    徽章(Badge)

    Hero 标题上方会显示一个小徽章,包含一个层级 SVG 图标和「BLOG」文字。徽章样式为粘土风格胶囊形,内置于主题中,无需额外配置。

    视觉效果

    Hero 区域整体采用 claymorphism 设计风格:

    • 大圆角容器,带柔和的内外阴影层叠。
    • 标题使用大号字体和柔和的色彩梯度。
    • 装饰性浮动几何元素作为背景点缀。
    • 所有元素在暗色模式下自动适配配色。

    完整配置示例

    hero:
      mode: random
      texts:
        - 用文字记录思考,用代码改变世界
        - 今天也是元气满满的一天!
        - Stay hungry, stay foolish.

    相关页面