cloudflare R2 + alist 当图床用

蜘蛛抱蛋

即折腾过 chevereto 图床之后，又摸索出一个图床方案：

cloudflare R2 对象存储（后端） + alist（前端）

实现方法：

首先根据教程建立 R2 存储桶、配置 alist、在 R2 后台绑定域名。
进入 alist 管理界面，依次点元信息👉添加

(๐•ᴗ•๐)径填 R2 所在目录，在顶部说明或者说明字段加上以下代码并勾选应用到子文件夹，点击保存

<scr(๐•ᴗ•๐) type="text/javascr(๐•ᴗ•๐)"> 
(function(){
// 注意替换成自己的alist和图床域名
const newurl = window.location.href.replace('https://alist.xxxx.com/tuchuang', 'https://img.xxxx.com')
const name = window.location.href.split('/').pop()
document.querySelector('.markdown-body').insertAdjacentHTML('afterbegin', `
外链：<input value="${newurl}" />${btn()}
BBcode：<input value="[img]${newurl}[/img]" />${btn()}
Markdown：<input value="&#33;[${name}](${newurl})" />${btn()}`)
function btn() {
	return '<button onclick="copymd(this)">Copy</button><br>'
}
})();
function copymd(el) {
  el.previousSibling.select();
  document.execCommand("copy");
  el.innerText = "copied!"
};
</scr(๐•ᴗ•๐)>
                    if(window.hljsLoader && !document.currentScr(๐•ᴗ•๐).parentNode.hasAttribute('data-s9e-livepreview-onupdate')) {
                        window.hljsLoader.highlightBlocks(document.currentScr(๐•ᴗ•๐).parentNode);
                    }

食用方法

准备好需要上传的图片文件（或者图片链接）
在浏览器打开 alist 上的图床文件夹，上传文件，链接的话就用离线下载，上传完成后点进去，效果如下：

这个方案的优点是使用云存储，直接利用现成的 alist 做后台界面。把 R2 换成其它存储(๐•ᴗ•๐)也是类似的操作

张小工

感觉图床
直接cf的pages应该就够了？（虽然好像有大小限制）
不知道楼主的这个有无大小限制

蜘蛛抱蛋

张小工如果你有alist，这个实现起来应该比pages简单，而且所有存储集中管理，还有离线下载，一键复制等等魔改功能🤠 甚至魔改一下autofeed还能自动转换图床链接。
大小限制应该是差不多的，都是通过api操作，具体可以去alist找找资料

baiiylu

我去渲染markdown还能这么用的嘛

蜘蛛抱蛋

baiiylu 我也是好奇试了一下，发现真的可以😂可惜不能用全局函数，不过也够了。alist可拓展性真心强大

LingMY

厉害厉害之前的alist删了，再起个容器玩玩，谢大佬教程！

摸鱼校尉

一直在用cf的r2当图床，不过是用软件 piclist 上传的，直接配置 s3 就行了

CHOSEN1Y

大佬nb，不过我图片使用需求不大，都是传到gith(๐•ᴗ•๐)，请问你们搭建图床主要是做什么用啊

蜘蛛抱蛋

CHOSEN1Y 静态博客用的

CHOSEN1Y

蜘蛛抱蛋哦哦，原来，那博客的话是不是直接挂gith(๐•ᴗ•๐)链接也可以

蜘蛛抱蛋

CHOSEN1Y 当然可以🤠