Docker系列 在markdown中使用chevereto

发布于 2022-07-02  66 次阅读


前言

在上一回Docker系列 搭建个人图床chevereto中,我们用Docker镜像安装了chevereto。虽然chevereto的功能是强大,但有时功能强大就代表其设置比较复杂。我记得刚刚开始玩的时候,都不知道那些设置是什么意思,都采用的默认值,哈哈!不过采用默认值有一些潜在的不便,特别是国内用户。下面,我会简单地和大家说一下我自己用的chevereto图床是怎么设置。当然,最重要的是怎么让chevereto集成在你的typora里面,实现图片的随粘随传!这才是markdown的正确使用方式!

仪表盘

仪表盘,即dashboard一般就是指后台。这和wordpress的wp-admin是类似的。

在我的图床里,访问地址就是:https://chevereto.hwb0307.com/dashboard。chevereto的dashboard你们在上回也基本见过了,我的图床长这样:

image-20220423073521926

统计

dashboard是有多个页面的,包括统计、图片、相册、用户、设置、批量导入。在统计中,可以看到我图床的版本是1.4.1。我用的版本和你们的一样,也是旧版喔!MYSQL数据库版本则是5.5.5-10.7.3-MariaDB-1:10.7.3+maria~focal。这里可能大家发现了,MYSQLMariaDB好像是同一个东西。一般在开源社区,大家都使用MariaDB,因为MYSQL已经被甲骨文公司收购了嘛!

大家还记得之前的php.ini的内容吗?

upload_max_filesize = 100M
post_max_size = 100M
memory_limit = 3072M

其实和这里的设置是一一对应的:

最大的文件上传:    100 MB
最大的执行大小:    100 MB
内存限制:   3.1 GB

如果你不设置它,默认情况下是一个很小的值(好像是2M),这会带来不便,因为你的图片很有可能超过2M嘛!虽然在markdown使用中比较罕见。作为个人使用,当然要将上限调得高高的!

当然,默认值还是比较低的,到时要在后台改动。详情就往下看吧!

正在连接的IP172.26.0.1是一个局域网地址。它应该是chevereto这个Stack的网关的地址。你也可以在Portainer上确认一下是不是噢!

图片

整体的布局就是长这样:

image-20220423074908531

你双击这个图片,就可以观察这个图片的详细信息,它们是关于嵌入代码详细信息。比如:

image-20220423075344438

所以说,chevereto的功能还是很强的!至少可以对同一张图片生成很多不同用途的链接,对吧!

相册

我的相册只有一个,就是typora。我在typora上粘贴的图片都会放在这个相册里。

image-20220423075549144

我个人认为,这个相册对于新接触的chevereto的markdown用户来说十分重要。我强烈建议你应该创建一个相册,将typora上传上来的图片集中管理。如果你不设置相册,在使用API的时候,它会以访客的身份上传图片。我还没找到怎么将访客的图片转移到特定用户的特定相册。或许这是付费功能;或许通过对MYSQL的操作可以做到,但我觉得这对普通用户来说都不太友好。如果你以后有意拓展chevereto的用途,应该在一开始就建立一个特定的相册来管理API接口的图片。放心,本文也会教你怎么操作的!

这里教大家看一下相册的album id。后面有用:

image-20220423085002482

设置

我贴一些图,大家可以根据我的设置来搞。或者你可以自定义喽。如果我设置不对,大家也指正一下!

可设置的项目非常多:

image-20220423080307852

你可以按我的设置来初始化。如果你有什么不满意,自己微调即可。

网站

这里值得一说的,搜索、探索、随机、喜欢、粉丝禁用后,这样访客就看不到你的图片。如果你想别人看到你的图片,就可以启用。还有就是网站的隐私模式,只有选了访客开放,非注册用户才可以看到你酷酷的图床主页的图片切换!

image-20220423080521861

用户

因为是个人使用,所以禁用开放注册。

image-20220423080638155

系统

这里国内的用户要特别注意,将自动更新检查设置为禁用。不然,它可能会影响你登陆后台!这个问题曾经困扰我1年多。我开始以为是自己宝塔哪里设置的不对呢!后来发现是这个自动更新检查开启时,它会向github请求;而国内正常情况下github会封禁,无法访问。

image-20220423080841729

图片上传

这里红框的要多加注意。一般个人用,肯定是禁止访客上传数据的嘛!我不知道这个会不会影响API上传。如果影响,你们就启用吧!另外,如果你要上传WebP,这个WEBP也要勾选上。更多WebP优化和使用技巧可以参考我的文章《终极截图王ShareX支持webp》。

image-20220423081229865

主页

这里值得一说的是,你可以在主页设置多个图片,让图床的主页好看些(没什么卵用系列)。比如我就设置了多张图片:

image-20220423081435369

语言

这里还有一个语言选项,我是默认的,没有动过。不知道这个有没有什么影响?

image-20220423081613896

API

终于来到最重要的一个设置了。这个密钥你记住。它是类似于阿里云token一样的东西。有了它,可以不需要密码即可访问图床呢!这也是我们在typora里集成chevereto的最重要的参数。

image-20220423081654353

其它

没说到的都默认就行。

允许API上传至相册

在进一步设置typora和PicGo之前呢,让我们回到Shell修改一些Chevereto的文件。

# 工作目录
work=~/docker/chevereto/app

将网站根目录html下的./app/routes/route.api.php复制到同目录下的/overrides文件夹。该步骤使得复制后的文件在不替换的情况下更新,既保存源文件,又使修改后的代码能在源代码保留的情况下运行。

# 复制文件
sudo cp $work/app/routes/route.api.php $work/app/routes/overrides

# 将文件改为www-data所有
sudo chown -R 33:33 $work/app/routes/overrides 

