Home
Home Banner

Home Banner home_banner

Switch

Configuration Item: home_banner.enable

TypeOptional ValuesDefault Value
Booleantrue | falsetrue

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.

TypeOptional ValuesDefault Value
Stringstatic | fixedstatic

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

TypeNoteExample
StringLocal relative link / external image link/images/wallhaven-wqery6-light.webp

Dark Mode

Configuration Item: home_banner.image.dark

TypeNoteExample
StringLocal relative link / external image link/images/wallhaven-wqery6-dark.webp

Main Title

Configuration Item: home_banner.title

TypeNoteExample
StringNoneTheme Redefine

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.

TypeNoteExample
ArrayPlease use comma to separate["This is the first message", "This is the second message", "etc"]

Hitokoto

The subtitle automatically fetches a hitokoto, see Hitokoto (opens in a new tab) 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 (opens in a new tab).

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

TypeNoteExample
StringPlease enter Hex color value#fff

Dark Mode

Configuration Key: home_banner.text_color.dark

TypeDescriptionExample
StringPlease enter a Hex color value#d1d1b6

Text Styles

Title Font Size

Configuration Key: home_banner.text_style.title_size

TypeDescriptionExample
StringPlease enter a font size supported by CSS2.8rem

Subtitle Font Size

Configuration Key: home_banner.text_style.subtitle_size

TypeDescriptionExample
StringPlease enter a font size supported by CSS1.5rem

Title and Subtitle Line Height

Configuration Key: home_banner.text_style.line_height

TypeDescriptionExample
StringPlease enter a line height supported by CSS1.2

Custom Fonts

Enable

Configuration Key: home_banner.custom_font.enable

TypePossible ValuesDefault
Booleantrue | falsefalse

Font Family

Configuration Key: home_banner.custom_font.family

TypeDescriptionExample
StringWill be applied to the main title and subtitleNoto Sans SC

Font CSS File URL

Configuration Key: home_banner.custom_font.url

TypeDescriptionExample
StringFont style file address (CSS)https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap

Social Links

Enable

Configuration Key: home_banner.social_links.enable

TypePossible ValuesDefault
Booleantrue | falsefalse

Links

Configuration Key: home_banner.social_links.links

Please add your social links in the following format,

If it is a fa-brands icon, you can directly enter the Brands icon name, such as github.

But if you are using a non fa-brands icon, such as fa-solid, you need to enter the full name, such as fa-solid fa-wand-magic-sparkles.

_config.redefine.yml
links:
    [fontawesome icon name (not HTML code)]: [your social link address]

You can visit Font Awesome (opens in a new tab) to find icon names.

Example configuration:

_config.redefine.yml
links:
    github: https://github.com
    twitter: https://twitter.com
    facebook: https://facebook.com
    instagram: https://instagram.com
    fa-solid fa-wand-magic-sparkles: https://example.com
    fa-regular fa-music: https://example.com

QR code

Configuration Key: home_banner.social_links.qrs

Optional, you can add your QR code in the following format,

If it is a fa-brands icon, you can directly fill in the Brands icon name, such as weixin.

But if you are using a non-fa-brands icon, such as fa-solid, then you need to fill in the full name, such as fa-solid fa-wand-magic-sparkles.

_config.redefine.yml
qrs:
    [fontawesome icon name (not HTML code)]: [QR code image URL]

Example configuration:

_config.redefine.yml
qrs:
    weixin: https://example.com/weixin.png
HomeNavbar