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: 网站简介
  ruleText: 友链要求

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:
  showText: (/≧▽≦/)咦!又好了!
  hideText: (●—●)喔哟,崩溃啦!

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: 网站简介
  ruleText: 友链要求

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:
  showText: (/≧▽≦/)咦!又好了!
  hideText: (●—●)喔哟,崩溃啦!

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
theme: 
  switch: true 
  default: style-light # style-light style-dark

网站图标 Favicon

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

  • logo:顶部 logo
  • dark_logo:顶部 logo,暗黑模式时显示
  • icon16:icon 16*16
  • icon32:icon 32*32
  • appleTouchIcon:iOS 添加到桌面时显示图标
  • webmanifest:应用程序清单文件
  • visibilitychange:是否在离开窗口时切换标题显示
  • hidden:离开窗口时显示图标
  • showText:激活窗口时显示文字
  • hideText:离开窗口显示文字
yaml
favicon:
  logo: favicon-32x32.png
  icon16: favicon-16x16.png
  icon32: favicon-32x32.png
  appleTouchIcon: apple-touch-icon.png
  webmanifest: /site.webmanifest
  visibilitychange: true
  hidden: failure.ico
  showText: (/≧▽≦/)咦!又好了!
  hideText: (●—●)喔哟,崩溃啦!
favicon:
  logo: favicon-32x32.png
  icon16: favicon-16x16.png
  icon32: favicon-32x32.png
  appleTouchIcon: apple-touch-icon.png
  webmanifest: /site.webmanifest
  visibilitychange: true
  hidden: failure.ico
  showText: (/≧▽≦/)咦!又好了!
  hideText: (●—●)喔哟,崩溃啦!
yaml
favicon:
  logo: /img/favicon.svg
  icon16: /img/favicon.svg
  icon32: /img/favicon.svg
  appleTouchIcon: 
  webmanifest:
  visibilitychange: false
  hidden: /failure.ico # Displays an icon when not visible
  showText: favicon.showText
  hideText: favicon.hideText
favicon:
  logo: /img/favicon.svg
  icon16: /img/favicon.svg
  icon32: /img/favicon.svg
  appleTouchIcon: 
  webmanifest:
  visibilitychange: false
  hidden: /failure.ico # Displays an icon when not visible
  showText: favicon.showText
  hideText: favicon.hideText

插件 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:
  # The cdn configuration of the js inside the theme
  internal_provider: local
  # cdn configuration of third-party js
  third_party_provider: unpkg
  # The plug-in used by the theme
  plugin:
    hexo_theme_async:
      rowcss: css/plugins/bootstrap.row.css
      typing: js/plugins/typing.js
      search: js/plugins/local_search.js
assets:
  # The cdn configuration of the js inside the theme
  internal_provider: local
  # cdn configuration of third-party js
  third_party_provider: unpkg
  # The plug-in used by the theme
  plugin:
    hexo_theme_async:
      rowcss: css/plugins/bootstrap.row.css
      typing: js/plugins/typing.js
      search: js/plugins/local_search.js

除了使用 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 目录
主题使用三方插件列表
yaml
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:网站简介
  • ruleText:友链交换规则
  • 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: 网站简介。
  ruleText: 暂不接受个人博客以外的友链申请,确保您的网站内容积极向上,文章至少30篇,原创70%以上,部署HTTPS。
user:
  name: 白云苍狗
  first_name: 苍狗
  last_name: 白云
  email: admin@imalun.com
  domain: https://www.imalun.com
  avatar: /img/avatar.jpg
  describe: 网站简介。
  ruleText: 暂不接受个人博客以外的友链申请,确保您的网站内容积极向上,文章至少30篇,原创70%以上,部署HTTPS。
yaml
user:
  name: ThemeAsync
  first_name: Theme
  last_name: Async
  email: 
  domain: 站点域名
  avatar: /img/avatar.jpg
  describe: 网站简介。
  ruleText: 暂不接受个人博客以外的友链申请,确保您的网站内容积极向上,文章至少30篇,原创70%以上,部署HTTPS。
user:
  name: ThemeAsync
  first_name: Theme
  last_name: Async
  email: 
  domain: 站点域名
  avatar: /img/avatar.jpg
  describe: 网站简介。
  ruleText: 暂不接受个人博客以外的友链申请,确保您的网站内容积极向上,文章至少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
