Typora 是一款知名的 Markdown 编辑器,简单好用,体验良好。使用 hexo 搭建好博客后,主要是用 Markdown 来编写博客,typora 便是我的首选编辑器。但直接使用 typora 编写的 Markdown 文件,图片路径可能存在问题,就导致页面上图片无法显示。自己去改路径的话那就很麻烦了,好在 Typora 支持拖拽或复制来插入图片,并且可以复制到指定路径,或直接上传到图床,这就非常方便了。

本地图片

博客的 Markdown 文档都存储在 source/_posts 下,然后博客相关图片都存在 source/images 下,接着来修改 typora 的设置。

打开 文件 - 偏好设置 - 图像 进行修改如下图修改

这样拖拽或粘贴过来的图片会自动复制到 source/images 下面,不过这样只是可以在 typora 中查看图片了,要想在 hexo 中查看就需要图片路径与服务器中相符合, source/images 文件夹下的图片在 hexo 中可以用如 /images/abc.png 的路径访问到,而 typora 可以设置图片根目录,设置完了后图片路径都是 /images/abc.png 这样的,这样一配合就解决了图片路径问题,具体做法是在 格式 - 图像 - 设置图片根目录 中 将 source 文件夹设置为图片根目录,也可在每篇 Markdown 文档中 YAML Front Matter 中添加 typora-root-url: ..,或者直接在 scaffolds 中的模板里直接添加,这样每次 hexo new post 时就会自动生成了。

注意先设置图片根目录,再进行图片的插入。

上传到图床

上边的方法适用于博客文件放在根目录的情况,如果文件放在子目录下的话暂时没找到解决办法,便直接上传到图床采用绝对路径了。

在 typora 里可以设置插入图片时自动上传,如下图设置,这里使用 PicGo App 来上传图片。

PicGo 可以点击下载按钮到浏览器下载,安装完成后配置好图床,就可以上传图片了。这里使用 GitHub 图床(SM.MS 体验应该更好)。

具体就是在 GitHub 新建一个仓库专门用来存放图片,然后在 PicGo 里填写 用户名/仓库名,分支一般写 main ,token 在 GitHub 设置里生成。

下边是 PicGo 文档里 GitHub 图床的详细步骤,其他图床可参考官方文档。

如果 GitHub 图片访问过慢的话,可以将自定义域名设置为 https://fastly.jsdelivr.net/gh/{用户名}/{仓库名}@{分支名}

鉴于网络环境,建议自行寻找可用的图床。

1. 首先你得有一个 GitHub 账号。注册 GitHub 就不用我多言。

2. 新建一个仓库

记下你取的仓库名。

3. 生成一个 token 用于 PicGo 操作你的仓库:

访问:https://github.com/settings/tokens

然后点击Generate new token

把 repo 的勾打上即可。然后翻到页面最底部,点击Generate token的绿色按钮生成 token。

注意:这个 token 生成后只会显示一次!你要把这个 token 复制一下存到其他地方以备以后要用。

4. 配置 PicGo

注意:仓库名的格式是用户名/仓库,比如我创建了一个叫做test的仓库,在 PicGo 里我要设定的仓库名就是Molunerfinn/test。一般我们选择main分支即可。然后记得点击确定以生效,然后可以点击设为默认图床来确保上传的图床是 GitHub。

至此配置完毕,已经可以使用了。当你上传的时候,你会发现你的仓库里也会增加新的图片了:

Reference

typora + hexo 博客中插入图片

PicGo 文档

