Hexo主题千千万,有Next的黑白简洁,有Sakura的动态萌趣,还有Butterfly的高效均衡,可谓乱花丛中迷人眼,而我暂时选择了不那么花哨,功能尚且还行的Volantis❤。不过在使用的过程中,有些模块部分往往无法满足个人的需求(主要是看了好多大佬的网站很厉害而自己的太LOW从而很惭愧),因此做出一些个人的小小优化,积少成多,还请笑纳☺。

使用动态图标

让图标如同你的心跳一样动起来,效果如本站导航栏所示。

前提

阅读Font-awesome-animation文档

如何使用

  1. 在主题中引用所需的css文件:

    1
    <link rel="stylesheet" href="font-awesome-animation.min.css">

    定位目录 hexo/themes/volantis/layout/_partial/head.ejs 大概85行位置(找到link注释),手动粘贴以上代码。

  2. 通过F12定位导航栏图标位置,目的是为了找到图标父级元素,通过赋予父级元素特定class,来实现图标的动态效果。

    我们找到图标元素名称以及元素定位如下图所示:

    元素名称

    元素定位

    通过参考引用可知:我们需在父级元素中添加class faa-parentanimated-hober

    实例引用方式

  3. 定位元素位置 hexo/themes/volantis/layout/_partial/header.ejs 约52行位置,于父级元素(a标签)中添加class

    手动添加内容

    font-awesome-animation可通过三种方式实现,这里我这里使用的是On parent hover方式,因此需要对父级元素进行操作,其他两种效果请自行更改添加class位置

  4. 添加完毕后通过hexo cl && hexo g 完成网站重新渲染,若失败请仔细阅读文档,查看修改位置是否正确即可。

为图标添加title

  • Volantis主题默认的社交图标没有title,我们可以通过添加title的方式让访问者更加友好的知道图标的含义。

    添加标题

如何使用:

  1. 定位图标位置如下图所示:

    可以看到a标签并没有title属性,这里有是因为我添加过的原因

  2. 定位主题文件中的位置 hexo/themes/volantis/layout/_widget/blogger.ejs 约35行位置,添加内容

    1
    title="<%- value.title %>"

    如下所示:

  3. 同时在主题config.yml文件中添加title:

    完成后hexo三连重新生成静态文件即可。

使用插件提高网站访问速度

待更新。。。

评论