Hexo圖片詳解

一、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加速服務來提高圖片的載入速度
• 將圖片上傳至雲端伺服器，減少本地伺服器的資源壓力