【Bug】首页封面图不显示，回退到了纯色背景 #1697

wjydev · 2025-06-29T07:01:16Z

wjydev
Jun 29, 2025

大佬你好！我遇到了一个很奇怪的问题：
我尝试为我的首页设置顶部的封面图（top_img），但它一直不显示，而是回退到了一个纯蓝色的背景。
但奇怪的是，文章的封面图（default_cover）是能正常加载并显示的。这证明我的图片路径和Hexo的核心渲染应该是没有问题的。我已经尝试了各种方法，包括清理缓存、强制刷新、在source/index.md里直接指定top_img，但首页顶部依然是纯色。
Expected behavior (预期的行为)
希望首页顶部能像文章页一样，正常显示我指定的封面图片。
Screenshots (截图)
文章封面正常，但首页顶部是纯色
Website (你的网站)
GitHub Repo: [https://github.com/wjydev/wjysite.com]
Live Site: [https://wjysitedotcom.netlify.app/]
Environment (环境)
Device: Windows 11
Browser: Chrome
Hexo Version: [hexo: 7.3.0
hexo-cli: 4.3.2
os: win32 10.0.26100 undefined
node: 22.14.0
acorn: 8.14.0
ada: 2.9.2
amaro: 0.3.0
ares: 1.34.4
brotli: 1.1.0
cjs_module_lexer: 1.4.1
cldr: 46.0
icu: 76.1
llhttp: 9.2.1
modules: 127
napi: 10
nbytes: 0.1.1
ncrypto: 0.0.1
nghttp2: 1.64.0
nghttp3: 1.6.0
ngtcp2: 1.10.0
openssl: 3.0.15+quic
simdjson: 3.10.1
simdutf: 6.0.3
sqlite: 3.47.2
tz: 2024b
undici: 6.21.1
unicode: 16.0
uv: 1.49.2
uvwasi: 0.0.21
v8: 12.4.254.21-node.22
zlib: 1.3.0.1-motley-82a5fec]
Node.js Version: [v22.14.0]

butterfly我使用的是最新稳定版；
我的_config.yml:# Hexo Configuration

Docs: https://hexo.io/docs/configuration.html

Source: https://github.com/hexojs/hexo/

Site

title: WJY's Site
subtitle: ''
description: ''
keywords:
author: Junyang Wang
language: en
timezone: ''

URL

Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'

url: http://example.com
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

Writing

new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
enable: true # Open external links in new tab
field: site # Apply to the whole site
exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
syntax_highlighter: highlight.js
highlight:
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
preprocess: true
line_number: true
tab_replace: ''

Home page setting

path: Root path for your blogs index page. (default = '')

per_page: Posts displayed per page. (0 = disable pagination)

order_by: Posts order. (Order by date descending by default)

index_generator:
path: ''
per_page: 10
order_by: -date

Category & Tag

default_category: uncategorized
category_map:
tag_map:

Metadata elements

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta

meta_generator: true

Date / Time format

Hexo uses Moment.js to parse and display date

You can customize the date format as defined in

http://momentjs.com/docs/#/displaying/format/

date_format: YYYY-MM-DD
time_format: HH:mm:ss

updated_option supports 'mtime', 'date', 'empty'

updated_option: 'mtime'

Pagination

Set per_page to 0 to disable pagination

per_page: 10
pagination_dir: page

Include / Exclude file(s)

include:/exclude: options only apply to the 'source/' folder

include:
exclude:
ignore:

Extensions

Plugins: https://hexo.io/plugins/

Themes: https://hexo.io/themes/

theme: butterfly

Deployment

Docs: https://hexo.io/docs/one-command-deployment

deploy:
type: ''
我的_config.butterfly.yml：

--------------------------------------

Hexo Butterfly Theme Configuration

If you have any questions, please refer to the documentation

Chinese: https://butterfly.js.org/

English: https://butterfly.js.org/en/

--------------------------------------

Navigation Settings

--------------------------------------

nav:

Navigation bar logo image

logo:
display_title: true

Whether to fix navigation bar

fixed: false

menu:

Home: / || fas fa-home

List||fas fa-list:

Music: /music/ || fas fa-music

Movie: /movies/ || fas fa-video

--------------------------------------

Code Blocks Settings

--------------------------------------

code_blocks:

Code block theme: darker / pale night / light / ocean / false

theme: light
macStyle: false

Code block height limit (unit: px)

height_limit: false
word_wrap: false

Toolbar

copy: true
language: true

true: shrink the code blocks | false: expand the code blocks | none: expand code blocks and hide the button

shrink: false
fullpage: false

Social media links

Formal:

icon: link || the description || color

social:

fab fa-github: https://github.com/xxxxx || Github || '#24292e'

fas fa-envelope: mailto:[email protected] || Email || '#4a7dbe'

--------------------------------------

Image Settings

--------------------------------------

favicon: /img/favicon.png

avatar:
img: /img/butterfly-icon.png
effect: false

Disable all banner images

disable_top_img: false

If the banner of page not setting, it will show the default_top_img

default_top_img:

The banner image of index page

index_img:

The banner image of archive page

archive_img:

Note: tag page, not tags page

tag_img:

The banner image of tag page, you can set the banner image for each tag

Format:

- tag name: xxxxx

tag_per_img:

Note: category page, not categories page

category_img:

The banner image of category page, you can set the banner image for each category

Format:

- category name: xxxxx

category_per_img:

The background image of footer

footer_img: false

Website Background

Can set it to color or image url

background:

cover:

Disable the cover or not

index_enable: true
aside_enable: true
archives_enable: true

When cover is not set, the default cover is displayed

index_img: /img/bg1.png
archive_img: /img/bg2.png
default_cover:
- /img/bg1.png
- /img/bg2.png
# - https://source.unsplash.com/random/1920x1080?nature
# - https://source.unsplash.com/random/1920x1080?technology
# - https://source.unsplash.com/random/1920x1080?minimal

Replace Broken Images

error_img:
flink: /img/friend_404.gif
post_page: /img/404.jpg

A simple 404 page

error_404:
enable: false
subtitle: 'Page Not Found'
background: /img/error-page.png

post_meta:

Home Page

page:
# Choose: created / updated / both
date_type: created
# Choose: date / relative
date_format: date
categories: true
tags: false
label: true
post:
# Choose: left / center
position: left
# Choose: created / updated / both
date_type: both
# Choose: date / relative
date_format: date
categories: true
tags: true
label: true

--------------------------------------

Index page settings

--------------------------------------

The top_img settings of home page

default: top img - full screen, site info - middle

The position of site info, eg: 300px/300em/300rem/10%

index_site_info_top:

The height of top_img, eg: 300px/300em/300rem

index_top_img_height:

The subtitle on homepage

subtitle:
enable: false

Typewriter Effect

effect: true

Customize typed.js

https://github.com/mattboldt/typed.js/#customization

typed_option:

Source - Call the third-party service API (Chinese only)

It will show the source first, then show the content of sub

Choose: false/1/2/3

false - disable the function

1 - hitokoto.cn

2 - https://api.aa1.cn/doc/yiyan.html

3 - jinrishici.com

source: false

If you close the typewriter effect, the subtitle will only show the first line of sub

sub:

Article layout on the homepage

1: Cover on the left, info on the right

2: Cover on the right, info on the left

3: Cover and info alternate between left and right

4: Cover on top, info on the bottom

5: Info displayed on the cover

6: Masonry layout - Cover on top, info on the bottom

7: Masonry layout - Info displayed on the cover

index_layout: 3

Display the article introduction on homepage

1: description

2: both (if the description exists, it will show description, or show the auto_excerpt)

3: auto_excerpt (default)

false: do not show the article introduction

index_post_content:
method: 3

If you set method to 2 or 3, the length need to config

length: 500

--------------------------------------

Post Settings

--------------------------------------

toc:
post: true
page: false
number: true
expand: false

Only for post

style_simple: false
scroll_percent: true

post_copyright:
enable: true
decode: false
author_href:
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

Post edit

Easily browse and edit blog source code online.

post_edit:
enable: false

url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/

For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/

url:

Number of posts displayed

limit: 6

Choose: created / updated

date_type: created

Choose: 1 / 2 / false

1: The 'next post' will link to old post

2: The 'next post' will link to new post

false: disable pagination

post_pagination: 1

Displays outdated notice for a post

noticeOutdate:
enable: false

Style: simple / flat

style: flat

When will it be shown

limit_day: 365

Position: top / bottom

position: top
message_prev: It has been
message_next: days since the last update, the content of the article may be outdated.

--------------------------------------

Footer Settings

--------------------------------------

footer:
owner:
enable: true
since: 2019
custom_text:

Copyright of theme and framework

copyright: true

--------------------------------------

Aside Settings

--------------------------------------

aside:
enable: true
hide: false

Show the button to hide the aside in bottom right button

button: true
mobile: true

Position: left / right

position: right
display:
archive: true
tag: true
category: true
card_author:
enable: true
description:
button:
enable: true
icon: fab fa-github
text: Follow Me
link: https://github.com/xxxxxx
card_announcement:
enable: true
content: This is my Blog
card_recent_post:
enable: true
# If set 0 will show all
limit: 5
# Sort: date / updated
sort: date
sort_order:
card_newest_comments:
enable: false
sort_order:
limit: 6
# Unit: mins, save data to localStorage
storage: 10
avatar: true
card_categories:
enable: true
# If set 0 will show all
limit: 8
# Choose: none / true / false
expand: none
sort_order:
card_tags:
enable: true
# If set 0 will show all
limit: 40
color: false
# Order of tags, random/name/length
orderby: random
# Sort of order. 1, asc for ascending; -1, desc for descending
order: 1
sort_order:
card_archives:
enable: true
# Type: monthly / yearly
type: monthly
# Eg: YYYY年MM月
format: MMMM YYYY
# Sort of order. 1, asc for ascending; -1, desc for descending
order: -1
# If set 0 will show all
limit: 8
sort_order:
card_post_series:
enable: true
# The title shows the series name
series_title: false
# Order by title or date
orderBy: 'date'
# Sort of order. 1, asc for ascending; -1, desc for descending
order: -1
card_webinfo:
enable: true
post_count: true
last_push_date: true
sort_order:
# Time difference between publish date and now
# Formal: Month/Day/Year Time or Year/Month/Day Time
# Leave it empty if you don't enable this feature
runtime_date:

--------------------------------------

Bottom right button

--------------------------------------

The distance between the bottom right button and the bottom (default unit: px)

rightside_bottom:

Conversion between Traditional and Simplified Chinese

translate:
enable: false

The text of a button

default: 繁

the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）

defaultEncoding: 2

Time delay

translateDelay: 0

The text of the button when the language is Simplified Chinese

msgToTraditionalChinese: '繁'

The text of the button when the language is Traditional Chinese

msgToSimplifiedChinese: '簡'

Read Mode

readmode: true

Dark Mode

darkmode:
enable: true

Toggle Button to switch dark/light mode

button: true

Switch dark/light mode automatically

autoChangeMode: 1 Following System Settings, if the system doesn't support dark mode, it will switch dark mode between 6 pm to 6 am

autoChangeMode: 2 Switch dark mode between 6 pm to 6 am

autoChangeMode: false

Set the light mode time. The value is between 0 and 24. If not set, the default value is 6 and 18

start:
end:

Show scroll percent in scroll-to-top button

rightside_scroll_percent: false

Don't modify the following settings unless you know how they work

Choose: readmode,translate,darkmode,hideAside,toc,chat,comment

Don't repeat the same value

rightside_item_order:
enable: false

Default: readmode,translate,darkmode,hideAside

hide:

Default: toc,chat,comment

show:

--------------------------------------

Global Settings

--------------------------------------

anchor:

When you scroll, the URL will update according to header id.

auto_update: false

Click the headline to scroll and update the anchor

click_to_scroll: false

photofigcaption: false

copy:
enable: true

Add the copyright information after copied content

copyright:
enable: false
limit_count: 150

Need to install the hexo-wordcount plugin

wordcount:
enable: false

Display the word count of the article in post meta

post_wordcount: true

Display the time to read the article in post meta

min2read: true

Display the total word count of the website in aside's webinfo

total_wordcount: true

Busuanzi count for PV / UV in site

busuanzi:
site_uv: true
site_pv: true
page_pv: true

--------------------------------------

Math

--------------------------------------

About the per_page

if you set it to true, it will load mathjax/katex script in each page

if you set it to false, it will load mathjax/katex script according to your setting (add the 'mathjax: true' or 'katex: true' in page's front-matter)

math:

Choose: mathjax, katex

Leave it empty if you don't need math

use:
per_page: true
hide_scrollbar: false

mathjax:
# Enable the contextual menu
enableMenu: true
# Choose: all / ams / none, This controls whether equations are numbered and how
tags: none

katex:
# Enable the copy KaTeX formula
copy_tex: false

--------------------------------------

Search

--------------------------------------

search:

Choose: algolia_search / local_search / docsearch

leave it empty if you don't need search

use:
placeholder:

Algolia Search

algolia_search:
# Number of search results per page
hitsPerPage: 6

Local Search

local_search:
# Preload the search data when the page loads.
preload: false
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
CDN:

Docsearch

https://docsearch.algolia.com/

docsearch:
appId:
apiKey:
indexName:
option:

--------------------------------------

Share System

--------------------------------------

share:

Choose: sharejs / addtoany

Leave it empty if you don't need share

use: sharejs

Share.js

https://github.com/overtrue/share.js

sharejs:
sites: facebook,twitter,wechat,weibo,qq

AddToAny

https://www.addtoany.com/

addtoany:
item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link

--------------------------------------

Comments System

--------------------------------------

comments:

Up to two comments system, the first will be shown as default

Leave it empty if you don't need comments

Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk

Format of two comments system : Disqus,Waline

use:

Display the comment name next to the button

text: true

Lazyload: The comment system will be load when comment element enters the browser's viewport.

If you set it to true, the comment count will be invalid

lazyload: false

Display comment count in post's top_img

Display comment count in Home Page

card_post_count: false

Disqus

https://disqus.com/

disqus:
shortname:

For newest comments widget

apikey:

Alternative Disqus - Render comments with Disqus API

https://github.com/SukkaW/DisqusJS

disqusjs:
shortname:
apikey:
option:

Livere

https://www.livere.com/

livere:
uid:

Gitalk

https://github.com/gitalk/gitalk

gitalk:
client_id:
client_secret:
repo:
owner:
admin:
option:

Valine

https://valine.js.org

valine:
appId:
appKey:
avatar: monsterid

This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)

serverURLs:
bg:

Use Valine visitor count as the page view count

visitor: false
option:

Waline - A simple comment system with backend support fork from Valine

https://waline.js.org/

waline:
serverURL:
bg:

Use Waline pageview count as the page view count

pageview: false
option:

Utterances

https://utteranc.es/

utterances:
repo:

Issue Mapping: pathname/url/title/og:title

issue_term: pathname

Theme: github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark

light_theme: github-light
dark_theme: photon-dark
js:
option:

Facebook Comments Plugin

https://developers.facebook.com/docs/plugins/comments/

facebook_comments:
app_id:

optional

user_id:
pageSize: 10

Choose: social / time / reverse_time

order_by: social
lang: en_US

Twikoo

https://github.com/imaegoo/twikoo

twikoo:
envId:
region:

Use Twikoo visitor count as the page view count

visitor: false
option:

Giscus

https://giscus.app/

giscus:
repo:
repo_id:
category_id:
light_theme: light
dark_theme: dark
js:
option:

Remark42

https://remark42.com/docs/configuration/frontend/

remark42:
host:
siteId:
option:

Artalk

https://artalk.js.org/guide/frontend/config.html

artalk:
server:
site:

Use Artalk visitor count as the page view count

visitor: false
option:

--------------------------------------

Chat Services

--------------------------------------

chat:

Choose: chatra/tidio/crisp

Leave it empty if you don't need chat

use:

Chat Button [recommend]

It will create a button in the bottom right corner of website, and hide the origin button

rightside_button: false

The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down

button_hide_show: false

https://chatra.io/

chatra:
id:

https://www.tidio.com/

tidio:
public_key:

https://crisp.chat/en/

crisp:
website_id:

--------------------------------------

Analysis

--------------------------------------

https://tongji.baidu.com/web/welcome/login

baidu_analytics:

https://analytics.google.com/analytics/web/

google_analytics:

https://www.cloudflare.com/zh-tw/web-analytics/

cloudflare_analytics:

https://clarity.microsoft.com/

microsoft_clarity:

https://umami.is/

umami_analytics:
enable: false

For self-hosted setups, configure the hostname of the Umami instance

serverURL:
website_id:
option:
UV_PV:
site_uv: false
site_pv: false
page_pv: false
# Umami Cloud (API key) / self-hosted Umami (token)
token:

--------------------------------------

Google Adsense

google_adsense:
enable: false
auto_ads: true
js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
client:
enable_page_level_ads: true

Insert ads manually

Leave it empty if you don't need ads

ad:

Insert ads in the index (every three posts)

index:

Insert ads in aside

aside:

Insert ads in the post (before pagination)

post:

--------------------------------------

Verification

--------------------------------------

site_verification:

- name: google-site-verification

content: xxxxxx

- name: baidu-site-verification

content: xxxxxxx

--------------------------------------

Beautify / Effect

--------------------------------------

Theme color for customize

Notice: color value must in double quotes like "#000" or may cause error!

theme_color:

enable: true

main: "#49B1F5"

paginator: "#00c4b6"

button_hover: "#FF7242"

text_selection: "#00c4b6"

link_color: "#99a9bf"

meta_color: "#858585"

hr_color: "#A4D8FA"

code_foreground: "#F47466"

code_background: "rgba(27, 31, 35, .05)"

toc_color: "#00c4b6"

blockquote_padding_color: "#49b1f5"

blockquote_background_color: "#49b1f5"

scrollbar_color: "#49b1f5"

meta_theme_color_light: "ffffff"

meta_theme_color_dark: "#0d0d0d"

The user interface setting of category and tag page

Choose: index - same as Homepage UI / default - same as archives UI

leave it empty or index

category_ui:
tag_ui:

Rounded corners for UI elements

rounded_corners_ui: true

Stretches the lines so that each line has equal width

text_align_justify: false

Add a mask to the header and footer

mask:
header: true
footer: true

Loading Animation

preloader:
enable: false

source

1. fullpage-loading

2. pace (progress bar)

source: 1

pace theme (see https://codebyzach.github.io/pace/)

pace_css_url:

Page Transition

enter_transitions: true

Default display mode - light (default) / dark

display_mode: light

Configuration for beautifying the content of the article

beautify:
enable: false

Specify the field to beautify (site or post)

field: post

Specify the icon to be used as a prefix for the title, such as '\f0c1'

title_prefix_icon:

Specify the color of the title prefix icon, such as '#F47466'

title_prefix_icon_color:

Global font settings

Don't modify the following settings unless you know how they work

font:
global_font_size:
code_font_size:
font_family:
code_font_family:

Font settings for the site title and site subtitle

blog_title_font:
font_link:
font_family:

The setting of divider icon

hr_icon:
enable: true

The unicode value of Font Awesome icon, such as '\3423'

icon:
icon_top:

Typewriter Effect

https://github.com/disjukr/activate-power-mode

activate_power_mode:
enable: false
colorful: true
shake: true
mobile: false

Background effects

--------------------------------------

canvas_ribbon

See: https://github.com/hustcc/ribbon.js

canvas_ribbon:
enable: false

The size of ribbon

size: 150

The opacity of ribbon (0 ~ 1)

alpha: 0.6
zIndex: -1
click_to_change: false
mobile: false

Fluttering Ribbon

canvas_fluttering_ribbon:
enable: false
mobile: false

canvas_nest

https://github.com/hustcc/canvas-nest.js

canvas_nest:
enable: false

Color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)

color: '0,0,255'

The opacity of line (0~1)

opacity: 0.7

The z-index property of the background

zIndex: -1

The number of lines

Mouse click effects: fireworks

fireworks:
enable: false
zIndex: 9999
mobile: false

Mouse click effects: Heart symbol

click_heart:
enable: false
mobile: false

Mouse click effects: words

clickShowText:
enable: false
text:
# - I
# - LOVE
# - YOU
fontSize: 15px
random: false
mobile: false

--------------------------------------

Lightbox Settings

--------------------------------------

Choose: fancybox / medium_zoom

https://github.com/francoischalifour/medium-zoom

https://fancyapps.com/fancybox/

Leave it empty if you don't need lightbox

lightbox:

--------------------------------------

Tag Plugins settings

--------------------------------------

Series

series:
enable: false

Order by title or date

orderBy: 'title'

Sort of order. 1, asc for ascending; -1, desc for descending

order: 1
number: true

ABCJS - The ABC Music Notation Plugin

https://github.com/paulrosen/abcjs

abcjs:
enable: false
per_page: true

Mermaid

https://github.com/mermaid-js/mermaid

mermaid:
enable: false

Write Mermaid diagrams using code blocks

code_write: false

built-in themes: default / forest / dark / neutral

theme:
light: default
dark: dark

chartjs

see https://www.chartjs.org/docs/latest/

chartjs:
enable: false

Do not modify unless you understand how they work.

The default settings are only used when the MD syntax is not specified.

General font color for the chart

fontColor:
light: 'rgba(0, 0, 0, 0.8)'
dark: 'rgba(255, 255, 255, 0.8)'

General border color for the chart

borderColor:
light: 'rgba(0, 0, 0, 0.1)'
dark: 'rgba(255, 255, 255, 0.2)'

Background color for scale labels on radar and polar area charts

scale_ticks_backdropColor:
light: 'transparent'
dark: 'transparent'

Note - Bootstrap Callout

note:

Note tag style values:

- simple bs-callout old alert style. Default.

- modern bs-callout new (v2-v3) alert style.

- flat flat callout style with background, like on Mozilla or StackOverflow.

- disabled disable all CSS styles import of note tag.

style: flat
icons: true
border_radius: 3

Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).

Offset also applied to label tag variables. This option can work with disabled note tag.

light_bg_offset: 0

--------------------------------------

Other Settings

--------------------------------------

https://github.com/MoOx/pjax

pjax:
enable: false

Exclude the specified pages from pjax, such as '/music/'

Inject the css and script (aplayer/meting)

aplayerInject:
enable: false
per_page: true

Snackbar - Toast Notification

https://github.com/polonel/SnackBar

position: top-left / top-center / top-right / bottom-left / bottom-center / bottom-right

snackbar:
enable: false
position: bottom-left

The background color of Toast Notification in light mode and dark mode

bg_light: '#49b1f5'
bg_dark: '#1f1f1f'

Instant.page

https://instant.page/

instantpage: false

Lazyload

https://github.com/verlok/vanilla-lazyload

lazyload:
enable: false

Specify the field to use lazyload (site or post)

field: site
placeholder:
blur: false

PWA

See https://github.com/JLHwung/hexo-offline

---------------

pwa:
enable: false
manifest:
apple_touch_icon:
favicon_32_32:
favicon_16_16:
mask_icon:

Open graph meta tags

https://hexo.io/docs/helpers#open-graph

Open_Graph_meta:
enable: true
option:
# twitter_card:
# twitter_image:
# twitter_id:
# twitter_site:
# google_plus:
# fb_admins:
# fb_app_id:

Structured Data

https://developers.google.com/search/docs/guides/intro-structured-data

structured_data: true

Add the vendor prefixes to ensure compatibility

css_prefix: true

Inject

Insert the code to head (before '' tag) and the bottom (before '' tag)

inject:
head:
# -
bottom:
# - <script src="xxxx"></script>

CDN Settings

Don't modify the following settings unless you know how they work

CDN:

The CDN provider for internal and third-party scripts

Options for both: local/jsdelivr/unpkg/cdnjs/custom

Note: Dev version can only use 'local' for internal scripts

Note: When setting third-party scripts to 'local', you need to install hexo-butterfly-extjs

internal_provider: local
third_party_provider: jsdelivr

Add version number to url, true or false

version: false

Custom format

For example: https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}

