Skip to content

主题配置

配置文件 async.yml

约定 > 配置

DANGER

请在 _config.async.yml 中定义您所需要的配置,其余将自动使用主题的默认配置。

如未特殊说明,皆默认在 _config.async.yml 文件中配置。

请最好不要主题的任何文件进行修改,除非您确认您拥有一定的开发能力或此后将不会对主题进行升级。

语言 Language

本主题内置了中英文两种语言,zh-Hansen

站点的语言需要自己在 Hexo 目录下的 _config.yml 中设置。

yaml
language: zh-Hans
language: zh-Hans

个性化语言包

在 Hexo 工作目录下新建 source/_data/languages.yml。(若 source/_data 目录不存在,请新建。)

采用约定大于配置的方式,您仅需在 languages.yml 中自定义您想要覆盖的语言,其余将自动与主题默认配置合并。(这样做也更方便日后的升级)

配置方式参考下例:

各语言对应属性和内容见 languages | hexo-theme-async,覆盖对应项即可。

内置语言包结构示例
yaml
site:
  title: 本站信息
  webmaster: 网站名称
  domain: 网站链接
  avatar: 网站头像
  describe: 网站简介
  rule_text: 友链要求

sidebar:
  residence: Residence
  city: City
  age: Age
  contact: 联系我

footer:
  powered: '由 %s 驱动'
  theme: 主题
  tips: '博客已萌萌哒运行 %s 天'
  day: 天
  hour: 时
  minute: 分
  seconds: 秒

title:
  links: 友情链接
  new_publish: 最近发布
  comment: 留言板
  author: 作者
  blog: 博客
  privacy: 隐私权及评论
  more: 查看分类
  all_archives: 所有归档
  year_archives: '%s 年的归档'
  other_articles: 其他文章
  unclassified: 未分类

menu:
  home: 首页
  archives: 归档
  links: 友链
  about: 关于

favicon:
  show_text: (/≧▽≦/)咦!又好了!
  hide_text: (●—●)喔哟,崩溃啦!

search:
  placeholder: 搜索文章...
  result_placeholder: 请输入关键词进行搜索
  empty: '找不到您查询的内容: ${query}'
  hits: '找到 ${hits} 条结果'
  hits_time: '找到 ${hits} 条结果(用时 ${time} 毫秒)'

reward:
  comment: 我很可爱,请给我钱

post:
  sticky: 置顶
  more: 更多
  copyright:
    author: 本文作者
    link: 本文链接
    license_title: 版权声明
    license_content: '本博客所有文章除特别声明外,均默认采用 %s 许可协议。'
  copy:
    success: 复制成功
    failure: 复制失败
  read_mode:
    open: 进入阅读模式
    exit: 退出阅读模式
  notice_outdate_message: '距离上次更新已经 %s 天了, 文章内容可能已经过时。'
  toc: 目录导航

rightside:
  toc_title: 目录
  readmode_title: 阅读模式
  back_to_top: 回到顶部
  aside: 单栏和双栏切换

date_suffix:
  just: 刚刚
  min: 分钟前
  hour: 小时前
  day: 天前
  month: 个月前

symbol:
  comma: ,
  period: 。
  colon: :

ieTips: 为了更好的体验,请使用非IE浏览器

not_found: 
	name: 主页
	text: 您正在查找的页面不存在。您是怎么到这里来的是个谜,但是您可以点击下面的按钮返回主页。
site:
  title: 本站信息
  webmaster: 网站名称
  domain: 网站链接
  avatar: 网站头像
  describe: 网站简介
  rule_text: 友链要求

sidebar:
  residence: Residence
  city: City
  age: Age
  contact: 联系我

footer:
  powered: '由 %s 驱动'
  theme: 主题
  tips: '博客已萌萌哒运行 %s 天'
  day: 天
  hour: 时
  minute: 分
  seconds: 秒

title:
  links: 友情链接
  new_publish: 最近发布
  comment: 留言板
  author: 作者
  blog: 博客
  privacy: 隐私权及评论
  more: 查看分类
  all_archives: 所有归档
  year_archives: '%s 年的归档'
  other_articles: 其他文章
  unclassified: 未分类

menu:
  home: 首页
  archives: 归档
  links: 友链
  about: 关于

favicon:
  show_text: (/≧▽≦/)咦!又好了!
  hide_text: (●—●)喔哟,崩溃啦!

search:
  placeholder: 搜索文章...
  result_placeholder: 请输入关键词进行搜索
  empty: '找不到您查询的内容: ${query}'
  hits: '找到 ${hits} 条结果'
  hits_time: '找到 ${hits} 条结果(用时 ${time} 毫秒)'

