专栏首页M不作声hexo博客中如何插入图片

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文件使用![](1/image.jpg)能在编辑器中正常显示图片。

在hexo中,按理说应该是使用![](image.jpg),但网页中却无法正常显示。

此时应该使用这样的方式来引入图片:

{% asset_img image.jpg 这是一张图片 %}

虽然可以正常引用图片了,但是这种引用图片的方式只有一句话能形容,wtf。

图片插件

插件hexo-renderer-marked解决了这个问题。可以只用npm install hexo-renderer-marked命令直接安装,之后在config.yaml中更改配置如下:

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

之后就可以在使用![](image.jpg)的方式愉快的插入图片了。

我们做了这么多都是为了方便,那么为什么不再方便一点呢。

hexo与Typora的完美结合

上述是从文章资源文件夹中引用图片,前提是先将图片放入到文章资源文件夹,如果图片数量众多的话,一张一张的放很影响效率。但是不用怕,我们有很方便的解决方法。

Typora是我非常喜欢的Markdown文本编辑器,在之前的文章中也介绍过一点。

Typora对于插入图片的支持做得非常好,在文件->偏好设置或者直接<C-,>进入设置。

Typora与hexo的完美结合

使用该配置后,可以直接复制网页中的图片地址,粘贴到Typora中后,会直接复制该图片到文章资源文件夹,同时自动更改路径。

如复制网络路径的图片https://...../image.jpg粘贴到Typora中叫文章名的文章后,图片会自动变为![](文章名/image.jpg)

但我们知道部署后,文件路径是不同的,所以当我们插入完所有的图片后,我们还需要删除每个图片路径中的文件名/。不慌,也很简单。

在Typora编辑器中,使用<C-f>快捷键,将所有的文章名/替换为空即可删除。

删除文件名

然后再将博客上传,图片就会随着文章一起打包。在网页中就可以看到正常显示的图片,大功告成。

今天不学习,明天变垃圾。

欢迎关注公众号:前端大合集。

本文分享自微信公众号 - 大前端合集(fe-stack),作者:M不作声

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-10-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 打印两个链表的第一个公共节点

    最最最简单的就是暴力解题,你说两个链表的第一个公共节点,那好,我就挨个遍历就完事了。

    不作声
  • 用JS手动实现一个栈和队列

    栈是一个「线性」的数据结构。栈最重要的特征是「只允许从一端操作数据」。栈就像一叠书,或者盘子,每次只能从最上边拿,往最上边放。

    不作声
  • 72笔试面试题

    1、请描述cookie,sesstionStorage,localStorage三者之间的区别

    不作声
  • 图片的选择和显示

    这个就是图片的选择框,在我们点击这个框的时候会给我们弹出一个文件选择,当我们选中图片的时候就把图片显示在这个框上面,如果选中的不是一个图片这个时候就需要用到一个...

    PHY_68
  • CVE-2015-1641及利用样本分析

    •漏洞成因:类型混淆漏洞。Word在处理displacedByCustomXml属性时未对customXml标签对象进行有效性验证,可以通过传入其他标签对象,由...

    Gcow安全团队
  • python图像处理-快速入门

    本系列课程是针对无基础的,争取用简单明了的语言来讲解,学习前需要具备基本的电脑操作能力,准备一个已安装python环境的电脑。如果觉得好可以分享转发,有问题的地...

    用户7054460
  • 学会运用爬虫框架 Scrapy (四) —— 高效下载图片

    爬虫程序爬取的目标通常不仅仅是文字资源,经常也会爬取图片资源。这就涉及如何高效下载图片的问题。这里高效下载指的是既能把图片完整下载到本地又不会对网站服务器造成压...

    猴哥yuri
  • OCR文本图像合成工具

    在进行文字识别时候,需要使用的数据集样式为一张含有文本的图片以及对应文本内容的标签。但是一般而言,实际情况是构建的文本字典中,每个字至少要出现200次才能有好的...

    用户3578099
  • 微信C2C渐进式图片流式传输系统简介

    在微信C2C图片服务中,用户体验一直是第一位的,由架构平台部研发的微信C2C后台系统,也一直在用户体验上深入研究,经过多次技术数据的验证,采用渐进式格式,和产品...

    腾讯技术工程官方号
  • 推荐系统冷启动

    冷启动是推荐系统的重要挑战之一。那么,什么是冷启动?如何设计一个好的冷启动方案?本文将主要从以下7个方面给大家讲清楚这些问题:

    小萌哥

扫码关注云+社区

领取腾讯云代金券