此文章发布距今已过2014天,内容仅供参考~
写在前面
本教程适用于Volantis2.6.4及以上的版本,如果版本不同,文件位置可能会有些不同。不过总体不影响。可以查看作者更新文档。当然也不仅局限于Volantis主题,其他主题按照自身的语法格式同样可修改。Volantis主题已升级到3.0版本,有些文件位置与2.X版本有所不同,文中会提出。
●主界面优化
●页面优化
●评论区优化
一、主界面显示
1、设置主页logo
默认显示文字显得有些单调,故选择使用图片logo代替文字显示标题。修改主题配置文件_config.yml中的cover,添加logo属性值。
2、添加小标题动态彩色字体
修改主题配置文件_config.yml中的cover。去除subtitile属性值;在 themes/volantis/layout/_cover中index.ejs文件中添加如下代码(文字部分可修改):
1 | <!-- 封面滚动字体 --> |
1 | <div class='a'> |
这个滚动字体可以加在任何位置。
3、界面间距
原界面处title,subtitle,searc,menu之间间距感觉有点大,所以调整了一下。在 themes/volantis/source/css/_layout中的cover.styl文件修改margin-top,margin-bottom的值。
1 | .cover-wrapper .cover |
另:在界面中导航栏部分默认第一个会有下划线,如下

去除方法:在themes/volantis/source/css/_layout中cover.styl文件,大概在148行处,删除border-bottom属性
1 | ul>li>a |
总体效果:

二、页面优化
1、导航栏样式
主要是在原基础上添加了一个渐变背景。
首先在主题配置文件_config.yml中navbar的effext毛玻璃特效(blur)去掉。
1 | style: |
然后在themes\volantis\source\css\_layout\navbar.styl中,大概25行处添加代码
1 | background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%); |
1 | .l_header |
效果:

附上一个免费的CSS渐变背景样式网站:point_right:CSS背景渐变
2、页面卡片阴影
在主页面中的文章、侧边栏添加一点阴影,并在鼠标悬停时出现阴影。
在themes\volantis\source\css\_layout中main.styl文件,找到.white-box属性,在background下方添加代码:
主页文章:在\themes\volantis\source\css\_layout中main.styl文件,找到.post-wrapper属性
1 | .post-wrapper |
在themes\volantis\source\css\_layout中sidebar.styl文件,找到.widget属性,在display下方添加上面同样的代码。
侧边栏:在themes\volantis\source\css\_layout中sidebar.styl文件,找到.widget属性
1 | .widget |
注意格式!
3、页面特效
以下特效整理于网上分享的js代码,均在themes\volantis\layout中layout.ejs文件body里面直接引用即可。(不限制于Volantis主题)
a、樱花

1 | <script src="https://gcore.jsdelivr.net/gh/zyoushuo/Blog/hexo/js/sakura.js"></script> |
b、鼠标滑动特效

1 | <script src="https://gcore.jsdelivr.net/gh/zyoushuo/Blog/hexo/js/mouse_slide.js"></script> |
c、鼠标点击特效

1 | <script src="https://gcore.jsdelivr.net/gh/zyoushuo/Blog/hexo/js/mouse_click.js"></script> |
d、鼠标点击爱心特效

1 | <script src="https://gcore.jsdelivr.net/gh/zyoushuo/Blog/hexo/js/clicklove.js"></script> |
e、鼠标点击社会主义价值观特效