reward:
  comment: 我很可爱,请给我钱

post:
  sticky: 置顶
  more: 更多
  copyright:
    author: 本文作者
    link: 本文链接
    license_title: 版权声明
    license_content: '本博客所有文章除特别声明外,均默认采用 %s 许可协议。'
  copy:
    success: 复制成功
    failure: 复制失败
  read_mode:
    open: 进入阅读模式
    exit: 退出阅读模式
  notice_outdate_message: '距离上次更新已经 %s 天了, 文章内容可能已经过时。'
  toc: 目录导航

rightside:
  toc_title: 目录
  readmode_title: 阅读模式
  back_to_top: 回到顶部
  aside: 单栏和双栏切换

date_suffix:
  just: 刚刚
  min: 分钟前
  hour: 小时前
  day: 天前
  month: 个月前

symbol:
  comma: ,
  period: 。
  colon: :

ieTips: 为了更好的体验,请使用非IE浏览器

not_found: 
	name: 主页
	text: 您正在查找的页面不存在。您是怎么到这里来的是个谜,但是您可以点击下面的按钮返回主页。
yaml
# 将要覆盖的语言
en:
  site:
    title: Site Information

zh-Hans:
  site:
    title: 本站信息
# 您也可以扩展其他语言
# 将要覆盖的语言
en:
  site:
    title: Site Information

zh-Hans:
  site:
    title: 本站信息
# 您也可以扩展其他语言

如果仅使用中文语言,除 zh-Hans 项均可删除。

主题模式 ThemeMode

  • default:设置主题默认模式
    • style-light:亮色模式
    • style-dark:暗色模式
    • auto:跟随系统选择
  • switch:如果为 false,将不会出现主题切换按钮,只加载设置默认主题模式。
yaml
theme:
  switch: true
  default: style-dark
theme:
  switch: true
  default: style-dark
yaml
theme:
  switch: true # 主题切换按钮
  default: style-light # 主题默认模式 <[style-light,style-dark,auto]>
theme:
  switch: true # 主题切换按钮
  default: style-light # 主题默认模式 <[style-light,style-dark,auto]>

网站图标 Favicon

用于 logo、icon、PWA 安装图标配置。

  • logo:顶部 logo
  • dark_logo:顶部 logo,暗黑模式时显示
  • icon16:icon 16*16
  • icon32:icon 32*32
  • apple_touch_icon:iOS 添加到桌面时显示图标
  • webmanifest:应用程序清单文件
  • visibilitychange:是否在离开窗口时切换标题显示
  • hidden:离开窗口时显示图标
  • show_text:激活窗口时显示文字
  • hide_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: (●—●)喔哟,崩溃啦!
yaml
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 | 离开窗口显示文字
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 | 离开窗口显示文字

插件 Plugins

主题内置插件配置。

  • internal_provider:主题 JS 的 CDN 配置,可选 localunpkgjsdelivr
    • local: 不使用 CDN
    • unpkg: 使用 unpkg
    • jsdelivr: 使用 jsdelivr
  • third_party_provider:三方插件 JS 的 CDN 配置,可选 unpkgjsdelivr
yaml
assets:
  internal_provider: unpkg # local | unpkg | jsdelivr
  third_party_provider: unpkg # unpkg | jsdelivr
assets:
  internal_provider: unpkg # local | unpkg | jsdelivr
  third_party_provider: unpkg # unpkg | jsdelivr
yaml
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
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

除了使用 unpkg、jsdelivr 外,也可以自定义其他 CDN 源。

yaml
assets:
  third_party_provider: https://npm.elemecdn.com
assets:
  third_party_provider: https://npm.elemecdn.com

也可以单独给某个插件配置 CDN 源。

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

如果您想将主题使用三方插件下载到本地,可以执行 hexo plugin 命令下载到本地(需要主题版本 2.0.4+)。插件默认下载到 source/plugins 目录,需要将配置指向对应目录:

yaml
assets:
  third_party_provider: plugins # 指向 plugins 目录
assets:
  third_party_provider: plugins # 指向 plugins 目录
主题使用三方插件列表
yml
swup: /swup@2.0.19/dist/swup.min.js
fancybox: 
  css: /@fancyapps/ui@4.0/dist/fancybox.css
  js: /@fancyapps/ui@4.0/dist/fancybox.umd.js
search: /hexo-generator-searchdb@1.4.0/dist/search.js
swiper: 
  css: /swiper@4.5.1/dist/css/swiper.min.css
  js: /swiper@4.5.1/dist/js/swiper.min.js
