Home Banner (home_banner)

Switch

Configuration Item: home_banner.enable

Background Image Style

Configuration Item: home_banner.style

This configuration item is used to set the background image style of the first screen, which can be either static or fixed.

static Style

The static style is a static style, which means that the background image of the first screen will scroll with the homepage.

fixed Style

The fixed style is a fixed style, which means that the background image of the first screen will be fixed on the homepage and will not scroll with the homepage. This style also automatically blurs the background image when scrolling down, which is recommended.

Background Image

Light Mode

Configuration Item: home_banner.image.light

Dark Mode

Configuration Item: home_banner.image.dark

Main Title

Configuration Item: home_banner.title

Subtitle

Text Content

Configuration Item: home_banner.subtitle.text

There is a typewriter animation effect, and you can configure multiple strings. Each string will be displayed in a loop in the typewriter animation.

If you need to enable hitokoto, please first enter some content in this item.

Hitokoto

The subtitle automatically fetches a hitokoto, see Hitokoto for details.

If you need to enable this item, please first enter some content in home_banner.subtitle.text to prevent display issues due to network problems. For example, you can enter ['Loading...'] in home_banner.subtitle.text.

• home_banner.subtitle.hitokoto.enable: Switch
• home_banner.subtitle.hitokoto.api: Hitokoto API URL
• home_banner.subtitle.hitokoto.show_author: Whether to show the author

The API URL can specify the sentence type, see Hitokoto API.

Advanced: Typewriter Animation Settings

• typing_speed: Typing speed (number of letters printed per millisecond)
• backing_speed: Backspace speed (number of letters erased per millisecond)
• starting_delay: Starting delay (milliseconds)
• backing_delay: Backspace delay (milliseconds)
• loop: Whether to loop
• smart_backspace: Whether to use smart backspace

Text Color

Set the text color of the title and subtitle.

Light Mode

Configuration Item: home_banner.text_color.light

Dark Mode

Configuration Key: home_banner.text_color.dark

Text Styles

Title Font Size

Configuration Key: home_banner.text_style.title_size

Subtitle Font Size

Configuration Key: home_banner.text_style.subtitle_size

Title and Subtitle Line Height

Configuration Key: home_banner.text_style.line_height

Custom Fonts

Enable

Configuration Key: home_banner.custom_font.enable

Font Family

Configuration Key: home_banner.custom_font.family

Font CSS File URL

Configuration Key: home_banner.custom_font.url

Social Links

Enable

Configuration Key: home_banner.social_links.enable

Links

Configuration Key: home_banner.social_links.links

links is an ordered array; the order is the render order. Each item contains icon and url.

Social links support three types of icons:

1. Predefined Platform Icons

For popular platforms, you can directly use the platform name:

links:
  - icon: github
    url: https://github.com/username
  - icon: twitter
    url: https://twitter.com/username
  - icon: facebook
    url: https://facebook.com/username
  - icon: instagram
    url: https://instagram.com/username

2. FontAwesome Icons

For fa-brands icons, enter the icon name directly. For other FontAwesome icons, use the full name:

links:
  - icon: fa-solid fa-wand-magic-sparkles
    url: https://example.com
  - icon: fa-regular fa-music
    url: https://example.com

You can visit Font Awesome to find icon names.

3. Local/External Image Icons

Use local image files or external image URLs as icons:

links:
  - icon: /images/icon/coolapk.png
    url: https://www.coolapk.com/u/123456
  - icon: /images/icon/bilibili.svg
    url: https://space.bilibili.com/123456
  - icon: https://example.com/custom-icon.png
    url: https://example.com

Complete Example:

links:
  - icon: github
    url: https://github.com/username
  - icon: twitter
    url: https://twitter.com/username
  - icon: fa-solid fa-music
    url: https://music.example.com
  - icon: /images/icon/coolapk.png
    url: https://www.coolapk.com/u/123456
  - icon: /images/icon/custom-platform.svg
    url: https://custom.example.com
  - icon: email
    url: you@example.com

When icon is email, the @ icon is used and mailto: is added if missing.

Local Icon Requirements

For local image icons, please follow these guidelines:

• File Location: Place icons in the source/images/ directory or subdirectories
• File Size: Recommended 20×20 pixels (icons are displayed at 20×20px)
• File Format: Supports PNG, SVG, JPG, WEBP
• Background: Use transparent backgrounds for best appearance
• File Path: The icon value must start with / (e.g., /images/icon/example.png)

Deprecated map format

The old object-map format (icon name as the key and link as the value) is deprecated because Hexo config merges can reorder keys. It still works for now but will be removed in the next major release. The same applies to qrs.

# Deprecated format
links:
  github: https://github.com/username
  twitter: https://twitter.com/username

# Recommended format
links:
  - icon: github
    url: https://github.com/username
  - icon: twitter
    url: https://twitter.com/username

Troubleshooting

Icon not displaying

• Check if the icon path starts with / (e.g., /images/icon/example.png)
• Verify the file exists in the correct location
• Make sure the file format is supported (PNG, SVG, JPG, WEBP)

Icon appears too large/small

• Icons are automatically resized to 20×20 pixels
• For best results, prepare icons at 20×20 pixels with transparent backgrounds

Icon not updating after changes

• Clear your browser cache and regenerate the site with hexo clean && hexo generate

QR code

Configuration Key: home_banner.social_links.qrs

Optional. qrs is an ordered array; each item contains icon and qr. The icon rules are the same as links.

qrs:
  - icon: weixin
    qr: https://example.com/weixin.png
  - icon: /images/icon/custom-platform.svg
    qr: https://example.com/custom-qr.png