• English

      • Hero Section

      The hero section is the prominent banner area at the top of your homepage. It greets visitors with your site's identity — a badge, your site title, and a tagline.

      Overview

      The hero section is configured under the hero key in _config.modernduang.yml. It consists of these elements:

      • Badge (image) — a small decorative badge/logo above the title
      • Site Title — automatically taken from Hexo's main _config.yml (title field)
      • Tagline — a short slogan or greeting text, configurable in one of two modes

      Configuration

      hero:
  mode: fixed
  text: 欢迎来到我的博客
  texts:
    - 欢迎来到我的博客
    - 用文字记录思考，用代码改变世界
    - 探索技术与生活的交汇点
      PropertyTypeDefaultDescription
      modestring'fixed'Display mode: 'fixed' or 'random'
      textstring—Single static tagline (used in fixed mode)
      textsstring[]—Array of taglines (used in random mode)

      Fixed Mode

      In fixed mode (mode: fixed), the hero section always displays a single tagline from the text property. This is ideal if you have a clear, consistent brand message:

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

      The hero renders as:

      ┌─────────────────────────────────────┐
│            [Badge Image]            │
│          My Awesome Blog            │
│       欢迎来到我的博客               │
│                                     │
│        [About]  [Categories]        │
└─────────────────────────────────────┘

      Note: The site title ("My Awesome Blog" in this example) comes from Hexo's _config.yml title field. The tagline below it comes from the text property.

      Random Mode

      In random mode (mode: random), the hero picks a random tagline from the texts array each time the page loads (or refreshes). This keeps the homepage feeling fresh and personal:

      hero:
  mode: random
  texts:
    - 欢迎来到我的博客
    - 用文字记录思考，用代码改变世界
    - 人生的意义在于探索
    - Stay hungry, stay foolish
    - 今天也是元气满满的一天

      Each page load will display one of these five taglines at random. There is no limit on how many entries you can add to texts.

      Important: When using random mode, the text property is ignored. When using fixed mode, the texts array is ignored. Make sure mode matches the property you intend to use.

      Badge

      A small badge is displayed above the hero title, featuring a layers SVG icon and the text "BLOG". The badge uses the claymorphism capsule style and is built into the theme — no configuration is needed.

      Visual Design

      The hero section inherits the claymorphism design language:

      • Gentle gradient background — typically a soft pastel gradient
      • Floating animation — the badge and text have a subtle floating/bobbing effect
      • Soft shadows — inner and outer shadows create the clay-like 3D effect

      Complete Example

      Here is a recommended hero configuration:

      # _config.modernduang.yml
favicon: /img/avatar.png

hero:
  mode: random
  texts:
    - 🌟 欢迎来到我的数字花园
    - 📝 用文字记录思考，用代码改变世界
    - 🚀 探索技术与生活的交汇点
    - 💡 每一个想法都值得被记录
    - 🎨 创造是最高级的快乐

      Then in your homepage source file (source/index.md or equivalent), you might add:

      [About Me](/about) [Browse Posts](/archives)