katex:
  js: /katex@latest/dist/katex.min.js
  css: /katex@latest/dist/katex.min.css
  auto_render: /katex@latest/dist/contrib/auto-render.min.js
  copy_tex: /katex@latest/dist/contrib/copy-tex.min.js
bComments: [
  //imgcache.qq.com/qcloud/cloudbase-js-sdk/1.7.1/cloudbase.full.js ,
  /b-comments@0.0.13/dist/index.all.min.js
]
twikoo: /twikoo@1.6.7/dist/twikoo.all.min.js
flickr_justified_gallery: /flickr-justified-gallery@latest/dist/fjGallery.min.js
swup: /swup@2.0.19/dist/swup.min.js
fancybox: 
  css: /@fancyapps/ui@4.0/dist/fancybox.css
  js: /@fancyapps/ui@4.0/dist/fancybox.umd.js
search: /hexo-generator-searchdb@1.4.0/dist/search.js
swiper: 
  css: /swiper@4.5.1/dist/css/swiper.min.css
  js: /swiper@4.5.1/dist/js/swiper.min.js
katex:
  js: /katex@latest/dist/katex.min.js
  css: /katex@latest/dist/katex.min.css
  auto_render: /katex@latest/dist/contrib/auto-render.min.js
  copy_tex: /katex@latest/dist/contrib/copy-tex.min.js
bComments: [
  //imgcache.qq.com/qcloud/cloudbase-js-sdk/1.7.1/cloudbase.full.js ,
  /b-comments@0.0.13/dist/index.all.min.js
]
twikoo: /twikoo@1.6.7/dist/twikoo.all.min.js
flickr_justified_gallery: /flickr-justified-gallery@latest/dist/fjGallery.min.js

加速静态资源 CDN

Content Delivery Network,统一加载网络资源,有利于提高网页加载速度。

当您需要添加三方插件来个性您的博客时,您应该优先使用 CDN 加载文件。

JavaScript 资源类型说明:

  • head: 插入到 head,其他三种默认时插入到 body 结尾的。
  • base: 立即加载并执行。
  • async: 异步加载,加载完成后立即执行。
  • defer: 异步加载资源,但最后执行。
yaml
cdn:
  css:
  js:
    head:
    base: [demo.js]
    async:
    defer:
cdn:
  css:
  js:
    head:
    base: [demo.js]
    async:
    defer:
yaml
cdn:
  css:
  js:
    head:
    base:
    async:
    defer:
cdn:
  css:
  js:
    head:
    base:
    async:
    defer:

字体图标 Icon

本主题默认使用 Font Awesome 5 图标。

默认支持的图标列表见 默认图标

如您想要使用其他图标,只需要在 assets.icons 中配置您的图标。

  • type:图标类型 font symbol
  • css: font-class 图标资源 url (有值或为空时,将覆盖或去除内置 Font Awesome 5 图标)
  • js:多色图标资源 url
yaml
assets:
  icons:
    type: font # font symbol
    css:
    js:
assets:
  icons:
    type: font # font symbol
    css:
    js:

iconfont

阿里旗下,可定制自己所需图标集。国内速度良好。(推荐) 使用说明

yaml
assets:
  icons:
    type: font
    # 这里是您从 iconfont 处获得的图标链接。
    css: //at.alicdn.com/t/font_383361_cfn4m13f4v.css
    js:
assets:
  icons:
    type: font
    # 这里是您从 iconfont 处获得的图标链接。
    css: //at.alicdn.com/t/font_383361_cfn4m13f4v.css
    js:

多色图标使用方式:

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

当您覆盖内置图标资源时,因为博客 UI 中一些固定的图标使用到了,所以您需要将 固定图标 进行修改。

单色图标 和 多色图标是可以同时使用的,但是博客 UI 的固定图标只能根据 type 决定使用哪一种。

用户信息 User

用户基本信息,用于博主名称、头像、友链交换规则、站点运行计时等等。

  • name:昵称,用于侧栏或其他区域标识
  • first_name:名,用于顶部将姓和名分别显示
  • last_name:姓,
  • email:邮箱
  • domain:域名
  • avatar:头像
  • dark_avatar:头像,黑暗主题时显示
  • describe:网站简介
  • rule_text:友链交换规则
  • birthDay:博客计时开始时间 v1.1.7 弃用
  • copyrightYear:版权日期 v1.1.7 弃用
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。
yaml
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。 # 友链规则
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。 # 友链规则

导航栏 TopBars

