查看“Widget:Read”的源代码

<includeonly><div id="lyskRead">
    <!-- 新增内容容器 -->
    <div class="content-container">
        <div id="readContent" class="read-content"></div>
        <div id="readnav" class="read-nav" style="display: none;">
            <button class="close-btn">×</button>
            目录区域
        </div>
        <div id="readSettings" class="read-settings" style="display: none;">
            <button class="close-btn">×</button>
            <h3>阅读设置</h3>
            <div class="settings-group">
                <span><label>主题</label>
                    <select id="theme" class="theme-select">
                        <option value="light">默认</option>
                        <option value="sepia">亮色</option>
                        <option value="dark">深色</option>
                    </select></span>
            </div>
            <div class="settings-group">
                <span><label>字体</label>
                    <select id="fontFamily" class="theme-select">
                        <option value="default">默认</option>
                        <option value="songti">宋体</option>
                        <option value="kaiti">楷体</option>
                    </select></span>
            </div>
            <div class="settings-group">
                <span><label>段间距 (<span id="paragraphSpacingValue">1.6</span>em)</label>
                    <input type="range" id="paragraphSpacing" min="0" max="30" value="16" class="slider"></span>
            </div>
            <div class="settings-group">
                <span><label>行间距 (<span id="lineHeightValue">1.6</span>em)</label>
                    <input type="range" id="lineHeight" min="10" max="30" value="16" class="slider"></span>
            </div>
            <div class="settings-group">
                <span><label>缩进 (<span id="textIndentValue">1.5</span>em)</label>
                    <input type="range" id="textIndent" min="0" max="20" value="15" class="slider"></span>
            </div>
            <div class="settings-group">
                <span><label>基准字号 (<span id="fontSizeValue">16</span>px)</label>
                    <input type="range" id="fontSize" min="12" max="24" value="16" class="slider"></span>
                <details class="settings-subgroup">
                    <summary>详细字号设置</summary>
                    <div class="settings-group">
                        <span><label>标题h1 (<span id="h1ScaleValue">4</span>px)</label>
                            <input type="range" id="h1Scale" min="-6" max="16" value="4" class="slider"></span>
                        <span><label>标题h2 (<span id="h2ScaleValue">3</span>px)</label>
                            <input type="range" id="h2Scale" min="-6" max="16" value="3" class="slider"></span>
                        <span><label>标题h3 (<span id="h3ScaleValue">2</span>px)</label>
                            <input type="range" id="h3Scale" min="-6" max="16" value="2" class="slider"></span>
                        <span><label>标题h4 (<span id="h4ScaleValue">1</span>px)</label>
                            <input type="range" id="h4Scale" min="-6" max="16" value="1" class="slider"></span>
                        <span><label>标题h5 (<span id="h5ScaleValue">0</span>px)</label>
                            <input type="range" id="h5Scale" min="-6" max="16" value="0" class="slider"></span>
                        <span><label>标题h6 (<span id="h6ScaleValue">0</span>px)</label>
                            <input type="range" id="h6Scale" min="-6" max="16" value="0" class="slider"></span>
                        <span><label>正文 (<span id="pScaleValue">0</span>px)</label>
                            <input type="range" id="pScale" min="-6" max="16" value="0" class="slider"></span>
                        <span><label>引用 (<span id="quoteScaleValue">-1</span>px)</label>
                            <input type="range" id="quoteScale" min="-6" max="16" value="-1" class="slider"></span>
                    </div>
                </details>
            </div>

            <div class="settings-group">
                <button id="resetSettings" class="reset-btn">重置设置</button>
            </div>
        </div>
    </div>

    <!-- 修改侧边栏按钮，删除 scrollTopBtn 和 scrollBottomBtn -->
    <div id="readSidebar" class="read-sidebar">
        <button id="navBtn" class="sidebar-btn">目录</button>
        <button id="settingsBtn" class="sidebar-btn">设置</button>
    </div>
</div>

