Hexo+NexT博客搭建相册功能（二）

准备工作

按照Hexo+NexT博客搭建相册功能（一）搭建好相册库

增加相册STYLE

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

路径如下：

themes/next/layout

生成相册页面

hexo new page “photos”

修改photos下的index.md文件， index.md下载地址
其中 图片正在加载中…中的 url 替换成你的博客地址
需要的三个css文件以及js文件都在我的图片仓库地址中blog_photo地址
全部下载下来放到photos文件夹下面 其中photoswipe.css和default-skin是查看图片插件的css， 需要修改 ins.js 的 120和121行的 url 为你 github的图片的网址
ins.css
photoswipe.css
default-skin
ins.js
同时需要将文件夹assets同时复制到您的photos文件夹下面

查看相册插件PHOTOSWIPE

photoswipe参考网址https://photoswipe.com/
将js文件 photoswipe.min.js
和photoswipe-ui-default.min.js
添加到主题文件中，
js存放路径为

themes/next/source/js/src

引用js文件

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

在根目录中加入标签

在路径themes/next/layout/_layout.swig中插入查看图片的标签代码

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


    

    

        

            

            

            

        
        

            

                

                
                
                
                
                
                
                

                    

                      

                        

                      
                    
                
            
            

                
 
            
            
            
            
            
            

                

            
        
    

{% endif %}

到此相册查看插件photoswipe已经配置完毕.
可以到我的博客地址查看效果https://www.yiai520.top/photos/

博客图片添加流程

• 在 blog_photo(本地github图片仓库文件夹)里面加入图片,图片路径在 photos 里面 图片命名方式 yyyy-MM-dd_图片描述.jpg/jpeg/gif/png
• 执行 python3 tool.py
• 切换到博客myblog 目录下 提交博客查看 hexo g -d
• 输入网址查看照片