hexo + typora 图片插入解决办法的更多相关文章

  1. docx转doc时,防止公式被转成图片的解决办法

    编辑社回复需要doc(Word 97-2003)格式的文档,可是将docx(Word 2007+)另存为doc格式时,发现公式被转成了图片.其实,最简单的办法就是,打个电话过去给编辑社:“大爷,拜托您 ...

  2. ECSHOP后台编辑器不能上传中文名图片的解决办法

    在后台上传商品图片的时候,如果你选择一个中文名称的图片,那么上传后会产生乱码,导致图片显示不出来. 下面说一种解决办法: 使用“年月日时分秒 + 6个随机字符”做为文件名,如 201010161356 ...

  3. 织梦M手机端/自适应网站内容图片变形解决办法

    我们在做响应式网站或者织梦M功能手机站的时候,会发现如果内容页图片太大,在移动端显示会变形,dede手机端图片过长等问题,手机端文章内容页图片不能自适应!这给通过手机端浏览网站的用户造成了很不好的用户 ...

  4. uniapp vue v-html,显示富文本,内容img图片超出解决办法

    uniapp h5中,v-html,img图片中style=width:auto;会显示图片原来的尺寸,会超出屏幕,替换成width:100%,这样就不会超出屏幕 重要的地方,例如<img sr ...

  5. wordpress写文章添加gif图片变成静态图片的解决办法

    添加文章时gif只能静态,记得在添加时选择完整尺寸,不要压缩即可

  6. ie6不支持png图片的解决办法

    在head里引入png.js文件 <!--[if lte IE 6]> <script type="text/javascript" src="js/P ...

  7. 帝国CMS 7.5编辑器从WORD中粘贴过来无法保留格式和图片的解决办法

      配置过滤js文件 首先打开  \editor\plugins\pastefromword\filter\default.js  在文件的最后部分又如下代码(修改前的代码),也可以搜索CKEDITO ...

  8. 3gcms-Flash幻灯片上传后图片模糊解决办法

    很简单,不用纠结,直接修改admin/lib/action/FileAction.class.php 将 $upload->thumbMaxWidth='300'; //以字串格式来传,如果你希 ...

  9. WPF循环加载图片导致内存溢出的解决办法

    程序场景:一系列的图片,从第一张到最后一张依次加载图片,形成“动画”. 生成BitmapImage的方法有多种: 1. var source=new BitmapImage(new Uri(" ...

  10. android通过BitmapFactory.decodeFile获取图片bitmap报内存溢出的解决办法

    android通过BitmapFactory.decodeFile获取图片bitmap报内存溢出的解决办法 原方法: public static Bitmap getSmallBitmap(Strin ...

随机推荐

  1. 仿花田:相亲网站 意中人 已在GitHub上开源

    在园友的强烈呼唤下,我还是负责任的分享给大家,因为对代码比较熟悉一下,还是有些问题要说明,不然别人看起来会比较费劲.说实话除了这个bootstrap的界面风格和这件事情本身对大家有吸引力之外,内部的逻 ...

  2. 可扩展的事件复用技术:epoll和kqueue

    通常来说我喜欢Linux更甚于BSD系统,但是我真的想在Linux上拥有BSD的kqueue功能. 什么是事件复用技术 假设你有一个简单的web服务器,并且那里已经打开了两个socket连接.当服务器 ...

  3. Qt Creator 常用快捷键

    多行注释模式                                                                                            Ct ...

  4. PHP----遇到的Session问题

    使用SESSION,当跨页面使用时,会提示错误Cannot modify header information - headers already sent by..., 背景:使用session_s ...

  5. SQL Server同步复制问题排查方法

    1.应用复制的命令时在订阅服务器上找不到该行 解决方法:用系统存储过程sp_browsereplcmds(返回分发数据库中存储的可读版本复制命令的结果集,并将其用作诊断工具. 此存储过程在分发服务器上 ...

  6. ASP.NET中EVAL用法大全

    <%# Bind("Subject") %> //绑定字段<%# Container.DataItemIndex + 1%> //实现自动编号<%# ...

  7. Hosts文件是什么?

    Hosts文件主要作用是定义IP地址和主机名的映射关系,是一个映射IP地址和主机名的规定.可以用文本文件打开!当用户在浏览器中输入一个需要登录的 网址时,系统会首先自动从Hosts文件中寻找对应的IP ...

  8. 爬虫入门系列(一):快速理解HTTP协议

    4月份给自己挖一个爬虫系列的坑,主要涉及HTTP 协议.正则表达式.爬虫框架 Scrapy.消息队列.数据库等内容. 爬虫的基本原理是模拟浏览器进行 HTTP 请求,理解 HTTP 协议是写爬虫的必备 ...

  9. C语言二维数组实现扫雷游戏

    #include<stdio.h> //使用二维数组实现 扫雷 int main() { char ui[8][8]={ '+','+','+','+','+','+','+','+', ...

  10. RN开发中的报错以及告警

    报错一: Attempted to transition from state `RESPONDER_INACTIVE_PRESS_IN` to `RESPONDER_ACTIVE_LONG_PRES ...