参考这篇文章实现: hexo博客添加一级分类相册功能, 我这只是按照我的博客主题重新进行修改记录.
前面的步骤跟上面那篇文章上讲的差不多
添加相册菜单
修改主题下的配置文件 _config.yml
,不要跟站点根目录下的同名文件搞混了,在menu
添加以下代码:
1 | # Header |
做到这里相册菜单已经再左边导航里出现了, 不过点击会提示 404
因为站点下并没有galleries/index.html这个文件,如何生成这个文件呢?
在站点根目录
source下新建galleries目录,然后在该目录下新建index.md,就会生成index.html文件了,不过会被渲染成普通文章.
生成相册目录
而我们需要自定义样式,不能让它渲染成普通的文章。要让它渲染成一个layout,也就是我们自定义的模板。需要以下操作:
在index.md文件里添加以下内容,注意,那几个中划线也不要少了。
1 | --- |
首先添加自定义CSS样式文件,该主题目录下的source/css里新建gallery.css文件,复制以下css样式进去:
1 |
|
在该主题layout
目录下新建galleries.ejs
文件,添加以下代码:
1 |
|
制作相册配置文件
在站点目录sources/_data/下新建一个galleries.json的文件,模板如下:
1 | [ |
就是一个包含多个相册的列表JSON,每个相册有以下字段,name是相册标题,cover是封面图片,从相册里随便选一个就行,description是相册介绍,photos是图片列表。图片较少的话手动复制进去就行,如果你图片较多的话推荐使用脚本之类的东西自动生成。
生成相册列表
在该主题layout
目录下新建gallery.ejs
文件,添加以下代码:
1 | <% |
在galleries下建立对应的相册名称目录和文件,比如我这个相册需新建 2019三个目录,然后下面再分别新建index.md文件,文件内容为:
1 | --- |
建好相应目录和文件之后,如果你的图片路径也没有错的话,相册目录和列表就都会渲染出来了,如下所示:
主要的差异部分在他们框架带了bootstrap样式和Jquery依赖, 所有样式上要单独做兼容