Hexo-Theme-Async

Appearance

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.

yaml
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.

yaml
# 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 mode
    • style-light: Light mode
    • style-dark: Dark mode
    • auto: Follow the system selection
  • switch: If false, the theme switch button will not appear and only load the default theme mode.
yaml
theme:
    switch: true
    default: style-light
theme:
    switch: true
    default: style-light

Favicon ​

Used to configure logo, icon, and PWA installation ICONS.

  • logo: Top logo
  • dark_logo: Top logo, displayed in dark mode
  • icon16：icon 16*16
  • icon32：icon 32*32
  • apple_touch_icon: Displays icons when iOS is added to the desktop
  • webmanifest: Application manifest file
  • visibilitychange: Whether to switch title display when leaving the window
  • hidden: Displays the icon when leaving the window
  • show_text: Displays text when activating the window
  • hide_text: Leaves the window to display text
yaml
favicon:
    logo: favicon-32x32.png
    icon16: favicon-16x16.png
    icon32: favicon-32x32.png
    apple_touch_icon: apple-touch-icon.png
    webmanifest: /site.webmanifest
    visibilitychange: true
    hidden: failure.ico
    show_text: (/≧▽≦/)咦！又好了！
    hide_text: (●—●)喔哟，崩溃啦！
favicon:
    logo: favicon-32x32.png
    icon16: favicon-16x16.png
    icon32: favicon-32x32.png
    apple_touch_icon: apple-touch-icon.png
    webmanifest: /site.webmanifest
    visibilitychange: true
    hidden: failure.ico
    show_text: (/≧▽≦/)咦！又好了！
    hide_text: (●—●)喔哟，崩溃啦！

Plugins ​

Theme built-in plug-in configuration.

  • internal_provider: CDN of the theme JS. This parameter is optional local、unpkg、jsdelivr
    • local: The CDN is not used
    • unpkg: Use unpkg
    • jsdelivr: Use jsdelivr
  • third_party_provider: CDN configuration of the three-party plug-in JS, optional unpkg、jsdelivr
yaml
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.

yaml
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.

yaml
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:

yaml
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.
yaml
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 type font 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
yaml
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

yaml
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:

yaml
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 identification
  • first_name: Name, used at the top to display the first and last names separately
  • last_name: Surname
  • email: Email address
  • domain: domain name
  • avatar: avatar
  • dark_avatar: Avatar, dark theme display
  • describe: Website Introduction
  • rule_text: buddy link exchange rule
  • birthDay： Blog timing start time v1.1.7 deprecated
  • copyrightYear：Copyright date v1.1.7 deprecated
yaml
user:
    name: 白云苍狗
    first_name: 苍狗
    last_name: 白云
    email: admin@imalun.com
    domain: https://www.imalun.com
    avatar: /img/avatar.jpg
    describe: 网站简介。
    rule_text: 暂不接受个人博客以外的友链申请，确保您的网站内容积极向上，文章至少30篇，原创70%以上，部署HTTPS。
user:
    name: 白云苍狗
    first_name: 苍狗
    last_name: 白云
    email: admin@imalun.com
    domain: https://www.imalun.com
    avatar: /img/avatar.jpg
    describe: 网站简介。
    rule_text: 暂不接受个人博客以外的友链申请，确保您的网站内容积极向上，文章至少30篇，原创70%以上，部署HTTPS。

The logo for the top navigation is configured in favicon and the theme toggle button is configured in Theme mode.

  • title: Title
  • url: path. If the level-2 menu is set, you can set it to '#'
  • noswup: Do not use local refresh
  • target: Link opening mode, which is consistent with the attribute of label a
  • children: Secondary menu
yaml
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

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 name
  • icon: Icon class
  • url: Link
yaml
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:

yaml
sidebar:
    social:
sidebar:
    social:

Typing animation ​

  • typed_text_prefix: indicates a fixed prefix
  • typed_text: To switch entries for typing effect, multiple entries can be set and switched in order.
yaml
sidebar:
    typed_text_prefix: I`m
    typed_text: ["Web Developer"]
sidebar:
    typed_text_prefix: I`m
    typed_text: ["Web Developer"]

The sidebar information is an array of key-val elements.

yaml
sidebar:
    info:
        - key: address
          val: Mars
        - key: age
          val: 18