top_bars:
  - title: menu.home
    url: /
  - title: menu.archives
    url: /archives/
top_bars:
  - title: menu.home
    url: /
  - title: menu.archives
    url: /archives/

侧栏 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:
  typedTextPrefix: I`m
  typedText: 
  info: 
    - key: sidebar.residence
      val: Mars
  social:
    - name: Github
      icon: fab fa-github
      url: https://github.com
sidebar:
  typedTextPrefix: I`m
  typedText: 
  info: 
    - key: sidebar.residence
      val: Mars
  social:
    - name: Github
      icon: fab fa-github
      url: https://github.com

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

yaml
sidebar:
  social:
sidebar:
  social:

打字动画

  • typedTextPrefix:为固定前缀
  • typedText:为打字效果切换条目,可设置多条,按顺序切换。
yaml
sidebar:
  typedTextPrefix: I`m
  typedText: ["Web Developer"]
sidebar:
  typedTextPrefix: I`m
  typedText: ["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 则会根据主题自动切换。
    • bannerTitle:横幅上标题
    • bannerText:横幅描述
    • position: 同 CSS object-position
    • fit:同 CSS object-fit
  • index:首页 (属性字段和上面保持一致)
    • videoUrl:视频地址 (仅首页有)
  • archive:分类页 (属性字段和上面保持一致)
  • links:友链页 (属性字段和上面保持一致)
  • comment:评论页 (属性字段和上面保持一致)
  • about:关于 (属性字段和上面保持一致)
yaml
banner:
  index:
    type: img
    bgurl: https://pic1.zhimg.com/v2-b3c2c6745b9421a13a3c4706b19223b3_r.jpg?source=1940ef5c
    bannerTitle: 树深时见鹿,<br>溪午不闻钟。
    bannerText: Hi my new friend!
banner:
  index:
    type: img
    bgurl: https://pic1.zhimg.com/v2-b3c2c6745b9421a13a3c4706b19223b3_r.jpg?source=1940ef5c
    bannerTitle: 树深时见鹿,<br>溪午不闻钟。
    bannerText: Hi my new friend!
yaml
banner:
  use_cover: false
banner:
  use_cover: false

弹幕动画

  • 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:
  copyrightYear:
  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:
  copyrightYear:
  live_time:
    enable: false
    prefix: footer.tips
    start_time: 04/10/2022 17:00:00
  custom_text:

起始年份

yaml
footer:
  copyrightYear: 2020
footer:
  copyrightYear: 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:
reward:
  enable: false
  comment: reward.comment
  # url:
  methods:

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

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
  min_depth: 1
toc:
  enable: false
  list_number: true
  post_title: true
  max_depth: 3
  min_depth: 1

图片懒加载

默认开启,将会为 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
  len: 2
  list:
categorie_card:
  enable: true
  len: 2
  list:

固定按钮块

右下角悬浮按钮块。

  • 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: MM/DD
    time: HH:mm
  archive:
    type: date
    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: MM/DD
    time: HH:mm
  archive:
    type: date
    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 # mac | default
  copy: true # copy button
  lang: true # show the code language
  code_word_wrap: fasle #
  height_limit: false # unit: px
highlight:
  theme: true # 
  title: default # mac | default
  copy: true # copy button
  lang: true # show the code language
  code_word_wrap: fasle #
  height_limit: false # unit: px

通过 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
  主题使用图标预览 (18)

自定义样式 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
  # 整体布局结构模板
  main: _partial/main
  # 顶部菜单栏模板
  header: _partial/header
  # 顶部横幅模板
  banner: _partial/banner
  # 侧栏模板
  sidebar: _partial/sidebar/index
  # 页脚模板
  footer: _partial/footer
  # 文章信息模板
  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
  # 顶部菜单-logo部分
  header_logo: _widget/header-logo
  # 顶部菜单-菜单部分
  header_menu: _widget/header-menu
  # 顶部菜单-主题切换部分
  header_theme: _widget/header-theme
  # 顶部菜单-查询部分
  header_search: _widget/header-search
  # 分类卡片模板
  categorie: _widget/categorie
  # 分页模板
  paginator: _widget/paginator
  # 返回顶部模板
  back_to_top: _widget/back-to-top
  # 固定按钮模板
  fixed_btn: _widget/fixed-btn
  # 关于页面配置卡片
  about_card: _widget/about-card
	# 搜索卡片 v2.1.11 + 
	search: _widget/search
  # 侧栏
  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: _third-party/comment/index
  # 页面切换动画模板
  page_loading: _partial/preloader/page-preloader
  # 主题切换动画模板
  mode_change: _partial/preloader/change-mode-preloader
  # 内置几个页面模板
  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
	# 其他 v2.1.11 + 
	script: _partial/script
	head: _partial/head
layout:
  path: layout
  # 整体布局结构模板
  main: _partial/main
  # 顶部菜单栏模板
  header: _partial/header
  # 顶部横幅模板
  banner: _partial/banner
  # 侧栏模板
  sidebar: _partial/sidebar/index
  # 页脚模板
  footer: _partial/footer
  # 文章信息模板
  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
  # 顶部菜单-logo部分
  header_logo: _widget/header-logo
  # 顶部菜单-菜单部分
  header_menu: _widget/header-menu
  # 顶部菜单-主题切换部分
  header_theme: _widget/header-theme
  # 顶部菜单-查询部分
  header_search: _widget/header-search
  # 分类卡片模板
  categorie: _widget/categorie
  # 分页模板
  paginator: _widget/paginator
  # 返回顶部模板
  back_to_top: _widget/back-to-top
  # 固定按钮模板
  fixed_btn: _widget/fixed-btn
  # 关于页面配置卡片
  about_card: _widget/about-card
	# 搜索卡片 v2.1.11 + 
	search: _widget/search
  # 侧栏
  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: _third-party/comment/index
  # 页面切换动画模板
  page_loading: _partial/preloader/page-preloader
  # 主题切换动画模板
  mode_change: _partial/preloader/change-mode-preloader
  # 内置几个页面模板
  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
	# 其他 v2.1.11 + 
	script: _partial/script
	head: _partial/head

用覆盖 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 文件及相关注释。

完整配置列表信息.
yaml
# Open Graph protocol
open_graph: true

# User info
user:
  name: ThemeAsync
  first_name: Theme
  last_name: Async
  email: 
  domain: 站点域名
  avatar: /img/avatar.jpg
  describe: 网站简介。
  ruleText: 暂不接受个人博客以外的友链申请,确保您的网站内容积极向上,文章至少30篇,原创70%以上,部署HTTPS。

# Configure the icon information of the site
favicon:
  logo: /img/favicon.svg
  icon16: /img/favicon.svg
  icon32: /img/favicon.svg
  appleTouchIcon: 
  webmanifest:
  visibilitychange: false
  hidden: /failure.ico # Displays an icon when not visible
  showText: favicon.showText
  hideText: favicon.hideText

# Theme resource files or plug-ins
assets:
  # The cdn configuration of the js inside the theme
  internal_provider: local
  # cdn configuration of third-party js
  third_party_provider: unpkg
  # The plug-in used by the theme
  plugin:
    hexo_theme_async:
      rowcss: css/plugins/bootstrap.row.css
      typing: js/plugins/typing.js
      search: js/plugins/local_search.js
			danmu: js/plugins/danmu.js
      main: js/main.js
  # Icon configuration
  icons: 
    type: font # font symbol
    css:  css/plugins/font-awesome.min.css
    js:

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

# The icon used by the theme
icons:
  # Theme switch icon
  sun: far fa-sun
  moon: far fa-moon
  # Home video play
  play: fas fa-play
  # email icon
  email: far fa-envelope
  # Category entry icon
  next: fas fa-arrow-right
  # Date of article details
  calendar: far fa-calendar-alt
  # Article details time
  clock: far fa-clock
  # Author of article details
  user: far fa-user
  # Return to the top icon
  back_top: fas fa-arrow-up
  # close icon
  close: fas fa-times
  # search icon
  search: fas fa-search
  # reward icon
  reward: fas fa-hand-holding-usd
  # User information and article directory switch
  user_tag: fas fa-user-alt
  toc_tag: fas fa-th-list
  # Secure the button in the lower right corner
  read: fas fa-book-reader
  arrows: fas fa-arrows-alt-h
  # Code highlight fold icon
  double_arrows: fas fa-angle-double-down
  # Code copy icon
  copy: fas fa-copy

# Top navigation menu
top_bars:
  - title: menu.home
    url: /
  - title: menu.archives
    url: /archives/

# Banner settings
banner:
  use_cover: false
	danmu: 
		enable: false
		el: .trm-banner
  default:
    type: img
    bgurl: /img/banner.png
    bannerText: Hi my new friend!
    position: top
    fit: cover
  index:
    bannerTitle: 树深时见鹿,<br>溪午不闻钟。
    bannerText: Hi my new friend!
    videoUrl: 
  archive:
    bannerTitle: 云间连下榻,<br>天上接行杯。
    bannerText: The article archive
  links:
    bannerTitle: 莫愁前路无知己,<br>天下谁人不识君。
    bannerText: A link to a friend's website
  comment:
    bannerTitle: 醉后不知天在水,<br>满船清梦压星河。
    bannerText: The magic tree hole
  about:
    bannerTitle: 醉后不知天在水,<br>满船清梦压星河。
    bannerText: About me

# Sidebar settings
sidebar:
  typedTextPrefix: I`m
  typedText: 
  info: 
    - key: sidebar.residence
      val: Mars
  social:
    - name: Github
      icon: fab fa-github
      url: https://github.com

# About page settings
about:
	insert: none # before | after | none
  title: 如果一切都是镜花水月,那就让这万物走向终结。如果一切皆是命中注定,那就让这世界消失殆尽。
  introduction: 大家好,我是 <strong>Async</strong>,很高兴您能在浩瀚如烟的互联网世界里发现这个博客,更感谢您能够饶有兴致地浏览这个页面。建立这个 Blog 是出于兴趣爱好,我将在此分会分享一些学习笔记,可能还会分享少许图片、视频以及其他有趣东西的链接。
  blog: 
    <ul class="trm-list">
      <li>程序:Hexo </li>
      <li>主题:Hexo-theme-async </li>
    </ul>
  privacy: 
    本网站不会追踪访客行为,且不要求访客提供任何敏感信息(比如真实姓名、身份证号码、手机号等),因而也不存在任何隐私泄漏问题。访客参与评论,必须遵守法律法规和基本道德规范,文明礼貌。严禁发布任何有关淫秽、反动、暴力、博彩、恐吓、低俗的内容或违法信息,在尊重言论自由的同时请保持和平与理性。请勿对他人采取不友好的评论或其它过激行为。

# Footer settings
footer:
  # Hexo link (Powered by Hexo).
  powered:
    enable: true
  # Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.
  # https://beian.miit.gov.cn/
  beian:
    enable: false
    icp: 
  # Copyright date
  copyrightYear:
  # 
  live_time:
    enable: false
    prefix: footer.tips
    start_time: 04/10/2022 17:00:00
  #
  custom_text:

# Here is a collection of articles related to configuration.
#### Article configuration start ###
# Reward (Donate)
# If enable true, reward would be displayed in every posts and pages by default.
# You can show or hide reward in a specific page throuth `reward: true | false` in Front Matter.
reward:
  enable: false
  comment: reward.comment
  # url:
  methods:

# Article table of contents
toc:
  enable: false
  list_number: true
  post_title: true
  max_depth: 3
  min_depth: 1

# Archive page
archive:
  type: more # less more

# Creative Commons 4.0 International License.
# https://creativecommons.org/licenses/
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license.
# CC licenses are available in 39 languages, where you can find the specific and correct abbreviation you need.
# Valid values of language: deed.zh, deed.en, deed.ja, etc.
creative_commons:
  license: by-nc-sa
  language: deed.zh
  post: false
  clipboard: false

# Customize the cover image
cover:
  default: /img/block.jpg
  type: img # img || date || random

# The previous and the next article
post_pagination: 
  enable: true 
  type: large # large || small

# img loading="lazy"
lazyload:
  enable: true

# Displays outdated notice for a post (文章过期提醒)
notice_outdate:
  enable: false
  style: flat # style: simple/flat
  limit_day: 365 # When will it be shown
  position: top # position: top/bottom
#### Article configuration end ###

# Page Visit Statistics
webAnalytics:  
  enable: false 
  baidu:   # Baidu key
  google:  # Tracking ID for Google statistics
  tencent: # Tencent statistics
    sid:
    cid:

# comment
comment:
  bComments:
    enable: false
    env: # 腾讯云环境id
  twikoo:
    enable: false
    envId:   # 腾讯云环境id
  # region: # 环境地域,默认为 ap-shanghai,如果您的环境地域不是上海,需传此参数
  # option: # 用于区分不同文章的自定义 js 路径,如果您的文章路径不是 location.pathname,需传此参数
  giscus:
    enable: false
    repo:
    repo-id:
    category:
    category-id:
    mapping: pathname
    reactions-enabled: 1
    emit-metadata: 0
    lang: zh-CN
    theme: 
      light: light
      dark: transparent_dark

# Theme mode 
theme: 
  switch: true 
  default: style-light # style-light style-dark

# Service Worker
sw: false

# Post wordcount
# https://github.com/willin/hexo-wordcount
wordcount:
  enable: false
  count: true
  time: true

# That is it only render those page which has `katex: true` in Front-matter.
# math fomula
# https://katex.org/
katex:
  copy_tex: true
  global: false
  # Options are for katex rendering options: https://katex.org/docs/options.html
  # In page katex options are also possible and will be merged
  options: {}

# Blog search
search:
  enable: false
  type: engine #local engine
  href: 'https://www.google.com/search?q=site:'
  # href: "https://www.baidu.com/s?wd=site:"
  # href: "https://www.bing.com/search?q=site:"
  domain: 

# Think of swup as being pjax on steroids. The concepts are similar to those used in barba.js or other transition libraries.
# https://swup.js.org/
# Whether swup is enabled
swup: false

# Datetime formatting
datetime_foramt:
  post_card:
    type: date # date || updated
    date: YY/MM/DD
    time: HH:mm
    cover_date: DD
    cover_date2: YYYY/MM
  post_info:
    type: date
    date: MM/DD
    time: HH:mm
  archive:
    type: date
    date: MM/DD
    time: HH:mm

# Home page category card configuration
categorie_card:
  enable: true
  len: 2
  list:

# Lower right button
rightside:
  readmode: true
  aside: false

# Replace Broken Images 
error_img:
  flink: /img/friend_404.gif
  post_page: /img/404.jpg

# Code highlighting configuration
highlight:
  theme: true # 
  title: default # mac | default
  copy: true # copy button
  lang: true # show the code language
  code_word_wrap: fasle #
  height_limit: false # unit: px

# Customize the template path
layout:
  path: layout
  # layout
  main:  _partial/main
  header: _partial/header
  banner: _partial/banner
  sidebar: _partial/sidebar/index
  footer: _partial/footer
  # post
  post_info: _partial/post/post-info
  post_content: _partial/post/post-content
  reward: _partial/post/reward
  post_copyright: _partial/post/post-copyright
  post_next_prev: _partial/post/post-next-prev
  post_card: _partial/post/post-card
  post_card_mini: _partial/post/post-card-mini
  # widget
  header_logo: _widget/header-logo
  header_menu: _widget/header-menu
  header_theme: _widget/header-theme
  header_search: _widget/header-search
  categorie: _widget/categorie
  paginator: _widget/paginator
  fixed_btn: _widget/fixed-btn
  post_toc: _widget/post-toc
	about_card: _widget/about-card
	search: _widget/search
  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
	head: _partial/head

not_found: 
	path: /
	name: not_found.name
	text: not_found.text
# Open Graph protocol
open_graph: true

# User info
user:
  name: ThemeAsync
  first_name: Theme
  last_name: Async
  email: 
  domain: 站点域名
  avatar: /img/avatar.jpg
  describe: 网站简介。
  ruleText: 暂不接受个人博客以外的友链申请,确保您的网站内容积极向上,文章至少30篇,原创70%以上,部署HTTPS。

# Configure the icon information of the site
favicon:
  logo: /img/favicon.svg
  icon16: /img/favicon.svg
  icon32: /img/favicon.svg
  appleTouchIcon: 
  webmanifest:
  visibilitychange: false
  hidden: /failure.ico # Displays an icon when not visible
  showText: favicon.showText
  hideText: favicon.hideText

# Theme resource files or plug-ins
assets:
  # The cdn configuration of the js inside the theme
  internal_provider: local
  # cdn configuration of third-party js
  third_party_provider: unpkg
  # The plug-in used by the theme
  plugin:
    hexo_theme_async:
      rowcss: css/plugins/bootstrap.row.css
      typing: js/plugins/typing.js
      search: js/plugins/local_search.js
			danmu: js/plugins/danmu.js
      main: js/main.js
  # Icon configuration
  icons: 
    type: font # font symbol
    css:  css/plugins/font-awesome.min.css
    js:

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

# The icon used by the theme
icons:
  # Theme switch icon
  sun: far fa-sun
  moon: far fa-moon
  # Home video play
  play: fas fa-play
  # email icon
  email: far fa-envelope
  # Category entry icon
  next: fas fa-arrow-right
  # Date of article details
  calendar: far fa-calendar-alt
  # Article details time
  clock: far fa-clock
  # Author of article details
  user: far fa-user
  # Return to the top icon
  back_top: fas fa-arrow-up
  # close icon
  close: fas fa-times
  # search icon
  search: fas fa-search
  # reward icon
  reward: fas fa-hand-holding-usd
  # User information and article directory switch
  user_tag: fas fa-user-alt
  toc_tag: fas fa-th-list
  # Secure the button in the lower right corner
  read: fas fa-book-reader
  arrows: fas fa-arrows-alt-h
  # Code highlight fold icon
  double_arrows: fas fa-angle-double-down
  # Code copy icon
  copy: fas fa-copy

# Top navigation menu
top_bars:
  - title: menu.home
    url: /
  - title: menu.archives
    url: /archives/

# Banner settings
banner:
  use_cover: false
	danmu: 
		enable: false
		el: .trm-banner
  default:
    type: img
    bgurl: /img/banner.png
    bannerText: Hi my new friend!
    position: top
    fit: cover
  index:
    bannerTitle: 树深时见鹿,<br>溪午不闻钟。
    bannerText: Hi my new friend!
    videoUrl: 
  archive:
    bannerTitle: 云间连下榻,<br>天上接行杯。
    bannerText: The article archive
  links:
    bannerTitle: 莫愁前路无知己,<br>天下谁人不识君。
    bannerText: A link to a friend's website
  comment:
    bannerTitle: 醉后不知天在水,<br>满船清梦压星河。
    bannerText: The magic tree hole
  about:
    bannerTitle: 醉后不知天在水,<br>满船清梦压星河。
    bannerText: About me

# Sidebar settings
sidebar:
  typedTextPrefix: I`m
  typedText: 
  info: 
    - key: sidebar.residence
      val: Mars
  social:
    - name: Github
      icon: fab fa-github
      url: https://github.com

# About page settings
about:
	insert: none # before | after | none
  title: 如果一切都是镜花水月,那就让这万物走向终结。如果一切皆是命中注定,那就让这世界消失殆尽。
  introduction: 大家好,我是 <strong>Async</strong>,很高兴您能在浩瀚如烟的互联网世界里发现这个博客,更感谢您能够饶有兴致地浏览这个页面。建立这个 Blog 是出于兴趣爱好,我将在此分会分享一些学习笔记,可能还会分享少许图片、视频以及其他有趣东西的链接。
  blog: 
    <ul class="trm-list">
      <li>程序:Hexo </li>
      <li>主题:Hexo-theme-async </li>
    </ul>
  privacy: 
    本网站不会追踪访客行为,且不要求访客提供任何敏感信息(比如真实姓名、身份证号码、手机号等),因而也不存在任何隐私泄漏问题。访客参与评论,必须遵守法律法规和基本道德规范,文明礼貌。严禁发布任何有关淫秽、反动、暴力、博彩、恐吓、低俗的内容或违法信息,在尊重言论自由的同时请保持和平与理性。请勿对他人采取不友好的评论或其它过激行为。

# Footer settings
footer:
  # Hexo link (Powered by Hexo).
  powered:
    enable: true
  # Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.
  # https://beian.miit.gov.cn/
  beian:
    enable: false
    icp: 
  # Copyright date
  copyrightYear:
  # 
  live_time:
    enable: false
    prefix: footer.tips
    start_time: 04/10/2022 17:00:00
  #
  custom_text:

# Here is a collection of articles related to configuration.
#### Article configuration start ###
# Reward (Donate)
# If enable true, reward would be displayed in every posts and pages by default.
# You can show or hide reward in a specific page throuth `reward: true | false` in Front Matter.
reward:
  enable: false
  comment: reward.comment
  # url:
  methods:

# Article table of contents
toc:
  enable: false
  list_number: true
  post_title: true
  max_depth: 3
  min_depth: 1

# Archive page
archive:
  type: more # less more

# Creative Commons 4.0 International License.
# https://creativecommons.org/licenses/
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license.
# CC licenses are available in 39 languages, where you can find the specific and correct abbreviation you need.
# Valid values of language: deed.zh, deed.en, deed.ja, etc.
creative_commons:
  license: by-nc-sa
  language: deed.zh
  post: false
  clipboard: false

# Customize the cover image
cover:
  default: /img/block.jpg
  type: img # img || date || random

# The previous and the next article
post_pagination: 
  enable: true 
  type: large # large || small

# img loading="lazy"
lazyload:
  enable: true

# Displays outdated notice for a post (文章过期提醒)
notice_outdate:
  enable: false
  style: flat # style: simple/flat
  limit_day: 365 # When will it be shown
  position: top # position: top/bottom
#### Article configuration end ###

# Page Visit Statistics
webAnalytics:  
  enable: false 
  baidu:   # Baidu key
  google:  # Tracking ID for Google statistics
  tencent: # Tencent statistics
    sid:
    cid:

# comment
comment:
  bComments:
    enable: false
    env: # 腾讯云环境id
  twikoo:
    enable: false
    envId:   # 腾讯云环境id
  # region: # 环境地域,默认为 ap-shanghai,如果您的环境地域不是上海,需传此参数
  # option: # 用于区分不同文章的自定义 js 路径,如果您的文章路径不是 location.pathname,需传此参数
  giscus:
    enable: false
    repo:
    repo-id:
    category:
    category-id:
    mapping: pathname
    reactions-enabled: 1
    emit-metadata: 0
    lang: zh-CN
    theme: 
      light: light
      dark: transparent_dark

# Theme mode 
theme: 
  switch: true 
  default: style-light # style-light style-dark

# Service Worker
sw: false

# Post wordcount
# https://github.com/willin/hexo-wordcount
wordcount:
  enable: false
  count: true
  time: true

# That is it only render those page which has `katex: true` in Front-matter.
# math fomula
# https://katex.org/
katex:
  copy_tex: true
  global: false
  # Options are for katex rendering options: https://katex.org/docs/options.html
  # In page katex options are also possible and will be merged
  options: {}

# Blog search
search:
  enable: false
  type: engine #local engine
  href: 'https://www.google.com/search?q=site:'
  # href: "https://www.baidu.com/s?wd=site:"
  # href: "https://www.bing.com/search?q=site:"
  domain: 

# Think of swup as being pjax on steroids. The concepts are similar to those used in barba.js or other transition libraries.
# https://swup.js.org/
# Whether swup is enabled
swup: false

# Datetime formatting
datetime_foramt:
  post_card:
    type: date # date || updated
    date: YY/MM/DD
    time: HH:mm
    cover_date: DD
    cover_date2: YYYY/MM
  post_info:
    type: date
    date: MM/DD
    time: HH:mm
  archive:
    type: date
    date: MM/DD
    time: HH:mm

# Home page category card configuration
categorie_card:
  enable: true
  len: 2
  list:

# Lower right button
rightside:
  readmode: true
  aside: false

# Replace Broken Images 
error_img:
  flink: /img/friend_404.gif
  post_page: /img/404.jpg

# Code highlighting configuration
highlight:
  theme: true # 
  title: default # mac | default
  copy: true # copy button
  lang: true # show the code language
  code_word_wrap: fasle #
  height_limit: false # unit: px

# Customize the template path
layout:
  path: layout
  # layout
  main:  _partial/main
  header: _partial/header
  banner: _partial/banner
  sidebar: _partial/sidebar/index
  footer: _partial/footer
  # post
  post_info: _partial/post/post-info
  post_content: _partial/post/post-content
  reward: _partial/post/reward
  post_copyright: _partial/post/post-copyright
  post_next_prev: _partial/post/post-next-prev
  post_card: _partial/post/post-card
  post_card_mini: _partial/post/post-card-mini
  # widget
  header_logo: _widget/header-logo
  header_menu: _widget/header-menu
  header_theme: _widget/header-theme
  header_search: _widget/header-search
  categorie: _widget/categorie
  paginator: _widget/paginator
  fixed_btn: _widget/fixed-btn
  post_toc: _widget/post-toc
	about_card: _widget/about-card
	search: _widget/search
  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
	head: _partial/head

not_found: 
	path: /
	name: not_found.name
	text: not_found.text

Released under the SATA | MIT License.