Как реализовать «показать больше» на большом тексте в AMP?

Question

У меня есть большой текст, который я хотел бы частично скрывать при загрузке страницы, сохраняя весь текст как единый текст, поэтому изменяется только способность просмотра.

Пример

От:

абстрактном информации о документе, который является очень долго и может быть тысячи слов долго ...

Show

To:

Абстрактное информации о документе, который является очень долго и может быть тысячи слов длинных которые могут быть здесь и есть ли во всем мире, больше больше больше больше больше больше больше больше more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more подробнее.

Hide

Я в курсе вы можете выполнить подобное поведение с помощью усилителя-гармошку, но в этой ситуации эллипсы (далее «...») должны исчезнуть и добавить оставшееся тело текста. Это важно, поэтому поисковые системы могут индексировать весь абстрактный текст как один объект.

Возможно ли это реализовать с помощью страницы AMP?

Answer 1

Я не вижу никаких учебных пособий или статей о том, как это сделать с AMP. Однако, вы можете следить за этим tutorial о Реализовать "Показать больше/меньше" Функциональность с Pure CSS. Просто отметьте styles, которые не разрешены на страницах AMP.

Кроме того, я нашел этот GitHub sample, который имеет Show more кнопку, и если amp-list содержание требует больше места, чем доступно, среда выполнения AMP будет отображаться элемент переполнения (если он указан).

<amp-list width=auto height=10 layout=fixed-height src="<%host%>/json/examples.json" template="amp-template-id"> 
    <div> 
    <button overflow role=button aria-label="Show more" class="list-overflow"> 
    Show more 
    </button> 
    </div> 

Надеюсь, это поможет!

Answer 2

Одним из решений этого может быть использование аккордеона усилителя и стилизация заголовка, чтобы он выглядел как абзац, а затем добавлял гиперссылку на текст в конце. Это означало бы, что весь h2 можно щелкнуть, но анкерная форма даст им направление.

Я не знаю, что такое позиция googles на дублированном контенте, потому что вы показываете часть текста в h2, а затем скрываете его на клике и отображаете полный абзац.

посмотреть на https://ampbyexample.com/components/amp-accordion/ и «Вот еще один пример, который скрывает кнопку« Показать больше », как только она была нажата». пример

Answer 3

У меня есть такой же случай и найти четкий способ решения.

Это можно сделать с помощью amp-bind. Вы можете использовать переменную неявного состояния, например. видимый, для отслеживания текущего состояния.

<button [text]="visible ? 'Show Less' : 'Show More'" on="tap:AMP.setState({visible: !visible})"> 
Show More </button> 
<p [class]="visible ? 'show' : 'hide'" class="hide">Some more content.</p> 

Оригинальный ответ от: AMP: easy way to toggle a CSS class?

Answer 4

Это можно просто сделать с помощью усилителя-гармошку

усилитель HTML:

<amp-accordion disable-session-states> 
    <section> 
    <h4> 
     <span class="show-more">Show more</span> 
     <span class="show-less">Show less</span> 
    </h4> 
    <p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu 
     in eu wisi. </p> 
    </section> 
</amp-accordion> 

усилитель CSS будет:

amp-accordion section[expanded] .show-more { 
    display: none; 
} 
amp-accordion section:not([expanded]) .show-less { 
    display: none; 
}