让自己写的电子笔记连文带图全平台兼容(MarkDown图片显示兼容)

Posted 白羊y

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了让自己写的电子笔记连文带图全平台兼容(MarkDown图片显示兼容)相关的知识,希望对你有一定的参考价值。

一、工具使用

语言使用:MarkDown

简介

Markdown是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的Xhtml(或者HTML)文档。

由于Markdown的轻量化、易读易写特性,并且对于图片,图表、数学式都有支持,许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。

使用原因

由于MarkDown的特性,它已经成为非常流行的文本编辑语言。Github的文档就用MarkDown写的(比如现在这篇文章)。因此,我们写完学习笔记后,可直接复制到自己喜欢的博客平台发表,方便分享、同步,沉淀积累。

使用方法

Markdown 语法教程

Markdown 语法快速入门手册

软件使用:Typora

我们将使用

Typora(主体) + PicGo(辅助),还有PicGo的插件运行环境Node.js

点击蓝名进入官网下载

简介

Typro这款MarkDown编辑器非常的轻量化,并且支持实时渲染显示,不用再受分屏预览的苦恼,并且支持连接图床,这将使我们可以将自己的文章连文带图地实现一键复制全平台兼容同步。

而Picgo是一个用于快速上传图片并获取图片 URL 链接的工具

我们将使用PicGo将Typora中的图片上传到云仓库,并将本地图片链接改写为网络图片链接,以便于对图片进行全平台兼容

环境设置搭建

1)搭建图床

基于普适与快速的理念,建议使用Gitee作为图片仓库。

首先创建一个公共仓库(注意,Gitee建仓默认属性为私有)

image-20210518201318249

然后进入个人主页,进入私人令牌,右上角点击生成新令牌,记录下来

image-20210518203207155

2)配置PicGo

打开软件,点击插件设置,搜索gitee,安装

image-20210518202744358

点击PicGo设置

image-20210518201820884

点击进入图床设置里的Gitee图床设置,依次填入信息,以(1)步骤为准

image-20210518203807626

3)配置typora

image-20210518204719980

4)测试

图片上传测试

点击上传测试图片

image-20210518204625897

进入PicGo相册确认是否有测试图片

image-20210518215151014

再进入码云gitee的图片仓库确认一下,是否有上传

image-20210518205745602

当用typora写好文章后,一次性上传文章中所有的本地图片到图床(即码云的图片仓库),之后就可以复制Typora文章的源代码,分别粘贴到CSDN、微信公众号、博客园、简书等平台的markdown编辑器,实现快速在多平台发布博客。

image-20210518205209473

image-20210518205957731

这是上传前,图片地址为本地地址

image-20210518210742145

上传后,地址变为Gitee的地址了

image-20210518210731038

平台兼容测试

试一下能否全平台兼容。直接全选复制,然后到对应平台的MarkDown编辑页面粘贴

image-20210518205903260

Gitee成功兼容

image-20210518211152896

image-20210518211158297

CSDN成功兼容

image-20210518211310211

有道云笔记成功兼容

image-20210518211420843

BUG消除

Failed to fetch

上传图片时报错,错误报告为“Failed to fetch”

解决方法:PicGo将端口号改为默认的36677

image-20210518212339953

“success”:false

上传图片时报错,错误报告为“success”:false”

原因:Gitee中的文件名重复

解决方法:在Gitee里删除重名文件,或者在picGo设置中将时间戳重命名打开

image-20210518212850254

By_白羊

以上是关于让自己写的电子笔记连文带图全平台兼容(MarkDown图片显示兼容)的主要内容,如果未能解决你的问题,请参考以下文章

一图全解Kafka在zookeeper中的数据结构

MARKDO

求一电子商务信息管理系统模块结构图 (带图)

献给写作者的 Markdown 新手指南

[分享] 自己写的接口测试平台-----IAPTest

微信带图分享