hexo图片展示: blog图床迁移至七牛云

发表于 | 阅读次数：
本文字数： 6.2k | 阅读时长 ≈ 6 分钟

前言

上一篇中，搭建好了hexo next主题的博客，将cxxn中的所有博客为md文档后再全部上传到hexo站内，但是有一个很大的问题：hexo本地图片无法显示，需要安装插件，然后以非md外链的格式插入图片，这使用起来相当不便且不通用，因此放弃插入本地图片的方案。导出的md中的图片外链有的是csdn站内的，有的是github仓库里的，为了保证md中的图片能在各平台都正常显示，了解到七牛云免费提供10G OSS对象存储空间，因此，本篇记录一下将md中的图片迁移至七牛云云床的过程。

注册七牛云

注册

注册链接

注册后完成实名认证，可免费领取10G OSS空间。实名认证审核需要1个小时左右

假设你已经完成注册和实名，点击如下链接，免费领取空间: 领取10G OSS空间

创建OSS bucket

创建链接

创建好bucket后，可以上传一下文件测试

获取图片上传至七牛云图床

这里写了一个python脚本，开20个线程处理md文档，逻辑是这样的:

1
2
3
4
1.扫描md文档，获取到其中的图片url
2.下载url将图片保存至本地
3.将本地的图片上传至七牛云
4.将md文档中的图片url替换成对应的七牛云外链url

七牛云OSS Python SDK地址: OSS Python SDK

代码:

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
import re
import requests
import os
from qiniu import Auth, put_file
from concurrent.futures import ThreadPoolExecutor


# 获取md文件中的图片链接,保存为文件，上传至七牛并返回七牛外链地址
def get_pic_url(filename):
    url_map = {}
    with open(filename, 'r',) as f:
        content = f.read()
        img_patten = r'!\[.*?\]\((.*?)\)|<img.*?src=[\'\"](.*?)[\'\"].*?>'
        matches = list(re.compile(img_patten).findall(content))
        if len(matches) > 0:
            for url in matches:
                url = url[0]
                # CSDN图片直链有3种样式，真坑:
                # 这一种文件名太长，直接这样命名上传到七牛云之后，有时外链链接无法加载.
                # https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcxMTE2MTQ1MjIxNTky,
                # 下面两种要去除后面的参数
                # https://img-blog.csdnimg.cn/20181206193427845.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3cTkzNQ==,size_16,color_FFFFFF,t_70
                # https://img-blog.csdn.net/20180626193940302?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3cTkzNQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
                print("图片原url:", url)
                try:
                    headers = {
                        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML,'
                                      ' like Gecko) Chrome/55.0.2883.87 Safari/537.36'
                    }
                    if "csdn" in url:
                        pic_name = url.split('csdnimg.cn/')[-1]
                        # pic_name = "{}/{}".format(pic_path, url.split('csdnimg.cn/')[-1])
                        pic_name = pic_name.split('csdn.net/')[-1]
                        pic_name = pic_name.split('?')[0]
                        # csdn部分直链链接里没有格式，加个图片尾缀
                        if not pic_name.endswith('.jpg') and not pic_name.endswith('.png'):
                            pic_name = pic_name + '.jpg'

                    elif "github" in url:
                        # 保存github图片，github直链的链接为文件链接加参数:?raw=true,例如:
                        # https://github.com/yinwenqin/kubeSourceCodeNote/blob/master/scheduler/image/p2/schedule.jpg?raw=true
                        pic_name = url.split('/')[-1]
                        url += "?raw=true"

                    else:
                        # 别的来源的图片链接如有不同，请自行按对应格式修改
                        pic_name = url.split('/')[-1]

                    response = requests.get(url, headers=headers).content

                    pic_name_len = len(pic_name)
                    # 名字太长截取一半
                    if pic_name_len > 40:
                        pic_name = pic_name[int(pic_name_len/2):]
                    pic_name = "{}/{}".format(pic_path, pic_name)
                    print(pic_name)
                    with open(pic_name, 'wb') as f2:
                        f2.write(response)
                    new_pic_url = pic_upload(pic_name)
                    url_map[url] = new_pic_url

                except Exception as e:
                    print("文件:", filename, "url处理失败:", url, e)
                    return {}
    print(url_map)
    return url_map


