【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

 

整個過程請保持耐心和頭腦清楚，慢慢來，比較快!