markdown中图片自动点击放大（使用sphinx build）

小么额菇

已于 2024-05-10 14:07:09 修改

阅读量995

点赞数

文章标签： sphinx javascript

于 2022-10-22 10:01:23 首次发布

本文链接：https://blog.csdn.net/Joyce__Yin/article/details/127457842

版权

最近在研究build doc，功能很实用，主要通过custom.js自动给页面中的图片标签配置on click实现。

czonf.py中配置custom.js + cusom.css:

html_static_path = ["_static"]
html_css_files = ["custom.css"]
html_js_files = ['custom.js']

在custom.css中定义放大所需的css:

/* (A) LIGHTBOX BACKGROUND */
#lightbox {
    /* (A1) COVERS FULLSCREEN */
    position: fixed; z-index: 999;
    top: 0; left: 0;
    width: 100vw; height: 100vh;

    /* (A2) BACKGROUND */
    background: rgba(0, 0, 0, 0.5);

    /* (A3) CENTER IMAGE ON SCREEN */
    display: flex;
    align-items: center;
    align-items: center;

    /* (A4) HIDDEN BY DEFAULT */
    visibility: hidden;
    opacity: 0;

    /* (A5) SHOW/HIDE ANIMATION */
    transition: opacity ease 0.4s;
}
/* (A6) TOGGLE VISIBILITY */
#lightbox.show {
    visibility: visible;
    opacity: 1;
}
/* (B) LIGHTBOX IMAGE */
#lightbox img {
    /* (B1) DIMENSIONS */
    width: 100%;
    height: auto;

    /* (B2) IMAGE FIT */
    /* contain | cover | fill | scale-down */
    object-fit: cover;
}
/* (C) LIGHTBOX IMAGE - FULLSCREEN ALTERNATIVE *
#lightbox img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

在custom.js中配置事件，注意替换下方{your tag name}，最后markdown中正常使用 ![my-image](link) build doc即可：

window.onload = () => {
    if (document.getElementById("lightbox") === null){
      // Append lightbox div to each page
      let div = document.createElement('div');
      div.innerHTML = '<div id="lightbox"></div>';
      document.body.appendChild(div);
    }

    // (A) GET LIGHTBOX & ALL .ZOOMD IMAGES
    # Replace the class name to your body class name
    let all = document.getElementsByClassName("{your tag name}")[0].getElementsByTagName("img"),
        lightbox = document.getElementById("lightbox");

    // (B) CLICK TO SHOW IMAGE IN LIGHTBOX
    // * SIMPLY CLONE INTO LIGHTBOX & SHOW
    if (all.length>0) { for (let i of all) {
      i.onclick = () => {
        let clone = i.cloneNode();
        clone.className = "";
        lightbox.innerHTML = "";
        lightbox.appendChild(clone);
        lightbox.className = "show";
      };
    }}

    // (C) CLICK TO CLOSE LIGHTBOX
    lightbox.onclick = () => {
      lightbox.className = "";
    };
};