custom_format:

option:
# abcjs_basic_js:
# activate_power_mode:
# algolia_js:
# algolia_search:
# aplayer_css:
# aplayer_js:
# artalk_css:
# artalk_js:
# blueimp_md5:
# busuanzi:
# canvas_fluttering_ribbon:
# canvas_nest:
# canvas_ribbon:
# chartjs:
# click_heart:
# clickShowText:
# disqusjs:
# disqusjs_css:
# docsearch_css:
# docsearch_js:
# egjs_infinitegrid:
# fancybox:
# fancybox_css:
# fireworks:
# fontawesome:
# gitalk:
# gitalk_css:
# giscus:
# instantpage:
# instantsearch:
# katex:
# katex_copytex:
# lazyload:
# local_search:
# main:
# main_css:
# mathjax:
# medium_zoom:
# mermaid:
# meting_js:
# prismjs_autoloader:
# prismjs_js:
# prismjs_lineNumber_js:
# pjax:
# sharejs:
# sharejs_css:
# snackbar:
# snackbar_css:
# translate:
# twikoo:
# typed:
# utils:
# valine:
# waline_css:
# waline_js:

我已经检查了图片路径、文件名大小写，并且在source/index.md中强制指定了top_img，但问题依旧存在。实在不知道是哪里出了问题，麻烦大佬帮忙看一眼，非常感谢！

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