然后修改这个复制后的文件:

sudo vim $work/app/routes/overrides/route.api.php

±对应新增删除代码:

$version = $handler->request[0];
$action = $handler->request[1];
+ $user = $_REQUEST['user'];    // 新增
+ $album = $_REQUEST['album'];  //新增
...
// CHV\Image::uploadToWebsite($source, 'username', [params]) to inject API uploads to a given username
- $uploaded_id = CHV\Image::uploadToWebsite($source);
+ $uploaded_id = CHV\Image::uploadToWebsite($source, $user, array('album_id'=>$album));

这里有一些截图,大家看一下:

image-20220423083717314

image-20220423083740978

该步骤将接受来自客户端的用户名和相册 ID 参数,避免上传至访客相册。

最后,重启一下chevereto以使配置生效:

cd ~/docker/chevereto && docker-compose restart

这一步有人教就不难。应该没什么问题吧?有问题评论区留言吧!

Typora集成Chevereto

大致的原理是这样的Typora--PicGo--Chevereto

PicGo的Github仓库地址是:https://github.com/Molunerfinn/PicGo。有16.6k收藏!

我在这里演示怎么在本地端(windows 10)安装PicGo-core和web-uploader。Mac的童鞋自己去找教程。PicGo其实和其它Windows软件类似,我觉得它用法比较多样、简单,这里我就不详细展开了。

我们专注于PicGo中与typorachevereto的相关设置!如果有什么疑难,评论区留言即可。

安装npm

  • 从https://nodejs.org/en/download/current/下载并安装node.js,其会自动合并npm。
  • msi文件双击,全部默认选择。安装完成在cmd中观察,可查看版本信息出现就说明安装成功:
npm -v # 6.13.4
node -v # v12.15.0

设置npm镜像

# 查看默认的npm镜像。不然下载会卡顿
npm get registry # https://registry.npmjs.org/

# 更改默认镜像。我这里用的是阿里的镜像。
npm config set registry https://registry.npm.taobao.org

PicGo-Core

下载与安装

# npm下载并安装picgo-core
npm install -g picgo

# 检查安装成功与否
picgo -h

# picgo中安装web-uploader插件(依赖npm,要事先设定好镜像)
picgo install web-uploader

# 观察picgo的位置
which picgo # /cygdrive/c/Users/Administrator/AppData/Roaming/npm/picgo

# 添加picgo至环境变量。如果是通过npm直接安装的picgo,则不需要自己添加环境路径。另外,要找到picgo的config.json文件
picgo upload -c C:\Users\Administrator\.picgo\config.json # 这是我的typora的设置

如果你用Everything之类的快速文件检索软件,搜索.picgo\config.json可以迅速定位喔!

设置config文件

PicGo的config.json文件内容如下:

这里对应了用户test_userid1的相册。

https://chevereto.hwb0307.com这个链接换成你图床的链接。

09900000000000000000000000b就是刚刚在dashboard中看到的API

{
  "picBed": {
    "uploader": "web-uploader",
    "current": "web-uploader",
    "transformer": "path",
    "web-uploader": {
      "customBody": "{\"key\":\"09900000000000000000000000b\", \"user\":\"test_user\", \"album\":\"1\"}",
      "customHeader": null,
      "jsonPath": "image.url",
      "paramName": "source",
      "url": "https://chevereto.hwb0307.com/api/1/upload"
    }
  },
  "picgoPlugins": {
    "[email protected]": true,
    "picgo-plugin-web-uploader": true
  }
}

一般这种Json文件可以用notepad++或者windows自带的记事本软件打开。

Typora设置

打开偏好设置:

image-20220423085159278

依次进入到设置图像的地方。在上传服务里选择Custom Command,命令是填写picgo upload -c C:\Users\Administrator\.picgo\config.json。当然,如果你的picgo不在windows系统的环境路径中,你应该写绝对路径。如果你是按我的方法来安装的,应该是在环境路径中的。

image-20220423085932887

你可以点一下验证图片上传选项。正常的结果如下:

image-20220423090301243

如果你不行,应该是有什么设置没对。自己检查一下,或者评论区留言了!

尝试上传图片至Chevereto

如果你现在才搭建成功chevereto,但你的markdown文件里就有一些旧图片怎么办?

如果你的旧图片(无论是本地还是其它图床的图片)可以用的话,直接在typora中右键你的图片,点上传图片即可。

image-20220423091441295

如果你还有其它更好的方法,欢迎评论区留言啦!

一般我建议在换新图床的时候,应该保持一段时间你的旧图床的正常运行。等你过了一段时间(比如1年),觉得已经过渡了,再正式地弃用旧图床,使用新图床。当然,如果你一开始就有一个好选择,就不用烦恼这种事了!

小结

本文终于将chevereto常规设置、在Typora中集成chevereto讲完了。老实话,设置还蛮复杂的。不过,你基本也只需要设置一次而已嘛!

这个文章也是为自己而写,如果以后有什么不记得了,就回来看看。

另外,我不知道不更新软件会不会留下什么漏洞。不过我的chevereto是用的NPM反代,应该还是蛮安全的吧!如果有大佬的话,也欢迎就图床安全问题给点建议噢!

虽然我可以成功地设置,不过我还是觉得这些方法不够简洁。如果Typora有内置网络图床的服务,说不定对很多用户有都很有吸引力呢!毕竟不是所有人都像我一样喜欢折腾的!大多数人一定是喜欢最简单的!

我觉得,可能不少人初次设置无法成功的。如果有什么问题,欢迎评论区留言。祝你好运 :stuck_out_tongue:

另外再次强调,一定要用duplicati做好chevereto的备份!

参考

其实应该有看不少文章,但是年代久远,很多链接失效了,找不到原文。