Volantis

A Wonderful Theme for Hexo

A Wonderful Theme for Hexo


Volantis,一个高度模块化和可定制化、功能相对完善的 Hexo 博客主题,既可以用作个人博客,也适合用来搭建文档。

开始使用

由于主题目前仍处于青少年阶段,更新迭代速度比较快,所以不会保留旧版本的文档,如果需要查看旧版本的文档,请下载主题文档的源码,回退到旧版本,本地运行查看。

  • 计划 2.x 的最后一个版本的文档会保留至 5.0 发布时,即最终会同时维护3个大版本的文档。
  • 当主题稳定后会提供英文文档。

本次更新内容非常多,主要升级了导航栏、使用新的语言重写了全部样式。旧版本 Volantis 用户,请您卸载掉旧的样式渲染插件,并安装新的:

  1. 卸载 less

    npm uninstall hexo-renderer-less --save
  2. 安装 stylus

    npm install hexo-renderer-stylus --save

新功能

导航栏

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

样式设置

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

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

封面

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

小部件

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

其它

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

功能调整与优化

样式渲染器

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

主题配置文件

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

Beta6

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

Beta5

  • 导航栏二级N级菜单
  • 支持微信二维码分享(需安装二维码生成插件)

Beta4

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

Beta3

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

Beta2

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

Beta1

  • 新版本使用 stylus 完全重写了样式。
  • 可在主题配置文件中修改配色、标题等多种样式(需要关闭CDN)。
    已知的BUG有:
  • Container左侧的图标(图片)始终显示不出来,原因未知。
>div.info
background-color: alpha($color-mac-cyan, 20%)
border-left: $borderradius-codeblock solid $color-mac-cyan
border-radius: $borderradius-codeblock
>:before
...(省略无关代码)
background-size: 16px 16px
background-position: 4px 4px
background-repeat: no-repeat
background-color: $color-mac-cyan
background-image: url("data:image/svg+xmlbase64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHdpZHRoPSIxNzkyIiBoZWlnaHQ9IjE3OTIiIHZpZXdCb3g9IjAgMCAxNzkyIDE3OTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyMTYgMTM0NHYxMjhxMCAyNi0xOSA0NXQtNDUgMTloLTUxMnEtMjYgMC00NS0xOXQtMTktNDV2LTEyOHEwLTI2IDE5LTQ1dDQ1LTE5aDY0di0zODRoLTY0cS0yNiAwLTQ1LTE5dC0xOS00NXYtMTI4cTAtMjYgMTktNDV0NDUtMTloMzg0cTI2IDAgNDUgMTl0MTkgNDV2NTc2aDY0cTI2IDAgNDUgMTl0MTkgNDV6bS0xMjgtMTE1MnYxOTJxMCAyNi0xOSA0NXQtNDUgMTloLTI1NnEtMjYgMC00NS0xOXQtMTktNDV2LTE5MnEwLTI2IDE5LTQ1dDQ1LTE5aDI1NnEyNiAwIDQ1IDE5dDE5IDQ1eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==")

我试过把url里面的内容换成网络图片的URL是可以正常显示的。
源码在: themes/volantis/source/css/_third-party/container.styl

5、测试Tomcat是否配置成功:打开浏览器,输入在地址栏中输入: http://localhost:8080 的运行结果如下图即为即为配置成功!(因为Tomcat已经在运行再次打开会报错)

相关 Issue: #164

结论:存在这篇文章的情况下能够成功 deploy ,说明这不是主题的 BUG。

markdwon 解析插件为 hexo-renderer-marked 时此插件默认会自动识别 URL ,且原文链接前后没有空格,所以链接前后增加一个空格或者在根目录配置文件中设置 autolink: false 都可以避免 deploy 报错。
插件:hexo-renderer-marked

使用 GitHub Issue

由于 Valine 匿名评论不适合追踪和解决问题,因此决定暂时关闭评论区。
为了精准高效解决问题,请前往 GitHub Issue

遇到问题怎么办

  1. 确定已经查阅文档找不到相关内容。
  2. 前往「常见问题」页面,查看是否有解决方案。
  3. 访问在线示例,查看是否具有相同第问题。
    3.1. 如果在线示例表示正常,则说明自己配置有误,检查开发环境、主题配置是否正确。如果检查不出问题,提Issue询问。
    3.2. 如果在线示例也存在相同问题,则说明存在BUG,请提Issue反馈。
  4. 如果在线示例没有相关内容,下载示例博客源码,修改运行本地预览,进行第3步判断操作。

主版本号.子版本号.修订版本号

主题从2017年至今,已经经历了相当多的大版本迭代和数不尽的小版本更新,但是版本号的更新一直没有遵循规范。从下次更新开始,将遵循下述的规范:

  • 主版本号: 较大改动、框架调整或重构
  • 子版本号: 较小或局部的功能性更新
  • 修订版本号: 修复BUG或无关紧要的细节调整