【Bug】首页封面图不显示，回退到了纯色背景 #1697

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

【Bug】首页封面图不显示，回退到了纯色背景 #1697

Uh oh!

wjydev Jun 29, 2025

Docs: https://hexo.io/docs/configuration.html

Source: https://github.com/hexojs/hexo/

Site

URL

Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'

Directory

Writing

Home page setting

path: Root path for your blogs index page. (default = '')

per_page: Posts displayed per page. (0 = disable pagination)

order_by: Posts order. (Order by date descending by default)

Category & Tag

Metadata elements

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta

Date / Time format

Hexo uses Moment.js to parse and display date

You can customize the date format as defined in

http://momentjs.com/docs/#/displaying/format/

updated_option supports 'mtime', 'date', 'empty'

Pagination

Set per_page to 0 to disable pagination

Include / Exclude file(s)

include:/exclude: options only apply to the 'source/' folder

Extensions

Plugins: https://hexo.io/plugins/

Themes: https://hexo.io/themes/

Deployment

Docs: https://hexo.io/docs/one-command-deployment

--------------------------------------

Hexo Butterfly Theme Configuration

If you have any questions, please refer to the documentation

Chinese: https://butterfly.js.org/

English: https://butterfly.js.org/en/

--------------------------------------

--------------------------------------

Navigation Settings

--------------------------------------

Navigation bar logo image

Whether to fix navigation bar

Home: / || fas fa-home

List||fas fa-list:

Music: /music/ || fas fa-music

Movie: /movies/ || fas fa-video

--------------------------------------

Code Blocks Settings

--------------------------------------

Code block theme: darker / pale night / light / ocean / false

Code block height limit (unit: px)

Toolbar

true: shrink the code blocks | false: expand the code blocks | none: expand code blocks and hide the button

Social media links

Formal:

icon: link || the description || color

fab fa-github: https://github.com/xxxxx || Github || '#24292e'

fas fa-envelope: mailto:[email protected] || Email || '#4a7dbe'

--------------------------------------

Image Settings

--------------------------------------

Disable all banner images

If the banner of page not setting, it will show the default_top_img

The banner image of index page

The banner image of archive page

Note: tag page, not tags page

The banner image of tag page, you can set the banner image for each tag

Format:

- tag name: xxxxx

Note: category page, not categories page

The banner image of category page, you can set the banner image for each category

Format:

- category name: xxxxx

The background image of footer

Website Background

Can set it to color or image url

Disable the cover or not

When cover is not set, the default cover is displayed

Replace Broken Images

wjydev
Jun 29, 2025