Theme Configuration
Configuration File
Convention > Configuration
DANGER
Define the configuration you need in _config.async.yml
, and the rest will automatically use the theme's default configuration.
Unless otherwise specified, the default configuration is in the _config.async.yml
file.
It is best not to change any files of the theme unless you are sure that you have some development capability or that you will not upgrade the theme thereafter.
Language
This theme is available in both Chinese and English, zh-Hans and en.
The language of the site needs to be set itself in
_config.yml
under the Hexo directory.
language: zh-Hans
language: zh-Hans
Personalized language package
Create a new source/_data/languages.yml
in the Hexo working directory. (If the source/_data
directory does not exist, create one.)
With convention over configuration, you only need to customize the languages you want to cover in languages.yml
, and the rest is automatically merged with the theme default configuration. (It also makes it easier to upgrade later.)
For details, see the following example:
See the corresponding language attributes and content languages | hexo-theme-async, covering the corresponding item.
# Language to be covered
en:
site:
title: Site Information
zh-Hans:
site:
title: 本站信息
# You can also extend other languages
# Language to be covered
en:
site:
title: Site Information
zh-Hans:
site:
title: 本站信息
# You can also extend other languages
If only Chinese language is used, all entries except zh-Hans
can be deleted.
Theme mode
default
: Set the theme default modestyle-light
: Light modestyle-dark
: Dark modeauto
: Follow the system selection
switch
: If false, the theme switch button will not appear and only load the default theme mode.
theme:
switch: true
default: style-light
theme:
switch: true
default: style-light
Favicon
Used to configure logo, icon, and PWA installation ICONS.
logo
: Top logodark_logo
: Top logo, displayed in dark modeicon16
:icon 16*16icon32
:icon 32*32appleTouchIcon
: Displays icons when iOS is added to the desktopwebmanifest
: Application manifest filevisibilitychange
: Whether to switch title display when leaving the windowhidden
: Displays the icon when leaving the windowshowText
: Displays text when activating the windowhideText
: Leaves the window to display text
favicon:
logo: favicon-32x32.png
icon16: favicon-16x16.png
icon32: favicon-32x32.png
appleTouchIcon: apple-touch-icon.png
webmanifest: /site.webmanifest
visibilitychange: true
hidden: failure.ico
showText: (/≧▽≦/)咦!又好了!
hideText: (●—●)喔哟,崩溃啦!
favicon:
logo: favicon-32x32.png
icon16: favicon-16x16.png
icon32: favicon-32x32.png
appleTouchIcon: apple-touch-icon.png
webmanifest: /site.webmanifest
visibilitychange: true
hidden: failure.ico
showText: (/≧▽≦/)咦!又好了!
hideText: (●—●)喔哟,崩溃啦!
Plugins
Theme built-in plug-in configuration.
internal_provider
: CDN of the theme JS. This parameter is optionallocal
、unpkg
、jsdelivr
local
: The CDN is not usedunpkg
: Use unpkgjsdelivr
: Use jsdelivr
third_party_provider
: CDN configuration of the three-party plug-in JS, optionalunpkg
、jsdelivr
assets:
internal_provider: local # local | unpkg | jsdelivr
third_party_provider: unpkg # unpkg | jsdelivr
assets:
internal_provider: local # local | unpkg | jsdelivr
third_party_provider: unpkg # unpkg | jsdelivr
In addition to using unpkg, jsdelivr, you can customize other CDN as well.
assets:
third_party_provider: https://npm.elemecdn.com
assets:
third_party_provider: https://npm.elemecdn.com
You can also configure a CDN source for a plug-in.
assets:
internal_provider: local
third_party_provider: unpkg
plugin:
swup: https://npm.elemecdn.com/swup@2.0.19/dist/swup.min.js
assets:
internal_provider: local
third_party_provider: unpkg
plugin:
swup: https://npm.elemecdn.com/swup@2.0.19/dist/swup.min.js
If you want to download a theme locally using a three-party plug-in, you can do so by executing the hexo plugin
command (theme version 2.0.4+ is required). Then modify the configuration:
assets:
third_party_provider: plugins
assets:
third_party_provider: plugins
CDN
Content Delivery Network, unified loading network resources, conducive to improving the loading speed of web pages.
When you need to add third-party plug-ins to personalize your blog, you should prioritize using CDN to load files.
JavaScript resource type description:
head
: Insert into the head, and the other three at the end of the body by default.base
: Load and execute immediately.async
: Load asynchronously and execute immediately after the loading is complete.defer
: Load resources asynchronously, but execute last.
cdn:
css:
js:
head:
base:
async:
defer:
cdn:
css:
js:
head:
base:
async:
defer:
Font Icon
The default for this theme is the Font Awesome 5 icon.
See Default ICONS for a list of supported ICONS by default
If you want to use other icons, just configure your icon in assets.icons
.
type
: Icon typefont
symbol
css
: font-class icon resource url (overrides or removes the built-in Font Awesome 5 icon if it has a value or is empty)js
: Multi-color icon resource url
assets:
icons:
type: font # font symbol
css:
js:
assets:
icons:
type: font # font symbol
css:
js:
iconfont
Under Alibaba, you can customize your own icon set. Good domestic speed. (Recommended) Instructions for use
assets:
icons:
type: font
# Here is the icon link you got from iconfont.
css: //at.alicdn.com/t/font_383361_cfn4m13f4v.css
js:
assets:
icons:
type: font
# Here is the icon link you got from iconfont.
css: //at.alicdn.com/t/font_383361_cfn4m13f4v.css
js:
Multi-color icon use mode:
assets:
icons:
type: symbol
css:
js: //at.alicdn.com/t/font_383361_cfn4m13f4v.js
assets:
icons:
type: symbol
css:
js: //at.alicdn.com/t/font_383361_cfn4m13f4v.js
WARNING
When you overwrite the built-in icon resources, you need to change the fixed ICONS because some fixed icons in the blog UI are used.
Monochrome and multicolor icons can be used together, but the blog UI fixed ICONS can only be used depending on type
.
User info
Basic user information, used for blogger name, profile picture, link exchange rules, site runtime, and so on.
name
: Nickname used for sidebar or other area identificationfirst_name
: Name, used at the top to display the first and last names separatelylast_name
: Surnameemail
: Email addressdomain
: domain nameavatar
: avatardark_avatar
: Avatar, dark theme displaydescribe
: Website IntroductionruleText
: buddy link exchange rulebirthDay
: Blog timing start time v1.1.7 deprecatedcopyrightYear
:Copyright date v1.1.7 deprecated
user:
name: 白云苍狗
first_name: 苍狗
last_name: 白云
email: admin@imalun.com
domain: https://www.imalun.com
avatar: /img/avatar.jpg
describe: 网站简介。
ruleText: 暂不接受个人博客以外的友链申请,确保您的网站内容积极向上,文章至少30篇,原创70%以上,部署HTTPS。
user:
name: 白云苍狗
first_name: 苍狗
last_name: 白云
email: admin@imalun.com
domain: https://www.imalun.com
avatar: /img/avatar.jpg
describe: 网站简介。
ruleText: 暂不接受个人博客以外的友链申请,确保您的网站内容积极向上,文章至少30篇,原创70%以上,部署HTTPS。
Navigation bar
The logo for the top navigation is configured in favicon and the theme toggle button is configured in Theme mode.
title
: Titleurl
: path. If the level-2 menu is set, you can set it to'#'
noswup
: Do not use local refreshtarget
: Link opening mode, which is consistent with the attribute of label achildren
: Secondary menu
top_bars:
- title: home
url: /
children:
- title: archives2
url: /archives2/
- title: archives
url: /archives/
noswup: true
top_bars:
- title: home
url: /
children:
- title: archives2
url: /archives2/
- title: archives
url: /archives/
noswup: true
Sidebar
Social icon
The default built-in Font-Awesome Brand icon can be added according to your needs, and you can get more ICONS by introducing custom icon resources in the header.
name
: Link nameicon
: Icon classurl
: Link
sidebar:
social: # Social Address
- name: github
icon: fab fa-github
url: https://github.com
- name: gitee
icon: iconfont cg-gitee
url: https://gitee.com
sidebar:
social: # Social Address
- name: github
icon: fab fa-github
url: https://github.com
- name: gitee
icon: iconfont cg-gitee
url: https://gitee.com
If you do not want to place any links, simply set the following in the sidebar
:
sidebar:
social:
sidebar:
social:
Typing animation
typedTextPrefix
: indicates a fixed prefixtypedText
: To switch entries for typing effect, multiple entries can be set and switched in order.
sidebar:
typedTextPrefix: I`m
typedText: ["Web Developer"]
sidebar:
typedTextPrefix: I`m
typedText: ["Web Developer"]
Sidebar info
The sidebar information is an array of key-val elements.
sidebar:
info:
- key: address
val: Mars
- key: age
val: 18
sidebar:
info:
- key: address
val: Mars
- key: age
val: 18
Banner
Each page banner can be customized with different background images, slogans, etc. When you need video background, your video format should be MP4, WebM, Ogg, etc.
default
: Default configurationtype
: Banner types img、slideshow、videobgurl
: Background image address, if type is slideshow, must be an array. If type is img, it can be a string or an array. If the array length is 2, it will be switched automatically according to the theme.bannerTitle
: Banner titlebannerText
: Banner descriptionposition
: same as CSS object-positionfit
: Same as CSS object-fit
index
: Home page (property fields remain the same as above)videoUrl
: Video address (available on home page only)
archive
: Category pagelinks
: Friend link pagecomment
: Comment pageabout
About page
banner:
index:
type: img
bgurl: https://pic1.zhimg.com/v2-b3c2c6745b9421a13a3c4706b19223b3_r.jpg?source=1940ef5c
bannerTitle: 树深时见鹿,<br>溪午不闻钟。
bannerText: Hi my new friend!
banner:
index:
type: img
bgurl: https://pic1.zhimg.com/v2-b3c2c6745b9421a13a3c4706b19223b3_r.jpg?source=1940ef5c
bannerTitle: 树深时见鹿,<br>溪午不闻钟。
bannerText: Hi my new friend!
Footer
This configuration was added in v1.1.7+
. In previous versions, it was configured in user info.
Starting year
footer:
copyrightYear: 2020
footer:
copyrightYear: 2020
Powered
Proudly displays the names and versions of the currently used blog framework Hexo and theme Async.
Such as: driven by Hexo v5.4.2 | theme - Async v1.1.7
Let more people know Hexo and the Theme hexo-theme-async, which is good for the open source community further development.
footer:
powered:
enable: true
footer:
powered:
enable: true
Running time
This function is disabled by default.
本博客已萌萌哒地运行 442 天
enable
: Enable the runtimeprefix
: Timing copy, if you need to customize, please override the language file footer.tips, personalized language refer to herestart_time
: Time the start time in any date format supported by the browser
footer:
live_time:
enable: false
prefix: footer.tips
start_time: 04/10/2022 17:00:00
footer:
live_time:
enable: false
prefix: footer.tips
start_time: 04/10/2022 17:00:00
Custom text
custom_text
is a custom footer that can contain HTML. For example, sometimes use other service providers for hosting pages, or some ICP outside of the record information.
footer:
custom_text: Hosted by <a href="https://github.com" rel="noopener" target="_blank">Github Pages</a>
footer:
custom_text: Hosted by <a href="https://github.com" rel="noopener" target="_blank">Github Pages</a>
Article
Here is a collection of articles related to configuration.
Reward
When enabled, a tip button will be displayed at the end of each post
.
enable
: Start tippingcomment
: Show what you want to say under the Tip buttonurl
: Your tip link (When you open the tip link, it automatically redirects to your external link instead of expanding the QR code)methods
: Array, tip method
Reward QR code
name
: Reward namepath
: picture path
Override in _config.async.yml
.
reward:
enable: true
comment: I'm so cute. Please give me money.
methods:
- name: Alipay
path: Qr code address
reward:
enable: true
comment: I'm so cute. Please give me money.
methods:
- name: Alipay
path: Qr code address
You can also set whether to enable tipping separately at the beginning of an article.
reward: true
# reward: false
reward: true
# reward: false
Article toc
Article tocs, which is closed by default. When enabled, the directory is automatically generated based on your Markdown . If you want to close the directory for a specified article, you can configure the current article to close separately on the article page. Refer to here
enable
: Whether to enablelist_number
: Indicates whether to display the numbermax_depth
: Indicates the maximum depth of the TOCmin_depth
: Indicates the minimum depth to generate the TOC
toc:
enable: true
list_number: true
max_depth: 3
min_depth: 1
toc:
enable: true
list_number: true
max_depth: 3
min_depth: 1
图片懒加载
Enabled by default, will add loading="lazy" attribute to Markdown image img.
lazyload:
enable: true
lazyload:
enable: true
Archive page
By default, the archive page timeline card displays the title and summary information. If set to less
, only the title is displayed.
type
: Display mode. This parameter is optionalmore
||less
archive:
type: more # less more
archive:
type: more # less more
Copyright info
Set the sharing copyright of your article
About the license agreement default uses attribution - Non-commercial - Same way Share CC BY-NC-SA 4.0。
license
: set certificate (by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero)language
: set language (deed.zh | deed.en | deed.ja | ...)post
: displayed at the end of each articleclipboard
: Whether to append copyright information to Clipboard when copying articles (default off)
creative_commons:
license: by-nc-sa
language: deed.zh
post: false
clipboard: false
creative_commons:
license: by-nc-sa
language: deed.zh
post: false
clipboard: false
Your
url
is set in_config.yml
under the Hexo working directory. Config | Hexo
# URL
# # If your site is put in a subdirectory, set url as 'https://yoursite.com/child' and root as '/child/'
url: https://www.imalun.com
# URL
# # If your site is put in a subdirectory, set url as 'https://yoursite.com/child' and root as '/child/'
url: https://www.imalun.com
Customize the cover image
When you do not set an article cover image, the theme's built-in cover image is displayed, and you can change the configuration to replace the default behavior.
default
: Indicates the default image displayed on the cover. The type isstring
||array
type
: Cover display type (optional)img
||date
||random
cover:
default: /img/block.jpg
type: img
cover:
default: /img/block.jpg
type: img
Upper and lower articles
enable
: Whether to enabletype
: Card type, optionallarge
||small
post_pagination:
enable: true
type: large # large || small
post_pagination:
enable: true
type: large # large || small
Article expiration reminder
You can add expiration reminders to articles.
enable
: Whether to enable it. It is disabled by defaultstyle
: Card type, optionalsimple
||flat
limit_day
: How many days have passed without updating alertsposition
: Displayed in the article location, optionaltop
||bottom
notice_outdate:
enable: true
style: flat
limit_day: 365
position: top
notice_outdate:
enable: true
style: flat
limit_day: 365
position: top
The article is broken when the default picture
You can add pictures to display default pictures when loading fails.
flink
: The default picture is displayed when the friend's profile picture is brokenpost_page
: The default picture is displayed when the picture in the article is broken
error_img:
flink: /img/friend_404.gif
post_page: /img/404.jpg
error_img:
flink: /img/friend_404.gif
post_page: /img/404.jpg
Other config
Here is a collection of miscellaneous configurations on the page.
Categorie card
The category card displayed on the home page.
By default, the two most articles in the category are displayed, and you can change the configuration to replace the default behavior.
enable
: Whether to enablelen
: Indicates the number of categories to be displayed. The default value is 2list
: If you need fixed display categories, you can configure them through this field
categorie_card:
enable: true
len: 2
list: ["Category 1", "Category 2"]
categorie_card:
enable: true
len: 2
list: ["Category 1", "Category 2"]
Fixed button block
Lower right corner suspension button block.
readmode
: Read Mode buttonaside
: Single or double column switch button
rightside:
readmode: true
aside: false
rightside:
readmode: true
aside: false
Date Format
Used to configure the format of the date used in the theme.
post_card
:Format of the article cardpost_info
: Format in the detail page of the articlearchive
: Format of the archive category page
datetime_foramt:
post_card:
date: YY/MM/DD
time: HH:mm
post_info:
date: MM/DD
time: HH:mm
archive:
date: MM/DD
time: HH:mm
datetime_foramt:
post_card:
date: YY/MM/DD
time: HH:mm
post_info:
date: MM/DD
time: HH:mm
archive:
date: MM/DD
time: HH:mm
Code Highlight
All features in the code block apply only to the code render that comes with Hexo, and may not work if a third party renderer is used
theme
:Whether to use built-in code to highlight the color schemetitle
:block title style,mac
、default
copy
:Specifies whether one-click replication is enabled. This parameter is enabled by defaultlang
:Whether to display the code block language. It is displayed by defaultcode_word_wrap
:Whether to force newlines. This parameter is disabled by default. After this parameter is enabled, the code line number must be disabledheight_limit
:Sets the code block height
highlight:
theme: true
title: default
copy: true
lang: true
code_word_wrap: fasle
height_limit: 200 # When exceeded, the fold button is displayed
highlight:
theme: true
title: default
copy: true
lang: true
code_word_wrap: fasle
height_limit: 200 # When exceeded, the fold button is displayed
Override the default color with CSS variables
:root {
/* Block background color, foreground color */
--highlight-background: #f6f8fa;
--highlight-foreground: #4d5a60;
/* Line number */
--highlight-gutter-color: #90a4ae;
--highlight-gutter-bg-color: #f1f1f1;
/* Toolbar */
--highlight-tools-color: #646464;
--highlight-tools-bg-color: #e6ebf1;
/* Scroll bar */
--highlight-scrollbar: #d7d7d7;
/* Code */
--highlight-addition: #e32323;
--highlight-deletion: #bf42bf;
--highlight-comment: rgba(149, 165, 166, 0.8);
--highlight-yellow: #ffb62c;
--highlight-purple: #7c4dff;
--highlight-aqua: #39adb5;
--highlight-red: #e53935;
--highlight-orange: #f76d47;
--highlight-green: #91b859;
--highlight-blue: #6182b8;
}
:root {
/* Block background color, foreground color */
--highlight-background: #f6f8fa;
--highlight-foreground: #4d5a60;
/* Line number */
--highlight-gutter-color: #90a4ae;
--highlight-gutter-bg-color: #f1f1f1;
/* Toolbar */
--highlight-tools-color: #646464;
--highlight-tools-bg-color: #e6ebf1;
/* Scroll bar */
--highlight-scrollbar: #d7d7d7;
/* Code */
--highlight-addition: #e32323;
--highlight-deletion: #bf42bf;
--highlight-comment: rgba(149, 165, 166, 0.8);
--highlight-yellow: #ffb62c;
--highlight-purple: #7c4dff;
--highlight-aqua: #39adb5;
--highlight-red: #e53935;
--highlight-orange: #f76d47;
--highlight-green: #91b859;
--highlight-blue: #6182b8;
}
You can also use theme: false
and then introduce highlight.js
and PrismJS
theme files that come from defining code blocks to highlight.
highlight:
theme: false
highlight:
theme: false
Custom Icon
There are some fixed icons in the blog, such as theme switching icon, category icon and so on.
You can change this by configuring icons
:
icons:
# Theme switch icon
sun: far fa-sun
moon: far fa-moon
# Home video play
play: fas fa-play
# Email
email: far fa-envelope
# Category entry icon
next: fas fa-arrow-right
# Article details date
calendar: far fa-calendar-alt
# Article details time
clock: far fa-clock
Article details author
user: far fa-user
# Return to top v1.1.3+
back_top: fas fa-arrow-up
Query v1.1.5+
search: fas fa-search
# Disable v1.1.5+
close: fas fa-times
# Tip v1.1.7+
reward: fas fa-hand-holding-usd
# User Info and article directory switch v1.2.10+
user_tag: fas fa-user-alt
toc_tag: fas fa-th-list
# Lower right corner fixed button v1.2.11+
read: fas fa-book-reader
arrows: fas fa-arrows-alt-h
icons:
# Theme switch icon
sun: far fa-sun
moon: far fa-moon
# Home video play
play: fas fa-play
# Email
email: far fa-envelope
# Category entry icon
next: fas fa-arrow-right
# Article details date
calendar: far fa-calendar-alt
# Article details time
clock: far fa-clock
Article details author
user: far fa-user
# Return to top v1.1.3+
back_top: fas fa-arrow-up
Query v1.1.5+
search: fas fa-search
# Disable v1.1.5+
close: fas fa-times
# Tip v1.1.7+
reward: fas fa-hand-holding-usd
# User Info and article directory switch v1.2.10+
user_tag: fas fa-user-alt
toc_tag: fas fa-th-list
# Lower right corner fixed button v1.2.11+
read: fas fa-book-reader
arrows: fas fa-arrows-alt-h
Custom Style
Instead of the head
import, you can write less
files directly and use the variables that the theme already has, which will be compiled with the theme style files.
DANGER
In 1.2.x +
, the implementation method of theme switching was changed from multiple style files to CSS variable form. So custom styles have changed a little bit.
1.2.x
version
- Newly built
source/_data/style/index.less
to start writing your custom styles.
┌── blog
│ └── source
│ └── _data
│ └── style
│ ├── index.less
│ └── themes
┌── blog
│ └── source
│ └── _data
│ └── style
│ ├── index.less
│ └── themes
White theme under :root
, dark theme under :root.dart
,
Example of modifying the theme color:
.var-primary(@primary: #afb42b; @primary-weak: #c0ca33) {
--primary: @primary;
--primary-70: fade(@primary, 70%);
--primary-50: fade(@primary, 50%);
--primary-30: fade(@primary, 30%);
--primary-weak: @primary-weak;
--primary-weak-50: fade(@primary-weak, 50%);
}
:root {
.var-primary(#5a5df0, #697be2);
&.dark {
.var-primary(#a4ce60, #82df7a);
}
}
.var-primary(@primary: #afb42b; @primary-weak: #c0ca33) {
--primary: @primary;
--primary-70: fade(@primary, 70%);
--primary-50: fade(@primary, 50%);
--primary-30: fade(@primary, 30%);
--primary-weak: @primary-weak;
--primary-weak-50: fade(@primary-weak, 50%);
}
:root {
.var-primary(#5a5df0, #697be2);
&.dark {
.var-primary(#a4ce60, #82df7a);
}
}
Follow the operating system to select a theme example:
@media (prefers-color-scheme: dark) {
:root {
.dark();
}
}
@media (prefers-color-scheme: dark) {
:root {
.dark();
}
}
1.1.x
version
- Newly built
source/_data/style/dark.less
,source/_data/style/light.less
To start writing your custom styles. They will merge todark,lightGo between the two modes. - You can add variables if you need to override them
source/_data/style/dark.variables.less
,source/_data/style/light.variables.less
, overwrite.
┌── blog
│ └── source
│ └── _data
│ └── style
│ ├── dark.less
│ ├── light.less
│ ├── dark.variables.less
│ └── light.variables.less
│ └── themes
┌── blog
│ └── source
│ └── _data
│ └── style
│ ├── dark.less
│ ├── light.less
│ ├── dark.variables.less
│ └── light.variables.less
│ └── themes
Example of modifying the theme color:
// source/_data/style/dark.less
@primary: #6062ce;
@primary-weak: #7a89df;
// source/_data/style/dark.less
@primary: #6062ce;
@primary-weak: #7a89df;
// source/_data/style/light.less
@primary: #6062ce;
@primary-weak: #7a89df;
// source/_data/style/light.less
@primary: #6062ce;
@primary-weak: #7a89df;
Customize the template Layout
Themes allow you to customize templates to replace theme templates. This feature requires your version v2.0.0+
.
path
: Specify the custom template directory (not modified by default)
layout:
path: layout
layout:
path: layout
List of built-in templates:
layout:
path: layout
# Overall layout structure template
main: _partial/main
# Top menu bar template
header: _partial/header
# Top banner template
banner: _partial/banner
# Sidebar template
sidebar: _partial/sidebar/index
# Footer template
footer: _partial/footer
# Article information template
post_info: _partial/post/post-info
# Article content template
post_content: _partial/post/post-content
# Tip template in article information
reward: _partial/post/reward
# Copyright information template for article details
post_copyright: _partial/post/post-copyright
# Template for each article
post_next_prev: _partial/post/post-next-prev
# Article card information template
post_card: _partial/post/post-card
# Article card information template
post_card_mini: _partial/post/post-card-mini
# Top Menu -logo section
header_logo: _widget/header_logo
# Top Menu - Menu section
header_menu: _widget/header_menu
# Top Menu - Theme switching section
header_theme: _widget/header_theme
# Top Menu - Query section
header_search: _widget/header_search
# Sort card template
categorie: _widget/categorie
# Paging template
paginator: _widget/paginator
# Return to top template
back_to_top: _widget/back-to-top
# Fixed button template
fixed_btn: _widget/fixed-btn
# Sidebar
sidebar_user: _partial/sidebar/card/user
sidebar_social: _partial/sidebar/card/social
sidebar_info: _partial/sidebar/card/info
sidebar_email: _partial/sidebar/card/email
# Comment plugin template
comment: _third-party/comment/index
# Page switch animation template
page_loading: _partial/preloader/page-preloader
# Theme switch animation template
mode_change: _partial/preloader/change-mode-preloader
# Built-in several page templates
page_about: _partial/page/about
page_archive: _partial/page/archive
page_category: _partial/page/category
page_index: _partial/page/index
page_links: _partial/page/links
page_post: _partial/page/post
page_tag: _partial/page/tag
layout:
path: layout
# Overall layout structure template
main: _partial/main
# Top menu bar template
header: _partial/header
# Top banner template
banner: _partial/banner
# Sidebar template
sidebar: _partial/sidebar/index
# Footer template
footer: _partial/footer
# Article information template
post_info: _partial/post/post-info
# Article content template
post_content: _partial/post/post-content
# Tip template in article information
reward: _partial/post/reward
# Copyright information template for article details
post_copyright: _partial/post/post-copyright
# Template for each article
post_next_prev: _partial/post/post-next-prev
# Article card information template
post_card: _partial/post/post-card
# Article card information template
post_card_mini: _partial/post/post-card-mini
# Top Menu -logo section
header_logo: _widget/header_logo
# Top Menu - Menu section
header_menu: _widget/header_menu
# Top Menu - Theme switching section
header_theme: _widget/header_theme
# Top Menu - Query section
header_search: _widget/header_search
# Sort card template
categorie: _widget/categorie
# Paging template
paginator: _widget/paginator
# Return to top template
back_to_top: _widget/back-to-top
# Fixed button template
fixed_btn: _widget/fixed-btn
# Sidebar
sidebar_user: _partial/sidebar/card/user
sidebar_social: _partial/sidebar/card/social
sidebar_info: _partial/sidebar/card/info
sidebar_email: _partial/sidebar/card/email
# Comment plugin template
comment: _third-party/comment/index
# Page switch animation template
page_loading: _partial/preloader/page-preloader
# Theme switch animation template
mode_change: _partial/preloader/change-mode-preloader
# Built-in several page templates
page_about: _partial/page/about
page_archive: _partial/page/archive
page_category: _partial/page/category
page_index: _partial/page/index
page_links: _partial/page/links
page_post: _partial/page/post
page_tag: _partial/page/tag
An example would be overriding footer:
Without changing layout.path
, you have the following directory structure and add footer.ejs
┌── blog
│ └── layout
│ └── footer.ejs
│ └── scaffolds
│ └── source
│ └── themes
┌── blog
│ └── layout
│ └── footer.ejs
│ └── scaffolds
│ └── source
│ └── themes
After writing footer.ejs
, modify the configuration as follows:
directory is layout/footer.ejs
is async/footer.ejs
,directory is layout/demo/footer.ejs
is async/demo/footer
.
Must have async/
as the root (to avoid conflicts with the theme).
layout:
footer: async/footer
layout:
footer: async/footer
You can go to the demo site to see the effect, home page footer and page switching is a custom effect.
TIP
You can access all configurations, global variables, and helper functions in footer.ejs
, just like the theme template.
In addition to using ejs
, you can use any renderer supported by hexo.
For example, with pug, you only need to install hexo-render-pug
to use it.
PWA
To start PWA, you only need to set sw to true. Server Worker related operations have been added in this topic.
sw: true
sw: true
WARNING
Use PWA requirements
- The site must be HTTPS.
- Add a manifest file directly in
source
New.
Manifest file structure
{
"name": "白云苍狗",
"short_name": "白云苍狗",
"description": "描述",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
// ...
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#fff",
"background_color": "#fff",
"display": "standalone",
"start_url": "/"
}
{
"name": "白云苍狗",
"short_name": "白云苍狗",
"description": "描述",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
// ...
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#fff",
"background_color": "#fff",
"display": "standalone",
"start_url": "/"
}
More configuration
You can directly see _config.yml | hexo-theme-async file and related comments.
# Open Graph protocol
open_graph: true
# User info
user:
name: ThemeAsync
first_name: Theme
last_name: Async
email:
domain: 站点域名
avatar: /img/avatar.jpg
describe: 网站简介。
ruleText: 暂不接受个人博客以外的友链申请,确保您的网站内容积极向上,文章至少30篇,原创70%以上,部署HTTPS。
# Configure the icon information of the site
favicon:
logo: /img/favicon.svg
icon16: /img/favicon.svg
icon32: /img/favicon.svg
appleTouchIcon:
webmanifest:
visibilitychange: false
hidden: /failure.ico # Displays an icon when not visible
showText: favicon.showText
hideText: favicon.hideText
# Theme resource files or plug-ins
assets:
# The cdn configuration of the js inside the theme
internal_provider: local
# cdn configuration of third-party js
third_party_provider: unpkg
# The plug-in used by the theme
plugin:
hexo_theme_async:
rowcss: css/plugins/bootstrap.row.css
typing: js/plugins/typing.js
search: js/plugins/local_search.js
main: js/main.js
# Icon configuration
icons:
type: font # font symbol
css: css/plugins/font-awesome.min.css
js:
# CDN User - defined plug-in
cdn:
css:
js:
head:
base:
async:
defer:
# The icon used by the theme
icons:
# Theme switch icon
sun: far fa-sun
moon: far fa-moon
# Home video play
play: fas fa-play
# email icon
email: far fa-envelope
# Category entry icon
next: fas fa-arrow-right
# Date of article details
calendar: far fa-calendar-alt
# Article details time
clock: far fa-clock
# Author of article details
user: far fa-user
# Return to the top icon
back_top: fas fa-arrow-up
# close icon
close: fas fa-times
# search icon
search: fas fa-search
# reward icon
reward: fas fa-hand-holding-usd
# User information and article directory switch
user_tag: fas fa-user-alt
toc_tag: fas fa-th-list
# Secure the button in the lower right corner
read: fas fa-book-reader
arrows: fas fa-arrows-alt-h
# Code highlight fold icon
double_arrows: fas fa-angle-double-down
# Code copy icon
copy: fas fa-copy
# Top navigation menu
top_bars:
- title: menu.home
url: /
- title: menu.archives
url: /archives/
# Banner settings
banner:
use_cover: false
default:
type: img
bgurl: /img/banner.png
bannerText: Hi my new friend!
position: top
fit: cover
index:
bannerTitle: 树深时见鹿,<br>溪午不闻钟。
bannerText: Hi my new friend!
videoUrl:
archive:
bannerTitle: 云间连下榻,<br>天上接行杯。
bannerText: The article archive
links:
bannerTitle: 莫愁前路无知己,<br>天下谁人不识君。
bannerText: A link to a friend's website
comment:
bannerTitle: 醉后不知天在水,<br>满船清梦压星河。
bannerText: The magic tree hole
about:
bannerTitle: 醉后不知天在水,<br>满船清梦压星河。
bannerText: About me
# Sidebar settings
sidebar:
typedTextPrefix: I`m
typedText:
info:
- key: sidebar.residence
val: Mars
social:
- name: Github
icon: fab fa-github
url: https://github.com
# About page settings
about:
insert: none # before | after | none
title: 如果一切都是镜花水月,那就让这万物走向终结。如果一切皆是命中注定,那就让这世界消失殆尽。
introduction: 大家好,我是 <strong>Async</strong>,很高兴您能在浩瀚如烟的互联网世界里发现这个博客,更感谢您能够饶有兴致地浏览这个页面。建立这个 Blog 是出于兴趣爱好,我将在此分会分享一些学习笔记,可能还会分享少许图片、视频以及其他有趣东西的链接。
blog:
<ul class="trm-list">
<li>程序:Hexo </li>
<li>主题:Hexo-theme-async </li>
</ul>
privacy:
本网站不会追踪访客行为,且不要求访客提供任何敏感信息(比如真实姓名、身份证号码、手机号等),因而也不存在任何隐私泄漏问题。访客参与评论,必须遵守法律法规和基本道德规范,文明礼貌。严禁发布任何有关淫秽、反动、暴力、博彩、恐吓、低俗的内容或违法信息,在尊重言论自由的同时请保持和平与理性。请勿对他人采取不友好的评论或其它过激行为。
# Footer settings
footer:
# Hexo link (Powered by Hexo).
powered:
enable: true
# Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.
# https://beian.miit.gov.cn/
beian:
enable: false
icp:
# Copyright date
copyrightYear:
#
live_time:
enable: false
prefix: footer.tips
start_time: 04/10/2022 17:00:00
#
custom_text:
# Here is a collection of articles related to configuration.
#### Article configuration start ###
# Reward (Donate)
# If enable true, reward would be displayed in every posts and pages by default.
# You can show or hide reward in a specific page throuth `reward: true | false` in Front Matter.
reward:
enable: false
comment: reward.comment
# url:
methods:
# Article table of contents
toc:
enable: false
list_number: true
post_title: true
max_depth: 3
min_depth: 1
# Archive page
archive:
type: more # less more
# Creative Commons 4.0 International License.
# https://creativecommons.org/licenses/
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license.
# CC licenses are available in 39 languages, where you can find the specific and correct abbreviation you need.
# Valid values of language: deed.zh, deed.en, deed.ja, etc.
creative_commons:
license: by-nc-sa
language: deed.zh
post: false
clipboard: false
# Customize the cover image
cover:
default: /img/block.jpg
type: img # img || date || random
# The previous and the next article
post_pagination:
enable: true
type: large # large || small
# img loading="lazy"
lazyload:
enable: true
# Displays outdated notice for a post (文章过期提醒)
notice_outdate:
enable: false
style: flat # style: simple/flat
limit_day: 365 # When will it be shown
position: top # position: top/bottom
#### Article configuration end ###
# Page Visit Statistics
webAnalytics:
enable: false
baidu: # Baidu key
google: # Tracking ID for Google statistics
tencent: # Tencent statistics
sid:
cid:
# comment
comment:
bComments:
enable: false
env: # 腾讯云环境id
twikoo:
enable: false
envId: # 腾讯云环境id
# region: # 环境地域,默认为 ap-shanghai,如果您的环境地域不是上海,需传此参数
# option: # 用于区分不同文章的自定义 js 路径,如果您的文章路径不是 location.pathname,需传此参数
giscus:
enable: false
repo:
repo-id:
category:
category-id:
mapping: pathname
reactions-enabled: 1
emit-metadata: 0
lang: zh-CN
theme:
light: light
dark: transparent_dark
# Theme mode
theme:
switch: true
default: style-light # style-light style-dark
# Service Worker
sw: false
# Post wordcount
# https://github.com/willin/hexo-wordcount
wordcount:
enable: false
count: true
time: true
# That is it only render those page which has `katex: true` in Front-matter.
# math fomula
# https://katex.org/
katex:
copy_tex: true
global: false
# Options are for katex rendering options: https://katex.org/docs/options.html
# In page katex options are also possible and will be merged
options: {}
# Blog search
search:
enable: false
type: engine #local engine
href: 'https://www.google.com/search?q=site:'
# href: "https://www.baidu.com/s?wd=site:"
# href: "https://www.bing.com/search?q=site:"
domain:
# Think of swup as being pjax on steroids. The concepts are similar to those used in barba.js or other transition libraries.
# https://swup.js.org/
# Whether swup is enabled
swup: false
# Datetime formatting
datetime_foramt:
post_card:
type: date # date || updated
date: YY/MM/DD
time: HH:mm
cover_date: DD
cover_date2: YYYY/MM
post_info:
type: date
date: MM/DD
time: HH:mm
archive:
type: date
date: MM/DD
time: HH:mm
# Home page category card configuration
categorie_card:
enable: true
len: 2
list:
# Lower right button
rightside:
readmode: true
aside: false
# Replace Broken Images
error_img:
flink: /img/friend_404.gif
post_page: /img/404.jpg
# Code highlighting configuration
highlight:
theme: true #
title: default # mac | default
copy: true # copy button
lang: true # show the code language
code_word_wrap: fasle #
height_limit: false # unit: px
# Customize the template path
layout:
path: layout
# layout
main: _partial/main
header: _partial/header
banner: _partial/banner
sidebar: _partial/sidebar/index
footer: _partial/footer
# post
post_info: _partial/post/post-info
post_content: _partial/post/post-content
reward: _partial/post/reward
post_copyright: _partial/post/post-copyright
post_next_prev: _partial/post/post-next-prev
post_card: _partial/post/post-card
post_card_mini: _partial/post/post-card-mini
# widget
header_logo: _widget/header-logo
header_menu: _widget/header-menu
header_theme: _widget/header-theme
header_search: _widget/header-search
categorie: _widget/categorie
paginator: _widget/paginator
fixed_btn: _widget/fixed-btn
post_toc: _widget/post-toc
about_card: _widget/about-card
sidebar_user: _partial/sidebar/card/user
sidebar_social: _partial/sidebar/card/social
sidebar_info: _partial/sidebar/card/info
sidebar_email: _partial/sidebar/card/email
# third-party
comment: _third-party/comment/index
analytics: _third-party/web-analytics
# animation
page_loading: _partial/preloader/page-preloader
mode_change: _partial/preloader/change-mode-preloader
# page
page_about: _partial/page/about
page_archive: _partial/page/archive
page_category: _partial/page/category
page_index: _partial/page/index
page_links: _partial/page/links
page_post: _partial/page/post
page_tag: _partial/page/tag
# Open Graph protocol
open_graph: true
# User info
user:
name: ThemeAsync
first_name: Theme
last_name: Async
email:
domain: 站点域名
avatar: /img/avatar.jpg
describe: 网站简介。
ruleText: 暂不接受个人博客以外的友链申请,确保您的网站内容积极向上,文章至少30篇,原创70%以上,部署HTTPS。
# Configure the icon information of the site
favicon:
logo: /img/favicon.svg
icon16: /img/favicon.svg
icon32: /img/favicon.svg
appleTouchIcon:
webmanifest:
visibilitychange: false
hidden: /failure.ico # Displays an icon when not visible
showText: favicon.showText
hideText: favicon.hideText
# Theme resource files or plug-ins
assets:
# The cdn configuration of the js inside the theme
internal_provider: local
# cdn configuration of third-party js
third_party_provider: unpkg
# The plug-in used by the theme
plugin:
hexo_theme_async:
rowcss: css/plugins/bootstrap.row.css
typing: js/plugins/typing.js
search: js/plugins/local_search.js
main: js/main.js
# Icon configuration
icons:
type: font # font symbol
css: css/plugins/font-awesome.min.css
js:
# CDN User - defined plug-in
cdn:
css:
js:
head:
base:
async:
defer:
# The icon used by the theme
icons:
# Theme switch icon
sun: far fa-sun
moon: far fa-moon
# Home video play
play: fas fa-play
# email icon
email: far fa-envelope
# Category entry icon
next: fas fa-arrow-right
# Date of article details
calendar: far fa-calendar-alt
# Article details time
clock: far fa-clock
# Author of article details
user: far fa-user
# Return to the top icon
back_top: fas fa-arrow-up
# close icon
close: fas fa-times
# search icon
search: fas fa-search
# reward icon
reward: fas fa-hand-holding-usd
# User information and article directory switch
user_tag: fas fa-user-alt
toc_tag: fas fa-th-list
# Secure the button in the lower right corner
read: fas fa-book-reader
arrows: fas fa-arrows-alt-h
# Code highlight fold icon
double_arrows: fas fa-angle-double-down
# Code copy icon
copy: fas fa-copy
# Top navigation menu
top_bars:
- title: menu.home
url: /
- title: menu.archives
url: /archives/
# Banner settings
banner:
use_cover: false
default:
type: img
bgurl: /img/banner.png
bannerText: Hi my new friend!
position: top
fit: cover
index:
bannerTitle: 树深时见鹿,<br>溪午不闻钟。
bannerText: Hi my new friend!
videoUrl:
archive:
bannerTitle: 云间连下榻,<br>天上接行杯。
bannerText: The article archive
links:
bannerTitle: 莫愁前路无知己,<br>天下谁人不识君。
bannerText: A link to a friend's website
comment:
bannerTitle: 醉后不知天在水,<br>满船清梦压星河。
bannerText: The magic tree hole
about:
bannerTitle: 醉后不知天在水,<br>满船清梦压星河。
bannerText: About me
# Sidebar settings
sidebar:
typedTextPrefix: I`m
typedText:
info:
- key: sidebar.residence
val: Mars
social:
- name: Github
icon: fab fa-github
url: https://github.com
# About page settings
about:
insert: none # before | after | none
title: 如果一切都是镜花水月,那就让这万物走向终结。如果一切皆是命中注定,那就让这世界消失殆尽。
introduction: 大家好,我是 <strong>Async</strong>,很高兴您能在浩瀚如烟的互联网世界里发现这个博客,更感谢您能够饶有兴致地浏览这个页面。建立这个 Blog 是出于兴趣爱好,我将在此分会分享一些学习笔记,可能还会分享少许图片、视频以及其他有趣东西的链接。
blog:
<ul class="trm-list">
<li>程序:Hexo </li>
<li>主题:Hexo-theme-async </li>
</ul>
privacy:
本网站不会追踪访客行为,且不要求访客提供任何敏感信息(比如真实姓名、身份证号码、手机号等),因而也不存在任何隐私泄漏问题。访客参与评论,必须遵守法律法规和基本道德规范,文明礼貌。严禁发布任何有关淫秽、反动、暴力、博彩、恐吓、低俗的内容或违法信息,在尊重言论自由的同时请保持和平与理性。请勿对他人采取不友好的评论或其它过激行为。
# Footer settings
footer:
# Hexo link (Powered by Hexo).
powered:
enable: true
# Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.
# https://beian.miit.gov.cn/
beian:
enable: false
icp:
# Copyright date
copyrightYear:
#
live_time:
enable: false
prefix: footer.tips
start_time: 04/10/2022 17:00:00
#
custom_text:
# Here is a collection of articles related to configuration.
#### Article configuration start ###
# Reward (Donate)
# If enable true, reward would be displayed in every posts and pages by default.
# You can show or hide reward in a specific page throuth `reward: true | false` in Front Matter.
reward:
enable: false
comment: reward.comment
# url:
methods:
# Article table of contents
toc:
enable: false
list_number: true
post_title: true
max_depth: 3
min_depth: 1
# Archive page
archive:
type: more # less more
# Creative Commons 4.0 International License.
# https://creativecommons.org/licenses/
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license.
# CC licenses are available in 39 languages, where you can find the specific and correct abbreviation you need.
# Valid values of language: deed.zh, deed.en, deed.ja, etc.
creative_commons:
license: by-nc-sa
language: deed.zh
post: false
clipboard: false
# Customize the cover image
cover:
default: /img/block.jpg
type: img # img || date || random
# The previous and the next article
post_pagination:
enable: true
type: large # large || small
# img loading="lazy"
lazyload:
enable: true
# Displays outdated notice for a post (文章过期提醒)
notice_outdate:
enable: false
style: flat # style: simple/flat
limit_day: 365 # When will it be shown
position: top # position: top/bottom
#### Article configuration end ###
# Page Visit Statistics
webAnalytics:
enable: false
baidu: # Baidu key
google: # Tracking ID for Google statistics
tencent: # Tencent statistics
sid:
cid:
# comment
comment:
bComments:
enable: false
env: # 腾讯云环境id
twikoo:
enable: false
envId: # 腾讯云环境id
# region: # 环境地域,默认为 ap-shanghai,如果您的环境地域不是上海,需传此参数
# option: # 用于区分不同文章的自定义 js 路径,如果您的文章路径不是 location.pathname,需传此参数
giscus:
enable: false
repo:
repo-id:
category:
category-id:
mapping: pathname
reactions-enabled: 1
emit-metadata: 0
lang: zh-CN
theme:
light: light
dark: transparent_dark
# Theme mode
theme:
switch: true
default: style-light # style-light style-dark
# Service Worker
sw: false
# Post wordcount
# https://github.com/willin/hexo-wordcount
wordcount:
enable: false
count: true
time: true
# That is it only render those page which has `katex: true` in Front-matter.
# math fomula
# https://katex.org/
katex:
copy_tex: true
global: false
# Options are for katex rendering options: https://katex.org/docs/options.html
# In page katex options are also possible and will be merged
options: {}
# Blog search
search:
enable: false
type: engine #local engine
href: 'https://www.google.com/search?q=site:'
# href: "https://www.baidu.com/s?wd=site:"
# href: "https://www.bing.com/search?q=site:"
domain:
# Think of swup as being pjax on steroids. The concepts are similar to those used in barba.js or other transition libraries.
# https://swup.js.org/
# Whether swup is enabled
swup: false
# Datetime formatting
datetime_foramt:
post_card:
type: date # date || updated
date: YY/MM/DD
time: HH:mm
cover_date: DD
cover_date2: YYYY/MM
post_info:
type: date
date: MM/DD
time: HH:mm
archive:
type: date
date: MM/DD
time: HH:mm
# Home page category card configuration
categorie_card:
enable: true
len: 2
list:
# Lower right button
rightside:
readmode: true
aside: false
# Replace Broken Images
error_img:
flink: /img/friend_404.gif
post_page: /img/404.jpg
# Code highlighting configuration
highlight:
theme: true #
title: default # mac | default
copy: true # copy button
lang: true # show the code language
code_word_wrap: fasle #
height_limit: false # unit: px
# Customize the template path
layout:
path: layout
# layout
main: _partial/main
header: _partial/header
banner: _partial/banner
sidebar: _partial/sidebar/index
footer: _partial/footer
# post
post_info: _partial/post/post-info
post_content: _partial/post/post-content
reward: _partial/post/reward
post_copyright: _partial/post/post-copyright
post_next_prev: _partial/post/post-next-prev
post_card: _partial/post/post-card
post_card_mini: _partial/post/post-card-mini
# widget
header_logo: _widget/header-logo
header_menu: _widget/header-menu
header_theme: _widget/header-theme
header_search: _widget/header-search
categorie: _widget/categorie
paginator: _widget/paginator
fixed_btn: _widget/fixed-btn
post_toc: _widget/post-toc
about_card: _widget/about-card
sidebar_user: _partial/sidebar/card/user
sidebar_social: _partial/sidebar/card/social
sidebar_info: _partial/sidebar/card/info
sidebar_email: _partial/sidebar/card/email
# third-party
comment: _third-party/comment/index
analytics: _third-party/web-analytics
# animation
page_loading: _partial/preloader/page-preloader
mode_change: _partial/preloader/change-mode-preloader
# page
page_about: _partial/page/about
page_archive: _partial/page/archive
page_category: _partial/page/category
page_index: _partial/page/index
page_links: _partial/page/links
page_post: _partial/page/post
page_tag: _partial/page/tag