建站历程：主题美化篇——添加相册

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：
本文字数： 9.9k | 阅读时长 ≈ 17 分钟
git

这篇文章介绍如何给你的博客添加相册。

先贴一下自己目前博客的配置：

Hexo: 3.8.0

Next: 7.0.0

os: Windows_NT 10.0.18362 win32 x64

由于Hexo和Next的版本更新比较快，我有不太喜欢更新，所以目前适用的一些功能，可能在最新的版本无法使用。我找添加相册的方法时，就碰到了这种问题，所以在此特作声明。
这是我目前的相册，具体实现原理是这样的：利用python脚本对本地的图片仓库进行修剪、生成所略同，并上传到github远程仓库。同时将github作为图床，获取这些图片在github上的链接，显示在博客的相册目录下。

建立并上传github相册仓库

创建本地git仓库

在你想要存放相册照片的地方创建一个名为MyBlog_Images的文件夹，打开终端，移动到MyBlog_Images的地址，建立本地git仓库：

1
git init

在MyBlog_Images文件夹中创建两个子文件夹，名字为photos和min_photos。photos文件夹将用来存放原图，min_photos文件夹用来存放缩略图。

现在以一张测试图片为例，我们把它复制到MyBlog_Images/photos目录，注意所有图片需要以特定方式命名，格式为：yyyy-mm-dd_PicName.jpg/png/jpeg/gif，例如2019-08-31_test.jpg。

创建并链接到github远程仓库

在github中创建一个新的仓库，然后进入仓库所在的网页，你可以看到Quick setup的提示中，已经告诉你如何将本地仓库链接到这个远程仓库了。

同样的，在之前打开的终端（地址应该还是xxx/MyBlog_Images），输入

1
2
git remote add origin https://github.com/YourName/RepositoryName.git
git push -u origin master

获取python脚本

从这个仓库下载配置文件，点击Clone or download -> Download ZIP，或者在命令行中输入

1
git clone git@github.com:malizhigithub/HexoAlbumData.git

配置

将tool.py和Imageprocessing.py文件放在xxx/MyBlog_Images路径下，打开并修改tool.py文件

文件位置：xxx/MyBlog_Images/tool.py
1
2
- with open("E://YourBlog/themes/next/source/lib/album/data.json","w") as fp:
+ with open("YourBolgPath/themes/next/source/lib/album/data.json","w") as fp:

在YourBolgPath/themes/next/source/lib目录下创建一个album文件夹，在album文件夹下新建data.json文件

若你想在相册放置较多格式的图片，也可以修改tool.py的代码

1
2
- if fileformat.lower() == "jpg" or fileformat.lower() == "png" or fileformat.lower() == "gif":
+ if fileformat.lower() == "jpg" or fileformat.lower() == "png" or fileformat.lower() == "gif" or fileformat.lower() == "你的照片格式":

另外一个需要修改的是compress_photo()函数的压缩程度，tool.py脚本会将MyBlog_Images/photos目录下的图片进行压缩，在tool.py代码中找到compress_photo的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
def compress_photo():
    '''调用压缩图片的函数
    '''
    src_dir, des_dir = "photos/", "min_photos/"
    
    if directory_exists(src_dir):
        if not directory_exists(src_dir):
            make_directory(src_dir)
        # business logic
        file_list_src = list_img_file(src_dir)
    if directory_exists(des_dir):
        if not directory_exists(des_dir):
            make_directory(des_dir)
        file_list_des = list_img_file(des_dir)
        # print file_list
    '''如果已经压缩了，就不再压缩'''
    for i in range(len(file_list_des)):
        if file_list_des[i] in file_list_src:
            file_list_src.remove(file_list_des[i])
    - compress('1', des_dir, src_dir, file_list_src)
    + compress('压缩等级(1/2/3/4)', des_dir, src_dir, file_list_src)
# 定义压缩比，数值越大，压缩越小
# SIZE_normal = 1.0 1级
# SIZE_small = 1.5  2级
# SIZE_more_small = 2.0 3级
# SIZE_more_small_small = 3.0   4级

修改压缩等价，数字越大，压缩程度越高，图片就越模糊。

修改Next主题配置文件

将JS&CSS文件夹下的所有文件复制到YourBolgPath/themes/next/source/lib/album
然后再将photoswipe-ui-default.min.js，photoswipe.min.js两个文件添加到themes/next/source/js/src中。

  • 修改ins.js:
