图片放大

文章宽度有限，在图片过大的时候会自动调整图片宽度为文章的宽度
常见的是点击图片，在弹层中显示原始图片，方便查看大图；再次点击弹层外侧关闭弹层
搜了一下，最终使用 bootstrap 的模态框（Modal） 来实现此功能
参考：https://blog.123090.xyz/技术/2018/04/22/bootstrap-modal-large-view.html

1. 添加模态框

根据 bootstrap 模态框的用法，在 apps/templates/article.html 文件中添加：

  <div class="modal fade" id="img_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="width: fit-content; max-width: 100%">
      <div class="modal-content"></div>
    </div>
  </div>

自定义的样式比较重要，别漏了。style="width: fit-content; max-width: 100%"

2. 模态框内容替换

添加图片点击事件，点击后将图片内容置为模态框内容。 在 static/js/site.js 文件的 $(document).ready(function(){ 中添加：

  // 图片点击放大
  $('img').click(function(){
    console.log('img click');
    var img_html = $(this).prop("outerHTML");
    console.log(img_html);
    $('#img_modal .modal-content').html(img_html);
    $('#img_modal').modal('show');
  })

3. 鼠标指针改为放大样式

在 static/css/site.css 文件中添加：

img {
  max-width: 100%;
  cursor: zoom-in;
}

4. 图片测试