Hexo+NexT 博客搭建相册(二)

上一篇文章 Hexo+NexT 博客搭建相册(一) 讲解了怎样用 github 来创建相册库.现在来讲解怎样在 hexo 中使用相册库.

准备工作

---

按照 Hexo+NexT 博客搭建相册(一) 搭建好相册库.

增加相册style

在 next 主题下面增加 photo.swig 页面.
路径如下

next/layout

由于篇幅原因,大家可以在我的 github 上面下载 photo.swig

生成相册页面

生成相册页面和生成分类和标签页面一样

hexo new page "photos"

修改 photos 下的 index.md文件
由于字数限制,代码不贴出来了,大家可以在我的 github 上面下载
index.md
其中 图片正在加载中…中的 url 替换成你的博客网址.
需要 三个 css 文件 和一个 js 文件.都在我的 github 上面 ,其中photoswipe.css和default-skin.css这 css 是查看图片插件的 css, 后面会说到,把这些 css 和 js 文件都在 photos 文件夹下面
ins.css
photoswipe.css
default-skin
ins.js
需要修改 ins.js 的 120和121行的 url 为你 github 的图片的网址.

查看相册插件 photoswipe

上面 index.md 中加入了两个 css 文件,这是我们用 photoswipe 查看相册用到的.具体可以参考网址 photoswipe
这里我们已经把 css 文件加上了.之后我们要加上 js 文件 photoswipe.min.js 和photoswipe-ui-default.min.js
js存放路径为

next/source/js/src

引用 js 文件

在 _layout.swig 中插入
在layout/_scripts/pages/post-details.swig 中插入

放在 head 标签里面
_layout.swig 路径为

next/layout

到这里已经差不多完成了相册查看,还差最后一步,在 index.html 中加入 标签.

在根目录加入标签

在 _layout.swig 中 前插入

{% if page.type === "photos" %}


    

    

        

            

            

            

        
        

            

                

                
                
                
                
                
                
                

                    

                      

                        

                      
                    
                
            
            

                
 
            
            
            
            
            
            

                

            
        
    

{% endif %}

至此相册查看插件 photoswipe 已经配置完毕.

整个流程使用

• 在 blog_back_up 里面加入图片,图片路径在 photos 里面 图片命名方式 yyyy-MM-dd_des.jpg/jpeg/gif/png.
• 执行 python3 tool.py
• 切换到博客 resource 目录下
• 在 photos 里面生成了 data.json 文件 提交到github 上面.
• 输入网址查看照片.

很多人转载我原博地址,也不注明来源,真的让我很气!!所以我在中更博.效果可以去我的博客中查看 原博地址 TIM'S BLOG