Статья в процессе написания, поэтому не судите строго :)
Для поиска ошибок AMP-верстки очень помогает расширение AMP Validator для Chrome, рекомендую для установки.
Для поиска только используемого CSS-кода (а нам нельзя превышать 50 Кб) я использовал расширение CSS Used, также рекомендую.
Проверка страниц осуществляется тут - https://search.google.com/test/amp
Еще один валидатор AMP - https://validator.ampproject.org/
Вкратце по css: убираем !important ...
Включаем в шаблон
< script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js">
Если необходимо выполнить несколько действий по нажатию на элемент, пишем их через запятую. Пример: on="submit-success:amp-obratnij-zvonok.close,amp-obratnij-zvonok-success"
Если данные отправляются c помощью Ajax-а методом POST, необходимо:
header("Access-Control-Allow-Credentials: true");
$http_origin = $_SERVER['HTTP_ORIGIN'];
$allowed_http_origins = array(
"http://www.test.ru",
"http://dev.test.ru",
"https://www.test.ru",
"https://dev.test.ru",
);
if (in_array($http_origin, $allowed_http_origins)){
header("Access-Control-Allow-Origin: " . $http_origin);
}
В форме обязательно должен быть атрибут target (или _top или _blank)
Есть особенности указания action
Для изображений указываем amp-img, тип responsive (адаптивный) или intrinsic (встроенный), а так же ширину и высоту (width, height). Для responsive можно указывать соотношение сторон.
Убираем навешанные события на элементы, всякие onclick="..." и пр.
Убираем весь кастомный JS-код
Чтобы убрать часть JS-кода сбора статистики от Битркса используем обработчики события:
// удяляем скрипт ядра для AMP страниц сайта
function ampDeleteKernelJs(&$content)
{
global $USER, $APPLICATION;
if((is_object($USER) && $USER->IsAuthorized()) || strpos($APPLICATION->GetCurDir(), "/amp/") === false) return;
if($APPLICATION->GetProperty("save_kernel") == "Y") return;
// НАРОД, внимание!!! чтобы подсветка синтаксиса не ругалась я заменил в регулярке символ < на ЗНАК_МЕНЬШЕ
$content = preg_replace('/ЗНАК_МЕНЬШЕscript[^>]+?>var\s_ba\s=\s_ba[^ЗНАК_МЕНЬШЕ]+ЗНАК_МЕНЬШЕ\/script>/', "", $content);
$content = preg_replace("/\n{2,}/", "\n\n", $content);
}
// также необходимо зарегестрировать сам обработчик (например в init.php)
AddEventHandler('main', 'OnEndBufferContent', [__CLASS__, 'ampDeleteKernelJs']);
Не забываем указать мета-тег , т.к. он у нас стандартно должен был подключаться в ShowHead(), а мы его не используем.
делаем отдельную папку
создаем отдельный шаблон
настраиваем показ шаблона в зависимости от адреса
Для этого необходимо сначала подключить соответствующую библиотеку
< script async data-skip-moving="true" custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js">
В случае Битрикса для этого я использовал $Asset->addString() в header.php.
Мы вставляем нужный нам код на страницу в тегах
< script id="some-id" type="text/plain" target="amp-script">
Оборачиваем кусок кода над которым будем производить действия с помощью
Где в script указываем наш id скрипта.
Далее нужно указать meta-тэг с хешем нашего JS-а. Хеш можно посмотреть в ошибках в консоли если запустить скрипт без мета-тега.
Мета-тег в Битриксе я добавлял с помощью $Asset->addString("тут мета-тег")
А вообще можно (наверное даже лучше) добавлять кастомный подключаемый скрипт по примеру:
< amp-script layout="container" 3p-lib-src="https://code.jquery.com/jquery-1.12.4.min.js" sandbox="allow-forms" src="my-custom-js.js> ... < /amp-script>Можно даже таким образом подключить сторонюю библиотеку (JQuery как в примере), но тут важно учесть ограничения накладываемы AMP, например общий объем кода до 150Кб. Поэтому я работал напрямую с JS без библиотек.
Использовать подключаемые js и css нельзя, поэтому функцию $APPLICATION->ShowHead() использовать не получится
Соответственно так как данные грузятся с cdn гугла, все счетчики в шаблоне мы убираем их можно будет подключить с помощью специальной библиотеки.
Примеры реализаци AMP - https://amp.dev/documentation/templates/
Не забываем указать в AMP версиии страницы каноническую ссылку на оригинальную страницу, а на оригинальной ссылку на AMP версию с помощью тега:
< link rel="amphtml" href="https://www.example.com/">
В head добавляем
ShowProperty("amp_js");?>
В целом можно разбить на 2 разные функции, но мне так удобней
/*
* $path - путь до файла, если js то путь до файла на внешнем сервере, если css, то путь от корня сайта
* Добавление файла в тело html
* Внутри идет проверка на js и css и в соответствии с этим определенный тип вставки файла в документ
* Author: www.lexa.pro
*/
if(!function_exists('ampIncudeFile'))
{
function ampIncudeFile($path = "")
{
global $APPLICATION;
$path_info = pathinfo($_SERVER['DOCUMENT_ROOT'] . $path);
if($path_info["extension"] == "css")
{
if (file_exists($_SERVER['DOCUMENT_ROOT'] . $path))
{
$ampCss = $APPLICATION->GetPageProperty("amp_css"); // текущие стили
$ampCss .= "\r\n----- Start File: " . $path . " -----\r\n \r\n"; // подключаем новые
$ampCss .= file_get_contents($_SERVER['DOCUMENT_ROOT'] . $path) . "\r\n"; // подключаем новые
$APPLICATION->SetPageProperty("amp_css", $ampCss);
}
}
elseif($path_info["extension"] == "js")
{
preg_match('/v0\/(.*)\-/', $path, $found_ce);
$customElement = $found_ce[1];
// НАРОД, внимание!!! чтобы подсветка синтаксиса не ругалась я заменил в регулярке символ < на ЗНАК_МЕНЬШЕ
$ampJs = $APPLICATION->GetPageProperty("amp_js"); // текущие скрипты
$ampJs .= "ЗНАК_МЕНЬШЕscript data-skip-moving=\"true\" async src=\"".$path."\" custom-element=\"".$customElement."\">ЗНАК_МЕНЬШЕ/script> \r\n"; // подключаем новые
$APPLICATION->SetPageProperty("amp_js", $ampJs);
}
}
}
// и пример вызова
//js - Внешний путь до файла
ampIncudeFile("https://cdn.ampproject.org/v0/amp-accordion-0.1.js");
ampIncudeFile("https://cdn.ampproject.org/v0/amp-bind-0.1.js");
//css - Путь от корня
ampIncudeFile("/local/templates/temp/l/card-.css");
ampIncudeFile("/local/templates/temp/l/choose-page.css");