sidebar:
    info:
        - key: address
          val: Mars
        - key: age
          val: 18

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 configuration
    • type: Banner types img、slideshow、video
    • bgurl: 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.
    • banner_title: Banner title
    • banner_text: Banner description
    • position: same as CSS object-position
    • fit: Same as CSS object-fit
  • index: Home page (property fields remain the same as above)
    • video_url: Video address (available on home page only)
  • archive: Category page
  • links: Friend link page
  • comment: Comment page
  • aboutAbout page
yaml
banner:
    index:
        type: img
        bgurl: https://pic1.zhimg.com/v2-b3c2c6745b9421a13a3c4706b19223b3_r.jpg?source=1940ef5c
        banner_title: 树深时见鹿，<br>溪午不闻钟。
        banner_text: Hi my new friend!
banner:
    index:
        type: img
        bgurl: https://pic1.zhimg.com/v2-b3c2c6745b9421a13a3c4706b19223b3_r.jpg?source=1940ef5c
        banner_title: 树深时见鹿，<br>溪午不闻钟。
        banner_text: Hi my new friend!

This configuration was added in v1.1.7+. In previous versions, it was configured in user info.

Starting year ​

yaml
footer:
    copyright_year: 2020
footer:
    copyright_year: 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.

yaml
footer:
    powered:
        enable: true
footer:
    powered:
        enable: true

Running time ​

This function is disabled by default.

本博客已萌萌哒地运行 442 天

  • enable: Enable the runtime
  • prefix : Timing copy, if you need to customize, please override the language file footer.tips, personalized language refer to here
  • start_time: Time the start time in any date format supported by the browser
yaml
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.

yaml
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 tipping
  • comment: Show what you want to say under the Tip button
  • url: 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 name
  • path: picture path

Override in _config.async.yml.

yaml
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.

yaml
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 enable
  • list_number: Indicates whether to display the number
  • max_depth: Indicates the maximum depth of the TOC
  • min_depth: Indicates the minimum depth to generate the TOC
yaml
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.

yaml
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 optional more || less
yaml
archive:
    type: more # less more
archive:
    type: more # less more

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-hans | deed.en | deed.ja ｜ ...)
  • post: displayed at the end of each article
  • clipboard: Whether to append copyright information to Clipboard when copying articles (default off)
yaml
creative_commons:
    license: by-nc-sa
    language: deed.zh-hans
    post: false
    clipboard: false
creative_commons:
    license: by-nc-sa
    language: deed.zh-hans
    post: false
    clipboard: false

Your url is set in _config.yml under the Hexo working directory. Config ｜ Hexo

yaml
# 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 is string || array
  • type: Cover display type (optional) img || date || random
yaml
cover:
    default: /img/block.jpg
    type: img
cover:
    default: /img/block.jpg
    type: img

Upper and lower articles ​

  • enable: Whether to enable
  • type: Card type, optional large || small
yaml
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 default
  • style: Card type, optional simple || flat
  • limit_day: How many days have passed without updating alerts
  • position: Displayed in the article location, optional top || bottom
yaml
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 broken
  • post_page: The default picture is displayed when the picture in the article is broken
yaml
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 enable
  • len: Indicates the number of categories to be displayed. The default value is 2
  • list: If you need fixed display categories, you can configure them through this field
yaml
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 button
  • aside: Single or double column switch button
yaml
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 card
  • post_info: Format in the detail page of the article
  • archive: Format of the archive category page
yaml
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 scheme
  • title：block title style，mac、default
  • copy：Specifies whether one-click replication is enabled. This parameter is enabled by default
  • lang：Whether to display the code block language. It is displayed by default
  • code_word_wrap：Whether to force newlines. This parameter is disabled by default. After this parameter is enabled, the code line number must be disabled
  • height_limit：Sets the code block height
yaml
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

css
: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.

yaml
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:

yaml
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.
txt
┌── 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:

less
.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:

less
@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.
txt
┌── 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:

less
// source/_data/style/dark.less
@primary: #6062ce;
@primary-weak: #7a89df;
// source/_data/style/dark.less
@primary: #6062ce;
@primary-weak: #7a89df;
less
// 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)
yaml
layout:
    path: layout
layout:
    path: layout

List of built-in templates:

yaml
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
    # 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
    # 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

txt
┌── 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).

yaml
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.

yaml
sw: true
sw: true

WARNING

Use PWA requirements

  • The site must be HTTPS.
  • Add a manifest file directly in source New.

Manifest file structure