# 获取所有的md文件
def list_file(files, path):
    # 取出指定路径下的所有文件，包含所有子目录里的文件
    items = os.listdir(path)
    for i in items:
        i_path = os.path.join(path, i)
        if os.path.isdir(i_path):
            list_file(i_path, files)
        else:
            if i_path.endswith(".md"):
                files.append(i_path)
    return files


# pic上传七牛云图床，获取图片在图床中的链接，替换md文档
def pic_upload(file):
    try:
        # 认证相关信息换成自己的
        endpoint = "http://xxxxxx.bkt.clouddn.com"
        access_key = "xxxxxxxxxxxx"
        secret_key = "xxxxxxxxxxxxx"
        bucket_name = 'xxxxxxxx'
        key = os.path.basename(file)
        q = Auth(access_key, secret_key)
        token = q.upload_token(bucket_name, key, 3600)
        put_file(token, key, file)
        # 上传后得到的图片外链示例: http://mycloudn.wqyin.cn/AlgSchedule.jpg
        new_url = endpoint + '/' + os.path.basename(file)
        # print('new url', new_url)
        return new_url

    except Exception as e:
        print('upload image to QiNiu oss failed:', file, e)
        return ""


# 替换md文件中的旧链接
def modify_md(filename, url_map):
    try:
        with open(filename, "r") as f:
            content = f.read()
        for url, new_pic_url in url_map.items():
            with open(filename, "w") as f:
                content = content.replace(url, new_pic_url)
                f.write(content)
    except Exception as e:
        print(filename, '文件修改失败:', e)


def run(file):
    # {old_url: new_url}
    url_map = get_pic_url(file)
    if len(url_map.keys()) > 0:
        modify_md(file, url_map)


def main(path):
    # 获取所有的md文件
    files = list_file([], path)
    if len(files) > 0:
        th_pool = ThreadPoolExecutor(20)
        for file in files:
            th_pool.submit(run, file)
        th_pool.shutdown(wait=True)
    else:
        print("no markdown found, exit")


if __name__ == "__main__":
    md_path = "./md/"
    pic_path = "../pic"
    if not os.path.exists(pic_path):
        os.makedirs(pic_path)
    main(md_path)

运行完成后，将替换后的md放入username.github.io/source/_posts内，push到仓库中，浏览器打开hexo blog可以看到，所有图片都可以正常显示

图床工具PicGo

markdown中插入图片一直以来都不太方便，即使是使用外链，一般也需要如下繁琐步骤：

1.保存图片

2.上传图片至云床

3.复制云床外链

4.md中插入外链

于是诞生了图床工具的需求，mac中有一款非常好用的图床上传工具iPic，支持七牛云但收费48/年，找了很久最后都打算自己撸工具的时候，发现了一款免费开源的神器PicGo，而且难能可贵的是win/linux/mac平台都能支持,试用了一番，同样相当强大。

mac一键安装:

1
brew cask install picgo

其余平台参考项目地址: PicGo

PicGo支持拖拽式上传图片，也支持直接使用快捷键将粘贴板中的图片上传至云床，上传完成后，自动将得到的外链地址写入系统粘贴板内，在md中直接粘贴即可显示图片。

上面繁琐的步骤，简化为了：截图至粘贴板 -> 快捷键上传至图床(cmd + ctrl + u) -> 粘贴使用。使用起来行云流水，一气呵成，非常之爽，良心工具，墙裂推荐！

赏一瓶快乐回宅水吧～
-------------本文结束感谢您的阅读-------------