顶部导航的 logo 在 favicon 中配置,主题切换按钮在 主题模式 中配置。

  • title:标题
  • url:路径,如果设置了二级菜单后,不需要已经一级菜单触发跳转可将其设置为 '#'
  • noswup:不使用局部刷新
  • target:打开链接方式,和 a 标签属性一致
  • children:二级菜单
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
yaml

侧栏 Sidebar

社交图标

默认内置 Font-Awesome Brand 图标,可根据您的需求添加,您可以通过在头部引入自定义图标资源来获取更多图标。

  • name:链接名称
  • icon:图标 class
  • url:链接
yaml
sidebar:
  social: # 社交地址
    - name: github
      icon: fab fa-github
      url: https://github.com
    - name: gitee
      icon: iconfont cg-gitee
      url: https://gitee.com
sidebar:
  social: # 社交地址
    - name: github
      icon: fab fa-github
      url: https://github.com
    - name: gitee
      icon: iconfont cg-gitee
      url: https://gitee.com
yaml
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
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

如果您不想放置任何链接,仅需在 sidebar 中设置:

yaml
sidebar:
  social:
sidebar:
  social:

打字动画

  • typed_text_prefix:为固定前缀
  • typed_text:为打字效果切换条目,可设置多条,按顺序切换。
yaml
sidebar:
  typed_text_prefix: I`m
  typed_text: ["Web Developer"]
sidebar:
  typed_text_prefix: I`m
  typed_text: ["Web Developer"]

侧栏信息

侧栏信息是一个数组,里面元素 key-val 形式的。

yaml
sidebar:
  info: # 个人信息
    - key: 地址
      val: 火星
    - key: 年龄
      val: 18
sidebar:
  info: # 个人信息
    - key: 地址
      val: 火星
    - key: 年龄
      val: 18

横幅 Banner

每个页面横幅都可以自定义不同背景图、标语等,当您需要视频背景的时候,您的视频格式需要为 MP4、WebM 、Ogg 等格式。

  • use_cover:文章详情页 banner 是否使用文章封面图,默认 false
  • default:默认配置
    • type:横幅类型 img、slideshow、video
    • bgurl:背景图地址,如果 type 是 slideshow,必须为数组。如果 type 是 img 时,可为字符串或数组,如果数组长度为 2 则会根据主题自动切换。
    • banner_title:横幅上标题
    • banner_text:横幅描述
    • position: 同 CSS object-position
    • fit:同 CSS object-fit
  • index:首页 (属性字段和上面保持一致)
    • video_url:视频地址 (仅首页有)
  • archive:分类页 (属性字段和上面保持一致)
  • links:友链页 (属性字段和上面保持一致)
  • comment:评论页 (属性字段和上面保持一致)
  • about:关于 (属性字段和上面保持一致)
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!
yaml
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
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

弹幕动画

  • danmu
    • enable:是否开启弹幕动画插件
    • el:弹幕填充区域,默认 banner 元素
    • avatar:是否显示头像,默认 false
    • speed:弹幕每秒滚动距离,默认每秒滚动 20px
    • height:弹幕高度,默认 36px
    • gapWidth:弹幕前后间隔,默认 20px
    • gapHeight:弹幕上下间隔,默认 20px
    • delayRange:延时范围时间,默认 5000 ms
    • align:弹幕对齐方式,参考 align-items
    • mode:弹幕区域大小,'half' | 'top' | 'full'

开启弹幕示例:

yaml
banner:
	danmu: 
		enable: true
		avatar: true
		delayRange: 5000
		speed: 80
banner:
	danmu: 
		enable: true
		avatar: true
		delayRange: 5000
		speed: 80

开启后会在 window 挂载一个 danMu 方法,danMu 接收一个函数作为入参,函数调用返回需要加载弹幕数据

ts
declare type DanMuFun = ()=> Promise<DanMuData | DanMuData[]>;

declare type DanMuData = {
	id: string | number;
	text: string;
	url?: string;
	avatar?: string;
};
declare type DanMuFun = ()=> Promise<DanMuData | DanMuData[]>;

declare type DanMuData = {
	id: string | number;
	text: string;
	url?: string;
	avatar?: string;
};

使用示例:

