hexo-theme-volantis

• 当屏幕宽度超过2000px时，最大布局宽度将突破设定上限，为 55% 屏幕宽度。
• 音乐播放器可以放到导航栏下拉菜单，规则为：识别到 icon: fas fa-compact-disc 且没有 url 则显示播放器。

- name: 音乐
  icon: fas fa-compact-disc

• tabs 样式修改为 github issue 风格
• 导航栏菜单平铺过多或屏幕过窄时，不缩窄logo，而是缩窄菜单
• 其它样式优化

• 修复「网址#标题」URL定位被导航栏遮盖的问题
• mathjax3

不兼容毛玻璃效果的浏览器显示为不透明

• 修复 #141 代码框横向滑动时的UI问题
• 优化复制按钮

修复2.1.0版本Tab中链接失效的问题。

New Features

• Support tab bar switching function.
• Support random playback of background pictures.

新功能

• 支持Tab栏切换功能。
• 支持背景图片随机播放功能。

• Optimize the style
• 优化样式

• Optimize the screen adaptation of the cover
• 优化封面的屏幕适配

Hexo升级到4.2

• 建议旧版本的用户升级到Hexo4.2
• 新版Hexo不支持HTML标签和markdown混写了，所以以前的

  <fancybox>![](https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png)</fancybox>
  

  需要修改为：

  <fancybox><img src='https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png'></fancybox>
  

新增功能

标签云设置

现在可以设置标签云的字号、颜色

TOC设置

• 现在可以设置TOC的列表是否显示章节数字
• min_depth和max_depth对应H1～H6，推荐最大范围为2~5（默认值）。

字段修改

blogger

• 由于支持多个作者在同一个博客站点中发布文章，所以将作者和博主的概念区分清楚：
  • 原侧边栏组件author，其义为博主，因此更名为blogger
  • author指文章的作者。

footer

• 原有的网页最底部的footer字段改名为copyright
• 原有的文章页脚文字footer_post删除，通过新的小部件实现，详见下方关于小部件的部分。

music

• 小部件中的music中原有的id重名，改为mid，新的id指的是小部件的唯一标识。

layout

• 为了避免歧义，主题配置文件中layout部分字段名进行了修改。
• layout中除了meta下的字段外，全部对应于组件库widget中的id

组件库优化

• 原有的组件库只能按类排序，同一类型的多个组件只能连续同时出现，现在通过id来控制具体的某个小部件。
• 组件的id自己命名，建议使用全英文表示。
• 组件的class表示组件的类，相当于原来的widget:，对应/_widget/中的文件名。
• 自己新增组件：根据需求确定组件的类型，然后起个不重名的id。
• 原有的plain更名为text。

组件可选类型

# 文本控件（支持markdown）
class: text
# 列表控件
class: list
# 网格控件
class: grid

版权说明和打赏

这部分内容通过组件的方式实现，方便自己调整顺序和数量。

其中，copyright只能用于文末位置，即只能写在layout.on_page.footer中。donate则可以以侧边栏小部件的形式独立存在，即可以写在layout中除了meta之外的任意位置。

通过插件实现container和checkbox

::: info
here be info
:::

::: warning
here be warning
:::

::: success
here be success
:::

::: danger
here be danger
:::

checkbox:

• 未完成
• 已完成

ul:

• sd
• sdf

ol:

1. disdf
2. sdfds

实现方法

建议使用hexo-renderer-markdown-it及其插件

"hexo-renderer-markdown-it": "^4.0.0",
"markdown-it-abbr": "^1.0.4",
"markdown-it-checkbox": "^1.1.0",
"markdown-it-container": "^2.0.0",
"markdown-it-deflist": "^2.0.3",
"markdown-it-emoji": "^1.4.0",
"markdown-it-footnote": "^3.0.2",
"markdown-it-imsize": "^2.0.1",
"markdown-it-ins": "^3.0.0",
"markdown-it-mark": "^3.0.0",
"markdown-it-regexp": "^0.4.0",
"markdown-it-sub": "^1.0.0",
"markdown-it-sup": "^1.0.0",
"markdown-it-task-checkbox": "^1.0.6"

在根目录的配置文件中添加：

markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
    - markdown-it-deflist
    - markdown-it-imsize
    - markdown-it-mark
    - markdown-it-regexp
    - markdown-it-task-checkbox
    - name: markdown-it-container
      options: success
    - name: markdown-it-container
      options: info
    - name: markdown-it-container
      options: warning
    - name: markdown-it-container
      options: danger
    - markdown-it-deflist
    - name: markdown-it-emoji
      options:
        shortcuts: {}
  anchors:
    level: 2
    collisionSuffix: ''
    permalink: false
    permalinkClass: 'header-anchor'
    permalinkSide: 'left'
    permalinkSymbol: '¶'
    case: 0
    separator: ''

更新与优化

• 升级插件： instant.page 3.0.0
• 优化文章显示效果，使布局更加紧凑

可选毛玻璃效果

# 毛玻璃效果 具体效果调整在： source/less/_color.less
blur:
  nav: true
  widget: true

取消音乐小部件，统一显示在网页底部

# APlayer配置 https://github.com/metowolf/MetingJS
aplayer:
  # 是否启用，注释此项则不加载服务
  enable: true
  # 必选参数
  server: netease   # netease, tencent, kugou, xiami, baidu
  type: playlist    # song, playlist, album, search, artist
  id: 3175833810    # song id / playlist id / album id / search keyword
  # 可选参数
  fixed: false      # enable fixed mode
  theme: '#1BCDFC'  # main color
  autoplay: false   # audio autoplay
  order: list       # player play order, values: 'list', 'random'
  loop: all         # player loop play, values: 'all', 'one', 'none'
  volume: 0.7       # default volume
  list_max_height: 340px # list max height
  list_folded: true

