HEXO博客搭建相册

前言

本文主要介绍一些hexo博客搭建相册页面的具体过程，适配Next主题，简约又不失条理，一起试试吧~

1. 安装fancybox功能

fancybox功能主要用于实现相册图片的点击放大，能够形成相册效果。安装过程如下：

1.1 修改配置文件

# Fancybox. There is support for old version 2 and new version 3.
# Please, choose only any one variant, do not need to install both.
# For install 2.x: https://github.com/theme-next/theme-next-fancybox
# For install 3.x: https://github.com/theme-next/theme-next-fancybox3
fancybox: true

1.2 按照fancybox官网的安装步骤

$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox
$ cd themes/next/source/lib/fancybox
$ git pull #更新

2. 图片处理

本教程的相册图片是存放在coding.net的云端，也可以存在Github上，首先在本地服务器中建立名为album的文件夹，其中子文件夹/photos用来存放图片，目录树如下：

album
│
└───min_photos
│
└───photos
│   ├───pic1.jpg
│   └───pic2.jpg
│    
└───ImageProcess.py
│
└───tool.py

ImageProcess.py ——对图片进行压缩编辑；
安装PIL库，只需执行：pip install Pillow；
在/hexo/themes/next/source/lib中新建一个文件夹album，修改tool.py中自己的json文件保存路径，此文件存储了图片的链接，名称和简介，其中ensure_ascii=False是防止文件名中文乱码；
1
2
with open("YourBolgPath/themes/next/source/lib/album/data.json","w") as fp:
json.dump(final_dict, fp, ensure_ascii=False)
为了保证相册按时间顺序排列，在函数handle_photo中进行修改；
1
file_list = sorted(list_img_file(src_dir))
执行脚本tool.py文件，生成data.json，并Git上传到coding.Net或Github；
注意图片命名方式需要按照特定方式即：2017-02-02_discriptionofyourpic.jpg，图片的格式支持常见格式，时间和描述之间存在下划线。

3. 博客相册页面

在博客根目录下添加photo页面；

hexo n page photos
在themes/next/_config.yml配置文件中menu选项中添加photos:

menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  相册: /photos/  || camera

在photos中的index.md添加如下代码

---
title: 相册
date: 2019-02-14 12:57:30
type: photos
fancybox: false
comments: true
---

<link rel="stylesheet" href="../lib/album/ins.css">
<link rel="stylesheet" href="../lib/album/photoswipe.css"> 
<link rel="stylesheet" href="../lib/album/default-skin/default-skin.css">


<div class="instagram itemscope">
  <a href="http://yourbolg.com" target="_blank" class="open-ins">图片正在加载中…</a>
</div>

<script>
  (function() {
    var loadScript = function(path) {
      var $script = document.createElement('script')
      document.getElementsByTagName('body')[0].appendChild($script)
      $script.setAttribute('src', path)
    }
    setTimeout(function() {
        loadScript('../lib/album/ins.js')
    }, 0)
  })()
</script>

注意修改源路径为你自己博客的域名。

4. js&CSS文件

我们还需要添加css文件和js文件，具体文件见我的album；
注意/assets文件夹必须含有empty.png，否则图片缩略图可能不显示；
CSS文件拷贝到前面创建的/themes/next/source/lib/album中；
然后再将photoswipe-ui-default.min.js，photoswipe.min.js两个文件添加到themes/next/source/js/src中；

对ins.js文件进行一个简单的修正，将里面大约在121和122行左右的连接修改为你的图片连接地址（注意必须是图片点击放大的源文件地址，否则显示会出错，本教程coding,net的地址）

//var minSrc = 'https://raw.githubusercontent.com/yourgithub/Blog_Album/master/min_photos/' + data.link[i];
var minSrc = 'https://dev.tencent.com/u/cherryzzangg/p/Hexo-Workspace/git/raw/master/album/min_photos/' + data.link[i];
//var src = 'https://raw.githubusercontent.com/yourgithub/Blog_Album/master/photos/' + data.link[i];
var src = 'https://dev.tencent.com/u/cherryzzangg/p/Hexo-Workspace/git/raw/master/album/photos/' + data.link[i];

5. 其他配置

引用配置在next/layout/_layout.swig的头部前添加对js文件的引用如下：

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

在body中添加如下的内容：

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

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

1
2

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

修改相册时间轴年份CSS样式

.instagram .year {
	font-size: 16px;
	color: #555; //修改成自己的配色
}