js
danMu(
	() => [
		'举杯邀明月,对影成三人',
		'会当凌绝顶,一览众山小',
		'云想衣裳花想容,春风拂槛露华浓',
		'二十四桥明月夜,玉人何处教吹箫?',
		'月落乌啼霜满天,江枫渔火对愁眠。',
		'两岸猿声啼不住,轻舟已过万重山。',
		'泠泠七弦上,静听松风寒。',
		'举杯邀明月,对影成三人',
		'会当凌绝顶,一览众山小',
		'云想衣裳花想容,春风拂槛露华浓',
		'二十四桥明月夜,玉人何处教吹箫?',
		'月落乌啼霜满天,江枫渔火对愁眠。',
		'两岸猿声啼不住,轻舟已过万重山。',
		'泠泠七弦上,静听松风寒。'
	].map((text, id) => ({ id, text }))
)
danMu(
	() => [
		'举杯邀明月,对影成三人',
		'会当凌绝顶,一览众山小',
		'云想衣裳花想容,春风拂槛露华浓',
		'二十四桥明月夜,玉人何处教吹箫?',
		'月落乌啼霜满天,江枫渔火对愁眠。',
		'两岸猿声啼不住,轻舟已过万重山。',
		'泠泠七弦上,静听松风寒。',
		'举杯邀明月,对影成三人',
		'会当凌绝顶,一览众山小',
		'云想衣裳花想容,春风拂槛露华浓',
		'二十四桥明月夜,玉人何处教吹箫?',
		'月落乌啼霜满天,江枫渔火对愁眠。',
		'两岸猿声啼不住,轻舟已过万重山。',
		'泠泠七弦上,静听松风寒。'
	].map((text, id) => ({ id, text }))
)

加载 twikoo 评论示例:

js
twikoo && danMu(
	() => twikoo.getRecentComments({
		envId: 'id',
		urls: [location.pathname].filter(i => i !== '/'),
		pageSize: 30,
		includeReply: false
	}).then(function (res) {
		return res.map((item, i) => ({
			id: item.id,
			url: item.url,
			text: item.commentText,
			avatar: item.avatar,
		}))
	})
)
twikoo && danMu(
	() => twikoo.getRecentComments({
		envId: 'id',
		urls: [location.pathname].filter(i => i !== '/'),
		pageSize: 30,
		includeReply: false
	}).then(function (res) {
		return res.map((item, i) => ({
			id: item.id,
			url: item.url,
			text: item.commentText,
			avatar: item.avatar,
		}))
	})
)

此配置在 v1.1.7+ 新增,以前版本在 用户信息-user 配置。

页脚所有配置预览:

yaml
footer:
  powered:
    enable: true
  beian:
    enable: false
    icp:
  copyright_year:
  live_time:
    enable: false
    prefix: footer.tips
    start_time: 04/10/2022 17:00:00
  custom_text:
footer:
  powered:
    enable: true
  beian:
    enable: false
    icp:
  copyright_year:
  live_time:
    enable: false
    prefix: footer.tips
    start_time: 04/10/2022 17:00:00
  custom_text:

起始年份

yaml
footer:
  copyright_year: 2020
footer:
  copyright_year: 2020

驱动

自豪地显示当前使用的博客框架 Hexo 与主题 Async 的名字及版本。

如:由 Hexo 驱动 v5.4.2 | 主题 - Async v1.1.7

让更多人知道 Hexo 与主题 Hexo-Theme-Async,这有利于开源社区进一步发展。

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

备案

国内用户可以提供备案号,开启备案显示。

备案信息默认链接为:https://beian.miit.gov.cn/

  • enable: 开启备案
  • icp: 备案号
yaml
footer:
  beian:
    enable: true
    icp: 苏ICP备xxxxxxxx号
footer:
  beian:
    enable: true
    icp: 苏ICP备xxxxxxxx号

运行时间

默认关闭。

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

  • enable: 开启运行计时
  • prefix: 计时文案,如果需要自定义,请覆盖语言文件里 footer.tips ,个性化语言 参考这里
  • start_time: 计时开始时间,浏览器支持的日期格式即可
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 为自定义页脚,可以包含 HTML。 譬如有时使用其他服务商进行托管页面,或一些 ICP 之外的备案信息。

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

这里是一些关于文章相关配置合集。

打赏 Reward

开启后,将在每篇文章 post 末尾显示打赏按钮。

  • enable: 开启打赏
  • comment: 在打赏按钮下显示您想说的话
  • url: 您的打赏链接(当您开启打赏链接时,将自动跳转您的外部链接而不是展开二维码)
  • methods: 数组,打赏方式

打赏二维码

  • name: 打赏方式
  • path: 图片路径

_config.async.yml 中进行覆盖。

yaml
reward:
  enable: true
  comment: I'm so cute. Please give me money.
  methods:
    - name: 支付宝
      path: 二维码地址
reward:
  enable: true
  comment: I'm so cute. Please give me money.
  methods:
    - name: 支付宝
      path: 二维码地址
