vscode+wordpress+oss一键上传文章方案

cvestone 发布于 2024-07-15 369 次阅读 1861 字 预计阅读时间: 8 分钟


刚开始配置虽然会有点小麻烦,但只要根据本文第一次配置完,后续就一劳永逸了

wordpress的配置

首先本方案的核心就是利用wordpress的rest api接口来实现。最新版本的wordpress已经默认开启了该接口支持,不再需要去wordpress的插件中添加rest api插件。

设置好auth应用程序密码

这是为了后面WordPress Post扩展需要连接你的wordpress而做准备的,只有为其添加好凭据才能有权限连接rest api对wordpress做更多操作。
用户-个人资料,拖动到最下面:
2024-07-15-12-21-32
然后点击新增的应用程序密码,会随机生成一个然后复制下来,注意只有一次复制该密码的机会!!

注意前提必须确保你的域名是具有HTTPS证书的,否则无法设置该密码,并且要注意后面只要用到了vscode的扩展WordPress Post,则必须时刻保持你的博客是有HTTPS证书的,否则REST API是无法与其建立连接的,也就是说当证书过期了要记得重新申请HTTPS证书。

2024-07-15-13-52-32

设置好固定链接

设置-固定链接,固定链接要选择自定义的,不要太复杂就行。可以直接和我的保持一致:
2024-07-15-11-29-09

检查rest api是否能够正常使用

首先,在自己的博客根路径url添加/wp-json/wp/v2/posts,有正常回显出你最新写的文章内容就说明正常:
2024-07-15-11-32-17

阿里云oss的准备

首先关于阿里云oss存储桶Bucket的基本创建与使用这里就不再赘述了,网上都有很多这方面的文章。

购买oss资源包

来到控制台-对象存储 OSS,然后资源包管理-购买资源包,全部选默认就可以,地域如果默认有报错,选择与自己匹配的地区,如下:
2024-07-15-11-41-32
如果只存储图片在oss的话,这个配置完全够用了,并且注意平时要留意阿里云的通知,如果提醒你快过期了一定要及时续费,也是这个价格,否则过期后太久没续费,Bucket里的资源可能会面临被清空的风险,除非你及时做好了备份。

临时保存好阿里云凭据信息

鼠标放在右上角的头像上,点击这个:
2024-07-15-11-44-26
2024-07-15-11-44-47
2024-07-15-11-45-14
验证完手机号后:
2024-07-15-11-46-34
临时保存到本地,后面要用到,注意为了安全,用完就将其在本地彻底删除。

vscode的配置

绑定github账号开启自动同步

首先登录,点击这个,刚开始不是像我这样的,总之就是点一个代表"同步"意思的选项,然后会让我们登录,选择用github登录最好。这样每次换设备使用vscode时,这些已经完成的插件配置等都会与账号保存好的配置进行同步,这样就不需要每次重新配置一遍。
2024-07-15-11-48-25

所以注意当一台设备已经配置完成所有的,更换设备最好就不要再轻易设置任何其他额外的了,或者增加插件等,当然也可以,但是避免让自己混乱还是不要这样做,如果打开自动同步后出现了“远程与本地冲突”的类似提示,此时一定要审慎考虑保留哪个,一般情况下是选择远程的,即上一次登录状态下自动同步保存的。所以这个同步功能也就是我前面提到的“一劳永逸”的依据。

自动同步开启后的状态如下:
2024-07-15-13-39-25

安装必要的扩展插件

2024-07-15-11-55-36
在扩展的搜索框搜索以下插件进行安装并配置:

Aliyun OSS Uploader

2024-07-15-12-00-33

2024-07-15-19-47-33
最好用户工作区都填写,并保持一致。

WordPress Post

2024-07-15-12-00-52

2024-07-15-19-54-52
最好用户工作区都填写,并保持一致。

Markdown All in One

2024-07-15-12-01-11
无需配置

Markdown Preview Enhanced

2024-07-15-12-01-45
无需配置

测试一键发布文章与一键传图

比如编写博客文章内容如下:
2024-07-15-20-26-45
一键发布文章方式:
ctrl+shift+P,刚开始可能会显示无关的命令,先在弹出的搜索框输入wordpress,然后第一次执行后下一次就会有记忆性,下一次再次用这个快捷键后,一键发布的命令就会在第一个,直接点击就可以了:
2024-07-15-22-51-38
点击后等一会,右下角会出现该文章生成的id并提示已上传,然后检查自己的博客是否有出现该文章即可。
然后再在该文章的基础上稍微修改,重新一键发布,看看该id是否还是保持原来的,并且博客中不会出现重复的该文章(很小的概率会有这个重复的小bug,并且前后id不一样,如果出现这种情况没关系,把最初修改的那篇文章删了并且清空wordpress回收站,然后保留新的就好,如果你不介意浏览量什么的从头再增加的话,我反正不介意。)此时就说明进展很顺利。

其他一些小细节和玩法

上传图片相关功能

首先要确定好上面配置都没问题。

  • 查看Bucket的目录结构
    2024-07-15-23-05-02
    这里点开就可以看到。

注意:这个目录结构里只能显示图片格式的文件!!!

  • 从剪贴板上传图片
    这个我觉得是这个Aliyun OSS Uploader插件最核心最好用的地方了,它不仅可以把复制到剪贴板的图片一键上传到Bucket对应的目录,还可以一键根据markdown语法生成引用该图片的文字并自动粘贴到鼠标对准的文章位置,如下:
    2024-07-15-23-10-50

注意有时候可能未知原因,导致加载完但是图片文字没生成并粘贴到文章里(之前都没遇到过,也是最近突然有这个情况,但还能接受),此时只需要每次要上传图片时把markdown预览暂时关闭即可,传成功了再打开。不过有时候也可能是网络环境原因,排查一下然后多尝试几次。

具体怎么做?
首先,鼠标对准你要复制到的目录,右键:
2024-07-15-23-15-35
2024-07-15-23-17-07
如果不想选择复制到这个目录下,可以对其修改,比如test/test1/,支持多级目录,如果这些目录不存在会自动创建,同时Bucket也会同步创建。

  • 从本地上传图片
    这个就和上面类似的操作,只是选择Upload,然后会弹出选择本地文件的窗口。
  • 一键删除图片
    可以直接去左侧Bucket目录结构里删除对应文件,但是这样很麻烦,一旦文件多起来寻找就是个问题,还可以直接光标放在想删除的图片对应的引用文字上,点击该选项就可以了:
    2024-07-15-23-32-04

markdown相关

  • 编辑同时预览内容的开关
    2024-07-15-23-24-47
    效果如下:
    2024-07-15-23-27-22
  • 打开文章目录开关
    2024-07-15-23-28-24
    效果:
    2024-07-15-23-28-48
    点击对应的标题就会自动跳到对应位置,同时还有一键置顶,也就是这里的第一个按钮。

(其他的有空了再来补充,先自行探索叭)

  • alipay_img
  • wechat_img
此作者没有提供个人介绍
最后更新于 2024-07-15