说起来我也觉得不像话，这博客做了这么久，放了一百篇文章了，事到如今终于安排上了图床。根本不是很麻烦的事情主要就是我拖。

具体方案是 scaleway s3 object storage bucket + PicList，从这个博客抄来的。

Scaleway

在 scaleway 上我本来就有个账号，s3对象存储有75GB免费额度，就用它了。

  1. 新建一个bucket。默认是 private bucket, 就默认吧，无所谓的
  2. 从右上角个人信息这里点 api key, 这个版面叫 Identity and Access Management (IAM)，新建一个 api key，存好这个 key 和 secret key

反正跟着 scaleway 自己的 documentation 来就好了：

PicList

之前下载过 PicGo 但是苹果系统更新之后打不开了，不知道为啥。不过也没开始用，就下载了试了一下，所以顺势放弃了。这次才听说了 PicGo 的分支项目 PicList，就用它了。

人家自己的documentation写得挺好的了，跟着做就行了。

  1. 首先下载，我用 homebrew, 所以就 brew 一下 brew install piclist --cask
  2. 下载好了，打开主窗口配置一下存储服务。在图床 tab 里，支持很多东西，但是我们用 aws s3，因为 scaleway 就是这样一个 s3 服务
  3. 好了把必选项都填上，之前存的 api key 就放进 access key ID 和 secret access key。bucket是指在 scaleway 上的 bucket name，别的可选项就不管了先这样吧
  4. 在设置 - 上传设置里还有一些可以设置的：
    1. 相册内删除时同步删除云端 - 我开了
    2. 上传成功提示 - 开
    3. 设置图片水印和压缩-格式转换等参数，点击设置，是否移除EXIF信息 - 是，是否转换格式 - 是，转换目标格式 - webp （因为webp比较小，加载快一点，免费的75G也能用得久一点）。行了就这些，我不要用水印，丑。
    4. 上传后自动复制url - 开
    5. 监听剪贴板 - 关，软件启动时自动监听剪贴板 - 关
    6. 选择显示的图床，全都点了，只留 aws s3
  5. 在上传页面可以选链接格式，我用 markdown 或者纯 url, 长链接短链接都无所谓（应该有所谓吗？）

我用 obsidian 编辑文字，PicList 有一个插件，跟着它们的documentation下载这个插件，就可以在粘贴图片到 obsidian 的时候同时上传这个图片并且把图片链接换成 s3 的链接。

前端显示

一般的图片显示就是这样，没有做预处理，因为不会（和懒）。

另外做了个拍立得效果的图片框儿，做成了 shortcode

busy city
busy city
路边草丛
路边草丛

html:

<div style="display: flex; justify-content: center; margin-top: 2rem; margin-bottom: 2rem;">

<div class="polaroid-frame">

<div class="polaroid-image">

<img src="{{ .Get "URL" }}" alt="{{ .Get "name" | default "" }}">

</div>

<div class="polaroid-caption">

{{ .Get "name" | default "" }}

</div>

</div>

</div>

css:

/* photo frame style */

.polaroid-frame {

position: relative;

display: inline-block;

width: fit-content;

max-width: 360px;

padding: 10px 10px 0;

background-color: #f1f1f1;

box-shadow: 0 5px 10px var(--background-secondary);

border-radius: 4px;

border: 2px solid var(--background-secondary);

border-bottom: 10px solid #f1f1f1;

border-bottom-left-radius: 10px; /* Adjust the border radius as needed */

border-bottom-right-radius: 10px; /* Adjust the border radius as needed */

}

  

.polaroid-image img {

display: block;

max-width: 100%;

height: auto;

object-fit: cover;

border: 0.5px solid black;

}

  

.polaroid-caption {

height: 2.8rem;

text-align: center;

color: black;

font-size: 1.5rem;

padding-top: 5px;

font-family: "Fuzzy Bubbles", "Zen Kurenaido", sans-serif;

font-weight: 700;

}

没有标题的话就是长这样

这个汉字字体不太行，我再找找别的。

还用上了评论区

评论区用的是看到很多人都在用的 twikoo，也是跟着它们自己的 documentation 走就好了。我用的是 vercel + CDN。

然后写成一个 partial，放在 /partials/components/twikoo-comment.html，然后把这个 partial 添加到模板 single.html 就好了。

风险是又注册了一个 mongoDB 的账号，很担心不注意什么时候用超了它给我发账单。

别的美观性设置都还没做，但是反正能评论了！

其他装修待办项

  • code block 好丑，处理一下
  • 图文混排，不知道，怎么搞都不太喜欢
  • 有没有什么美丽主题让我直接整个搬迁算了