Создать свиток в стиле в социальных сетях на странице сайта Long Quarto ⇐ Html

[Anonymous]

У меня есть веб -сайт Quarto с длинной страницей, требующей много прокрутки. Такие веб -сайты, как каналы в социальных сетях или новости, часто имеют кнопку «Нажмите, чтобы прочитать больше», к которой пользователь сталкивается после прокрутки. Затем он загружает набор контента, и вы можете продолжать прокручивать, пока не доберетесь до следующей кнопки или конца содержания страницы, в зависимости от того, что наступит. (Отсюда и моя зависимость от кварто), но смог имитировать это поведение в примере ниже. Тем не менее, для страницы с большим количеством контента она утомительно кодирует каждый бит контента в кнопку, то есть, чтобы отдельно вводить каждый бит содержимого (который {{}} является В настоящее время стоит) в каждом {{}} .
может это »нажать, чтобы прочитать Больше »кнопка Настраиваться, чтобы автоматически показать определенную длину или количество контента, а не жестко кодировать каждый кусок содержимого в кнопку, как в этом примере ниже? Это кажется более мощным и гибким, чем текущее решение. < /P>
---
title: "Reprex"
format: html
include-in-header:
- text: |

.hidden {
display: none;
}


document.addEventListener('DOMContentLoaded', function() {
const button = document.getElementById('reveal-more');
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';
}
}
});
});

---

{{< lipsum >}}
{{< lipsum >}}
{{< lipsum >}}

Show More


Подробнее здесь: https://stackoverflow.com/questions/794 ... bsite-page