master

分支 (1)

管理

管理

master

pandoc-plug
/
template.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 使用命令  pandoc input.md -o /d/tempdoc/output.html --template=/d/document/temp.html --toc   -->
    <meta charset="UTF-8">
    <title>$pagetitle$</title>
    <!-- icon 来源 https://www.iconfinder.com/search/icons?family=free-icon-set -->
    <link rel="icon"
          href="https://cdn3.iconfinder.com/data/icons/education-209/64/plane-paper-toy-science-school-512.png"
          type="image/x-icon">
    <!-- 引入 Highlight.js 核心库 主题参考：https://highlightjs.org/examples -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <!-- and it's easy to individually load additional languages -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/json.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
    <script>hljs.highlightAll();</script>
    <script>hljs.initLineNumbersOnLoad();</script>


    <style>
        /* 图片工具栏 */
        .toolbar {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(255, 255, 255, 0.7);
            padding: 8px; /* 调整工具栏内边距 */
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            z-index: 10010; /* 确保工具栏在遮罩层之上 */
        }

        .toolbar button {
            font-size: 14px; /* 调整按钮字体大小 */
            margin: 0 3px; /* 调整按钮之间的间距 */
            background-color: rgba(0, 120, 255, 0.5);
            color: #fff;
            border: none;
            padding: 6px 8px; /* 调整按钮内边距 */
            border-radius: 2px;
            cursor: pointer;
        }

        .toolbar button:hover {
            background-color: rgba(0, 120, 255, 0.7);
        }


        /* 图片背景遮罩 */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1005;
        }

        .zoomed-image {
            max-width: 100%;
            max-height: 100%;
            cursor: grab;
        }

        .toc {
            display: none;

            position: fixed;
            z-index: 1000; /* 设置略低的z-index值 */

            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
            top: 0;
            left: 0;
            width: 180px; /* 左侧目录宽度 */
            height: 100%; /* 充满整个屏幕高度 */
            overflow-y: auto; /* 如果内容超出高度，显示滚动条 */
            padding: 20px;
            border-right: 2px solid #ddd; /* 添加分割线 */
            color: #d1d8e0; /* 默认文字颜色 */
            background-color: #2e3138;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .toc > ul {
            List-style: none;
            padding-top: 45px;
            padding-left: 0px;
        }

        .toc ul {
            List-style: none;
            padding-left: 1px;
        }

        .toc li {
            List-style: none;
            padding-top: 4px;
            margin-left: 12px;
            transition: background-color 0.3s, transform 0.2s;
        }

        .toc a {
            List-style: none;
            padding-bottom: 3px;
            position: relative;
            display: block;
            padding-left: 5px;
            line-height: 1.5;
        }

        .toc a::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 2px;
            background-color: hsla(204, 83%, 62%, 100%);
            transform: scaleY(0.9); /* 控制边框高度占比 */
        }

        .toc li:hover {
            /*background-color: #ccc;*/
            transform: translateX(6px);
        }

        .toc a:hover {

            color: #2ecc71 !important; /* 鼠标悬停时的颜色 */
            text-decoration: underline; /* 悬停时添加下划线效果 */
            background-color: #34495e; /* 鼠标悬停时链接元素的背景色 */
        }

        .tocShowButton {
            display: block;
            position: fixed;
            z-index: 1001; /* 设置略低的z-index值 */
            top: 40px;
            left: 30px;
            cursor: pointer;
            color: #fff;
            background-color: #596275;
            border: none;
            padding: 0px 60px;
            border-radius: 5px;
            font-size: 15px;
        }

        /* 基础表格样式 */
        .markdown-content > table {
            width: 100%;
            border-collapse: collapse;
            font-family: Arial, sans-serif;
            background-color: #f6f6f6; /* 使用纯白色背景 */
            border-radius: 8px; /* 添加圆角 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
            transition: all 0.3s ease; /* 平滑过渡效果 */
            overflow: hidden; /* 隐藏超出的部分 */
        }

        /* 表格边框样式 */
        .markdown-content > table th,
        .markdown-content > table td {
            border: 1px solid #e0e0e0; /* 边框颜色为浅灰色 */
            padding: 6px; /* 增加内边距 */
            text-align: left;
            color: #333333; /* 文字颜色为深灰色 */
            transition: all 0.3s ease; /* 平滑过渡效果 */
        }

        /* 表头样式 */
        .markdown-content > table thead th {
            background-color: #f0f0f0; /* 使用淡灰色作为表头背景 */
            color: #333333; /* 文字颜色为深灰色 */
            font-weight: bold;
            border-top-left-radius: 8px; /* 左上角圆角 */
            border-top-right-radius: 8px; /* 右上角圆角 */
        }

        /* 行间隔样式 */
        .markdown-content > table tbody tr:nth-child(even) {
            background-color: #f3faf3; /* 使用极淡灰色作为偶数行背景色 */
        }

        /* 鼠标悬停效果 */
        .markdown-content > table tbody tr:hover {
            background-color: #f0f0f0; /* 鼠标悬停时背景变为淡灰色 */
            /*color: #333333; !* 文字颜色保持不变 *!*/
        }


        /* 内容 */
        body {
            /*font-family: Arial, sans-serif;*/
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
            max-width: 800px; /* 自适应屏幕大小 */
            margin: 0 auto; /* 水平居中 */
            padding: 20px;
            background-color: white; /* 默认背景色 */
            color: black; /* 默认文字颜色 */
            transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
        }

        /* 复制按钮 */
        .copy-btn {
            background-color: rgba(197, 217, 227, 0.99);
            color: white;
            border: none;
            padding: 5px 6px;
            font-size: 10px;
            cursor: pointer;
            border-radius: 4px;
            position: absolute;
            top: 5px;
            right: 5px;
            z-index: 1;
            opacity: 0.6; /* 设置透明度 */
        }

        /* 复制按钮 */
        .copy-btn:hover {
            background-color: #83a2dc;
            opacity: 1; /* 悬停时完全不透明 */
        }

        /* 强调代码块的样式 */
        pre {
            position: relative;
            z-index: 999; /* 设置略低的z-index值 */
            margin-top: 32px;
            margin: 1em 0;
            /*padding: 1em;*/
            overflow-x: auto;
            border-radius: 5px;
            background-color: #F7F7F7; /* 背景色 */
            /*border: 1px solid #d5ebe1;  边框 */
            border-left: 4px solid #9b9bb6;
            font-family: 'Consolas', monospace; /* 使用等宽字体 */
        }

        pre > code {
            border: 0;
            display: inline;
            max-width: initial;
            padding: 0;
            margin: 0;
            overflow: initial;
            line-height: inherit;
            font-size: .85em;
            white-space: pre;
            background: 0 0;

        }

        code {
            font-family: 'Consolas', monospace;
            border-radius: 2px;
            background-color: rgb(171 169 169 / 61%);
            color: inherit;
            margin: 0 0.2em;
            padding: 0.02em 0.3em;
            font-size: 0.86em;
        }

        /* 代码块中的代码样式 */
        code[class*="language-"] {
            font-family: 'Consolas', monospace;
            font-size: 0.8em;
        }

        /* for block of numbers 代码块 中行间距等调整 */
        pre code td.hljs-ln-numbers {
            text-align: center;
            color: #9c9c9c;
            /*border-right: 0.5px solid #9c9c9c;*/
            vertical-align: top;
            padding-right: 0.6rem;
            border: none;
        }

        /* 修改滚动条样式 */
        ::-webkit-scrollbar {
            width: 12px; /* 滚动条宽度 */
            height: 9px;
            opacity: 0.5; /* 设置透明度 */
            /*border-radius: 8px; !* 滚动条边框圆角 *!*/
        }

        ::-webkit-scrollbar-track {
            background: #100e0e; /* 滚动条轨道的背景颜色 */
        }

        ::-webkit-scrollbar-thumb {
            background: #484948F9; /* 滚动条的颜色 */
            border-radius: 4px; /* 滚动条的圆角 */
            opacity: 0.6; /* 悬停时完全不透明 */
            transition: background-color 1s; /* 添加颜色变化的过渡效果 */
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #abadad;
            opacity: 1; /* 悬停时完全不透明 */
        }

        /* 提示框样式 */
        .note, .info {
            background-color: #E6F0FC; /* 淡蓝色背景 */
            color: black;
            border-left: 5px solid #4d8cf0; /* 左边框样式 */
            padding: 12px;
            margin-bottom: 10px;
            font-family: 'Microsoft YaHei', sans-serif;
            border-radius: 4px; /* 滚动条的圆角 */
        }

        .warning {
            color: black;
            background-color: #FDF1E5; /* 黄色背景 */
            border-left: 5px solid #eccc68; /* 左边框样式 */
            padding: 16px;
            margin-bottom: 10px;
            font-family: 'Microsoft YaHei', sans-serif;
            border-radius: 4px; /* 滚动条的圆角 */
        }

        .tip {
            color: black;
            background-color: #E5F8F8; /* 黄色背景 */
            border-left: 5px solid #E5F8F8; /* 左边框样式 */
            padding: 16px;
            margin-bottom: 10px;
            font-family: 'Microsoft YaHei', sans-serif;
            border-radius: 4px; /* 滚动条的圆角 */
        }

        /* 日间模式样式 */
        body.night-mode {
            background-color: #2c2f36; /* 深色背景 */
            color: rgba(255, 255, 255, 0.99); /* 白色文字 */
        }

        /* 日间模式样式 代码块 */
        body.day-mode pre {
            background-color: #535c68; /* 夜间模式下的代码块背景色 */
            color: white; /* 代码块文字颜色 */
            border-left: 4px solid #7c949f;
            font-family: 'Consolas', monospace; /* 使用等宽字体 */
        }

        /* 日间模式样式 toc目录 */
        body.day-mode .toc a {
            color: #0099ff; /* 代码块文字颜色 */
        }

        body.day-mode .toc {
            background-color: white;
        }

        /* 夜间模式样式 鼠标指向时变为灰色 */
        body.day-mode .toc a:hover {
            text-decoration: underline; /* 悬停时添加下划线效果 */
            background-color: #f4f8ee; /* 鼠标悬停时链接元素的背景色 */
            color: #2ecc71;
        }

        /* 切换日间夜间开关按钮样式 */
        .toggle {
            position: fixed;
            z-index: 1001; /* 设置略低的z-index值 */
            top: 40px; /* 距离顶部的距离 */
            right: 40px; /* 距离右侧的距离 */
        }

        .toggle input {
            display: none;
        }

        /* 滑块样式 */
        .slider {
            z-index: 500;
            position: relative;
            display: inline-block;
            width: 40px;
            height: 20px;
            background-color: grey;
            border-radius: 20px;
            cursor: pointer;
            transition: background-color 0.4s ease-in-out;
        }

        /* 太阳和月亮图标 */
        .slider::before {
            position: absolute;
            content: "\1F31E"; /* 太阳图标 */
            font-size: 14px;
            left: 2px;
            bottom: 2px;
            transition: transform 0.4s ease-in-out;
        }

        /* 夜间模式下太阳图标隐藏，月亮图标显示 */
        input:checked + .slider::before {
            content: "\1F319"; /* 月亮图标 */
            transform: translateX(20px);
        }

        input:checked + .slider {
            background-color: #2196F3; /* 调整按钮背景颜色 */
        }

        /* 全局图片 大小限制 */
        img {
            padding-top: 10px;
            max-width: 800px;
            height: auto;
            margin-right: 5px;
            text-align: center;
            transition: transform 0.5s ease-in-out;
        }

        .markdown-content img {
            transition: transform 0.3s ease-in-out;
            max-height: 100vh; /* 图片最大高度，保持在视窗内 */
            max-width: 80%; /* 图片最大宽度 */
        }

        /*  图片放大 */
        .markdown-content img.zoomed {
            z-index: 999;
            position: fixed;
            top: 0;
            left: 250px;
            width: calc(100% - 300px);
            bottom: 0;
            object-fit: contain;
            margin: auto;
            transition: transform 0.3s ease-in-out; /* 添加缩放的过渡效果 */
        }

        /* 作者信息样式 */
        .author-info {
            position: relative;
            bottom: 0px;
            left: 50px;
            display: inline-flex;
            align-items: center;
            z-index: 1; /* 提高层叠顺序 */
        }

        /* 图片样式 */
        .author-info img {
            width: 30px;
            height: auto;
            margin-right: 5px;
        }

        h1, h2, h3, h4, h5 {
            font-weight: 700;
            margin-top: 1.2em;
            margin-bottom: 0.1em;
            /*font-family: Georgia, Palatino, serif;*/
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
        }

        h1, h2 {
        / / 让标题往左移动
            /*margin-left: -22px;*/
        }

        h1 {
            border-bottom: 1.2px solid rgba(211, 202, 207, 0.99);
            font-size: 35px;
            line-height: 3rem;
        }

        h2 {
            font-size: 30px;
            /*line-height: 25px;*/
            line-height: 0.75;
        }

        h3 {
            /*color: #70a1ff;*/
            font-size: 25px;
            line-height: 0.75;
        }

        h4 {
            /*color: #2E80F2;*/
            font-size: 20px;
            line-height: 0.75;
        }

        h5 {
            font-size: 18px;
            line-height: 0.75;
            /*list-style: 18px;*/
        }


        /* a标签 */
        a {
            color: white;
            margin: 0;
            padding: 0;
            vertical-align: baseline;
        }

        a:hover {
            text-decoration: none;
            color: #ff6600;
        }

        a:visited {
            /*color: purple;*/
        }

        /* 文字居中 */
        .title {
            font-size: 43px;
            text-align: center;
        }

        /*p {*/
        /*    color: #dd6b7b;*/
        /*}*/

    </style>

