hexo博客如何插入图片
Hexo是一个静态的博客网站生成器,生成一个博客只需要分分钟的时间就能搞定。
Hexo的博文是支持Markdown格式的,发表一篇文章只需要简简单单的几个命令。
hexo new '文章'
就会生成一个名为'文章'的md文件。
在图中位置添加描述,分类以及标签,有利于搜索分类。
如何向hexo博客中插入图片
众所周知,在md文件中插入图片的语法为![]()
。
其中方括号是图片描述,圆括号是图片路径。
一般来说有三种图片路径,分别是相对路径,绝对路径和网络路径。
所谓的网络路径就是直接引用网上的图片,直接复制图片地址,放在圆括号中就完事了。
这种方式十分的方便,但是也存在一定的问题:
- 图片失效导致无法加载;
- 打开网页后要再请求加载图片;
- 原网站限制,如微信公众号的图片会变得不可见等。
这种方式算是有利有弊。
绝对路径是图片在计算机中的绝对位置,相对路径是相对于当前文件的路径。
由于我们的博客是要部署在网站上,部署后会生成新的文件目录,所以我们选择使用相对路径的方式。
在hexo中使用文章资源文件夹需要在config.yaml
文件中更改一下配置:
post_asset_folder: true
当该配置被应用后,使用hexo new
命令创建新文章时,会生成相同名字的文件夹,也就是文章资源文件夹。
由于项目会生成新的文件目录,同时会解析Markdown中的图片路径,会导致一个问题。
如在一个文件目录下,博客名为
1.md
,相应的存在一个1
文件夹存放图片image.jpg
。在Typora编辑器中,普通的md文件使用

能在编辑器中正常显示图片。在hexo中,按理说应该是使用

