Hexo图片详解

ARHF • 2024-10-04 00:01 • 编程

一、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加速服务来提高图片的加载速度
将图片上传至云端服务器，减少本地服务器的资源压力

原创文章，作者：ARHF，如若转载，请注明出处：https://www.506064.com/n/133832.html