json
{
	"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.

yaml
#   配置编辑器格式规则
#
# 1. 数组类型需要 在行注释后添加 类型申明  eg: <string[]>  <object[]>
#   1.1 如果元素是对象结构需要声明数据结构, 结构遵循 json 格式  {{"xx":"xx"}}
#   1.2 如果元素对象是递归嵌套的 可以用空数组标识 {{"xx:标题":"xx","ff:标题":[]}} , ff 字段结构表示和 本身一致
# 2. 枚举属性声明格式 eg:  <[enum,enum]>
# 3. 编辑器中属性名称标注, 只需在属性字段后 添加注释
# 4. 需要跳过当前属性, 只需要在注释上 添加两个 ## 
# 5. 字段默认没值时, 则必须在后面添加 备注信息


# Open Graph protocol | OG 协议
open_graph: true # 启用

# User info | 用户信息
user:
  name: ThemeAsync # Nickname | 昵称
  first_name: Theme # 名
  last_name: Async # 姓
  email: # email | 电子邮箱
  domain: 站点域名 # Domain | 站点域名
  avatar: /img/avatar.jpg # Avatar | 站点头像
  describe: 网站简介。 # Describe | 网站简介
  rule_text: 暂不接受个人博客以外的友链申请，确保您的网站内容积极向上，文章至少30篇，原创70%以上，部署HTTPS。 # 友链规则

# Site logo | 网站图标
favicon:
  logo: /img/favicon.svg # logo | 顶部 logo
  icon16: /img/favicon.svg # icon 16*16
  icon32: /img/favicon.svg # icon 32*32
  apple_touch_icon: # Apple touch icon | iOS 添加到桌面时显示图标
  webmanifest: # Webmanifest | 应用程序清单文件
  visibilitychange: false # Enable toggle title display when leaving | 开启离开时切换标题显示
  hidden: /failure.ico # Displays an icon when not visible | 离开窗口时显示图标
  show_text: favicon.show_text # Displays text when the window is activated | 激活窗口时显示文字
  hide_text: favicon.hide_text # Leave the window to display text | 离开窗口显示文字

# Theme resource files or plug-ins | 插件配置
assets:
  internal_provider: local # The cdn configuration of the js inside the theme | 主题脚本的 CDN 配置
  third_party_provider: unpkg # cdn configuration of third-party js | 第三方插件 CDN 配置
  plugin: ## The plug-in used by the theme
    hexo_theme_async:
      rowcss: css/plugins/bootstrap.row.css
      typing: js/plugins/typing.js
      search: js/plugins/local_search.js
      danmu: js/plugins/danmu.js
      main: js/main.js
  icons: ## Icon configuration
    type: font # font symbol
    css: css/plugins/font-awesome.min.css # icon css
    js: # icon js

## CDN User - defined plug-in
cdn:
  css:
  js:
    head:
    base:
    async:
    defer:

# The icon used by the theme | 主题图标
icons:
  sun: far fa-sun # Theme switch icon | 主题切换明亮图标
  moon: far fa-moon # Theme switch icon | 主题切换暗黑图标
  play: fas fa-play # Home video play | 首页播放按钮图标
  email: far fa-envelope # email icon | 邮件图标
  next: fas fa-arrow-right # Category entry icon | 分类卡片入口图标
  calendar: far fa-calendar-alt # Date of article details | 文章详情日期图标
  clock: far fa-clock # Article details time | 文章详情时间图标
  user: far fa-user # Author of article details | 文章详情作者图标
  back_top: fas fa-arrow-up # Return to the top icon | 返回顶部图标
  close: fas fa-times # close icon | 关闭图标
  search: fas fa-search # search icon | 查询图标
  reward: fas fa-hand-holding-usd # reward icon | 打赏图标
  toc_tag: fas fa-th-list # toc icon | 目录图标
  read: fas fa-book-reader # Secure the button in the lower right corner | 阅读模式图标
  arrows: fas fa-arrows-alt-h # Single bar and double bar toggle icon | 单栏和双栏切换图标
  double_arrows: fas fa-angle-double-down # Code highlight fold icon | 代码块折叠图标
  copy: fas fa-copy # Code copy icon | 代码块复制图标

# Top navigation menu | 导航栏  
top_bars: # <object[]> {{"title:标题":"","url:地址":"","noswup:不使用 Pjax":false,"children:子菜单":[]}}
  - title: menu.home
    url: /
  - title: menu.archives
    url: /archives/

# Banner settings | 横幅配置
banner:
  use_cover: false # Use the cover image for article details | 文章详情使用封面图
  danmu: # danmu | 弹幕
    enable: false # enable | 启用
    el: .trm-banner # el | 弹幕容器
  default: # 默认横幅配置
    type: img # 横幅类型 <[img,slideshow,video]>
    bgurl: /img/banner.png # 背景图地址
    banner_text: Hi my new friend! # 横幅描述
    position: top # 同 CSS object-position
    fit: cover # 同 CSS object-fit
  index: ## 首页横幅
    banner_title: 树深时见鹿，<br>溪午不闻钟。
    banner_text: Hi my new friend!
    video_url: # 视频地址
  archive: ## 归档页横幅
    banner_title: 云间连下榻，<br>天上接行杯。
    banner_text: The article archive
  links: ## 友链页横幅
    banner_title: 莫愁前路无知己，<br>天下谁人不识君。
    banner_text: A link to a friend's website
  comment: ## 评论页横幅
    banner_title: 醉后不知天在水，<br>满船清梦压星河。
    banner_text: The magic tree hole
  about: ## 关于页横幅
    banner_title: 醉后不知天在水，<br>满船清梦压星河。
    banner_text: About me

# Sidebar settings | 侧栏
sidebar:
  typed_text_prefix: I`m # 打字动画固定前缀
  typed_text: # 打字效果切换条目 <string[]>
  info: # 侧栏信息 <object[]> {{"key:名称":"","val:值":""}}
    - key: sidebar.residence
      val: Mars
  social: # 社交图标 <object[]> {{"name:名称":"","icon:图标":"","url:地址":""}}
    - 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
  copyright_year: # 版权日期
  #
  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 ###

# 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 (Donate) | 打赏
reward:
  enable: false  # 启用
  comment: reward.comment # 打赏按钮下显示文字
  url: # 打赏链接
  methods: # 打赏二维码图片列表 <object[]> {{"name:名称":"","path:图片地址":""}}

# Article table of contents | 文章目录
toc:
  enable: false # 启用
  list_number: true # 是否显示编号
  post_title: true # 是否可以在文章标题点击打开目录
  max_depth: 3 # 生成 TOC 的最大深度
  min_depth: 1 # 生成 TOC 的最小深度

# 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-hans, deed.en, deed.ja, etc. | 版权信息
creative_commons:
  license: by-nc-sa # 设置证书
  language: deed.zh-hans # 设置语言
  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
web_analytics:
  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,auto]>

# Service Worker | 渐进式应用
sw: false # 启用

# https://github.com/willin/hexo-wordcount
# Post wordcount | 字数统计
wordcount:
  enable: false # enable | 开启
  count: true # count | 显示字数
  time: true # read time | 显示阅读时间

# 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:" # 搜索引擎地址, type 为 engine 时填写
  domain: # 域名地址, type 为 engine 时填写
  # href: "https://www.baidu.com/s?wd=site:"
  # href: "https://www.bing.com/search?q=site:"

# 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 插件
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,updated]>
    date: MM/DD # 日期
    time: HH:mm # 时间
  archive: # 归档分类页的格式
    type: date # 日期取值 <[date,updated]>
    date: MM/DD # 日期
    time: HH:mm # 时间

# Home page category card configuration | 首页分类卡片
categorie_card:
  enable: true # enable | 启用
  len: 2 # 长度
  list: # 固定显示分类 <string[]>

# 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 # Code title style | 代码块标题样式 <[mac,default]>
  copy: true # Copy button | 复制按钮
  lang: true # Show the code language | 代码块语言
  code_word_wrap: false # Code word wrap | 强制换行
  height_limit: false # unit: px | 代码块高度

# Customize the template path | 自定义模块
layout:
  path: layout # Folder path | 模板存放目录
  # 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 # 顶部菜单-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 # 关于页面配置卡片模板
  search: _widget/search # 搜索卡片模板 v2.1.11 +
  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 # 标签页面模块
  # other
  script: _partial/script # 脚本块 v2.1.11 +
  head: _partial/head # head块 v2.1.11 +

# 404 config | 404 配置
not_found:
  path: / # Return path | 返回路径
  name: not_found.name # Button text 按钮显示文案
  text: not_found.text # Tips | 提示文案

#   配置编辑器格式规则
#
# 1. 数组类型需要 在行注释后添加 类型申明  eg: <string[]>  <object[]>
#   1.1 如果元素是对象结构需要声明数据结构, 结构遵循 json 格式  {{"xx":"xx"}}
#   1.2 如果元素对象是递归嵌套的 可以用空数组标识 {{"xx:标题":"xx","ff:标题":[]}} , ff 字段结构表示和 本身一致
# 2. 枚举属性声明格式 eg:  <[enum,enum]>
# 3. 编辑器中属性名称标注, 只需在属性字段后 添加注释
# 4. 需要跳过当前属性, 只需要在注释上 添加两个 ## 
# 5. 字段默认没值时, 则必须在后面添加 备注信息


# Open Graph protocol | OG 协议
open_graph: true # 启用

# User info | 用户信息
user:
  name: ThemeAsync # Nickname | 昵称
  first_name: Theme # 名
  last_name: Async # 姓
  email: # email | 电子邮箱
  domain: 站点域名 # Domain | 站点域名
  avatar: /img/avatar.jpg # Avatar | 站点头像
  describe: 网站简介。 # Describe | 网站简介
  rule_text: 暂不接受个人博客以外的友链申请，确保您的网站内容积极向上，文章至少30篇，原创70%以上，部署HTTPS。 # 友链规则

# Site logo | 网站图标
favicon:
  logo: /img/favicon.svg # logo | 顶部 logo
  icon16: /img/favicon.svg # icon 16*16
  icon32: /img/favicon.svg # icon 32*32
  apple_touch_icon: # Apple touch icon | iOS 添加到桌面时显示图标
  webmanifest: # Webmanifest | 应用程序清单文件
  visibilitychange: false # Enable toggle title display when leaving | 开启离开时切换标题显示
  hidden: /failure.ico # Displays an icon when not visible | 离开窗口时显示图标
  show_text: favicon.show_text # Displays text when the window is activated | 激活窗口时显示文字
  hide_text: favicon.hide_text # Leave the window to display text | 离开窗口显示文字

# Theme resource files or plug-ins | 插件配置
assets:
  internal_provider: local # The cdn configuration of the js inside the theme | 主题脚本的 CDN 配置
  third_party_provider: unpkg # cdn configuration of third-party js | 第三方插件 CDN 配置
  plugin: ## The plug-in used by the theme
    hexo_theme_async:
      rowcss: css/plugins/bootstrap.row.css
      typing: js/plugins/typing.js
      search: js/plugins/local_search.js
      danmu: js/plugins/danmu.js
      main: js/main.js
  icons: ## Icon configuration
    type: font # font symbol
    css: css/plugins/font-awesome.min.css # icon css
    js: # icon js

## CDN User - defined plug-in
cdn:
  css:
  js:
    head:
    base:
    async:
    defer:

# The icon used by the theme | 主题图标
icons:
  sun: far fa-sun # Theme switch icon | 主题切换明亮图标
  moon: far fa-moon # Theme switch icon | 主题切换暗黑图标
  play: fas fa-play # Home video play | 首页播放按钮图标
  email: far fa-envelope # email icon | 邮件图标
  next: fas fa-arrow-right # Category entry icon | 分类卡片入口图标
  calendar: far fa-calendar-alt # Date of article details | 文章详情日期图标
  clock: far fa-clock # Article details time | 文章详情时间图标
  user: far fa-user # Author of article details | 文章详情作者图标
  back_top: fas fa-arrow-up # Return to the top icon | 返回顶部图标
  close: fas fa-times # close icon | 关闭图标
  search: fas fa-search # search icon | 查询图标
  reward: fas fa-hand-holding-usd # reward icon | 打赏图标
  toc_tag: fas fa-th-list # toc icon | 目录图标
  read: fas fa-book-reader # Secure the button in the lower right corner | 阅读模式图标
  arrows: fas fa-arrows-alt-h # Single bar and double bar toggle icon | 单栏和双栏切换图标
  double_arrows: fas fa-angle-double-down # Code highlight fold icon | 代码块折叠图标
  copy: fas fa-copy # Code copy icon | 代码块复制图标

# Top navigation menu | 导航栏  
top_bars: # <object[]> {{"title:标题":"","url:地址":"","noswup:不使用 Pjax":false,"children:子菜单":[]}}
  - title: menu.home
    url: /
  - title: menu.archives
    url: /archives/

# Banner settings | 横幅配置
banner:
  use_cover: false # Use the cover image for article details | 文章详情使用封面图
  danmu: # danmu | 弹幕
    enable: false # enable | 启用
    el: .trm-banner # el | 弹幕容器
  default: # 默认横幅配置
    type: img # 横幅类型 <[img,slideshow,video]>
    bgurl: /img/banner.png # 背景图地址
    banner_text: Hi my new friend! # 横幅描述
    position: top # 同 CSS object-position
    fit: cover # 同 CSS object-fit
  index: ## 首页横幅
    banner_title: 树深时见鹿，<br>溪午不闻钟。
    banner_text: Hi my new friend!
    video_url: # 视频地址
  archive: ## 归档页横幅
    banner_title: 云间连下榻，<br>天上接行杯。
    banner_text: The article archive
  links: ## 友链页横幅
    banner_title: 莫愁前路无知己，<br>天下谁人不识君。
    banner_text: A link to a friend's website
  comment: ## 评论页横幅
    banner_title: 醉后不知天在水，<br>满船清梦压星河。
    banner_text: The magic tree hole
  about: ## 关于页横幅
    banner_title: 醉后不知天在水，<br>满船清梦压星河。
    banner_text: About me

# Sidebar settings | 侧栏
sidebar:
  typed_text_prefix: I`m # 打字动画固定前缀
  typed_text: # 打字效果切换条目 <string[]>
  info: # 侧栏信息 <object[]> {{"key:名称":"","val:值":""}}
    - key: sidebar.residence
      val: Mars
  social: # 社交图标 <object[]> {{"name:名称":"","icon:图标":"","url:地址":""}}
    - 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
  copyright_year: # 版权日期
  #
  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 ###

# 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 (Donate) | 打赏
reward:
  enable: false  # 启用
  comment: reward.comment # 打赏按钮下显示文字
  url: # 打赏链接
  methods: # 打赏二维码图片列表 <object[]> {{"name:名称":"","path:图片地址":""}}

# Article table of contents | 文章目录
toc:
  enable: false # 启用
  list_number: true # 是否显示编号
  post_title: true # 是否可以在文章标题点击打开目录
  max_depth: 3 # 生成 TOC 的最大深度
  min_depth: 1 # 生成 TOC 的最小深度

# 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-hans, deed.en, deed.ja, etc. | 版权信息
creative_commons:
  license: by-nc-sa # 设置证书
  language: deed.zh-hans # 设置语言
  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
web_analytics:
  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,auto]>

