热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

jqqrcode生成的图片中间的头像宽高如何设置_如何将文章高效发布到多个平台MWeb七云牛图床配置...

之前我曾写过一篇Mac上的Markdown写作工具——MWeb相关的文章《电脑写作利器MWeb|如何使用第三方预览样式?》,主要是讲如何在

d4b597bba1af7a97e99501956a57640d.png

之前我曾写过一篇 Mac 上的 Markdown 写作工具——MWeb 相关的文章 《电脑写作利器 MWeb|如何使用第三方预览样式?》,主要是讲如何在 MWeb 中使用第三方预览样式,让文章的预览视图看起来更舒服。这一次我想写一下 MWeb 的图床配置问题,MWeb 内置了「发布服务」的功能,支持将本地编辑好的文章直接发布到 Wordpress、Medium、少数派等网站。但要想让整个过程一气呵成的话,我们需要先解决图床配置的问题,这样你发布的文章中的图片才不会出现丢失或上传失败的问题。

138736f26cdd618fe320ccdb9ef66f7a.png

在解决这个问题之前,我们需要先了解什么是图床?

图床是什么?

图床,可以理解为一个存放图片的网络空间或服务器,你发布到朋友圈的图片,别人之所以能看到,是因为你上传的图片放在了腾讯提供的网络空间上。这个网络空间充当了桥梁的角色,对已成为微信好友的人或设置为最多可见 10 张图片的陌生人开放,这样别人就看到了你发布在朋友圈的图片。对应到写文章这件事,我们也需要将文章中用到的图片,上传到写作平台的图床(服务器),这样读者在读文章时才能顺利看到我们附上的图片。但如果你和我一样,会将一篇文章发布到不同的平台,例如将首发在公众号的文章发布到知乎,你大概率会遇到一个蛋疼的问题——粘贴到知乎编辑器的文章会出现多个「图片上传失败」的提示。之前为了解决这个问题,我的方法是:先将微信文章复制到简书,再从简书复制到知乎编辑器。这个方法几乎能完美解决图片上传失败,少数时候会遇到 Gif 上传失败的问题。说句题外话,从上面这种解决方法推测,微信为了避免被别的写作平台当成图床(避免被薅羊毛),它禁用了图片的外链引用,当它识别到当前的环境不是在微信体系内,图片就会显示失败,这就导致了图片上传失败的问题。而现在,我有了一个更好的解决方法——将图片上传到自己的图床帐户中。这个方法可以省去上面「粘贴到简书」的中间步骤,简化整个流程,更重要的是,你可以更方便地将文章分发到多个平台,例如自己的个人博客或其他写作平台。

有哪些可用的图床?

免费图床

网上有不少人整理了多个免费的图床,但目前我用过的免费图床只有两个:路过图床和微博图床。
  • 路过图床  https://imgchr.com/
    全球CDN加速, 支持外链, 原图保存, 最大单张支持10 MB
  • 新浪微博图床  https://www.crx4chrome.com/crx/17508/
    为了让微博图床更易用,有人开发了一个浏览器插件「新浪微博图床」,支持选择/拖拽/粘贴上传图片,并生成图片地址、HTML、UBB 和 Markdown 等格式

ca8e77a575d718f5ca859715e158ec9a.png


免费图床虽然可以不花钱,但我悲观地认为,大多免费且赚不了钱的服务终究走不了长远,也许未来的某一天,你就会突然收到「XX 关停」的通知。如果你想更妥善地保存自己的图片数据,最好还是选择大一点或者收费的图床工具。

收费图床

  • 七牛云  https://www.qiniu.com/
七牛云虽然是一个主打收费的服务,但它对所有注册的实名用户,还是免费提供了每月 10 GB 的存储空间、每月 10 GB 的 CDN 回源流量,具体可见下图。其实我对这些术语也不是很清楚,但这些免费额度,对于一个没什么访问量的博客来说,已经够用了。

dbb8fcac520eedc3a95e77a18af2ea66.png


了解更多关于七牛云计费方式的内容,可以参考官方的文档:https://www.qiniu.com/prices/kodo?source=kodo首次使用七牛云,它会给每个人分配一个临时的测试域名,有效期为一个月,过期之后如果你还想使用七牛云作为图床的话,就需要自己去注册一个域名。

MWeb 七牛云图床配置

MWeb 本身支持的图床服务较多,例如七牛云、腾讯云和阿里云等,还支持自定义更多图床。

826510327c91f52b82ac192a4bdfcfb5.png


配置之前,我们先在浏览器打开七牛云的「控制台」,切换到「对象存储」,新建一个公开的空间,这里我将空间名称命名为 blog-picbed20,空间名称自行定义,后面会用到。

345e3ee18d0eaa845b2b1e3f302cc9b0.png

打开创建好的空间,需要添加「CDN 加速域名」,域名的格式为「cdn.+自己注册的域名」,接着需要配置右侧的「CNAME」,将鼠标移动到 CNAME 上方,它会给出配置 CNAME 的指导。

3866cf39a2d694c7505bf006f48faa4d.png

复制七牛云空间的 CNAME 值,接着打开你注册的域名的「DNS 解析页面」,因为我是在腾讯云注册的域名,这里打开的就是腾讯云的管理后台。在解析列表中新增一条记录,主机记录为 cdn,记录类型选择 CNAME,记录值位置粘贴刚从七牛云得到的 CNAME 值。

56dfecb4b3b15ed8f16143bfc1fd8cfc.png


完成这个步骤后,回到七牛云的控制台,刷新页面,直至 CDN 加速域名的状态显示为「成功」,则表示完成了七牛云的配置。

23c89747c1426fc2241bed1de6f11ebb.png