<style>
    /* 新增CSS变量定义 */
    :root {
        --lysk-read-min-height: calc(100vh - 90px);
        --lysk-base-font-size: 16px;
        --lysk-h1-scale: 4;
        --lysk-h2-scale: 3;
        --lysk-h3-scale: 2;
        --lysk-h4-scale: 1;
        --lysk-h5-scale: 0;
        --lysk-h6-scale: 0;
        --lysk-p-scale: 0;
        --lysk-quote-scale: -1;
        --lysk-paragraph-spacing: 1.6em;
        --lysk-line-height: 1.6;
        --lysk-bg-color: rgba(244, 244, 244, 0.15);
        --lysk-border-color: #ffffff7c;
        --lysk-btnBorder-color: #ffffff7c;
        --lysk-btnBorderShade-color: rgba(0, 0, 0, 0.05);
        --lysk-text-color: #3D3D3D;
        --lysk-a-color: #5f50ff;
        --lysk-aVisited-color: #551A8B;
        --lysk-textShade-color: #3D3D3D;
        --lysk-font-family: system-ui, -apple-system, Segoe UI, Roboto, STHeiti SC, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
        --lysk-text-indent: 1.5em;
    }

    /* 主容器使用flex布局 */
    #lyskRead {
        display: flex;
        min-height: var(--lysk-read-min-height);
        justify-content: center;
        position: relative;        
    }

    /* 内容区域容器 */
    .content-container {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        font-family: var(--lysk-font-family);
        color: var(--lysk-text-color);
    }

    .content-container h2:not(#mw-toc-heading),
    .content-container h1,
    .content-container h3,
    .content-container h4,
    .content-container h5,
    .content-container h6 {
        color: var(--lysk-text-color);
        font-family: var(--lysk-font-family);
    }

    .content-container .textShade {
        color: var(--lysk-textShade-color);
    }

    .content-container .btnBorder {
        border: 1px solid var(--lysk-btnBorder-color);
    }

    .content-container .btnBorderShade {
        border: 1px solid var(--lysk-btnBorderShade-color);
    }

    /* 文章内容区域 */
    .read-content {
        flex: 1;
        max-width: 820px;
        font-size: var(--lysk-base-font-size);
        line-height: var(--lysk-line-height);
        background-color: var(--lysk-bg-color);
        padding: 30px 50px;
        border-left: 2px solid var(--lysk-border-color);
        border-right: 2px solid var(--lysk-border-color);
    }

    .read-content h1 {
        font-size: calc(var(--lysk-base-font-size) + var(--lysk-h1-scale));
    }

    .read-content h2:not(#mw-toc-heading) {
        font-size: calc(var(--lysk-base-font-size) + var(--lysk-h2-scale));
    }

    .read-content h3 {
        font-size: calc(var(--lysk-base-font-size) + var(--lysk-h3-scale));
    }

    .read-content h4 {
        font-size: calc(var(--lysk-base-font-size) + var(--lysk-h4-scale));
    }

    .read-content h5 {
        font-size: calc(var(--lysk-base-font-size) + var(--lysk-h5-scale));
    }

    .read-content h6 {
        font-size: calc(var(--lysk-base-font-size) + var(--lysk-h6-scale));
    }

    .read-content p {
        font-size: calc(var(--lysk-base-font-size) + var(--lysk-p-scale));
        margin: 0;
        margin-bottom: var(--lysk-paragraph-spacing);
        text-indent: var(--lysk-text-indent);
    }

    .read-content blockquote,
    .read-content blockquote * {
        font-size: calc(var(--lysk-base-font-size) + var(--lysk-quote-scale));
    }

    /* 目录/设置面板 */
    .read-nav,
    .read-settings {
        position: relative;
        display: none;
        position: sticky;
        top: 0;
        width: 300px;
        background: var(--lysk-bg-color);
        border-left: 0px solid var(--lysk-border-color);
        border-right: 2px solid var(--lysk-border-color);
        padding: 20px;
        border-radius: 0 8px 8px 0;
        max-height: calc(100vh);
        overflow-y: auto;
    }

    /* 设置面板样式 */
    /* 每行样式 */
    .settings-group {
        margin-bottom: 20px;
    }

    .settings-group>span {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .settings-group label {
        flex: 0 0 120px;
    }

    .settings-group .slider,
    .settings-group select {
        flex: 1;
    }
    .settings-subgroup summary{
        text-decoration: underline;
    }

    .slider {
        width: 150px;
        margin: 8px 0;
    }

    .theme-select {
        width: 100%;
        padding: 8px;
        border: 1px solid var(--lysk-btnBorder-color);
        border-radius: 4px;
        background-color: var(--lysk-select-bg);
        color: var(--lysk-select-text);
    }

    .theme-select option {
        background-color: var(--lysk-select-bg);
        color: var(--lysk-select-text);
    }

    .reset-btn {
        width: 100%;
        padding: 8px;
        background: #f44336;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .reset-btn:hover {
        background: #d32f2f;
    }

    /* 关闭按钮样式 */
    .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 24px;
        height: 24px;
        border: none;
        background: transparent;
        color: #666;
        font-size: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        padding: 0;
    }

    .close-btn:hover {
        background: rgba(0, 0, 0, 0.1);
    }

    /* 主题样式 */
    #lyskRead.theme-light {
        --lysk-bg-color: rgba(244, 244, 244, 0.15);
        --lysk-border-color: #ffffff7c;
        --lysk-btnBorder-color: #ffffff7c;
        --lysk-btnBorderShade-color: rgba(0, 0, 0, 0.05);
        --lysk-text-color: #3D3D3D;
        --lysk-textShade-color: rgba(188, 188, 188, 0.85);
        --lysk-a-color: #0645ad;
        --lysk-aVisited-color: #551A8B;
        /* 新增下拉框样式变量 */
        --lysk-select-bg: #ffffff4a;
        --lysk-select-text: #3D3D3D;
    }

    #lyskRead.theme-sepia {
        --lysk-bg-color: #F4F4F4;
        --lysk-border-color: #ffffffb4;
        --lysk-btnBorder-color: #C7C7C7;
        --lysk-btnBorderShade-color: #EBEBEB;
        --lysk-text-color: #3D3D3D;
        --lysk-textShade-color: rgba(188, 188, 188, 0.85);
        --lysk-a-color: #0645ad;
        --lysk-aVisited-color: #551A8B;
        /* 新增下拉框样式变量 */
        --lysk-select-bg: #F4F4F4;
        --lysk-select-text: #3D3D3D;
    }

    #lyskRead.theme-dark {
        --lysk-bg-color: #252525;
        --lysk-border-color: #000000;
        --lysk-btnBorder-color: #ffffff7c;
        --lysk-btnBorderShade-color: #4d4d4d7c;
        --lysk-text-color: #ffffff7c;
        --lysk-textShade-color: #4d4d4d7c;
        --lysk-a-color: #5f50ff;
        --lysk-aVisited-color: #9580ff;
        /* 新增下拉框样式变量 */
        --lysk-select-bg: #333333;
        --lysk-select-text: #ffffff;
    }

    /* 字体样式 */
    #lyskRead.font-default {
        --lysk-font-family: system-ui, -apple-system, Segoe UI, Roboto, STHeiti SC, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
    }

    #lyskRead.font-songti {
        --lysk-font-family: SimSun, "宋体", serif;
    }

    #lyskRead.font-kaiti {
        --lysk-font-family: KaiTi, "楷体", sans-serif;
    }

    /* 侧边栏按钮 */
    .read-sidebar {
        position: fixed;
        bottom: 50px;
        transform: translateY(-50%);
        height: fit-content;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        z-index: 100;
        right: 10px;
    }

    .sidebar-btn {
        margin: 5px 0;
        padding: 8px 12px;
        border: none;
        background: #f0f0f0;
        cursor: pointer;
        border-radius: 4px;
    }

    .sidebar-btn:hover {
        background: #e0e0e0;
    }

    .sidebar-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* 添加访问过的链接样式 */
    .read-content a:visited {
        color: var(--lysk-aVisited-color);
    }
