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

准备工作

增加相册STYLE

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

路径如下：

themes/next/layout

生成相册页面

hexo new page “photos”

修改photos下的index.md文件， index.md下载地址
其中 <a href="https://zhaopan7011.github.io" target="_blank" class="open-ins">图片正在加载中…</a>中的 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 中插入

<script src="{{ url_for(theme.js) }}/src/photoswipe.min.js?v={{ theme.version }}"></script>
<script src="{{ url_for(theme.js) }}/src/photoswipe-ui-default.min.js?v={{ theme.version }}"></script>

在根目录中加入标签

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

{% if page.type === "photos" %}
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>
{% 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
输入网址查看照片