最近写文章需要在博客中插入较大的图片，如果用户可以点击看到大图，则可以看到更多的细节。实现步骤如下：

创建JavaScript代码文件

1. 用文本编辑器（比如macOS自带的TextEdit）创建一个新文件，保存它到下载文件夹，并命名为dealing_images.js。
2. 复制下面的代码到上面提到的js文件，保存并关闭这个文件。

function openInNewWindow(image) {
  window.open(image.src);
}

var images = document.querySelectorAll("img");
var index;

for (index = 0; index < images.length; index++) {
  let image = images[index];

  if (image.src.includes("/media/")) {
    image.addEventListener("click", function() { openInNewWindow(image); }, true)
  }
}

复制文件到对应文件夹

1. 右键点击你要修改的网站对应的MWeb的分类，点编辑。
2. 在弹出的窗口中，点击主题最右侧的编辑。这时MWeb会自动打开Finder窗口。
3. 进入选择你网站正在使用的主题。然后复制dealing_images.js到主题所在的assets/js/文件夹。

添加脚本到生成html文件的模版

1. 同样是刚刚的主题所在的文件夹，用文本编辑器打开footer.html文件。
2. 在文件的末尾的</body>和</html>行之间，插入脚本。

<script src="asset/js/dealing_images.js"></script>

最终效果如下。

</body>
<script src="asset/js/dealing_images.js"></script>
</html>

重新生成网站

1. 回到MWeb，右键点击网站对应的分类，选择清空并重建网站。
2. 然后再次右键，选择预览网站。就可以看到效果了。

修改完成后，第一次必须清空并重建网站，不然的话，dealing_images.js不会被复制到MWeb搜生成的文件夹里。