</style>

<script>
    (function () {
        // 初始化内容
        function initContent() {
            const parserOutput = document.querySelector('.mw-parser-output');
            const readContent = document.getElementById('readContent');
            const lyskRead = document.getElementById('lyskRead');

            if (parserOutput && readContent && lyskRead) {
                // 1. 获取原始内容（E）
                const originalContent = parserOutput.innerHTML;

                // 2. 从原始内容中提取不包含lyskRead的部分
                const temp = document.createElement('div');
                temp.innerHTML = originalContent;
                const existingLyskRead = temp.querySelector('#lyskRead');
                if (existingLyskRead) {
                    existingLyskRead.remove();
                }

                // 3. 将提取的内容放入readContent
                readContent.innerHTML = temp.innerHTML;

                // 4. 清空mw-parser-output的内容
                parserOutput.innerHTML = '';

                // 5. 将lyskRead放入mw-parser-output
                parserOutput.appendChild(lyskRead);
            }
        }

        // 初始化按钮事件
        function initButtons() {
            const navBtn = document.getElementById('navBtn');
            const settingsBtn = document.getElementById('settingsBtn');
            const readnav = document.getElementById('readnav');
            const readSettings = document.getElementById('readSettings');

            if (navBtn && settingsBtn && readnav && readSettings) {
                // 关闭按钮点击事件
                const closeBtns = document.querySelectorAll('.close-btn');
                closeBtns.forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const panel = e.target.closest('.read-nav, .read-settings');
                        if (panel) {
                            panel.style.display = 'none';
                            document.querySelector('.read-sidebar').classList.remove('panel-open');
                        }
                    });
                });

                // 目录按钮点击事件
                navBtn.addEventListener('click', () => {
                    const isVisible = readnav.style.display !== 'none';
                    readnav.style.display = isVisible ? 'none' : 'block';
                    readSettings.style.display = 'none';
                    document.querySelector('.read-sidebar').classList.toggle('panel-open', !isVisible);
                });

                // 设置按钮点击事件
                settingsBtn.addEventListener('click', () => {
                    const isVisible = readSettings.style.display !== 'none';
                    readSettings.style.display = isVisible ? 'none' : 'block';
                    readnav.style.display = 'none';
                    document.querySelector('.read-sidebar').classList.toggle('panel-open', !isVisible);
                });
            }
        }

        // 初始化设置面板功能
        function initSettings() {
            const fontSize = document.getElementById('fontSize');
            const fontSizeValue = document.getElementById('fontSizeValue');
            const paragraphSpacing = document.getElementById('paragraphSpacing');
            const paragraphSpacingValue = document.getElementById('paragraphSpacingValue');
            const lineHeight = document.getElementById('lineHeight');
            const lineHeightValue = document.getElementById('lineHeightValue');
            const theme = document.getElementById('theme');
            const fontFamily = document.getElementById('fontFamily');
            const lyskRead = document.getElementById('lyskRead');
            const textIndent = document.getElementById('textIndent');
            const textIndentValue = document.getElementById('textIndentValue');

            // 从localStorage加载设置
            const loadSettings = () => {
                const settings = JSON.parse(localStorage.getItem('lyskReadSettings') || '{}');
                if (settings.fontSize) {
                    fontSize.value = settings.fontSize;
                    fontSizeValue.textContent = settings.fontSize;
                    document.documentElement.style.setProperty('--lysk-base-font-size', `${settings.fontSize}px`);
                }
                if (settings.paragraphSpacing) {
                    const value = settings.paragraphSpacing / 10;
                    paragraphSpacing.value = settings.paragraphSpacing;
                    paragraphSpacingValue.textContent = value;
                    document.documentElement.style.setProperty('--lysk-paragraph-spacing', `${value}em`);
                }
                if (settings.lineHeight) {
                    const value = settings.lineHeight / 10;
                    lineHeight.value = settings.lineHeight;
                    lineHeightValue.textContent = value;
                    document.documentElement.style.setProperty('--lysk-line-height', value);
                }
                if (settings.theme) {
                    theme.value = settings.theme;
                    lyskRead.className = `theme-${settings.theme} font-${settings.fontFamily || 'default'}`;
                }
                if (settings.fontFamily) {
                    fontFamily.value = settings.fontFamily;
                }
                if (settings.textIndent) {
                    const value = settings.textIndent / 10;
                    textIndent.value = settings.textIndent;
                    textIndentValue.textContent = value;
                    document.documentElement.style.setProperty('--lysk-text-indent', `${value}em`);
                }
                // 加载详细字号比例设置
                scaleIds.forEach(id => {
                    if (settings[`${id}Scale`]) {
                        const scale = document.getElementById(`${id}Scale`);
                        const scaleValue = document.getElementById(`${id}ScaleValue`);
                        if (scale && scaleValue) {
                            const value = parseInt(settings[`${id}Scale`]);
                            scale.value = value;
                            scaleValue.textContent = value > 0 ? `+${value}` : value;
                            document.documentElement.style.setProperty(`--lysk-${id}-scale`, `${value}px`);
                        }
                    }
                });
            };

            // 保存设置到localStorage
            const saveSettings = () => {
                const settings = {
                    fontSize: fontSize.value,
                    paragraphSpacing: paragraphSpacing.value,
                    lineHeight: lineHeight.value,
                    theme: theme.value,
                    fontFamily: fontFamily.value,
                    textIndent: textIndent.value
                };
                // 保存详细字号比例设置
                scaleIds.forEach(id => {
                    const scale = document.getElementById(`${id}Scale`);
                    if (scale) {
                        settings[`${id}Scale`] = scale.value;
                    }
                });
                localStorage.setItem('lyskReadSettings', JSON.stringify(settings));
            };

            // 基准字号设置
            fontSize.addEventListener('input', () => {
                fontSizeValue.textContent = fontSize.value;
                document.documentElement.style.setProperty('--lysk-base-font-size', `${fontSize.value}px`);
                saveSettings();
            });

            // 标题字号比例设置
            const scaleIds = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'quote'];
            scaleIds.forEach(id => {
                const scale = document.getElementById(`${id}Scale`);
                const scaleValue = document.getElementById(`${id}ScaleValue`);
                if (scale && scaleValue) {
                    scale.addEventListener('input', () => {
                        const value = parseInt(scale.value);
                        // 根据值的正负来决定显示格式
                        scaleValue.textContent = value > 0 ? `+${value}` : value;
                        document.documentElement.style.setProperty(`--lysk-${id}-scale`, `${value}px`);
                        saveSettings();
                    });
                }
            });

            // 段间距调整
            paragraphSpacing.addEventListener('input', () => {
                const value = paragraphSpacing.value / 10;
                paragraphSpacingValue.textContent = value;
                document.documentElement.style.setProperty('--lysk-paragraph-spacing', `${value}em`);
                saveSettings();
            });

            // 行间距调整
            lineHeight.addEventListener('input', () => {
                const value = lineHeight.value / 10;
                lineHeightValue.textContent = value;
                document.documentElement.style.setProperty('--lysk-line-height', value);
                saveSettings();
            });

            // 主题切换
            theme.addEventListener('change', () => {
                lyskRead.className = `theme-${theme.value} font-${fontFamily.value}`;
                saveSettings();
            });

            // 字体切换
            fontFamily.addEventListener('change', () => {
                lyskRead.className = `theme-${theme.value} font-${fontFamily.value}`;
                saveSettings();
            });

            // 首行缩进调整
            textIndent.addEventListener('input', () => {
                const value = textIndent.value / 10;
                textIndentValue.textContent = value;
                document.documentElement.style.setProperty('--lysk-text-indent', `${value}em`);
                saveSettings();
            });

            // 定义默认设置
            const defaultSettings = {
                fontSize: 16,
                paragraphSpacing: 16,
                lineHeight: 16,
                theme: 'light',
                fontFamily: 'default',
                h1Scale: 4,
                h2Scale: 3,
                h3Scale: 2,
                h4Scale: 1,
                h5Scale: 0,
                h6Scale: 0,
                pScale: 0,
                quoteScale: -1,
                textIndent: 15
            };

            // 重置设置
            const resetBtn = document.getElementById('resetSettings');
            resetBtn.addEventListener('click', () => {
                // 更新UI
                fontSize.value = defaultSettings.fontSize;
                fontSizeValue.textContent = defaultSettings.fontSize;
                paragraphSpacing.value = defaultSettings.paragraphSpacing;
                paragraphSpacingValue.textContent = defaultSettings.paragraphSpacing / 10;
                lineHeight.value = defaultSettings.lineHeight;
                lineHeightValue.textContent = defaultSettings.lineHeight / 10;

                // 更新主题和字体选项
                theme.value = defaultSettings.theme;
                fontFamily.value = defaultSettings.fontFamily;
                lyskRead.className = `theme-${defaultSettings.theme} font-${defaultSettings.fontFamily}`;

                // 更新标题和文本比例
                scaleIds.forEach(id => {
                    const scale = document.getElementById(`${id}Scale`);
                    const scaleValue = document.getElementById(`${id}ScaleValue`);
                    if (scale && scaleValue) {
                        const value = parseInt(defaultSettings[`${id}Scale`]);
                        scale.value = value;
                        scaleValue.textContent = value > 0 ? `+${value}` : value;
                    }
                });

                // 更新CSS变量
                document.documentElement.style.setProperty('--lysk-base-font-size', `${defaultSettings.fontSize}px`);
                document.documentElement.style.setProperty('--lysk-paragraph-spacing', `${defaultSettings.paragraphSpacing / 10}em`);
                document.documentElement.style.setProperty('--lysk-line-height', defaultSettings.lineHeight / 10);
                scaleIds.forEach(id => {
                    document.documentElement.style.setProperty(`--lysk-${id}-scale`, `${defaultSettings[`${id}Scale`]}px`);
                });

                // 清除localStorage中的设置
                localStorage.removeItem('lyskReadSettings');

                // 重置首行缩进
                textIndent.value = defaultSettings.textIndent;
                textIndentValue.textContent = defaultSettings.textIndent / 10;
                document.documentElement.style.setProperty('--lysk-text-indent', `${defaultSettings.textIndent / 10}em`);
            });

            // 加载保存的设置
            loadSettings();
        }

        // 等待DOM加载完成后初始化
        setTimeout(() => {
            initContent();
            initButtons();
            initSettings();
        }, 0);
    })();
