前端 blog

小站日记01——图床

Akari2024-01-102024-01-10

从昨天下午折腾到今天下午，真累啊...荧妹，嘿嘿，我的荧妹...包包，嘿嘿...包包...

1. 使用过的图床

1.1 SunPics

SunPics - 基于EasyImage的开源免费图床

特性：

免费

空间无限制

支持导出 HTML、Markwown、直链 等格式

速度较快

会压缩图片

不支持后台管理

但是由于恶意攻击，以后可能不能用了······所以不用了，唉。

R.I.P

1.2 PicGo + Github

PicGo: 一个用于快速上传图片并获取图片 URL 链接的工具。

PIcGo项目地址：https://github.com/Molunerfinn/PicGo

PicGo官网：https://molunerfinn.com/PicGo/

PicGo文档：https://picgo.github.io/PicGo-Doc/en/guide/#picgo-is-here

特性：

免费

空间有限制——依托于GitHub，1GB大小

支持导出HTML、Markwown、直链、custom自定义 等格式

速度慢，不稳定，上传经常失败

不会压缩图片

不支持后台管理

参考教程：

Github 图床 PicGo 使用 - Wlcheng’s Life

exo+Next（2）PicGo图床搭建H | 我的小站

使用Github+picGo搭建图床，保姆级教程来了 - 知乎

如何利用 Github 搭建自己的免费图床？ - 知乎

vscode 快捷方式：

Ctrl + Alt + u：从剪切板上传

Ctrl + Alt + e：从资源管理器上传

Ctrl + Alt + o：从输入框上传

1.3 Telegraph-Image

免费图片托管解决方案，Flickr/imgur替代品。使用Cloudflare Pages和Telegraph。

项目地址：https://github.com/cf-pages/Telegraph-Image

演示地址：https://im.gurl.eu.org/

特性：

无限图片储存数量，你可以上传不限数量的图片

无需购买服务器，托管于Cloudflare的网络上，当使用量不超过Cloudflare的免费额度时，完全免费

无需购买域名，可以使用Cloudflare Pages提供的 *.pages.dev 的免费二级域名，同时也支持绑定自定义域名

支持图片审查API，可根据需要开启，开启后不良图片将自动屏蔽，不再加载

支持后台图片管理，可以对上传的图片进行在线预览，添加白名单，黑名单等操作

折腾一会后，算是搞成了······

但是：项目地址文档中说可以不使用 kv 加密，使用cloudflare access 更好，不会搞·····折腾半天，算了······

当然你也可以不设置这两个值，这样访问后台管理页面时将无需验证，直接跳过登录步骤，这一设计使得你可以结合 Cloudflare Access 进行使用，实现支持邮件验证码登录，Microsoft账户登录，Github账户登录等功能，能够与你域名上原有的登录方式所集成，无需再次记忆多一组后台的账号密码，添加Cloudflare Access的方式请参考官方文档，注意需要保护路径包括/admin 以及 /api/manage/ *

2. 自定义链接格式控制图片样式

Github 图床 PicGo 使用 - Wlcheng’s Life

算是意外收获了，哈哈。在找 picgo 的教程时发现的，确实好！
正好 telegraph 只有直链，这些格式在文章中还是需要的啊。

改动如下：

去掉了标题文字下划线

缩小了标题文字和图片之间的间隔

总结如下：

控制大小

<div align="center" ><img src="$url" alt="$fileName" width="75%"/></div>

圆角

<div align="center" >
    <img src="$url" alt="$fileName" width="75%" style="border-radius:10px;"/>
</div>

阴影

<div align="center" >
    <img src="$url" alt="$fileName" width="75%" style="box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);"/>
</div>

阴影 + 圆角

<div align="center" >
    <img src="$url" alt="$fileName" width="75%" style="box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); border-radius:10px;"/>
</div>

阴影 + 标题

<div align="center" >
    <img src="$url" alt="$fileName" width="75%" style="box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); margin-bottom: 3px;"/>
    <div style="color:orange; display: inline-block; color: #777; font-size: 90%; padding: 1px;">
        此处插入标题
    </div>
</div>

圆角 + 标题

<div align="center" >
    <img src="$url" alt="$fileName" width="75%" style="border-radius:10px; margin-bottom: 3px;"/>
    <div style="color:orange; display: inline-block; color: #777; font-size: 90%; padding: 1px;">
        此处插入标题
    </div>
</div>

阴影 + 圆角 + 标题

<div align="center" >
    <img src="$url" alt="$fileName" width="75%" style="box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);border-radius:10px; margin-bottom: 3px;"/>
    <div style="color:orange; display: inline-block; color: #777; font-size: 90%; padding: 1px;">
        此处插入标题
    </div>
</div>

此为原作者文章链接格式：

美化方式	效果图	链接格式
控制大小		`<div align="center" ><img src="$url" alt="$fileName" width="75%"/></div>`
圆角处理		`<div align="center" ><img src="$url" alt="$fileName" width="75%" style="border-radius:10px;"/></div>`
图片阴影		`<div align="center" ><img src="$url" alt="$fileName" width="75%" style="box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);"/></div>`
阴影+圆角		`<div align="center" ><img src="$url" alt="$fileName" width="75%" style="box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);border-radius:10px;"/></div>`
阴影+标题	此处插入标题	`<div align="center" ><img src="$url" alt="$fileName" width="75%" style="box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);"/><br><div style="color:orange; border-bottom: 1px solid #d9d9d9; display: inline-block; color: #777; font-size: 90%; padding: 1px;">此处插入标题</div></div>`
圆角+标题	此处插入标题	`<div align="center" ><img src="$url" alt="$fileName" width="75%" style="border-radius:10px;"/><br><div style="color:orange; border-bottom: 1px solid #d9d9d9; display: inline-block; color: #777; font-size: 90%; padding: 1px;">此处插入标题</div></div>`
阴影+圆角+标题	此处插入标题	`<div align="center" ><img src="$url" alt="$fileName" width="75%" style="box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);border-radius:10px;"/><br><div style="color:orange; border-bottom: 1px solid #d9d9d9; display: inline-block; color: #777; font-size: 90%; padding: 1px;">此处插入标题</div></div>`