Hexo+NexT 博客搭建相册
准备工作
首先搭建好相册库.
添加相册style
在 next 主题下面添加 photo.swig 页面.
路径如下
next/layout
生成相册页面
生成相册页面和生成分类和标签页面一样
hexo new page “photos”
修改 photos 下的 index.md文件
index.md
其中 图片正在加载中…中的 url 替换成你的博客网址.
需要 三个 css 文件 和一个 js 文件 ,其中photoswipe.css和default-skin.css这 css 是查看图片插件的 css, 后面会说到,把这些 css 和 js 文件都在 photos 文件夹下面
ins.css
photoswipe.css
default-skin
ins.js
查看相册插件 photoswipe
上面 index.md 中加入了两个 css 文件,这里我们已经把 css 文件加上了.之后我们要加上 js 文件 photoswipe.min.js 和photoswipe-ui-default.min.js
js存放路径为
next/source/js/src
引使用 js 文件
在 _layout.swig 中插入
在layout/_scripts/pages/post-details.swig 中插入
12
放在 head 标签里面
_layout.swig 路径为
next/layout
到这里已经差不多完成了相册查看,还差最后一步,在 index.html 中加入 标签.
在根目录加入标签
在 _layout.swig 中 前插入
{% if page.type === "photos" %}