给博客添加照片

给博客添加照片

准备

在github创建一个新库名字叫Blog_Album,(名字随便起)本地新建文件名字同样叫Blog_Album,打开Git切换到当前文件夹下执行命令git init创建本地库,然后再次执行git remote add origin 你Github仓库ssh地址

安装python

下载地址
下载安装后打开cmd,切换都python安装目录下Scripts\我的地址D:\work\Python\Python37\Scripts 之后执行

1
2
easy_install-3.7.exe pip
pip install pillow

本地新建的Blog_Album文件下新建一个文件夹/photos,和min_photos文件夹,并且再Blog_Album下新建tool.py文件
代码如下:

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
#coding: utf-8
from PIL import Image
import os
import sys
import json
from datetime import datetime
from Imageprocessing import Graphics

# 定义压缩比,数值越大,压缩越小
SIZE_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 = os.listdir(directory)
# 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":
new_list.append(filename)
# print new_list
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)
# size_of_file = os.path.getsize(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)
# 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('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)
list_info = []
for i in range(len(file_list)):
filename = file_list[i]
date_str, *info = filename.split("_")
info='_'.join(info)
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']: # 不是最后的一个日期,就新建一个dict
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() # 翻转
final_dict = {"list": list_info}
with open("F:/项目/个人微博/love/themes/next/source/lib/album/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)
# business logic
file_list = list_img_file(src_dir)
# print file_list
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():

os.system('git add --all')
os.system('git commit -m "add photos"')
os.system('git push origin master')

# if __name__ == "__main__":
# cut_photo() # 裁剪图片,裁剪成正方形,去中间部分
# compress_photo() # 压缩图片,并保存到mini_photos文件夹下
# git_operation() # 提交到github仓库
# handle_photo() # 将文件处理成json格式,存到博客仓库中
cut_photo() # 裁剪图片,裁剪成正方形,去中间部分
compress_photo() # 压缩图片,并保存到mini_photos文件夹下
git_operation() # 提交到github仓库
handle_photo() # 将文件处理成json格式,存到博客仓库中

另外新建一个文件Imageprocessing.py,存放到python安装位置Python\Python35-32\Lib\site-packages下 代码如下:

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
# coding=utf-8  
from PIL import Image
import shutil
import os

class Graphics:
'''图片处理类

参数
-------
infile: 输入文件路径
outfile: 输出文件路径
'''
def __init__(self, infile, outfile):
self.infile = infile
self.outfile = outfile

def fixed_size(self, width, height):
"""按照固定尺寸处理图片"""
im = Image.open(self.infile)
out = im.resize((width, height),Image.ANTIALIAS)
out.save(self.outfile)


def resize_by_width(self, w_divide_h):
"""按照宽度进行所需比例缩放"""
im = Image.open(self.infile)
(x, y) = im.size
x_s = x
y_s = x/w_divide_h
out = im.resize((x_s, y_s), Image.ANTIALIAS)
out.save(self.outfile)


def resize_by_height(self, w_divide_h):
"""按照高度进行所需比例缩放"""
im = Image.open(self.infile)
(x, y) = im.size
x_s = y*w_divide_h
y_s = y
out = im.resize((x_s, y_s), Image.ANTIALIAS)
out.save(self.outfile)


def resize_by_size(self, size):
"""按照生成图片文件大小进行处理(单位KB)"""
size *= 1024
im = Image.open(self.infile)
size_tmp = os.path.getsize(self.infile)
q = 100
while size_tmp > size and q > 0:
print (q)
out = im.resize(im.size, Image.ANTIALIAS)
out.save(self.outfile, quality=q)
size_tmp = os.path.getsize(self.outfile)
q -= 5
if q == 100:
shutil.copy(self.infile, self.outfile)


def cut_by_ratio(self):
"""按照图片长宽进行分割

------------
取中间的部分,裁剪成正方形
"""
im = Image.open(self.infile)
(x, y) = im.size
if x > y:
region = (int(x/2-y/2), 0, int(x/2+y/2), y)
#裁切图片
crop_img = im.crop(region)
#保存裁切后的图片
crop_img.save(self.outfile)
elif x < y:
region = (0, int(y/2-x/2), x, int(y/2+x/2))
#裁切图片
crop_img = im.crop(region)
#保存裁切后的图片
crop_img.save(self.outfile)

此外图片名字命名方式以YYYY-MM-DD_描述.jpg,时间年月日描述;
上面一切的操作为的是图片处理
完了在cmd中切换到你Blog_Album文件下执行命令python tool.py F:\项目\个人微博\Blog_Album\photos 就是你刚刚创建的文件下
执行前请修改data.json存放位置,大约在133行

1
2
3
with open("F:/项目/个人微博/love/themes/next/source/lib/album/data.json","w") as fp:
修改为
with open("你的博客项目地址/themes/next/source/lib/album/data.json","w") as fp:

博客相册页面

在博客项目跟目录下执行hexo n page photos,并再主题配置_config.yml文件中menu选项中添加photos

1
2
3
4
5
6
7
8
9
10
11
menu:
home: / || home
#about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
photos: /photos || camera
#top: /top/ || signal
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

在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
30
31
32
---
title: 照片
date: 2018年10月31日17:34:48
tags: photos
type: "photos"
categories: photos
copyright: true
comments: true
fancybox: false
---
<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>

上述的css&js文件从这里下载
把相应为文件拷贝到相应的位置,photoswipe-ui-default.min.js, photoswipe.min.js俩文件放到themes/next/source/js/src中。
对于ins.js修改,大概在121行左右就是你自己的github中的链接

1
2
3
var minSrc = 'https://github.com/123love123/my_album/tree/master/min_photos' + data.link[i];

var src = 'https://github.com/123love123/my_album/tree/master/photos/' + data.link[i];

修改成你的地址就行

其他配置

next/layout/_layout.swig的头部head前添加对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中

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

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

主题配置文件中fancybox设置true,修改/themes/next/layout/_partials/head.swig

1
2
3
4
5
6
7
{% 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 %}

上方加入

1
2
3
4
5
6
{% if page.type === "photos"  %}
{% set theme.fancybox = false %}
{% endif %}
{% if page.type !== "photos" %}
{% set theme.fancybox = true %}
{% endif %}

如果本文对您有所帮助,请打赏给我吧,我先送个你也红包往下看,你可以把扫到红包打赏个我哦!
红包

本文标题:给博客添加照片

文章作者:範範

发布时间:2019年06月04日 - 14:06

最后更新:2019年08月14日 - 13:08

原始链接:http://www.trhsy.top/my_photos.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------The End-------------
範範 wechat
欢迎关注微信公众号,孬蛋等着你!
坚持原创技术分享,您的支持将鼓励我继续创作!