mdx.tsx

async function CenterImage(props: { src: string; alt: string }) {
  const { src, alt } = props
  const imagePath = src.replaceAll('%20', ' ')

  // 使用文件路径生成 MD5 哈希值
  const contentHash = crypto.createHash('md5').update(imagePath).digest('hex')

  // 修改缓存目录路径
  const cacheDir = path.join(
    process.cwd(),
    '.next',
    'cache',
    'optimized-images'
  )
  const placeholderCacheFileName = `${contentHash}-placeholder.json`
  const placeholderCachePath = path.join(cacheDir, placeholderCacheFileName)

  let preImage

  // 检查缓存中是否已存在占位图信息
  try {
    const cachedPlaceholder = await fs.readFile(placeholderCachePath, 'utf-8')
    preImage = JSON.parse(cachedPlaceholder)
    console.log('占位图缓存存在', placeholderCachePath)
  } catch (error) {
    // 如果缓存不存在,生成新的占位图信息
    console.log('占位图缓存不存在,生成新的', placeholderCachePath)
    preImage = await getPlaceholderBlogImage(imagePath)

    // 保存占位图信息到缓存
    await fs.mkdir(cacheDir, { recursive: true })
    await fs.writeFile(placeholderCachePath, JSON.stringify(preImage))
  }

  // 检查文件扩展名是否为 .gif
  if (imagePath.toLowerCase().endsWith('.gif')) {
    // 如果是 GIF,直接返回原始图片
    return (
      <>
        <BlogImage
          src={imagePath}
          alt={alt}
          width={preImage.metadata!.width!}
          height={preImage.metadata!.height!}
          hex={preImage.placeholder.hex}
        />
        {alt.startsWith('alt:') && (
          <p className="-mb-0 mt-2 text-center text-[13px] text-neutral-400 dark:text-neutral-600">
            {alt.replace('alt:', '')}
          </p>
        )}
      </>
    )
  }

  const cacheFileName = `${contentHash}-optimized.webp`
  const cachePath = path.join(cacheDir, cacheFileName)

  // 设置 public 目录中的目标路径
  const publicDir = path.join(process.cwd(), 'public', 'optimized')
  const publicFileName = `${contentHash}-optimized.webp`
  const publicPath = path.join(publicDir, publicFileName)

  // 检查缓存中是否已存在优化后的图片
  try {
    await fs.access(cachePath)
    console.log('缓存存在', cachePath)
    // 如果缓存存在，将其复制到 public 目录
    await fs.mkdir(publicDir, { recursive: true })
    await fs.copyFile(cachePath, publicPath)
  } catch (error) {
    // 如果缓存不存在，进行优化处理
    console.log('缓存不存在', cachePath)
    const originalBuffer = await getFileBufferLocal(imagePath)
    const optimizedBuffer = await sharp(originalBuffer)
      .resize(1920, 1080, { fit: 'inside', withoutEnlargement: true })
      .webp({ quality: 90, lossless: true })
      .toBuffer()

    // 确保目录存在
    await fs.mkdir(cacheDir, { recursive: true })
    await fs.mkdir(publicDir, { recursive: true })

    // 保存优化后的图片到缓存目录和 public 目录
    await fs.writeFile(cachePath, optimizedBuffer)
    await fs.writeFile(publicPath, optimizedBuffer)
  }

  // 返回使用 public 目录中的优化图片
  return (
    <>
      <BlogImage
        src={`/optimized/${publicFileName}`}
        alt={alt}
        width={preImage.metadata!.width!}
        height={preImage.metadata!.height!}
        hex={preImage.placeholder.hex}
      />
      {alt.startsWith('alt:') && (
        <p className="-mb-0 mt-2 text-center text-[13px] text-neutral-400 dark:text-neutral-600">
          {alt.replace('alt:', '')}
        </p>
      )}
    </>
  )
}