【Hexo+Next主题】相册功能搭建详细步骤

完成👇的步骤，可以搭建一个自己的相册，效果见：https://lihanghang.top/photos/

主体思路

本文不涉及Hexo博客搭建内容，仅在已有的hexo博客基础上，增加博客的相册功能。 

相册功能的搭建涉及两大部分：

一是建立相册存储的项目（本文选用GitHub）、相册图片的处理等。

二是增加与配置hexo中NEXT主题的相关文件实现与第一部分的关联等

详细步骤

建立相册存储项目并处理

1. 使用github创建一个新项目（作为相册存储及处理的仓库），本文项目名统一为test_album，并clone到本地；

2. 在本地进入test_album项目，建立下面2个特定名称的文件夹📂：（存储图片用）

   1. min_photos （空文件夹）

   2. photos (请顺手放一张美照……）

      图片命名规则：20XX-XX-XX_photoName.jpg（如：2019-11-10_steves.jpg）

3. 继续给项目中加入下面2个文件📃: (处理图片用）

   1. ImageProcess.py 此处下载

   2. tool.py 此处下载

      1. 修改为博客位置：with open("My_Blog_PATH/themes/next/source/lib/test_album/data.json","w") as fp: json.dump(final_dict, fp, ensure_ascii=False)

      2. 在个人博客项目中的/themes/next/source/lib/ 下建立一个文件夹test_album。（目的是存储图片的链接）

4. OK，1-3准备工作已完成，执行下面的图片处理脚本：

python  tool.py  ,若成功，则输出：

    This program helps compress many image files

    you can choose which scale you want to compress your img(jpg/png/etc)

    1) normal compress(4M to 1M around)

    2) small compress(4M to 500K around)

    3) smaller compress(4M to 300K around)

(若min_photos文件夹出现了图片即处理成功，同时在/themes/next/source/lib/test_album/路径下出现data.json文件）

预告：可能会PIL模块出错，安装Pillow后再试下上面的命令。

执行上述步骤1-4完成后，提交修改内容回GitHub。

至此，本文第一部分完成啦，进入下一部分即：博客相关文件的添加与修改。💪

HEXO的Next主题下的相关文件添加与修改

建立博客相册的页面

1. 在博客根目录下添加photo页面，执行命令：hexo n page photos
2. 在themes/next/_config.yml配置文件中menu选项中添加photos: 相册: /photos/ || camera
3. 在根目录下 source/photos/ 文件夹中的index.md文件中添加，点击下载 （⚠️修改文件中的博客地址为你自己博客的域名）
4. 添加一系列文件
   1. 在themes/next/source/lib/album/下添加文件
      1. 修改ins.js文件的121和122行左右，把这两个地址改为你的仓库（GitHub线上地址）图片地址（看大图的地址，实在找不到，就把下面两个替换上即可，只需把红色字体修改为你的github名称和存储图片的仓库名即可。操碎了心……）。
         1. 例如:https://raw.githubusercontent.com/your_github/test_album/master/min_photos/'
         2. 例如: https://raw.githubusercontent.com/your_github/test_album/master/photos/'
   2. 将photoswipe-ui-default.min.js，photoswipe.min.js两个文件添加到themes/next/source/js/src中
5. 配置一些文件
   1. 在文件next/layout/_layout.swig的头部前添加对js文件引用：

      1. <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>

          

   2. 在文件next/layout/_layout.swig的body（方便起见，直接添加在body起始标签下面即可）下添加

      1. {% 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 %}

          

   3. 在/themes/next/layout/_scripts/pages/post-details.swig中添加

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

          

 

完成第二大部分1-5步骤，相册的搭建也进入尾声，最后执行熟悉的命令，完成全部的过程。

hexo g

hexo d

 

整个过程请保持耐心和头脑清楚，慢慢来，比较快!