typecho默认主题增加点击图片放大功能

浏览自己文章时发现个问题，文章中有些图片有些小，不能放大就无法看清图片中的内容，不想用插件为此钻研了很久，终于借助AI完成了这个功能。
首先在post.php中添加代码

 <?php
    $content = $this->content; // 获取原始内容
    $content = str_replace('<img', '<img class="zoomable-image"', $content); // 添加类名到所有<img>标签
    echo str_replace(array('<img class="zoomable-image" class="', '<img class="zoomable-image"class="'), '<img class="', $content); // 修复可能存在的重复class属性
    ?>

<div id="imageModal" class="modal">
  <div class="modal-header">
    <button id="zoomIn">放大</button>
    <button id="zoomOut">缩小</button>
    <span class="close">&times;</span>
  </div>
  <img class="modal-content" id="img01">
</div>

然后自己增加css样式，和添加js

// 获取模态框元素
var modal = document.getElementById("imageModal");
var img = document.querySelector(".modal-content"); // 获取模态框中的img元素，用于展示大图
var zoomInBtn = document.getElementById("zoomIn");
var zoomOutBtn = document.getElementById("zoomOut");
var scale = 1; // 初始缩放比例

// 为所有zoomable-image类的图片添加点击事件
var images = document.querySelectorAll(".zoomable-image");
images.forEach(function(imgElement) {
  imgElement.addEventListener("click", function() {
    modal.style.display = "block"; // 显示模态框
    img.src = this.src; // 设置模态框中的图片源为被点击的图片源
    scale = 1; // 重置缩放比例
    img.style.transform = `scale(${scale})`; // 设置初始缩放比例
  });
});

// 获取 <span> 元素，设置关闭模态框的功能
var span = document.getElementsByClassName("close")[0];
span.addEventListener("click", function() {
  modal.style.display = "none"; // 关闭模态框
});

// 放大功能
zoomInBtn.addEventListener("click", function() {
  scale += 0.1; // 每次放大增加0.1倍
  img.style.transform = `scale(${scale})`; // 设置新的缩放比例
});

// 缩小功能
zoomOutBtn.addEventListener("click", function() {
  if (scale > 0.1) { // 防止过度缩小
    scale -= 0.1; // 每次缩小减少0.1倍
    img.style.transform = `scale(${scale})`; // 设置新的缩放比例
  }
});