Hexo+NexT 博客搭建相册

作者 : 开心源码 本文共623个字,预计阅读时间需要2分钟 发布时间: 2022-05-11 共85人阅读

准备工作

首先搭建好相册库.

添加相册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" %}

发表回复