hexo + typora 图片插入解决办法
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
hexo + typora 图片插入解决办法的更多相关文章
- docx转doc时,防止公式被转成图片的解决办法
编辑社回复需要doc(Word 97-2003)格式的文档,可是将docx(Word 2007+)另存为doc格式时,发现公式被转成了图片.其实,最简单的办法就是,打个电话过去给编辑社:“大爷,拜托您 ...
- ECSHOP后台编辑器不能上传中文名图片的解决办法
在后台上传商品图片的时候,如果你选择一个中文名称的图片,那么上传后会产生乱码,导致图片显示不出来. 下面说一种解决办法: 使用“年月日时分秒 + 6个随机字符”做为文件名,如 201010161356 ...
- 织梦M手机端/自适应网站内容图片变形解决办法
我们在做响应式网站或者织梦M功能手机站的时候,会发现如果内容页图片太大,在移动端显示会变形,dede手机端图片过长等问题,手机端文章内容页图片不能自适应!这给通过手机端浏览网站的用户造成了很不好的用户 ...
- uniapp vue v-html,显示富文本,内容img图片超出解决办法
uniapp h5中,v-html,img图片中style=width:auto;会显示图片原来的尺寸,会超出屏幕,替换成width:100%,这样就不会超出屏幕 重要的地方,例如<img sr ...
- wordpress写文章添加gif图片变成静态图片的解决办法
添加文章时gif只能静态,记得在添加时选择完整尺寸,不要压缩即可
- ie6不支持png图片的解决办法
在head里引入png.js文件 <!--[if lte IE 6]> <script type="text/javascript" src="js/P ...
- 帝国CMS 7.5编辑器从WORD中粘贴过来无法保留格式和图片的解决办法
配置过滤js文件 首先打开 \editor\plugins\pastefromword\filter\default.js 在文件的最后部分又如下代码(修改前的代码),也可以搜索CKEDITO ...
- 3gcms-Flash幻灯片上传后图片模糊解决办法
很简单,不用纠结,直接修改admin/lib/action/FileAction.class.php 将 $upload->thumbMaxWidth='300'; //以字串格式来传,如果你希 ...
- WPF循环加载图片导致内存溢出的解决办法
程序场景:一系列的图片,从第一张到最后一张依次加载图片,形成“动画”. 生成BitmapImage的方法有多种: 1. var source=new BitmapImage(new Uri(" ...
- android通过BitmapFactory.decodeFile获取图片bitmap报内存溢出的解决办法
android通过BitmapFactory.decodeFile获取图片bitmap报内存溢出的解决办法 原方法: public static Bitmap getSmallBitmap(Strin ...
随机推荐
- 仿花田:相亲网站 意中人 已在GitHub上开源
在园友的强烈呼唤下,我还是负责任的分享给大家,因为对代码比较熟悉一下,还是有些问题要说明,不然别人看起来会比较费劲.说实话除了这个bootstrap的界面风格和这件事情本身对大家有吸引力之外,内部的逻 ...
- 可扩展的事件复用技术:epoll和kqueue
通常来说我喜欢Linux更甚于BSD系统,但是我真的想在Linux上拥有BSD的kqueue功能. 什么是事件复用技术 假设你有一个简单的web服务器,并且那里已经打开了两个socket连接.当服务器 ...
- Qt Creator 常用快捷键
多行注释模式 Ct ...
- PHP----遇到的Session问题
使用SESSION,当跨页面使用时,会提示错误Cannot modify header information - headers already sent by..., 背景:使用session_s ...
- SQL Server同步复制问题排查方法
1.应用复制的命令时在订阅服务器上找不到该行 解决方法:用系统存储过程sp_browsereplcmds(返回分发数据库中存储的可读版本复制命令的结果集,并将其用作诊断工具. 此存储过程在分发服务器上 ...
- ASP.NET中EVAL用法大全
<%# Bind("Subject") %> //绑定字段<%# Container.DataItemIndex + 1%> //实现自动编号<%# ...
- Hosts文件是什么?
Hosts文件主要作用是定义IP地址和主机名的映射关系,是一个映射IP地址和主机名的规定.可以用文本文件打开!当用户在浏览器中输入一个需要登录的 网址时,系统会首先自动从Hosts文件中寻找对应的IP ...
- 爬虫入门系列(一):快速理解HTTP协议
4月份给自己挖一个爬虫系列的坑,主要涉及HTTP 协议.正则表达式.爬虫框架 Scrapy.消息队列.数据库等内容. 爬虫的基本原理是模拟浏览器进行 HTTP 请求,理解 HTTP 协议是写爬虫的必备 ...
- C语言二维数组实现扫雷游戏
#include<stdio.h> //使用二维数组实现 扫雷 int main() { char ui[8][8]={ '+','+','+','+','+','+','+','+', ...
- RN开发中的报错以及告警
报错一: Attempted to transition from state `RESPONDER_INACTIVE_PRESS_IN` to `RESPONDER_ACTIVE_LONG_PRES ...