,但网页中却无法正常显示。此时应该使用这样的方式来引入图片:
{% asset_img image.jpg 这是一张图片 %}
虽然可以正常引用图片了,但是这种引用图片的方式只有一句话能形容,wtf。
图片插件
插件hexo-renderer-marked解决了这个问题。可以只用npm install hexo-renderer-marked
命令直接安装,之后在config.yaml
中更改配置如下:
post_asset_folder: true
marked:
prependRoot: true
postAsset: true
之后就可以在使用
的方式愉快的插入图片了。
我们做了这么多都是为了方便,那么为什么不再方便一点呢。
hexo与Typora的完美结合
上述是从文章资源文件夹中引用图片,前提是先将图片放入到文章资源文件夹,如果图片数量众多的话,一张一张的放很影响效率。但是不用怕,我们有很方便的解决方法。
Typora是我非常喜欢的Markdown文本编辑器,在之前的文章中也介绍过一点。
Typora对于插入图片的支持做得非常好,在文件->偏好设置
或者直接<C-,>
进入设置。
使用该配置后,可以直接复制网页中的图片地址,粘贴到Typora中后,会直接复制该图片到文章资源文件夹,同时自动更改路径。
如复制网络路径的图片https://...../image.jpg
粘贴到Typora中叫文章名
的文章后,图片会自动变为
。
但我们知道部署后,文件路径是不同的,所以当我们插入完所有的图片后,我们还需要删除每个图片路径中的文件名/
。不慌,也很简单。
在Typora编辑器中,使用<C-f>
快捷键,将所有的文章名/
替换为空即可删除。
然后再将博客上传,图片就会随着文章一起打包。在网页中就可以看到正常显示的图片,大功告成。
hexo博客如何插入图片的更多相关文章
- 手把手教你在CSDN博客中插入图片之剑走偏锋系列
1.在博客园注册账号.你没有看错,就是博客园,在图像上传方面博客园比CSDN这个垃圾强太多了. 2.在博客园进入随笔撰写编辑模块,点击上传图像按钮(点最黄的那个,别点错了). 3.弹出如下窗口 ,点击 ...
- Hexo博客中插入 Chart 动态图表
该文基本(全部)来自于chatjs中文文档 由于使用pjax,导致页面需要二次刷新才会显示表格,故引入了自动刷新的JS,但这样会导致回退标签失效 背景 今天在谷歌上逛博客时,突然发现shen-yu大佬 ...
- Hexo博客插入图片的方法
Hexo博客插入图片的方法 hexo图片blog hexo blog 插入图片的方法总结 hexo 的blog 内容是根据 markdown 文件的内容生成的html文件, 生成的文件全部在 /pub ...
- Hexo博客(Snail主题)搭建回顾概览
Hexo博客(Snail主题)搭建回顾概览 笔者搭建博客地址:https://saltyfishyjk.github.io 目录 Hexo博客(Snail主题)搭建回顾概览 Part 0 前言 写作背 ...
- hexo博客图片问题
hexo博客图片问题 第一步 首先确认_config.yml 中有 post_asset_folder:true. Hexo 提供了一种更方便管理 Asset 的设定:post_asset_folde ...
- hexo博客MathJax公式渲染问题
这个问题自己很早以前便碰到了,用MathJax语法写的一些公式,在本地Markdown编译器上渲染是没问题的,可是部署到hexo博客中就出现问题了,之前我是使用图片代替公式应付过去了,今天从网上找了一 ...
- Hexo博客主题优化
Hexo博客主题优化 添加背景图 在 themes/*/source/css/_custom/custom.styl 中添加如下代码: body{ background:url(/images/bg. ...
- Hexo 博客 github.io MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- hexo博客相关
https://www.cnblogs.com/sulishibaobei/p/6428241.html 利用hexo+github+nodejs搭建自我博客的一天 http://www.sulish ...
随机推荐
- 【LeetCode】1022. Sum of Root To Leaf Binary Numbers 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 DFS 日期 题目地址:https://leetco ...
- 【剑指Offer】05. 替换空格 解题报告 (Python & C++ & Java)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 个人微信公众号:负雪明烛 目录 题目描述 解题方法 方法一:新建可变长度的容器 方法二:原 ...
- 【LeetCode】109. Convert Sorted List to Binary Search Tree 解题报告(Python)
[LeetCode]109. Convert Sorted List to Binary Search Tree 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id ...
- 应用程序开发 WebApp NativeApp 微信小程序
Web Native App 微信小程序 WebApp是指基于Web的系统和应用,其作用是向广大的最终用户发布一组复杂的内容和功能.webapp 框架是一种简单的与WSGI兼容的网络应用程序框 ...
- 第十个知识点:RSA和强RSA问题有什么区别?
第十个知识点:RSA和强RSA问题有什么区别 这个密码学52件事数学知识的第一篇,也是整个系列的第10篇.这篇介绍了RSA问题和Strong-RSA问题,指出了这两种问题的不同之处. 密码学严重依赖于 ...
- Pycharm的界面修改与基本设置
Pycharm的一些基本设置 设置字体大小与字体样式 首先我们打开Pycharm,点击左上角File,找到sitting 点击后就能进入设置界面 xdm,我将介绍两种更改字体的设置 方法一 设置界面找 ...
- cpuinfo基本参数讲解
1.首先我们明确几个概念 (1)物理CPU 物理cpu数量,实际服务器中插槽上的CPU个数 实例: [root@kvm01 ~]# cat / ...
- 在quasar 注册全局filter
A common use case for Quasar applications is to run code before the root Vue app instance is instant ...
- vi中使用鼠标右键插入时进入(insert)visual模式
使用vim插入外面复制的内容时,用右键点击后,并未将内容粘贴进去,而是进入了(insert)visual模式,解决方法:先shift+enter进入普通模式输入 set mouse-=a然后再i进入i ...
- Tomcat8/9的catalina.out中文乱码问题解决
OS: Red Hat Enterprise Linux Server release 7.8 (Maipo) Tomcat: 9 中文显示为???问号 在$CATALINA_HOME/conf下的l ...