yaml
reward:
  enable: false  # 启用
  comment: reward.comment # 打赏按钮下显示文字
  url: # 打赏链接
  methods: # 打赏二维码图片列表 <object[]> {{"name:名称":"","path:图片地址":""}}
reward:
  enable: false  # 启用
  comment: reward.comment # 打赏按钮下显示文字
  url: # 打赏链接
  methods: # 打赏二维码图片列表 <object[]> {{"name:名称":"","path:图片地址":""}}

您也可以在某篇文章的首部单独设置是否开启打赏。

yaml
reward: true
# reward: false
reward: true
# reward: false

文章目录

文章目录,默认是关闭的。开启后,根据您的 Markdown 自动生成目录。如果您想关闭指定文章的目录,您可以在文章页单独配置当前文章关闭。参考这里

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

图片懒加载

默认开启,将会为 Markdown 的图片 img 加上 loading="lazy" 属性。

yaml
lazyload:
  enable: true
lazyload:
  enable: true

归档页

默认下归档页时间轴卡片显示了标题和摘要信息,如果设置为 less 将只显示标题。

  • type: 显示方式,可选 more || less
yaml
archive:
  type: less
archive:
  type: less
yaml
archive:
  type: more # 归档页时间轴卡片样式  <[less,more]>
archive:
  type: more # 归档页时间轴卡片样式  <[less,more]>

版权信息

设置您的文章的分享版权

关于许可协议 默认使用 署名-非商业性使用-相同方式共享 4.0,即 CC BY-NC-SA 4.0

  • license:设置证书 (by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero)
  • language:设置语言 (deed.zh | deed.en | deed.ja | ...)
  • post:在每篇文章末尾显示
  • clipboard:是否在复制文章时,在剪贴板中追加版权信息(默认关闭)
yaml
creative_commons:
  license: by-nc-sa
  language: deed.zh
  post: false
  clipboard: true
creative_commons:
  license: by-nc-sa
  language: deed.zh
  post: false
  clipboard: true
yaml
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 # 复制时追加

您的 url 请在 Hexo 工作目录下的 _config.yml 中设置。 配置| 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

自定义封面图

当您没有设置文章封面图时,将会显示主题内置的封面图,您可以通过修改配置来替换默认行为。

  • default: 封面默认显示的图片,类型为 string || array
  • type: 封面显示类型,可选 img || date || random
yaml
cover:
  default: /img/block.jpg
  type: img
cover:
  default: /img/block.jpg
  type: img
yaml
cover:
  default: /img/block.jpg # 封面默认显示的图片
  type: img # 封面显示类型 <[img,date,random]>
cover:
  default: /img/block.jpg # 封面默认显示的图片
  type: img # 封面显示类型 <[img,date,random]>

上下篇文章

  • enable: 是否开启
  • type: 卡片类型,可选 large || small
yaml
post_pagination:
  enable: true
  type: small
post_pagination:
  enable: true
  type: small
yaml
post_pagination:
  enable: true # 启用
  type: large # 卡片类型 <[large,small]>
post_pagination:
  enable: true # 启用
  type: large # 卡片类型 <[large,small]>

文章过期提醒

您可以给文章添加过期提醒。

  • enable: 是否开启,默认关闭
  • style: 卡片类型,可选 simple || flat
  • limit_day: 超过多少天未更新提醒
  • position: 显示在文章位置,可选 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
yaml
notice_outdate:
  enable: false # 启用
  style: flat # style | 样式  <[simple,flat]>
  limit_day: 365 # When will it be shown | 过期提醒天数
  position: top # position | 位置 <[top,bottom]>
notice_outdate:
  enable: false # 启用
  style: flat # style | 样式  <[simple,flat]>
  limit_day: 365 # When will it be shown | 过期提醒天数
  position: top # position | 位置 <[top,bottom]>

文章破图时默认图片

您可以添加图片加载失败时显示默认图片。

  • flink: 友链头像破图时显示默认图片
  • post_page: 文章中图片破图时显示默认图片
yaml
error_img:
  flink: /404.gif
  post_page: /404.jpg
error_img:
  flink: /404.gif
  post_page: /404.jpg
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

这里是一些关于页面中杂项配置合集。

分类卡片

首页中显示的分类卡片。

默认情况下,会显示分类里文章最多的两个,您可以通过修改配置来替换默认行为。

  • enable: 是否开启
  • len: 需要显示分类数量,默认为 2 个
  • list: 如果您需要固定显示分类,可以通过这个字段配置
yaml
categorie_card:
  enable: true
  len: 2
  list: ["分类1", "分类2"]
