準(zhǔn)備工作

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

增加相冊STYLE

在next主題路徑下面添加photo.swig頁面

路徑如下：

themes/next/layout

生成相冊頁面

hexo new page “photos”

修改photos下的index.md文件抗果， index.md下載地址
其中 <a target="_blank" class="open-ins">圖片正在加載中…</a>中的 url 替換成你的博客地址
需要的三個css文件以及js文件都在我的圖片倉庫地址中blog_photo地址
全部下載下來放到photos文件夾下面 其中photoswipe.css和default-skin是查看圖片插件的css捏膨， 需要修改 ins.js 的 120和121行的 url 為你 github的圖片的網(wǎng)址
ins.css
photoswipe.css
default-skin
ins.js
同時需要將文件夾assets同時復(fù)制到您的photos文件夾下面

查看相冊插件PHOTOSWIPE

photoswipe參考網(wǎng)址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>

在根目錄中加入標(biāo)簽

在路徑themes/next/layout/_layout.swig中插入查看圖片的標(biāo)簽代碼

{% 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已經(jīng)配置完畢.
可以到我的博客地址查看效果https://www.yiai520.top/photos/

博客圖片添加流程

• 在 blog_photo(本地github圖片倉庫文件夾)里面加入圖片,圖片路徑在 photos 里面 圖片命名方式 yyyy-MM-dd_圖片描述.jpg/jpeg/gif/png
• 執(zhí)行 python3 tool.py
• 切換到博客myblog 目錄下 提交博客查看 hexo g -d
• 輸入網(wǎng)址查看照片