✏️巧用图床上传工具iPic&Markdown写博客

前言

不知各位有没有和我一样的困扰，在写博客或者微信公众号的时候，每次上传图片的过程都很痛苦，漫长的等待、格式的调整，成为了写点东西的巨大阻碍。


有没有一种方法 ——

  • 不需要上传过程的漫长等待？
  • 能够确保上传的图片自动裁剪成公众号适用的大小？
  • 甚至还能够自动加上水印？
巧了，本文就是介绍如何实现这样的需求。
由于笔者并非技术出身，本文的解决方案相信能让和笔者一样不甚了解技术的读者，一样能够掌握。

环境&工具

  • 本文涉及的工作环境：Mac OS
    Windows下的解决方案应该有共通之处。
  • 图床：腾讯云对象存储 COS
    什么是图床？
    笔者的浅薄理解就是，能够将图片存在此类服务提供者的服务器上，使得在博客和公众号文章中可以直接调用这个图片地址，免去了在文章发表的各个地方都要通过不同工具分别上传图片的麻烦。
    常用的图床服务提供者如下，也是本文另一工具iPic所支持的。
  • 图像上传工具：iPic
    该软件在Mac App Store可免费下载，免费版支持上传图片到默认图床（微博图床），订阅后可以上传到上图中的其他图床。
  • Markdown工具：MacDown
Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。
了解更多： https://baike.baidu.com/item/markdown/3245829?fr=aladdin

图床基础配置

1. 注册&登录腾讯云

https://cloud.tencent.com/

2. 开通 "对象存储COS"

3. 创建存储桶 "Bucket"

  • 名称起任意的，建议用ipic小写，方便后期调用
  • 所属地域选中国任意地区即可
  • 注意一定要把访问权限选为"公有读私有写"

4. 获取访问域名

这一步获取的地址存下来，稍后在iPic中要用 

5. 获取API密钥

  • 进入API密钥管理界面，新建密钥
  • 获取SecretId和SecretKey，稍后在iPic中要用 
这一步等于获取一个iPic和腾讯云图床沟通的通道。
至此，腾讯云的图床配置完毕，接下来在图像上传工具iPic中简单配置。

上传工具iPic配置

1. 打开iPic，进入 配置 ➡️ 图床

2. 添加腾讯云COS

  • Bucket写刚才在腾讯云中起的存储桶名字，便于记忆对应关系
  • Access Key填入刚才获取的SecretId
  • Secret Key填入刚才获取的SecretKey
  • 网址前缀填入刚才复制的访问域名
  • 点击验证，出现”通过“字样即完成iPic向腾讯云上传图片的配置

3. 通过iPic上传图像获取图床链接

  • 将想要上传的图片拖动到菜单栏iPic图标完成上传 
  • 点击图片获取图床地址 

4. 了解更多iPic的使用方法

官网：https://en.toolinbox.net/iPic/

在MacDown中复制文章

1. 在MacDown中以markdown语法写文章

Markdown语法简单易懂，可参考： https://baike.baidu.com/item/markdown/3245829?fr=aladdin

2. 文章中需要插入图片的地方，放入通过iPic获取的图床地址即可

  • 打开iPic的Markdown标记，能直接获得让Markdown编辑器理解的图床地址。
  • 这个地址直接复制到Markdown编辑器中，即可解析为图片，如在本文撰写时的实际表现。

3. 复制编辑器右侧文章

  • MacDown编辑器左侧是真实的写作区，右侧则显示在网页中实际生成的效果；
  • 复制右侧全文，即可在博客、微信公众号中直接粘贴，通常不再需要额外的排版，以及图片上传过程。

4. MacDown下载地址

https://macdown.uranusjr.com/

图床高级配置

大部分图床都有自动给上传的图片添加水印的功能，继续以腾讯云为例。

1. 进入存储桶 ➡️ 图片处理 ➡️ 添加样式

2. 配置想要的自动图片处理效果

  • 样式名称起一个简单的，如mark
  • 支持图片缩放&裁剪
  • 支持文字水印
  • 支持图片水印 

3. 如何调用处理后的样式？

在获取的图像链接后加 /样式名称 即可。
如从iPic获取的一个图像链接是 
https://infotogo.myqcloud.com/infotogo.png
则在其后面添加/mark后获得带有刚才设置的水印样式的链接地址
https://infotogo.myqcloud.com/infotogo.png/mark
(END)

Comments

Post a Comment