categorie_card:
  enable: true
  len: 2
  list: ["分类1", "分类2"]
yaml
categorie_card:
  enable: true # enable | 启用
  len: 2 # 长度
  list: # 固定显示分类 <string[]>
categorie_card:
  enable: true # enable | 启用
  len: 2 # 长度
  list: # 固定显示分类 <string[]>

固定按钮块

右下角悬浮按钮块。

  • readmode: 阅读模式按钮
  • aside: 单双栏切换按钮
yaml
rightside:
  readmode: true
  aside: true
rightside:
  readmode: true
  aside: true
yaml
rightside:
  readmode: true # 阅读模式按钮
  aside: false # 单双栏切换按钮
rightside:
  readmode: true # 阅读模式按钮
  aside: false # 单双栏切换按钮

日期格式化 Date Format

用于配置主题中使用日期的格式。

  • post_card:文章卡片的格式
  • post_info:文章详情页里的格式
  • archive:归档分类页的格式
    • type: 文章日期取值类型,date(创建日期) | updated (修改日期)
    • date:日期格式
    • time:时间格式
yaml
datetime_foramt:
  post_card:
    date: YY/MM/DD
    time: HH:mm
  post_info:
    type: updated
    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:
    type: updated
    date: MM/DD
    time: HH:mm
  archive:
    date: MM/DD
    time: HH:mm
yaml
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 # 时间
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 # 时间

代码高亮 Highlight

代码块中的所有功能只适用于 Hexo 自带的代码渲染,如果使用第三方的渲染器,不一定会有效

  • theme:是否使用内置代码高亮配色
  • title:代码块标题样式,macdefault
  • copy:是否可以一键复制,默认开启
  • lang:是否显示代码块语言,默认显示
  • code_word_wrap:是否强制换行,默认关闭,开启后需关闭代码行号
  • height_limit:设置代码块高低
yaml
highlight:
  theme: true
  title: default
  copy: true
  lang: false
  code_word_wrap: true
  height_limit: 200 # 超出时,显示折叠按钮
highlight:
  theme: true
  title: default
  copy: true
  lang: false
  code_word_wrap: true
  height_limit: 200 # 超出时,显示折叠按钮
yaml
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 | 代码块高度
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 | 代码块高度

通过 CSS 变量来覆盖默认色

css
:root {
	/* 代码块背景色、前景色 */
	--highlight-background: #f6f8fa;
	--highlight-foreground: #4d5a60;
	/* 行号 */
	--highlight-gutter-color: #90a4ae;
	--highlight-gutter-bg-color: #f1f1f1;
	/* 工具栏 */
	--highlight-tools-color: #646464;
	--highlight-tools-bg-color: #e6ebf1;
	/* 滚动条 */
	--highlight-scrollbar: #d7d7d7;

	/* 代码 */
	--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 {
	/* 代码块背景色、前景色 */
	--highlight-background: #f6f8fa;
	--highlight-foreground: #4d5a60;
	/* 行号 */
	--highlight-gutter-color: #90a4ae;
	--highlight-gutter-bg-color: #f1f1f1;
	/* 工具栏 */
	--highlight-tools-color: #646464;
	--highlight-tools-bg-color: #e6ebf1;
	/* 滚动条 */
	--highlight-scrollbar: #d7d7d7;

	/* 代码 */
	--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;
}

您也可以将 theme: false,然后引入 highlight.jsPrismJS 的主题文件,来自定义代码块高亮。

yaml
highlight:
  theme: false
highlight:
  theme: false

自定义图标 Icon

博客中存在一些固定的图标,譬如主题切换图标、分类图标等。

可以通过配置 icons 修改:

yaml
icons:
  # 主题切换图标
  sun: far fa-sun
  moon: far fa-moon
  # 首页视频播放
  play: fas fa-play
  # 邮箱
  email: far fa-envelope
  # 分类进入图标
  next: fas fa-arrow-right
  # 文章详情 日期
  calendar: far fa-calendar-alt
  # 文章详情 时间
  clock: far fa-clock
  # 文章详情 作者
  user: far fa-user
  # 返回顶部 v1.1.3+
  back_top: fas fa-arrow-up
  # 查询 v1.1.5+
  search: fas fa-search
  # 关闭 v1.1.5+
  close: fas fa-times
  # 打赏 v1.1.7+
  reward: fas fa-hand-holding-usd
  # 用户信息和文章目录切换 v1.2.10+
  user_tag: fas fa-user-alt
  toc_tag: fas fa-th-list
  # 右下角固定按钮 v1.2.11+
  read: fas fa-book-reader
  arrows: fas fa-arrows-alt-h
  # 代码高亮折叠 v2.0.0+
  double_arrows: fas fa-angle-double-down
  # 代码复制
  copy: fas fa-copy
icons:
  # 主题切换图标
  sun: far fa-sun
  moon: far fa-moon
  # 首页视频播放
  play: fas fa-play
  # 邮箱
  email: far fa-envelope
  # 分类进入图标
  next: fas fa-arrow-right
  # 文章详情 日期
  calendar: far fa-calendar-alt
  # 文章详情 时间
  clock: far fa-clock
  # 文章详情 作者
  user: far fa-user
  # 返回顶部 v1.1.3+
  back_top: fas fa-arrow-up
  # 查询 v1.1.5+
  search: fas fa-search
  # 关闭 v1.1.5+
  close: fas fa-times
  # 打赏 v1.1.7+
  reward: fas fa-hand-holding-usd
  # 用户信息和文章目录切换 v1.2.10+
  user_tag: fas fa-user-alt
  toc_tag: fas fa-th-list
  # 右下角固定按钮 v1.2.11+
  read: fas fa-book-reader
  arrows: fas fa-arrows-alt-h
  # 代码高亮折叠 v2.0.0+
  double_arrows: fas fa-angle-double-down
  # 代码复制
  copy: fas fa-copy
  主题使用图标预览 (17)

自定义样式 Style

相比 head 引入,您可以直接编写 less 文件,并使用主题已有的变量,且将和主题样式文件一起编译。

DANGER

1.2.x + 修改主题切换实现方式,由原来多份样式文件调整为 CSS 变量形式。所以自定义样式也有些许变化。

1.2.x 版本

  • 新建 source/_data/style/index.less,开始编写您的自定义样式了。
txt
┌── blog
│   └── source
│       └── _data
│           └── style
│               ├── index.less
│   └── themes
┌── blog
│   └── source
│       └── _data
│           └── style
│               ├── index.less
│   └── themes

:root 下为白色主题,:root.dart 下为暗黑色主题,

修改主题色示例:

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);
	}
}