文件位置：YourBolgPath/themes/next/source/lib/album/ins.js
1
2
3
4
5
- var minSrc = 'https://raw.githubusercontent.com/lizhi/Blog_Album/master/min_photos/' + data.link[i];
- var src = 'https://raw.githubusercontent.com/lizhi/Blog_Album/master/photos/' + data.link[i];
// 替换成下面的代码
+ var minSrc = 'https://raw.githubusercontent.com/yougithubname/pathtoyourphotos/min_photos/' + data.link[i];
+ var src = 'https://raw.githubusercontent.com/yougithubname/pathtoyourphotos/photos/' + data.link[i];

如何获取自己github仓库中的图片链接地址：

访问之前创建的github仓库网站，此时可以看到之前存着的测试图片2019-08-31_test.jpg，点击图片名称，会进入预览网站，右键点击图片，选择在新标签页打开图片，就可以看到图片地址，地址是以https://raw.githubusercontent.com开头的。

  • 修改_layout.swig

    在head部分添加以下代码

    文件位置：YourBolgPath/themes/next/layout/_layout.swig
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <head>
      {{ partial('_partials/head/head.swig', {}, {cache: theme.cache.enable}) }}
      {% include '_partials/head/head-unique.swig' %}
      <title>{% block title %}{% endblock %}</title>
      {% include '_third-party/analytics/index.swig' %}
      {{ partial('_scripts/noscript.swig', {}, {cache: theme.cache.enable}) }}
      <!-- 相册代码-head部分 -->
    +  <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>

    </head>

    在body部分增加下面代码

    文件位置：YourBolgPath/themes/next/layout/_layout.swig
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <body itemscope itemtype="http://schema.org/WebPage" lang="{{ page.lang || page.language || config.language }}">
    <!-- 此处省略许多body部分其他代码 -->
    <!-- 相册代码-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 %}

    </body>

  • 修改post-details.swig：

    文件位置：YourBolgPath/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>

  • 若你主题开启了fancybox功能（主题的_config.yml中显示fancybox: true），则需要修改head.swig，在if theme.fancybox前面添加如下代码，否则相册功能会有问题

    文件地址：YourBolgPath/themes/next/layout/_partials/head.swig
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    +{% if page.type === "photos"  %}
    +  {% set theme.fancybox = false %}
    +{% endif %}
    +{% if page.type !== "photos"  %}
    +  {% set theme.fancybox = true %}
    +{% endif %}

    {% if theme.fancybox  %}
      {% set fancybox_css_uri = url_for(theme.vendors._internal + '/fancybox/source/jquery.fancybox.css?v=2.1.5') %}
      {% if theme.vendors.fancybox_css %}
        {% set fancybox_css_uri = theme.vendors.fancybox_css %}
      {% endif %}
      <link href="{{ fancybox_css_uri }}" rel="stylesheet" type="text/css" />
    {% endif %}

添加photos目录

在博客底层目录打开终端，并创建一个新的目录，命名为photos

1
2
cd YourBlogPath
hexo n page photos

修改主题的_config.yml，在menu中添加相册目录：

文件位置：YourBlogPath/themes/next/_config.yml
1
2
3
4
5
6
7
8
menu:
  home: / || home
  about: /about/ || user
  categories: /categories/ || th-list
  tags: /tags/ || tags
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
+ photos: /photos || camera-retro # my photo gallery

修改photos目录的index.md，添加如下代码：

文件位置：YourBlogPath/source/photos/index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
---
title: photos
date: 2019-03-19 23:47:05
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="photos-btn-wrap">
  <a class="photos-btn active" href="javascript:void(0)" target="_blank" rel="external">Photos</a>
</div>
<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>

测试及部署

现在，可以运行python脚本，并部署博客了：

1
2
3
4
5
cd xxx/MyBlog_Images
python tool.py
cd YourBlogPath
hexo g
hexo d

注意：如果你电脑中同时安装了python2和python3两个版本，在运行脚本的时候，需要在终端输入python3 tool.py而不是python tool.py。

一切顺利的话，部署结束后刷新自己的主页，就可以看到相册页面，以及测试图片了。

之后如果添加了新的照片，也是在终端执行一样的命令。

参考文章

0%