/ web  

macOS平台Hexo+MWeb博客图床配置

引言

在此之前,我一直使用的是Typora+SM.MS图床+Hexo来管理和发布博客.但是如果要在博客中插入图片的话,步骤非常繁琐.大抵需要下面这几步.

1
2
3
4
将本地图片存储到本地文件夹中
将图片上传到SM.MS图床.
将SM.MS返回的图片链接复制进markdown文件中
对每张图片进行相同的以上操作

可以发现,这样在写博客的时候,会在插入图片上花费大量的时间,对一些评测类文章非常不友好,很难专心生产.
所以我在网上淘得一个完美解决此问题的方案:Mweb一键发布.

MWeb简介

首先放上官方链接🔗 Mweb官方链接

这款markdown编辑器基本上涵盖了所有markdown编辑器的优点.唯一的缺点可能就是只支持macOS和ios吧.

以下是MWeb的基本功能概述.其中最为吸引我的应该就是下图红框中的内容:
1.支持发布到印象笔记. 2.支持图床上传服务.🔥

吼!这不正好解决了我的当务之急嘛.
-c

MWeb有一个很方便的模式:外部模式

简而言之就是把外面的文件夹的路径引入进入MWeb的workspace.并且还可以在这个workspace中随意更改文件夹的名称而不会影响源文件夹的名称.如图所示,我将博客下的_post文件夹引入后,直接更名为alexfan.cn
方便我的识别与管理.见下图🚀

-c

禁止套娃!

除了可以自定义引入文件夹名称,还可以设置把插入的图片自动上传至**图床.MWeb支持几乎所有图床.国内的话用的比较多的还是腾讯云、阿里云和七牛云吧.附上MWeb开发者的关于图床设置的链接🔗MWeb图床设置
在这里我就不多赘述了.直接转到腾讯云和阿里云如何配置图床.
-w335


阿里云OSS图床配置

  • 登陆阿里云,找到对象存储
  • 创建一个Bucket,就是用来存放图片的“桶”,如果是小流量的网站比如个人博客,就购买40GB/12个月的OSS对象存储资源包即可.只需要9块钱,可以说几乎是白嫖.
  • 创建中记得将读写权限设置为公共读,千万别设置成别的了,不然直接扑街.

  • 接下来就是MWeb中的设置,其中名称随便填写.存储地域和Bucket名称按照刚刚创建的Bucket来填写.
    -w628

  • Access Key ID/Secret则前往阿里云的相关页面获取即可.(一般在对象存储页面的右侧.如下图)
    -w406

  • 域名则在你创建的Bucket的概览中.将外网访问域名复制粘贴即可.
    -w1643

  • 图片处理代码直接在同一个页面中找到图片处理,自定义图片存储规则即可.或者直接抄我的设置也行👇

    1
    ?image/auto-orient,1/interlace,1/quality,q_100

关于如何在MWeb中使用阿里云图床,在文章结尾和腾讯云COS图床一并讲解吧.

腾讯云COS图床配置

-c

在这里不得不点名表扬一样腾讯爸爸,直接送了50GB/6个月的对象存储.一毛钱没掏直接上图床.开冲开冲.链接我给忘了,去腾讯云官网翻一翻吧.

  • 首先还是先登陆腾讯云,白嫖到对象存储后直接创建存储桶,步骤和阿里云的差不多,也简单的说一下吧.
  • 创建时注意将访问权限改为公有读私有写即可.除非你想别人来乱动你的图床.这个域名记得存一下,待会在MWeb中要用.
    -w731

  • 直接略过和阿里云的相似步骤,跳转至MWeb设置页面.按照刚刚创建好的Bucket配置一一填写.这个域名就是刚刚创建时保存起来的域名.而App ID/Secret id/Secret Key则在对象存储主页中的密钥管理中.找到之后复制粘贴即可
    -w729

  • 一切都是非常的顺滑,至于什么防盗链的设置,可有可无,有则更好.如若需要,Google一下~
    -w613

MWeb一键发布功能

到这里为止,已经介绍完了腾讯云和阿里云图床的所有配置.而现在本文章所有的图片都是存在本地的.接下来我们可以通过MWeb一键发布所有图片至指定图床,以腾讯云为例.直接点击复制Markdown,则自动完成✅上传图片、并且将替换好图床图片链接的markdown复制进了你的剪切板.可以说是非常方便了.
-w544

最好将引入文件夹的编辑设置中的“把插入的图片自动上传”这一栏取消掉.然后存储路径设置为绝对路径.这样在发布的时候会在本地和图床都留下备份一份图片.以免发生图床有一天崩溃,所有图片都丢失的悲剧.

最后在命令行中优雅得敲下hexo g -d.一篇文章就制作完成啦~