我有给文章添加图片的需求，主要是为了解决一些需要发布的文章 没有 头图的问题。
有几个解决方案：
- 在创建 post 的时候，创建好图片
- 通过命令的方式，增加图片
另外，我希望我的图片能够更加稳定地存在自己的图床上，因此有把图片放到自己图床的需求，这部分可以参考 解决ob的图床问题
先用最简单的方式，使用 templater 插件，插件的使用可以参考 ob插件选择和使用。templater官方博客
1
| <% tp.web.random_picture("600x200", "landscape,water") %>
|
这样得到的，是一个在 文档中使用 超链接 呈现出来的图片。
我希望能在 meta 中添加一张图片，则自己写了个脚本，注入到 templater 中，如下：
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
| async function newimage(size, query) {
const response = await getRequest(
`https://source.unsplash.com/random/${size ?? ""}?${query ?? ""}`);
const url = response.url;
return url
}
async function getRequest(url) {
const response = await fetch(url);
if (!response.ok) {
throw new Error("Error performing GET request");
}
return response;
}
module.exports = newimage;
|
命令暂时就不加了，使用 template 的快捷键一样 ok 。
当然，按理使用 quickadd 也能实现此功能，回头再看。
增加转成自己的图床
我在 上面的代码中，加上上传到 picgo ，改成了:
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
| async function newimage(size, query) {
const response = await getRequest(
`https://source.unsplash.com/random/${size ?? ""}?${query ?? ""}`);
const url = response.url;
const res = await fetch(uploadUrl, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ list: [url] }),
});
const data = await res.json();
return data.result[0]
}
async function getRequest(url) {
const response = await fetch(url);
if (!response.ok) {
throw new Error("Error performing GET request");
}
return response;
}
module.exports = newimage;
|
意想不到的是，居然发生了 CORS 的问题，而这种问题，只能由 picgo 来解决了，于是download 了 picgo 的代码，一番操作，添加了 跨域允许 的 header ：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
if (request.method === 'OPTIONS') {
handleResponse({
response,
header: {
'access-control-allow-headers': '*',
'access-control-allow-methods': 'POST, GET, OPTIONS',
'access-control-allow-origin': '*'
}
})
return
}
|
然后，perfect ！
最后，增加一个纯模板，配一个命令，perperperfect !
归属:
A prudent question is one half of wisdom.
— Francis Bacon