调整导航栏菜单的配置

# 导航栏
navbar:
  # 左侧logo区
  logo:
    # 显示图片，使用图片时将不会显示icon和title
    img: # https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/apple-touch-icon.png
    # 显示图标
    icon: fas fa-home
    # 显示标题
    title: XAOXUU
  # logo后面的导航菜单
  menu:
    # 在桌面端显示的导航菜单
    on_desktop:
      - name: 近期
        icon: fas fa-hourglass-half
        url: /
        target: _self
      ...
    # 手机端导航菜单（从右上角的按钮点击展开）
    on_mobile:
      - name: 近期文章
        icon: fas fa-clock
        url: /
      ...

日期meta

日期meta可设置标题

type改为group

为便于理解，type改为group

copyright

调整copyright中的间距

是否使用blockquote

meta库增加自定义按钮

---
meta:
  footer: [links]
links:
  repo: 源码
  feedback: 反馈
  source: 原文
  bug: BUG
  idea: 建议
  question:
  faq: FAQ页面
---

meta:
  links:
  repo:
    icon: 图标
    title: 标题
    color: 按钮颜色
    url: 默认URL

关闭导航栏滑动

可设置导航栏不上下滑动，设置页面的front-matter：

---
layout: page
---

可选阴影和毛玻璃

############################### 主题样式 ###############################
style:
  # 卡片阴影效果
  shadow:
    # 导航栏阴影
    nav: true
    # 卡片阴影和悬浮动画
    # card: true
  # 毛玻璃效果 具体效果调整在： source/less/_color.less
  blur:
    nav: true
    widget: true
    body: true
# 建议：
#   有背景图：开启毛玻璃，关闭卡片阴影
#   无背景图：关闭毛玻璃，开启卡片阴影

支持多列布局

layout:
  # 多列布局
  multiple_columns: false # 部分浏览器不兼容，谨慎使用

部分浏览器效果互斥，😅我选择Chrome优先，谨慎使用。

• 优化css样式，尤其是友链卡片。
• 表格放在 <overflow></overflow> 中支持滚动。
• 支持插入简单按钮和具有丰富内容的按钮。

New Features

Navigation Bar

The navigation bar has been enhanced epically, and you can set the N-level submenu. For practical reasons, it is not recommended to use too many or too deep menus (the part beyond the screen cannot be seen).

Style settings

More styles can now be set in the theme configuration file:

• Maximum layout width
• Navigation bar height, special effects (shadow, frosted glass, float when mouse hover)
• Card effects (floating when shadow, frosted glass, mouse hover)
• Whether the code box shows language
• Header and body text layout (left, right, center)
• Body font
• Code font
• Color of each part

Cover

The cover page can be set in the theme configuration file on the home page, archive page, and other pages by default.
The logo image, title, and subtitle can be displayed on the cover at the same time.

Widget

The grid widget can set fixed: true to fix the grid width (suitable for scenes with different text lengths).

Other

You can set the title and subtitle of the Comment.
You can create folding boxes in multiple colors.
Friendship added group description.

Optimization

Style Renderer

All styles are rewritten using stylus, no need to install less renderer. Compared to 1.7.4, the css file is reduced by 19.75%.

Theme

• The theme configuration file has been greatly changed to make the hierarchy clearer.
• Optimized the sharing experience of QR code (WeChat)

新功能

导航栏

导航栏获得了史诗级的增强，可以设置N级子菜单。考虑到实用性，不太建议使用过多或者过深的菜单（超出屏幕的部分无法被看到）。

样式设置

现在可以在主题配置文件中设置更多的样式：

• 最大布局宽度
• 导航栏高度、特效（阴影、毛玻璃、鼠标hover时浮起）
• 卡片特效（阴影、毛玻璃、鼠标hover时浮起）
• 代码框是否显示语言
• 标题和正文文本布局（靠左、靠右、居中）
• 正文字体
• 代码字体
• 各部分颜色

封面

封面可以在主题配置文件中设置在首页、归档页面、其它页面默认是否显示。
封面中可以同时显示logo图片、标题、副标题了。

小部件

grid小部件可以设置 fixed: true 来固定网格宽度（适合文字长短不一的场景）。

其它

可以设置「评论」的标题和副标题。
可以创建多种颜色的折叠框。
友链增加分组描述。

功能调整与优化

样式渲染器

使用 stylus 重写了所有样式，无需安装less插件了。相较于1.7.4，css文件体积缩小 %。

主题配置文件

• 主题配置文件经过了较大改动，使得层级结构更加清晰。
• 优化了二维码（微信）分享的使用体验

导航栏N级菜单支持分割线和小标题，详见我的个人博客。

Features

• Support navigation bar multi-level menu.
• Support WeChat QR code sharing (requires installation of QR code generation plugin).

更新内容

• 支持导航栏多级菜单
• 支持微信二维码分享（需安装二维码生成插件）

Features

• Optimize style.
• More styles can be customized in theme's _config.yml.
• Adjust theme's _config.yml.

新功能

• 优化样式
• 更多样式可以在主题配置文件中自定义
• 调整主题配置文件

Features

• Optimize style.
• Added fixed: true parameter to grid widget for fixed width.

新功能

• 优化样式
• grid 部件新增 fixed: true 参数，用于固定宽度。

Features

• Can create colorful folding boxes.
• Add a description of the group in friends.

新功能

• 可以创建多种颜色的折叠框
• 友链增加分组描述

Features

• Use stylusrenderer instead of less renderer.
• The color can be modified in the theme's _config.yml file. (the CDN needs to be closed)