Hexo+NexT 博客搭建相册 首先说一下实现想法,在 腾讯云开发者平台 上面创建一个相册库(PS:腾讯云开发者平台是腾讯云与 CODING 共同为开发者打造的云端工具平台,旨在为更多的开发者带去便捷、高效的开发体验,提供包括需求管理、代码编写、代码管理、代码运行的整套系统),当有更新时,提交到腾讯云开发者平台上面,同时在博客 resource 下面生成一个 data.json 来生成所有相册文件的 json 文件,博客读取 data.json 来展示相册。
实现效果链接:
Photos https://hasaik.com/photos/
创建相册 在腾讯云开发者平台上面创建一个仓库,命名为 Blog_Back_Up
(仓库名字随便). 用 git clone
把仓库 clone
到本地来.
创建 photos
和 min_photos
两个目录,把要上传的相册图片 放到 photos
文件夹下面.
***相册图片命名方式 : yyyy-MM-dd_des.jpg/png/jpef/gif. eg: 2017-9-18_风景.jpg***
处理图片 图片的处理我用 python
脚本来处理,这样每次只要执行脚本就可以了。如果您的电脑没有 Python
,自行上网搜索安装教程,一搜一大把。
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 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 from PIL import Imageimport osimport sysimport jsonfrom datetime import datetimefrom ImageProcess import GraphicsSIZE_normal = 1.0 SIZE_small = 1.5 SIZE_more_small = 2.0 SIZE_more_small_small = 3.0 def make_directory (directory ): """创建目录""" os.makedirs(directory) def directory_exists (directory ): """判断目录是否存在""" if os.path.exists(directory): return True else : return False def list_img_file (directory ): """列出目录下所有文件,并筛选出图片文件列表返回""" old_list = sorted (os.listdir(directory), reverse=True ) print(old_list) new_list = [] for filename in old_list: name, fileformat = filename.split("." ) if fileformat.lower() == "jpg" or fileformat.lower() == "png" or fileformat.lower() == "gif" or fileformat.lower() == "jpeg" : new_list.append(filename) return new_list def print_help (): print(""" 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) """ )def compress (choose, des_dir, src_dir, file_list ): """压缩算法,img.thumbnail对图片进行压缩, 参数 ----------- choose: str 选择压缩的比例,有4个选项,越大压缩后的图片越小 """ if choose == '1' : scale = SIZE_normal if choose == '2' : scale = SIZE_small if choose == '3' : scale = SIZE_more_small if choose == '4' : scale = SIZE_more_small_small for infile in file_list: img = Image.open (src_dir+infile) w, h = img.size img.thumbnail((int (w/scale), int (h/scale))) img.save(des_dir + infile) 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) 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) '''如果已经压缩了,就不再压缩''' 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('4' , des_dir, src_dir, file_list_src) def handle_photo (): '''根据图片的文件名处理成需要的json格式的数据 ----------- 最后将data.json文件存到博客的source/photos文件夹下 ''' src_dir, des_dir = "photos/" , "min_photos/" file_list = list_img_file(src_dir) print(file_list) list_info = [] for i in range (len (file_list)): filename = file_list[i] date_str, info = filename.split("_" ) info, _ = info.split("." ) date = datetime.strptime(date_str, "%Y-%m-%d" ) year_month = date_str[0 :7 ] if i == 0 : new_dict = {"date" : year_month, "arr" :{'year' : date.year, 'month' : date.month, 'link' : [filename], 'text' : [info], 'type' : ['image' ] } } list_info.append(new_dict) elif year_month != list_info[-1 ]['date' ]: new_dict = {"date" : year_month, "arr" :{'year' : date.year, 'month' : date.month, 'link' : [filename], 'text' : [info], 'type' : ['image' ] } } list_info.append(new_dict) else : list_info[-1 ]['arr' ]['link' ].append(filename) list_info[-1 ]['arr' ]['text' ].append(info) list_info[-1 ]['arr' ]['type' ].append('image' ) list_info.reverse() tmp = bubbleYear(list_info) bubble(tmp) final_dict = {"list" : list_info} with open ("../xuxugood.github.io/source/photos/data.json" ,"w" ) as fp: json.dump(final_dict, fp) def cut_photo (): """裁剪算法 ---------- 调用Graphics类中的裁剪算法,将src_dir目录下的文件进行裁剪(裁剪成正方形) """ src_dir = "photos/" if directory_exists(src_dir): if not directory_exists(src_dir): make_directory(src_dir) file_list = list_img_file(src_dir) if file_list: print_help() for infile in file_list: img = Image.open (src_dir+infile) Graphics(infile=src_dir+infile, outfile=src_dir + infile).cut_by_ratio() else : pass else : print("source directory not exist!" ) def git_operation (): ''' git 命令行函数,将仓库提交 ---------- 需要安装git命令行工具,并且添加到环境变量中 ''' os.system('git add --all' ) os.system('git commit -m "add photos"' ) os.system('git push origin master' ) def bubble (bubbleList ): listLength = len (bubbleList) while listLength > 0 : for i in range (listLength - 1 ): for j in range (listLength-i-1 ): if (bubbleList[j].get('arr' ).get('year' ) == bubbleList[j+1 ].get('arr' ).get('year' )): if bubbleList[j].get('arr' ).get('month' ) < bubbleList[j+1 ].get('arr' ).get('month' ): bubbleList[j], bubbleList[j+1 ] = bubbleList[j+1 ], bubbleList[j] return bubbleList def bubbleYear (bubbleList ): listLength = len (bubbleList) while listLength > 0 : for i in range (listLength - 1 ): for j in range (listLength-i-1 ): if bubbleList[j].get('arr' ).get('year' ) < bubbleList[j+1 ].get('arr' ).get('year' ): bubbleList[j], bubbleList[j+1 ] = bubbleList[j+1 ], bubbleList[j] return bubbleList if __name__ == "__main__" : cut_photo() compress_photo() git_operation() handle_photo()
其中 ../xuxugood.github.io/source/photos/data.json
是我博客地址,这里换成你的博客地址。
使用方法 执行命令 python3 tool.py
,因为我用的是 python3
这里可以根据你的 python
版本来使用。
问题 如果出现 from PIL import Image
这种报错,说明没有 PIL 这个库,执行 python3 -m pip install Pillow
增加相册style 在 Next 主题下面增加 photo.swig
页面,路径如下 next/layout
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 {% extends '_layout.swig' %} {% import '_macro/post-collapse.swig' as post_template %} {% import '_macro/sidebar.swig' as sidebar_template %} {% block title %}{{ page.title }} | {{ config.title }}{% endblock %} {% block content %} { { { <div class="post-block photo" > <div id="posts" class="posts-collapse" > </div> </div> { { { {% include '_partials/pagination.swig' %} {% endblock %} {% block sidebar %} {{ sidebar_template.render(false ) }} {% endblock %}
生成相册页面 生成相册页面 hexo new page photos
,修改 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 title: 我的相册 date: 2017-09-15 09:51:05 type : "photos" comments: false --- <link rel="stylesheet" href="./ins.css" > <link rel="stylesheet" href="./photoswipe.css" > <link rel="stylesheet" href="./default-skin/default-skin.css" > <div class="photos-btn-wrap" > <a class="photos-btn active" href="javascript:void(0)" >Photos</a> </div> <div class="instagram itemscope" > <a href="https://xuxugood.github.io" 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('./ins.js' ) }, 0) })() </script>
其中 <a href="https://xuxugood.github.io" target="_blank" class="open-ins">图片正在加载中…</a>
中的 url 替换成你的博客网址。
需要三个 css 文件和一个 js 文件放在 photos 文件夹下,其文件都在我的 腾讯云开发者平台 上面,需要修改 ins.js
的 120 和 121 行的 url 为你腾讯云开发者平台图片的网址。
查看相册插件 photoswipe 上面 index.md
中加入了两个 css 文件,这是我们用 photoswipe 查看相册用到的,具体可以参考网址 photoswipe 。这里我们已经把 css 文件加上了,之后我们要加上 js 文件 photoswipe.min.js
和 photoswipe-ui-default.min.js
,js 资源下载地址 photoswipe ,js 存放路径为 next/source/js/src
引用 js 文件 在 layout/_scripts/pages/post-details.swig
中插入
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>
在根目录加入标签 在 _layout.swig
中的body标签里最前面插入以下内容
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 {% 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 %}
至此相册查看插件 photoswipe 已经配置完毕。
整个流程使用 在 Blog_Back_Up 里面加入图片,图片路径在 photos 里面 图片命名方式 yyyy-MM-dd_des.jpg/jpeg/gif/png 执行 python3 tool.py 切换到博客 resource 目录下 在 photos 里面生成了 data.json 文件,提交到腾讯云开发者平台仓库上面 输入网址查看照片