# Service Worker | 渐进式应用
sw: false # 启用

# https://github.com/willin/hexo-wordcount
# Post wordcount | 字数统计
wordcount:
  enable: false # enable | 开启
  count: true # count | 显示字数
  time: true # read time | 显示阅读时间

# 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:" # 搜索引擎地址, type 为 engine 时填写
  domain: # 域名地址, type 为 engine 时填写
  # href: "https://www.baidu.com/s?wd=site:"
  # href: "https://www.bing.com/search?q=site:"

# 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 插件
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,updated]>
    date: MM/DD # 日期
    time: HH:mm # 时间
  archive: # 归档分类页的格式
    type: date # 日期取值 <[date,updated]>
    date: MM/DD # 日期
    time: HH:mm # 时间

# Home page category card configuration | 首页分类卡片
categorie_card:
  enable: true # enable | 启用
  len: 2 # 长度
  list: # 固定显示分类 <string[]>

# 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 # Code title style | 代码块标题样式 <[mac,default]>
  copy: true # Copy button | 复制按钮
  lang: true # Show the code language | 代码块语言
  code_word_wrap: false # Code word wrap | 强制换行
  height_limit: false # unit: px | 代码块高度

# Customize the template path | 自定义模块
layout:
  path: layout # Folder path | 模板存放目录
  # 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 # 顶部菜单-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 # 关于页面配置卡片模板
  search: _widget/search # 搜索卡片模板 v2.1.11 +
  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 # 标签页面模块
  # other
  script: _partial/script # 脚本块 v2.1.11 +
  head: _partial/head # head块 v2.1.11 +

# 404 config | 404 配置
not_found:
  path: / # Return path | 返回路径
  name: not_found.name # Button text 按钮显示文案
  text: not_found.text # Tips | 提示文案

Released under the SATA | MIT License.

Copyright © 2022-PRESENT MaLuns