Home Banner home_banner
Switch
Configuration Item: home_banner.enable
Type | Optional Values | Default Value |
---|---|---|
Boolean | true | false | true |
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
.
Type | Optional Values | Default Value |
---|---|---|
String | static | fixed | static |
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
Type | Note | Example |
---|---|---|
String | Local relative link / external image link | /images/wallhaven-wqery6-light.webp |
Dark Mode
Configuration Item: home_banner.image.dark
Type | Note | Example |
---|---|---|
String | Local relative link / external image link | /images/wallhaven-wqery6-dark.webp |
Main Title
Configuration Item: home_banner.title
Type | Note | Example |
---|---|---|
String | None | Theme 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.
Type | Note | Example |
---|---|---|
Array | Please use comma to separate | ["This is the first message", "This is the second message", "etc"] |
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
: Switchhome_banner.subtitle.hitokoto.api
: Hitokoto API URLhome_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 loopsmart_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
Type | Note | Example |
---|---|---|
String | Please enter Hex color value | #fff |
Dark Mode
Configuration Key: home_banner.text_color.dark
Type | Description | Example |
---|---|---|
String | Please enter a Hex color value | #d1d1b6 |
Text Styles
Title Font Size
Configuration Key: home_banner.text_style.title_size
Type | Description | Example |
---|---|---|
String | Please enter a font size supported by CSS | 2.8rem |
Subtitle Font Size
Configuration Key: home_banner.text_style.subtitle_size
Type | Description | Example |
---|---|---|
String | Please enter a font size supported by CSS | 1.5rem |
Title and Subtitle Line Height
Configuration Key: home_banner.text_style.line_height
Type | Description | Example |
---|---|---|
String | Please enter a line height supported by CSS | 1.2 |
Custom Fonts
Enable
Configuration Key: home_banner.custom_font.enable
Type | Possible Values | Default |
---|---|---|
Boolean | true | false | false |
Font Family
Configuration Key: home_banner.custom_font.family
Type | Description | Example |
---|---|---|
String | Will be applied to the main title and subtitle | Noto Sans SC |
Font CSS File URL
Configuration Key: home_banner.custom_font.url
Type | Description | Example |
---|---|---|
String | Font 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
Type | Possible Values | Default |
---|---|---|
Boolean | true | false | false |
Links
Configuration Key: home_banner.social_links.links
Social links support three types of icons:
1. Predefined Platform Icons
For popular platforms, you can directly use the platform name:
links:
github: https://github.com/username
twitter: https://twitter.com/username
facebook: https://facebook.com/username
instagram: 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:
fa-solid fa-wand-magic-sparkles: https://example.com
fa-regular fa-music: 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:
/images/icon/coolapk.png: https://www.coolapk.com/u/123456
/images/icon/bilibili.svg: https://space.bilibili.com/123456
https://example.com/custom-icon.png: https://example.com
Complete Example:
links:
github: https://github.com/username
twitter: https://twitter.com/username
fa-solid fa-music: https://music.example.com
/images/icon/coolapk.png: https://www.coolapk.com/u/123456
/images/icon/custom-platform.svg: https://custom.example.com
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: Must start with
/
(e.g.,/images/icon/example.png
)
Icon Migration Guide
If you have existing configurations using only FontAwesome icons, they will continue to work. Simply add local icons alongside your existing configuration:
# Before (still works)
links:
github: https://github.com/username
fa-solid fa-music: https://music.example.com
# After (enhanced with local icons)
links:
github: https://github.com/username
fa-solid fa-music: https://music.example.com
/images/icon/coolapk.png: https://www.coolapk.com/u/123456
Troubleshooting
Icon not displaying
- Check if the file 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, 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
.
qrs:
[fontawesome icon name (not HTML code)]: [QR code image URL]
Example configuration:
qrs:
weixin: https://example.com/weixin.png