yilia 实现相册功能


阅读数: 次   

方案

  • 在github上新建一个仓库，主要用于存储图片，可以通过url访问到，也方便管理

  • 将要放到相册的图片处理成json格式的数据，然后进行访问，这里json的格式需要配合要使用的样式，所以需要处理成特定格式的json数据，下面会给出

  • 图片裁剪，因为相册显示的样式最好是正方形的的图片，这里使用脚本处理一下

  • 图片压缩，相册显示的图片是压缩后的图片，提高加载的速度，打开后的图片是原图

    实现

    • github操作

    • 建立一个用于存储相册的仓库，我这里建立了名为myBlog 的仓库

    • 将样式文件放到photos文件夹下，样式文件我都放到了github上

    • 修改ins.js文件，主要是里面的render函数

    • 其中的url对应到你的github放图片的地址

      1
      var render = function render(res) {
      2
      var ulTmpl = "";
      3
      for (var j = 0, len2 = res.list.length; j < len2; j++) {
      4
        var data = res.list[j].arr;
      5
        var liTmpl = "";
      6
        for (var i = 0, len = data.link.length; i < len; i++) {
      7
          var minSrc = 'https://raw.githubusercontent.com/lawlite19/blog-back-up/master/min_photos/' + data.link[i];
      8
          var src = 'https://raw.githubusercontent.com/lawlite19/blog-back-up/master/photos/' + data.link[i];
      9
          var type = data.type[i];
      10
          var target = src + (type === 'video' ? '.mp4' : '.jpg');
      11
          src += '';
      12
          liTmpl += '<figure class="thumb" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">\
      13
                <a href="' + src + '" itemprop="contentUrl" data-size="1080x1080" data-type="' + type + '" data-target="' + src + '">\
      14
                  <img class="reward-img" data-type="' + type + '" data-src="' + minSrc + '" src="/zbcn.github.io/assets/img/empty.png" itemprop="thumbnail" onload="lzld(this)">\
      15
                </a>\
      16
                <figcaption style="display:none" itemprop="caption description">' + data.text[i] + '</figcaption>\
      17
            </figure>';
      18
        }
      19
        ulTmpl = ulTmpl + '<section class="archives album"><h1 class="year">' + data.year + '年<em>' + data.month + '月</em></h1>\
      20
        <ul class="img-box-ul">' + liTmpl + '</ul>\
      21
        </section>';
      22
      }

    • 图片处理

    • python脚本文件都放在了这里：https://github.com/lawlite19/Blog-Back-Up

    • 裁剪图片

      • 去图片的中间部分，裁剪为正方形
      • 对应的裁剪函数
        1
         def cut_by_ratio(self):  
        2
        """按照图片长宽进行分割
        3
        4
        ------------
        5
        取中间的部分，裁剪成正方形
        6
        """  
        7
        im = Image.open(self.infile)  
        8
        (x, y) = im.size  
        9
        if x > y:  
        10
            region = (int(x/2-y/2), 0, int(x/2+y/2), y)  
        11
            #裁切图片  
        12
            crop_img = im.crop(region)  
        13
            #保存裁切后的图片  
        14
            crop_img.save(self.outfile)             
        15
        elif x < y:  
        16
            region = (0, int(y/2-x/2), x, int(y/2+x/2))
        17
            #裁切图片  
        18
            crop_img = im.crop(region)  
        19
            #保存裁切后的图片  
        20
            crop_img.save(self.outfile)
      • 压缩图片
        1
         def compress(choose, des_dir, src_dir, file_list):
        2
        """压缩算法，img.thumbnail对图片进行压缩，
        3
        参数
        4
        -----------
        5
        choose: str
        6
                选择压缩的比例，有4个选项，越大压缩后的图片越小
        7
        """
        8
        if choose == '1':
        9
            scale = SIZE_normal
        10
        if choose == '2':
        11
            scale = SIZE_small
        12
        if choose == '3':
        13
            scale = SIZE_more_small
        14
        if choose == '4':
        15
            scale = SIZE_more_small_small
        16
        for infile in file_list:
        17
            img = Image.open(src_dir+infile)
        18
            # size_of_file = os.path.getsize(infile)
        19
            w, h = img.size
        20
            img.thumbnail((int(w/scale), int(h/scale)))
        21
            img.save(des_dir + infile)

    • github提交

      • 处理完成之后需要将处理后的图片提交到github上
      • 这里同样使用脚本的方式，需要将git命令行配置到环境变量中
        1
        def git_operation():
        2
        '''
        3
        git 命令行函数，将仓库提交
        4
        ----------
        5
        需要安装git命令行工具，并且添加到环境变量中
        6
        '''
        7
        os.system('git add --all')
        8
        os.system('git commit -m "add photos"')
        9
        os.system('git push origin master')

    • json数据处理

      • 下面就需要将图片信息处理成json数据格式了，这里为重点
      • 这里我采用的方式是读取图片的名字作为其中的text的内容，图片的命名如下图
      • 最前面是日期，然后用_进行分隔
      • 后面是图片的描述信息，注意不要包含_和.符号

    • 实现代码

      • 注意代码中../zbcn.github.io/source/photos/data.json是对应到我的博客的路径，这里根据需要改成自己博客的路径
      1
       def handle_photo():
      2
      '''根据图片的文件名处理成需要的json格式的数据
      3
      最后将data.json文件存到博客的source/photos文件夹下
      4
      '''
      5
      src_dir, des_dir = "photos/", "min_photos/"
      6
      file_list = list_img_file(src_dir)
      7
      list_info = []
      8
      for i in range(len(file_list)):
      9
          filename = file_list[i]
      10
          date_str, info = filename.split("_")
      11
          info, _ = info.split(".")
      12
          date = datetime.strptime(date_str, "%Y-%m-%d")
      13
          year_month = date_str[0:7]            
      14
          if i == 0:  # 处理第一个文件
      15
              new_dict = {"date": year_month, "arr":{'year': date.year,
      16
                                                      'month': date.month,
      17
                                                      'link': [filename],
      18
                                                      'text': [info],
      19
                                                      'type': ['image']
      20
                                                       }
      21
                                          }
      22
              list_info.append(new_dict)
      23
          elif year_month != list_info[-1]['date']:  # 不是最后的一个日期，就新建一个dict
      24
              new_dict = {"date": year_month, "arr":{'year': date.year,
      25
                                                     'month': date.month,
      26
                                                     'link': [filename],
      27
                                                     'text': [info],
      28
                                                     'type': ['image']
      29
                                                     }
      30
                          }
      31
              list_info.append(new_dict)
      32
          else:  # 同一个日期
      33
              list_info[-1]['arr']['link'].append(filename)
      34
              list_info[-1]['arr']['text'].append(info)
      35
              list_info[-1]['arr']['type'].append('image')
      36
      list_info.reverse()  # 翻转
      37
      final_dict = {"list": list_info}
      38
      with open("../lawlite19.github.io/source/photos/data.json","w") as fp:
      39
          json.dump(final_dict, fp)

    • 每次图片有改动都需要执行此脚本文件

    脚本执行

    • 照片放在 myBlog\blogSrc\blogPhoto\photos 文件件下
    • 执行py 脚本 myBlog\blogSrc\blogPhoto\tool#main 方法

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

身在井隅<br><br> 心想星光<br><br> 眼里有诗<br><br>自在远方