</script>
</includeonly><noinclude><div>
                            <h1>测试h1</h1>
                            <h2>测试h2</h2>
                            <h3>测试h3</h3>
                            <h4>测试h4</h4>
                            <h5>测试h5</h5>
                            <h6>测试h6</h6>
                            <p>这是一段正文内容，用于测试普通段落的显示效果。正文应该使用合适的字体大小和行间距，确保良好的阅读体验。这里添加一些额外的文字来形成一个完整的段落。</p>
                            <blockquote>这是一段引用文本，用于测试引用样式的显示效果。引用文本通常会有特殊的样式，比如缩进、背景色或边框等视觉效果。</blockquote>
                            <p>这是另一段正文，用来测试段落间的间距效果。段落之间应该有适当的间距，既不会太拥挤也不会太松散。</p>
                            <blockquote>这是第二段引用文本，用来测试多个引用块之间的样式效果。</blockquote>
                            <div>测试</div>
                            <div>测试</div>
                            <div>测试</div>
                            <div>测试</div>
                            <div>测试</div>
                            <div>测试</div>
                            <div>测试</div>
                            <div>测试</div>
                            <div>测试</div>
                            <div>测试</div>
                            <div>测试</div>
                            <div>测试</div>
                            <div>测试</div>
                            <div>测试</div>
                            <div>测试</div>
                        </div>{{#widget:read}}</noinclude>