Hexo博客增加图片统计的方式

Hexo实现自定义的方法有两种：

脚本（Scripts）：只需要把 JavaScript 文件放到 博客根目录的scripts 文件夹中，在启动时就会自动载入
插件（Packages）

这里就写成脚本形式了，也方便大家依据自己的实际情况进行调整（着重注意目录的相对位置），具体步骤如下

在博客根目录创建scripts文件夹（如果有就不用创建了），创建imageCount.js文件，写入以下脚本

const fs = require('fs');
const path = require('path');

function countImages(dir) {
  let count = 0;
  const files = fs.readdirSync(dir);

  files.forEach((file) => {
    const filePath = path.join(dir, file);
    const stat = fs.statSync(filePath);

    if (stat.isDirectory()) {
      count += countImages(filePath);
    } else if (/\.(jpg|jpeg|png|gif|bmp)$/.test(file)) {
      count++;
    }
  });

  return count;
}

const imageCount = countImages(path.join(__dirname, '../source'));

fs.writeFileSync(path.join(__dirname, '../source/imageCount.json'), JSON.stringify({ count: imageCount }));

一般需要显示图片统计的位置都是在页脚处，所以要编辑博客主题的footer.ejs文件，新增下面这段代码

<script>
  document.addEventListener("DOMContentLoaded", function() {
    fetch('/imageCount.json')
      .then(response => response.json())
      .then(data => {
        const imageCount = data.count;
        const imageCountElement = document.getElementById('imageCount');
        imageCountElement.textContent = `本站共计收录了 ${imageCount} 张图片`;
      })
      .catch(error => {
        console.error('Failed to load image count:', error);
      });
  });
</script>
<span id="imageCount">正在加载图片数目...</span>

其他需要显示图片数的地方类似，找到对应的文件添加以上代码即可

原理和注意事项：

本质就是统计source目录下的所有图片，并将图片数存入json文件中，需要使用时读取json文件取出图片数
注意各目录的相对位置，按照自身目录结构做调整

Prev Home Next

Hexo博客增加图片统计的方式

Comments