</head>
<body class="night-mode">


<label class="toggle">
    <input type="checkbox" onclick="toggleMode()">
    <span class="slider"></span>
</label>
<h1 class="title">$pagetitle$</h1>
<title>$pagetitle$</title>
<link rel="icon" href="https://cdn3.iconfinder.com/data/icons/education-209/64/plane-paper-toy-science-school-512.png"
      type="image/x-icon">
<div class="content">
    <button class="tocShowButton">目录</button>
    <div class="toc">
        $toc$
        <!-- 添加作者信息 -->
        <div class="author-info">
            <span>Author: Hong</span>
            <img width="64" height="64" src="https://img.icons8.com/small/64/737373/hand-with-pen.png"
                 alt="hand-with-pen"/>
            <span>$date$</span>
        </div>

    </div>

    <div class="markdown-content">
        $body$
    </div>
</div>

<script>
    // 设置默认加载夜间模式
    document.addEventListener('DOMContentLoaded', function () {
        const body = document.body;
        body.classList.add('night-mode'); // 默认加载夜间模式
    });

    // 行内代码的渲染
    document.addEventListener("DOMContentLoaded", function () {
        var codeBlocks = document.querySelectorAll(".markdown-content p code");
        codeBlocks.forEach(function (codeBlock) {
            // 获取每个代码行的文本内容
            var codeText = codeBlock.innerHTML;
            // 用<code>标签包裹代码行
            var newElement = document.createElement("code");
            newElement.textContent = codeText;
            // 替换原始的<code>标签
            codeBlock.parentNode.replaceChild(newElement, codeBlock);
        });
    });
    // copy按钮
    document.addEventListener('DOMContentLoaded', function () {
        const codeBlocks = document.querySelectorAll('pre > code');
        codeBlocks.forEach(function (codeBlock) {

            const copyButton = document.createElement('button');
            copyButton.className = 'copy-btn';
            copyButton.textContent = 'Copy';
            codeBlock.parentNode.insertBefore(copyButton, codeBlock.nextSibling);

            copyButton.addEventListener('click', function () {
                const textArea = document.createElement('textarea');
                // textArea.value = codeBlock.innerText;
                let codeText = (codeBlock.innerText || codeBlock.textContent).trim();
                // 处理连续换行，仅保留至少两个连续空行
                codeText = codeText.replace(/(\r?\n){2,}/g, '\n');
                textArea.value = codeText;

                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);

                // 这里是按钮点击后的一系列操作
                copyButton.style.backgroundColor = '#2ecc71'; // 设置按钮点击后的颜色
                // 按钮被点击后，1秒后执行恢复原始样式的操作
                setTimeout(function () {
                    copyButton.style.backgroundColor = 'rgba(197, 217, 227, 0.99)';
                }, 1200); // 这里设置延迟的时间，单位为毫秒（这里是5秒）
            });
        });
    });


    // -------------------------------------------------
    // 夜间模式切换
    function toggleMode() {
        const body = document.body;
        body.classList.toggle('day-mode');
        body.classList.toggle('night-mode');
    }

    // JS 监听页面滚动事件，固定开关按钮
    window.onscroll = function () {
        const toggleButton = document.querySelector('.toggle');
        if (toggleButton) {
            if (window.pageYOffset > 100) { // 滚动多少距离后按钮固定
                toggleButton.style.top = '40px'; // 按钮固定位置
            } else {
                toggleButton.style.top = '80px'; // 按钮初始位置
            }
        }
    };

    // 查找所有的 p 标签并为其添加类名
    const paragraphs = document.querySelectorAll('blockquote > p');
    paragraphs.forEach(paragraph => {
        let text = paragraph.textContent;
        if (text.includes('[!note]')) {
            paragraph.classList.add('note');
            text = text.replace(/\[!note\]/g, ''); // 去除 '[!note]' 标记
        } else if (text.includes('[!warning]')) {
            paragraph.classList.add('warning');
            text = text.replace(/\[!warning\]/g, ''); // 去除 '[!warning]' 标记
        } else if (text.includes('[!tip]')) {
            paragraph.classList.add('tip');
            text = text.replace(/\[!tip\]/g, ''); // 去除 '[!tip]' 标记
        } else if (text.includes('[!info]')) {
            paragraph.classList.add('info');
            text = text.replace(/\[!info\]/g, ''); // 去除 '[!info]' 标记
        }
        paragraph.textContent = text.trim(); // 设置处理后的文本内容
        // 可根据需要添加更多的条件判断和对应的样式类
    });


    document.addEventListener('DOMContentLoaded', function () {
        // 获取所有的图片元素
        const images = document.querySelectorAll('.markdown-content img');
        let isDragging = false; // 是否正在拖动
        let dragStartX = 0; // 拖动起始X坐标
        let dragStartY = 0; // 拖动起始Y坐标
        let currentOverlay = null; // 用于存储当前遮罩层
        let currentZoomedImage = null; // 用于存储当前被放大的图片元素
        let initialX = 0; // 图片初始X位置
        let initialY = 0; // 图片初始Y位置

        // 添加点击事件监听器
        images.forEach(image => {
            image.addEventListener('click', () => {
                // 切换图片的放大状态
                let scale = 1; // 将 scale 移到这里

                // 创建遮罩层
                const overlay = document.createElement('div');
                overlay.classList.add('overlay');
                console.log("ddd")

                // image.classList.add('zoomed');
                // 创建放大后的图片
                const zoomedImg = document.createElement('img');
                zoomedImg.src = image.src;
                zoomedImg.alt = 'Zoomed Image';
                zoomedImg.classList.add('zoomed-image');
                zoomedImg.style.position = 'absolute'; // 设置为 absolute

                // 将放大后的图片添加到遮罩层
                overlay.appendChild(zoomedImg);
                document.body.appendChild(overlay);
                // 添加鼠标滚轮事件监听器来控制缩放
                zoomedImg.addEventListener('wheel', handleZoomWithWheel);

                // 创建工具栏
                const toolbar = document.createElement('div');
                toolbar.classList.add('toolbar');

                // 按钮点击事件中也要应用相同的限制
                const zoomInButton = createButton('+', () => {
                    scale += 0.2;
                    scale = Math.min(5.0, scale); // 调整最大缩放值
                    zoomedImg.style.transform = 'scale(' + scale + ')';
                });

                const zoomOutButton = createButton('-', () => {
                    scale -= 0.2;
                    scale = Math.max(0.1, scale);
                    zoomedImg.style.transform = 'scale(' + scale + ')';
                });

                const closeButton = createButton('x', () => {
                    overlay.remove();
                    image.classList.remove('zoomed');
                    const existingToolbar = document.querySelector('.toolbar'); // 查找工具栏
                    if (existingToolbar) {
                        existingToolbar.remove(); // 移除工具栏
                    }
                    // 如果图片不再放大，清理相关资源
                    if (currentZoomedImage) {
                        currentZoomedImage.removeEventListener('mousedown', startDrag);
                        document.removeEventListener('mousemove', moveDrag);
                        document.removeEventListener('mouseup', stopDrag);
                        currentZoomedImage = null;
                    }
                    if (currentOverlay) {
                        currentOverlay.remove();
                        currentOverlay = null;
                    }
                    image.classList.remove('zoomed');
                });

                // 将按钮添加到工具栏
                toolbar.appendChild(zoomOutButton);
                toolbar.appendChild(zoomInButton);
                toolbar.appendChild(closeButton);

                // 将工具栏添加到文档的 body 中
                document.body.appendChild(toolbar);

                // 正确地将 zoomedImg 赋值给 currentZoomedImage
                currentZoomedImage = zoomedImg;

                // 绑定鼠标按下事件到 currentZoomedImage (放大的图片)
                currentZoomedImage.addEventListener('mousedown', startDrag);
                // 绑定鼠标移动和鼠标抬起事件到 document
                document.addEventListener('mousemove', moveDrag);
                document.addEventListener('mouseup', stopDrag);
            });
        });

        // 拖动处理函数
        function startDrag(e) {
            isDragging = true;
            dragStartX = e.clientX;
            dragStartY = e.clientY;
            initialX = parseFloat(currentZoomedImage.style.left || 0);
            initialY = parseFloat(currentZoomedImage.style.top || 0);
            currentZoomedImage.style.cursor = 'move';
            e.preventDefault();
        }

        // 拖动过程的处理函数
        function moveDrag(e) {
            if (!isDragging) return;
            const deltaX = e.clientX - dragStartX;
            const deltaY = e.clientY - dragStartY;
            currentZoomedImage.style.left = initialX + deltaX + 'px';
            currentZoomedImage.style.top = initialY + deltaY + 'px';
        }

        // 结束拖动的处理函数
        function stopDrag() {
            isDragging = false;
            currentZoomedImage.style.cursor = 'auto';
        }

        function handleZoomWithWheel(event) {
            event.preventDefault();
            const delta = Math.sign(event.deltaY);
            let currentScale = parseFloat(currentZoomedImage.style.transform.replace('scale(', '').replace(')', '')) || 1;
            let newScale = currentScale;
            const zoomFactor = 0.05; // 调整每次滚轮滚动的缩放量

            if (delta < 0) {
                newScale += zoomFactor;
            } else {
                newScale -= zoomFactor;
            }

            newScale = Math.max(0.1, Math.min(5.0, newScale)); // 调整最大缩放值
            currentZoomedImage.style.transform = 'scale(' + newScale + ')';
        }

        // 辅助函数，创建带有文本和点击事件的按钮
        function createButton(text, onClick) {
            const button = document.createElement('button');
            button.textContent = text;
            button.addEventListener('click', onClick);
            return button;
        }
    });


    const toc = document.querySelector('.toc');
    toc.style.display = 'none'
    const toggleButton = document.querySelector('.tocShowButton');
    // 切换toc显示/隐藏
    toggleButton.addEventListener('click', function () {
        if (toc.style.display === 'none') {
            toc.style.display = 'block';
        } else {
            toc.style.display = 'none';
        }
    });

</script>
</body>

</html>