一、Hexo图片路径
在Hexo博客中,我们通常将图片放在/source/images文件夹下,然后在markdown文章中使用相对路径进行引用,例如:
![图片描述](../images/图片文件名)
如果想要在文章中使用其他路径的图片,可以在配置文件_config.yml中修改photo_dir参数来修改默认路径。
二、Hexo图片添加注释
为了让阅读者更好地理解文章中的图片,我们可以为图片添加注释,实现方法如下:
![图片描述](../images/图片文件名 "图片注释")
在插入图片的时候,可以在图片路径后加上"图片注释",在鼠标移动到该图片上时,会显示该注释。
三、Hexo图片主题
Hexo使用的主题不同,图片展示的效果也会不同。可以通过修改主题的css样式来调整图片的展示效果。
以NexT主题为例,可以在/source/css/_custom/custom.styl文件中加入以下代码:
//图片居中显示
.post-body img {
display: block;
margin: 0 auto;
max-width: 100%;
}
四、Hexo图片缩放
Hexo默认对图片进行缩放,可以在markdown文章中添加以下参数来控制缩放比例:
![图片描述](../images/图片名&s=200)
其中&s=200表示缩放比例为200px,可以根据需要进行调整。
五、Hexo图片管理
Hexo中可以通过插件管理图片,例如使用hexo-asset-image插件可以快速上传和管理图片,使用方法如下:
# 安装插件
npm install hexo-asset-image --save
# 使用插件进行图片管理
{% asset_img 图片文件名 [图片描述] %}
六、Hexo图片加载慢
如果图片较大,可能会导致加载较慢。可以通过压缩图片来减小图片大小,同时可以使用CDN加速技术进行加速。
以压缩图片为例,可以使用image-webpack-loader插件对图片进行压缩:
module.exports = {
module: {
rules: [
{
test: /\.(jpe?g|png|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'images/'
}
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false,
},
webp: {
quality: 75
}
},
},
],
},
],
},
};
七、Hexo图片插件
Hexo提供了很多图片插件,可以根据需要进行安装和使用。例如:
- hexo-asset-image: 图片管理插件
- hexo-image-caption: 图片描述插件
- hexo-image-import: 从外部链接导入图片插件
- hexo-filter-image: 图片缩放和压缩插件
八、Hexo图片显示不出来
如果Hexo文章中插入的图片无法正常显示,可能有以下几个原因:
- 图片路径错误:检查图片路径是否正确
- 图片文件名错误:确认图片文件名是否正确
- 图片文件格式错误:确认图片格式是否被Hexo支持
- CDN异常:确认CDN服务是否正常
- 网络问题:确认网络连接是否正常
九、Hexo图片很多会卡吗
当Hexo文章中插入大量图片时,可能会导致卡顿等性能问题。可以通过以下几种方式提高性能:
- 压缩图片大小,减少图片质量损失的同时也可以减小图片文件大小
- 使用CDN加速服务来提高图片的加载速度
- 将图片上传至云端服务器,减少本地服务器的资源压力