主页 / coding / 问题 / 79141254
Accepted
Quinten
Asked: 2024-10-30 21:13:03 +0800 CST

在 Quarto 中更改位置主题切换按钮

  • 772

例如，当我们想在 Quarto HTML 文档中拥有两个不同的主题时，我们可以使用按钮在明暗模式之间切换。标准按钮位于文档的右上角。我希望将此文档放在文档的目录下方。以下是一些可重现的代码：

---
title: "Change position theme button"
format: 
  html:
    toc: true
    theme: 
      light: default
      dark: darkly
---

## Chapter

Some text to make it reproducible

### Test

输出：

在此处输入图片描述

如您所见，主题切换按钮位于右上角。我想知道我们如何将其放置在目录下方？

1 个回答

  1. Best Answer

    这比我想象的要稍微复杂一些，因为按钮没有放在 DOM 中的目录 (TOC) 后面。您可以更改 CSS 规则，但尽管它适用于此示例，但如果您有足够多的标题以至于目录需要滚动，则切换按钮不会浮动。

    为了实现浮动，我们需要更改 DOM 结构，将切换按钮直接放置在目录之后。切换按钮是在页面加载后动态添加的，因此我们需要一些 JavaScript 来监视对 DOM 所做的更改，例如MutationObserver。

    首先要做的是添加include-in-header: move-toggle.html到您的 Quarto yaml。然后创建move-toggle.html查找 DOM 中的更改并在找到后移动按钮（并且目录也已加载）：

    <script>
    // function to move toggle
    const moveToggle = (mutations, obs) => {
        const toggleButton = document.querySelector('.quarto-color-scheme-toggle');
        const toc = document.querySelector('#TOC');

        // check if table-of-contents and button are loaded
        if (toggleButton && toc) {

            // move button (adjust as desired)
            toc.after(toggleButton);
            toggleButton.style.position = 'relative';
            toggleButton.style.top = '0';
            toggleButton.style.right = '0';
            toggleButton.style.margin = '1em 0';

            obs.disconnect(); // no need to keep observing
        }
    }

    // function to observe DOM for changes
    const observeDom = () => {
        const observer = new MutationObserver(moveToggle);
        observer.observe(document.body, { childList: true, subtree: true });
    }

    // observe the DOM after it has loaded
    document.addEventListener("DOMContentLoaded", observeDom);
</script>

    输出

    灯光模式

    按钮移动后的页面（浅色模式）

    暗黑模式

    按钮已移动的页面（暗模式）

    完整四开文档

    为了便于重现，这里是完整qmd文件。唯一增加的行是include-in-header: move-toggle.html。

    ---
title: "Change position theme button"
format: 
  html:
    toc: true
    theme: 
      light: default
      dark: darkly
    include-in-header: move-toggle.html
---

## Chapter

Some text to make it reproducible

### Test
    • 3

相关问题