让自己的Hexo更漂亮(三)

前言

系列文章主要说一些 Hexo官方帮助文档 中没有或讲解不详细的的内容。该文主要包括添加炫酷动态背景、添加点击小红心、添加自定义页面等。

炫酷动态背景

使用Next自带背景

Next 主题目前已有5个自带的动态背景canvas_nest、three_waves、canvas_lines、canvas_sphere和canvas_ribbon。

只需要将主题配置文件_config.yml中canvas相应的false值改为true即可激活相应的动态背景。可以挨个试一下,找到自己喜欢的

自定义背景

1) 首先需要在主题配置文件_config.yml中,添加相应字段。例如添加一个自己的动态背景,名称为Canvas-mine,则需要添加:

#Canvas-mine
canvas_mine: true

并且,前面提到的Next自带的背景需要改为false。

2) 书写自己的动态背景的js文件,保存在路径\next\source\js\src 中

3) 添加修改代码。找到并打开next/layout/_layout.swig加上

完成。

添加点击小红心

下载开源js资源

前往网址下载:
https://github.com/Neveryu/Neveryu.github.io/blob/master/js/src/love.js

将下载得到的 love.js 文件添加到 \themes\next\source\js\src 文件目录下

修改layout文件

找到 \themes\next\layout_layout.swing 文件, 在文件的后面, 标签之前添加以下代码:

添加自定义页面

相信很多人都想在Hexo添加自己定制的专属页面,比如我博客中的“纪念日”页面。下面是我自定义页面的一些心得,这里可能需要有一定的Html、CSS、JS基础,这些并不难,若是还不会可以先去学一学,网上课程有很多。

创建新页面

运行命令

hexo new page 'page-title'

之后就会在_post文件夹中出现一个你新建的页面的文件夹。

修改新建页面的index.md文件

新建的页面文件夹中,会有一个index.md文件,打开并使用layout关键字定义该页面使用的模板,如我的修改如下:

创建模板文件

声明新建页面使用的模板之后,就需要创建模板文件了。找到 \themes\next\layout\,创建你对应的模板文件。如我之前声明的新页面使用的模板是love,这里就创建模板文件love.swig,部分代码如下:

页面js文件的使用

页面中用到的就是文件需要保存在路径\themes\next\source\js\src 下,找到 \themes\next\layout_layout.swing 文件, 在文件的最后,添加你需要引入的js文件,例如我添加的代码为:

注意:page.type需要对应自己新建页面的type。

页面的CSS样式添加

找到文件 \next\source\css_custom\custom.styl,在该文件中添加需要定义的CSS样式即可。

页面中图片的使用

将需要使用的页面放在路径\next\source\images下,在新建的模版文件(love.swig)中使用Html相关语法引入即可,引用路径为/images/your-pic.jpg。

其他内容

next主题的官网有很多配置的设置方法,大家可自行查看,自己动手,丰衣足食。接下来,我还会写一些关于Hexo优化的文章,以让我们自己的Hexo变得更Beautiful。感谢大家的关注。。也欢迎大家评论留言,一起探讨 :)

林中亚 | Danny wechat
扫一扫,关注我的个人微信公众号 :)
坚持原创技术分享,您的支持将鼓励我继续创作!