回到 MWeb,打开「偏好设置」,切换到「发布服务」,添加「七牛云存储」,API 地址选择离你较近的地区即可。空间名称:前面创建七牛云空间自定义的名称
域名:http://cdn.+自己注册的域名

9e972ecbd5c103b5b1c1cb313a3aa779.png


而其中的 Access Key 和 Secret Key 则需要再次回到七牛云的后台获取,点击右上角的帐户头像,在弹出的菜单中,选择「密钥管理」,创建一个新的密钥。下图的 AK 和 SK 分别对应 MWeb 里的 Access Key 和 Secret Key,分别粘贴到 MWeb 中相应的位置,就完成了 MWeb 中图片的配置。

06f6ced4c42cff6170a0065b1d26257f.png


借助 MWeb 集成的将本地图片上传到图床的功能,当你将文章从 MWeb 发布或粘贴到其他平台之前,先选择顶部的菜单「发布--把本地图片传至图床」。

f17d89e8a671e0f1223f966c8812f556.png

在弹出的窗口中,选择「七牛云图床」,接着点击右下角的「上传本地图片」,MWeb 就会将本地的图片上传到七牛云图床,再自动返回图片上传到图床后的「远程地址」。

e4fee9474af2a6e94d68e01e90d0de39.png

此时如果你想将文档发布到公众号或知乎,先点击「复制带样式的 HTML」,再切换到发布内容的平台,使用 Command + V 粘贴,文章和图片也会随之过去了,一气呵成,不会出现图片丢失的问题。

95c4c5a32bfce16660b6173344881216.png


第一次看完整个配置,你可能会觉得非常麻烦,但就像老话说的「万事开头难」,开头的坑趟过去了,后面等着你的可能就是一马平川的广阔天地。完成第一次稍微有些麻烦的配置,你就可以持续享受一次配置带来的多次收益,这某种程度上也可以算是一种「复利」行为,何乐而不为?以上,希望有帮助。 ? 点击下方的阅读原文,可以查看本文在我的个人博客上的表现。



推荐阅读
  • 使用Python构建网页版图像编辑器
    本文详细介绍了一款基于Python开发的网页版图像编辑工具,具备多种图像处理功能,如黑白转换、铅笔素描效果等。 ... [详细]
  • 在现代Web开发中,HTML5 Canvas常用于图像处理和绘图任务。本文将详细介绍如何将Canvas中的图像导出并上传至服务器,适用于拼图、图片编辑等场景。 ... [详细]
  • 使用HTML和JavaScript实现视频截图功能
    本文介绍了如何利用HTML和JavaScript实现从远程MP4、本地摄像头及本地上传的MP4文件中截取视频帧,并展示了具体的实现步骤和示例代码。 ... [详细]
  • 汇总了2023年7月7日最新的网络安全新闻和技术更新,包括最新的漏洞披露、工具发布及安全事件。 ... [详细]
  • 本报告记录了嵌入式软件设计课程中的第二次实验,主要探讨了使用KEIL V5开发环境和ST固件库进行GPIO控制及按键响应编程的方法。通过实际操作,加深了对嵌入式系统硬件接口编程的理解。 ... [详细]
  • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
  • 笔记说明重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系& ... [详细]
  • 本文提供了处理WordPress网站中出现过多重定向问题的方法,包括检查DNS配置、安装SSL证书以及解决数据库连接错误等步骤。 ... [详细]
  • 探索百度WebFE团队打造的强大HTML5上传插件Web Uploader
    本文将详细介绍由百度WebFE团队开发的Web Uploader,这是一款集成了HTML5与Flash技术的上传组件,以其卓越的用户体验和强大的功能著称。 ... [详细]
  • HTML:  将文件拖拽到此区域 ... [详细]
  • HTML前端开发:UINavigationController与页面间数据传递详解
    本文详细介绍了如何在HTML前端开发中利用UINavigationController进行页面管理和数据传递,适合初学者和有一定基础的开发者学习。 ... [详细]
  • 在Ubuntu 16.10 (x86) 上安装 WordPress 4.7.115
    本文介绍如何在Ubuntu 16.10 (x86) 系统上安装WordPress 4.7.115,包括下载、解压、配置等步骤,确保安装过程顺利进行。 ... [详细]
  • 使用 jQuery 实现页面加载进度条
    页面加载进度条是提升用户体验的重要工具,通过在页面头部显示一个加载状态,并在页面完全加载后隐藏,可以有效减少用户的等待焦虑。本文将详细介绍如何使用 jQuery 实现这一功能。 ... [详细]
  • FreeBSD环境下PHP GD库安装问题的详细解决方案
    在 FreeBSD 环境下,安装 PHP GD 库时可能会遇到一些常见的问题。本文详细介绍了从配置到编译的完整步骤,包括解决依赖关系、配置选项以及常见错误的处理方法。通过这些详细的指导,开发者可以顺利地在 FreeBSD 上完成 PHP GD 库的安装,确保其正常运行。此外,本文还提供了一些优化建议,帮助提高安装过程的效率和稳定性。 ... [详细]
  • 深入解析 OpenSSL 生成 SM2 证书:非对称加密技术与数字证书、数字签名的关联分析
    本文深入探讨了 OpenSSL 在生成 SM2 证书过程中的技术细节,重点分析了非对称加密技术在数字证书和数字签名中的应用。非对称加密通过使用公钥和私钥对数据进行加解密,确保了信息传输的安全性。公钥可以公开分发,用于加密数据或验证签名,而私钥则需严格保密,用于解密数据或生成签名。文章详细介绍了 OpenSSL 如何利用这些原理生成 SM2 证书,并讨论了其在实际应用中的安全性和有效性。 ... [详细]
author-avatar
OH-MQNZ_259
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有