UPDATE
2020-02-13 以下内容可能错误或过时
更新:https://leay.net/2019/12/25/hexo/
说明注意!!
先提一下,我目前的 hexo 版本为 4.0,其它版本可能会有不同。
首先要在 Hexo 博客配置添加一行:
# 开始使用本地静态资源
post_asset_folder: true
当你什么插件也没安装时,在 hexo 4.0 也可以在文章引用本地图片,引用方式是这样的:
首先是在 _posts 文件夹下建立一个博文文件,比如 2019-12-23-hello-world.md
,在建立一个同名的文件夹 2019-12-23-hello-world
。这篇文章要引用的图片就放在该文件夹下。
比如我就在该目录下放一个图片2019-12-23-hello-world/haha.png
。然后在博文 MarkDown 文件里引用该图片,怎么引用呢?用下面这种方式:
![](haha.png)
如果你熟悉 MarkDown 语法的话就会注意到,这个引用路径不太对劲。
本来文章与图片的路径是这样的:
-- /2019-12-23-hello-world
- haha.png
-- 2019-12-23-hello-world.md
理论上 2019-12-23-hello-world.md
要引用 2019-12-23-hello-world
文件夹下的 haha.png
,引用方式应该是:
![](2019-12-23-hello-world/haha.png)
这样才对啊!
那么,为什么引用的时候不用加文件夹的路径呢?
这是因为 hexo 在渲染的时候,会把 2019-12-23-hello-world.md
渲染为 public/2019/12/19/T-c-what-the-fuck
下的 index.html 网页文件,而把对应文件夹下的静态资源,比如图片 /2019-12-23-hello-world/haha.png
也拷贝到 public/2019/12/19/T-c-what-the-fuck
下。
所以虽然我们在写博文的时候看来,博文和图片不在统一文件夹路径下,但是它们最终被渲染后,是放在同一个文件夹下的,所以我们在写博文引用图片时,就得把它们当作在一个文件夹下来处理,也就是引用的时候,要去掉文件夹路径。
这样有点反直觉啊!!
所以可以引入插件来帮我们处理!那就是下文提到的 hexo-asset-image 啦!
安装该插件并配置开启后,就可以在博文里按照常规引用方式来引用了!该插件的原理实际上是帮我们做了个字符串替换,使我们写博文时看来的正常引用路径转换为 hexo 渲染时使用的路径。
就是这样!
其它
hexo 一点问题(生成博文插入本地图片,修改文章路径)
jekyll-hexo-hugo 互相迁移时关于永久链接的问题
hexo 插入本地图片不显示的排查方案
对比一下构建生成的 HTML 文件里引入的图片的路径,和 public 文件夹下图片的路径。一般原因都是图片没拷过来,或者拷过来了但存放位置不对劲,又或者仅仅是引入的路径写错了…
若图片没拷过来,手动把图片拷过来即可。
若拷过来了,但图片的位置和说好的不一样,相应修改引入路径即可。(如下面我遇到的问题)
若仅仅是自己把路径写错了…面壁思过先。
【可能错误或过时】hexo 生成博文插入图片
原文
步骤
-
把主页配置文件
_config.yml
里的post_asset_folder:
这个选项设置为true
-
在你的hexo目录下执行这样一句话
npm install hexo-asset-image --save
,这是下载安装一个可以上传本地图片的插件,来自dalao:dalao的git -
等待一小段时间后,再运行
hexo n "xxxx"
来生成md博文时,/source/_posts
文件夹内除了xxxx.md
文件还有一个同名的文件夹 (当然也可以自己手动建) -
最后在
xxxx.md
中想引入图片时,先把图片复制到xxxx这个文件夹中,然后只需要在xxxx.md中按照markdown的格式引入图片:![你想输入的替代文字](xxxx/图片名.jpg)
注意: xxxx是这个md文件的名字,也是同名文件夹的名字。只需要有文件夹名字即可,不需要有什么绝对路径。你想引入的图片就只需要放入xxxx这个文件夹内就好了,很像引用相对路径。
-
最后检查一下,
hexo g
生成页面后,进入public\2017\02\26\index.html
文件中查看相关字段,可以发现,html标签内的语句是<img src="2017/02/26/xxxx/图片名.jpg">
,而不是<img src="xxxx/图片名.jpg>
。这很重要,关乎你的网页是否可以真正加载你想插入的图片。
遇到没能成功显示的问题
查看网页,结果是 <img src="2017/02/26/2017-02-23-c/图片名.jpg">
的形式,然后查看 hexo 的目录,发现图片拷过来了,但路径是 /public/2017/02/26/c/a.jpg
。
之前在 md 文件中引用时写作:
![你想输入的替代文字](xxxx/图片名.jpg)
改为:
![](a.jpg)
就可以了。
效果查看 这篇文章 的图片显示。
为什么
看上面的效果,出错原因是 /public/2017/02/26/c/
文件夹中没有生成保存图片的同名文件夹,图片直接被拷贝到这个文件夹下了。
突然想起从 jekyll 转移到 hexo 的时候更改过文章路径与标题解析方式…
不知道有没有关联。
大概没有关联…
jekyll-hexo-hugo 互相迁移时关于永久链接的问题
hexo 修改文章路径
产生的链接和两条属性相关。
permalink: :year/:month/:day/:title/
链接格式
new_post_name: :title.md
解析标题方式
之前文章的命名方式都是 YYYY-MM-DD-title (jekyll 的文章格式),比如文件 2018-05-30-hexo-image.md
。
hexo 渲染时解析博文的标题为 2018-05-30-hexo-image
。
当如上设置 permalink
后,路径就是 http://https://leay.net//2018/05/30/2018-05-30-hexo-image/
这样。
时间出现了两次好诡异啊。
可以修改 permalink: :title/
,链接就直接用标题来区分。
效果是:http://https://leay.net//2018-05-30-hexo-image/
但是我想导入评论,链接最好和之前 jekyll 的一致。
于是就想办法改改后面。
hexo 提供了 new_post_name
。这条属性是定义 hexo 对文章标题的解析方式的。
默认为 new_post_name: :title.md
。
我们修改为 new_post_name: :year-:month-:day-:title.md
。
对比文件命名,很容易理解。
这样,hexo 就会把自动提取出文件的命名中的文章标题,而不是直接把文件的命名解析为标题。
路径就为:
http://https://leay.net//2018/05/30/hexo-image/
现在你可以看看浏览器的地址栏哦。就是这样效果。
[update-2019-09-29]