1 | <script src="https://gcore.jsdelivr.net/gh/zyoushuo/Blog/hexo/js/clicksocialist.js"></script> |
4、主页、正文文章标题居中
主页面的文章、文章正文、关于/友链/留言板等自定义页面的标题居中。
文章地址 themes\volantis\source\css_layout\main.styl
1 | .post-wrapper |
1 | .title |
5、博客文章链接优化
原本hexo中文章的链接是:year/:month/:day/:title/格式,有时候可能还会有乱码,不好看,所以通过插件修改。
安装插件
1 | npm install hexo-abbrlink --save |
此插件跟hexo-asset-image插件有冲突(可以使用本地图片的插件),若使用这个插件,hexo-asset-image插件会失效。
修改配置文件
文件地址 blog/_config.yml
1 | # permalink: :year/:month/:day/:title/ |
最后一键三连。然后链接就会变成post/***.html的格式。
6、添加鼠标样式
下载两个文件(文件一、文件二),文件放在\blog\themes\volantis\source\img中,然后在index.styl文件中引用。
1 | * |
7、文章首字下沉
设置文章中第一个p标签首字样式,达到下沉的效果。
1 | .article |
8、文章末尾版权
修改默认的文章末尾版权区域样式。
修改样式:
1 | blockquote |
修改内容:
1 | copyright: |
图标来自于📙 Emojipedia — 😃
三、valine评论优化
1、Valine添加博主标签
此部分参考博主HCLonely Blog的文章Valine添加博主标签及评论微信、QQ通知。
Volantis主题添加需要修改一点语法格式。
★添加评论QQ头像
★添加博主,小伙伴,访客标签
★添加浏览器和操作系统图标,需 fontawesomeV5 支持
★增加 QQ 邮箱识别
★metaplaceholder 可自定义
⑴ 首先引入valine的js代码
1 | https://gcore.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js |
本人使用的版本引入valine的js是在主题配置文件_conflg.yml的valine配置中,其他版本要是没有的话就在themes\volantis\layout_partial的scripts.ejs文件中找一下。
(2) 添加valine配置参数
| 参数 | 类型 | 说明 | 默认 | 实例 |
|---|---|---|---|---|
| tagMeta | Array | 标签要显示的文字 | 博主,小伙伴,访客 | 博主,小伙伴,访客 |
| master | Array/String | md5 加密后的博主邮箱 | . | 315be36db8ad7b3e3a7bb0839d6fa839 |
| friends | Array | md5 加密后的小伙伴邮箱 | . | 315be36db8ad7b3e3a7bb0839d6fa839 |
| metaPlaceholder | Object | meta placeholder 内容 | . | {“nick”:“昵称 / QQ 号”,“mail”:“邮箱 (必填)”} |
md5加密需要完整的邮箱地址,例如QQ邮箱就是123456789@qq.com;加密必须是32位小写。
例如我的配置为
1 | comments: |
附上一个MD5加密网站:point_right:MD5在线加密
(3) 添加valine渲染文件参数
在themes\volantis\layout_partial中scripts.ejs文件,找到enableValine,在valine.init中添加
(3.0版本文件位置在\themes\volantis\layout_third-party\comments\valine的scripts.ejs文件)
1 | master: master, |
1 | valine.init({ |
然后在 var valine = new Valine();下方添加
1 | var friends = '<%= theme.comments.valine.friends %>'.split(','); |
1 | var valine = new Valine(); |
2、评论添加一言

在themes\volantis\layout\_third-party中的comments.ejs文件,找到enableValine,在</ section>上方添加代码
(3.0版本文件位置在\themes\volantis\layout_third-party\comments\valine的layout.ejs中)
1 | <!-- valine 添加一言 --> |
1 | <% if (enableValine){ %> |
3、添加评论背景
在themes\volantis\source\css_third-party中的valine.styl文件,找到vedit,在span标签下方再添加.veditor标签属性。
1 | .veditor |
背景可替换。
1 | .vedit |
4、添加自定义表情
目前我使用的版本,在主题配置文件_config.yml的valine配置中,即使引用不同的js,valine的表情还是没有变化,需要修改渲染文件。
在themes\volantis\layout\_partial中的scripts.ejs文件,找到enableValine,在var emojiMaps = {}中即可添加。例如我的配置:
(3.0版本文件位置在\themes\volantis\layout_third-party\comments\valine的scripts.ejs文件)
1 | var emojiMaps = { |
这种方法适合对中文表情包,如果不在乎表情包名字的话可以按照作者的语法格式:
1 | for (var i = 1; i <= 54; i++) { |
按照语法格式对表情包进行命名,比较方便。我的配置为:
1 | <% if (enableValine){ %> |
此方法要在emojiCDN处添加地址。
5、修改表情区域样式
修改表情大小、背景颜色。在themes\volantis\source\css_third-party中的valine.styl文件
1 | .vemojis,.vpreview |
6、评论区卡片式背景
具体样式就是给每一条评论加个背景边框。
1 | .vcards |
:sunflower:最后
虽然是对Volantis主题的美化,但是其他主题同样适用。学会使用F12,找准位置,然后找到对应的文件,按照语法格式修改即可。多去参考参考其他博主的网站。
目前对Volantis主题就修改了怎么多,若再有修改,日后添加。
注意事项
☆如果修改了样式发现没有变化,请使用hexo cl清理文件缓存、Ctrl+F5强制刷新、Ctrl+shift+delete清理浏览器缓存。(尤其是最后一个)
☆有时候在修改styl文件会出现错误,比如这样:
可以发现是格式不正确,请删除多余的空格。
参考文章:
条评论