跟随操作系统选择主题示例:

less
@media (prefers-color-scheme: dark) {
	:root {
		.dark();
	}
}
@media (prefers-color-scheme: dark) {
	:root {
		.dark();
	}
}

1.1.x 版本

  • 新建 source/_data/style/dark.less、source/_data/style/light.less,开始编写您的自定义样式了。他们分别默认会合并到 darklight 两种模式中去。
  • 如果需要覆盖变量可以添加 source/_data/style/dark.variables.less、source/_data/style/light.variables.less,进行覆盖。
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

修改主题色示例:

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;

自定义模板 Layout

主题允许您自定义模板来替换主题模板,此功能需要您的版本 v2.0.0+ 。

  • path: 指定自定义模板目录(默认情况下不要修改)
yaml
layout:
  path: layout
layout:
  path: layout

内置模板列表:

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

用覆盖 footer 来举个例子:

不修改 layout.path 时,您的目录结构如下,并添加 footer.ejs

txt
┌── blog
│   └── layout
│          └── footer.ejs
│   └── scaffolds
│   └── source
│   └── themes
┌── blog
│   └── layout
│          └── footer.ejs
│   └── scaffolds
│   └── source
│   └── themes

上面 footer.ejs 的目录是 layout/footer.ejs 则为 async/footer, 如果 footer.ejs 的目录是 layout/demo/footer.ejs 则为 async/demo/footer, 必须已 async/ 作为根(以免和主题冲突)。

编写好 footer.ejs 后,修改配置如下:

yaml
layout:
  footer: async/footer
layout:
  footer: async/footer

可以前往 演示站点 查看效果,首页 footer 和 页面切换已是自定义效果了。

TIP

您在 footer.ejs 可以访问到所有配置,全局变量,和辅助函数等,和主题模板一致。

除了使用 ejs 以外,您可以使用 hexo 支持的任意渲染器。

比如使用 pug ,您只需要安装 hexo-render-pug 后即可使用。

渐进式应用 PWA

开始 PWA 只需要设置 sw 为 true 即可,本主题已添加 Server Worker 相关操作 。

yaml
sw: true
sw: true

WARNING

使用 PWA 要求

  • 站点必须为 HTTPS。
  • 添加一个清单文件(manifest),直接在 source 下新增。

清单文件 结构

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": "/"
}

更多配置

您可以直接查看 _config.yml | hexo-theme-async 文件及相关注释。

完整配置列表信息.
yml
#   配置编辑器格式规则
#
# 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, 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
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, 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
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.