Как я могу избежать дублирования кода на сайтах AMP?

Question

На сайте Google AMP как вам удалось поделиться кодом, стандартным для всего сайта?

Активы, такие как: Заголовки навигация нижний колонтитул Общие определения стиля

Исходя из того, что я прочитал до сих пор, и из демонстраций, с которыми я работал, кажется, что на страницах AMP дублируется много кода. Этот дублированный код означает, что сайт AMP потенциально более дорогостоящий в обслуживании или изменении.

Как другой подход решает эти проблемы с помощью AMP? Чего мне не хватает?

Answer 1

Вы должны подходить к AMP так же, как и к любому другому веб-проекту, и это включает в себя создание повторно используемых компонентов и шаблонов.

В частности, для AMP, если вы пытаетесь построить без использования CMS, я бы рекомендовал взглянуть на генераторы статических сайтов, такие как Jekyll или Hugo . Они быстро приведут вас в порядок - просто поместите шаблонный код AMP в схему «по умолчанию» - и все готово.

Затем вы можете начать создавать повторно используемые включения (Jekyll) или частичные (Hugo) для таких вещей, как общие заголовки, макеты меню, нижние колонтитулы и т. Д. Вы также захотите скомпилировать свой CSS в файл include / partials, чтобы вы могли можете загрузить его в вашу голову, как того требует AMP.

Answer 2

Официальный AMP-плагин для WordPress имеет режим «Native» (который вскоре будет называться «Standard»), который позволяет вам использовать шаблоны и таблицы стилей активной темы для создания сайта на AMP.Это позволяет вам использовать AMP в качестве основы для вашего сайта без необходимости поддерживать две отдельные версии.

Для получения дополнительной информации см. Документацию Стратегии обслуживания .Некоторые примеры сайтов, использующих это, см. В Showcase .

Версия 1.2 запланирована к выпуску до 20 июня 2019 года. Вы можете использовать предварительный выпуск 1.2-RC1 на GitHub.Я рекомендую использовать это вместо текущей версии 1.1.x из-за многих улучшений.

Answer 3

Полностью согласен, что вы не хотите копировать и вставлять HTML и CSS для заголовков, нижних колонтитулов, меню и т. Д. Из файла в файл. Настоятельно рекомендуется сделать для AMP то же самое, что и для других веб-страниц: создать HTML-страницы из частичных частей или с использованием компонентов. И создайте свой CSS из небольших файлов, а затем включите его в каждую страницу AMP.

Один пример здесь: https://github.com/ampproject/samples/tree/master/amp-camp

Answer 4

Я предполагаю, что, дублируя код, вы имеете в виду потенциальную поддержку сайта AMP для мобильных устройств и сайта для настольных компьютеров, который не является AMP?Вам не обязательно делать это.Вы можете рассматривать AMP как платформу и иметь всеобъемлющий сайт для настольных и мобильных устройств, работающий на AMP.

Веб-сайт компании, на которую я работаю (https://www.craigattachments.com), построен поверх WordPress с использованием AMP в качестве фреймворка. Мы используем некоторый PHP для выборочного вызова определенных вещей, где они нам нужны, напримертаблицы стилей, чтобы избежать достижения максимального размера файла CSS, реализованного AMP.

Вот где-то, где я уже отвечал на вопрос, подобный этому, прежде чем он мог бы предложить немного больше понимания: Имеет ли смыслAMP активирует сайт для настольных ПК? .

Может быть, это совсем не то, что вы имели в виду, и я неверно истолковал вопрос ... Извинения, если это так.