Quarto长页面自动分块的“点击加载更多”功能实现方案

嘿，我完全懂你现在的麻烦——手动给每段内容套content-section标签，内容多的时候简直是重复劳动！咱们来改造一下代码，让它自动把长内容按你想要的长度/数量分块，不用再手动拆分啦，灵活又省心。

实现思路 #

核心想法是：先把所有内容放在一个容器里，用JavaScript自动把内容分割成指定大小的块，初始只显示第一块，剩下的默认隐藏；点击“加载更多”按钮时，依次显示下一块，直到所有内容都展示完，按钮自动消失。

完整代码示例 #

直接替换你原来的代码就行，我已经把自动分块的逻辑加进去了：

---
title: "Reprex"
format: html
include-in-header:
  - text: |
      <style>
      .content-section {
        margin-bottom: 1.5em;
      }
      .hidden {
        display: none;
      }
      #reveal-more {
        margin-top: 1em;
        padding: 0.5em 1em;
        cursor: pointer;
      }
      </style>
      <script>
      document.addEventListener('DOMContentLoaded', function() {
        // 这里设置每个块包含的段落数量，你可以按需调整
        const chunkSize = 2; 
        const fullContent = document.getElementById('full-content');
        const contentContainer = document.getElementById('content-container');
        const button = document.getElementById('reveal-more');
        
        // 把所有段落拆分成指定大小的块
        const paragraphs = Array.from(fullContent.querySelectorAll('p'));
        const chunks = [];
        for (let i = 0; i < paragraphs.length; i += chunkSize) {
          chunks.push(paragraphs.slice(i, i + chunkSize));
        }
        
        // 动态创建内容块，只显示第一个块
        chunks.forEach((chunk, index) => {
          const section = document.createElement('div');
          section.className = 'content-section';
          if (index > 0) {
            section.classList.add('hidden');
          }
          chunk.forEach(p => section.appendChild(p));
          contentContainer.appendChild(section);
        });
        
        // 按钮点击逻辑
        const sections = document.querySelectorAll('.content-section.hidden');
        let currentIndex = 0;
        
        button.addEventListener('click', function() {
          if (currentIndex < sections.length) {
            sections[currentIndex].classList.remove('hidden');
            currentIndex++;
            if (currentIndex === sections.length) {
              button.style.display = 'none';
            }
          }
        });
        
        // 如果只有一个块，直接隐藏按钮
        if (chunks.length <= 1) {
          button.style.display = 'none';
        }
      });
      </script>
---

<!-- 把所有内容都放在这个div里，不用手动拆分！ -->
<div id="full-content" style="display: none;">
  {{< lipsum >}}
  {{< lipsum >}}
  {{< lipsum >}}
  {{< lipsum >}}
  {{< lipsum >}}
</div>

<div id="content-container"></div>
<button id="reveal-more">Show More</button>

关键细节说明 #

• 调整分块大小：修改脚本里的const chunkSize = 2;，比如设为3就是每3个段落组成一个块，你可以根据内容长度灵活调整。
• 内容无需手动拆分：所有内容都放进#full-content这个隐藏的div里就行，脚本会自动提取段落并分块，完全不用手动写content-section。
• 自动适配内容量：如果内容太少（只有一个块），按钮会自动隐藏，避免无效显示。
• 样式优化：我加了一点基础样式，让内容块和按钮看起来更舒服，你可以根据自己的网站风格调整CSS。

使用方法 #

1. 把你所有的长内容替换掉示例里的{{< lipsum >}}，不用拆分，直接堆进去就行。
2. 调整chunkSize到你觉得合适的数值，比如每块显示2-3段内容。
3. 渲染页面测试，滚动到第一个块末尾，点击“Show More”就能加载下一块啦！

这样一来，不管你的内容有多长，都不用手动分块了，完全自动化，是不是方便多了😉

备注：内容来源于stack exchange，提问作者mvanaman