Главная страница / Сторонние модули / AMP страницы из версии для печати
ноябрь 08 2021

AMP страницы из версии для печати

Плагин генерации AMP страниц для DLE, теперь на основе версии для печати. Перед тем как устанавливать плагин, сделайте резервную копию файла {THEME}/print.tpl своего шаблона. Так как плагин загружает модифицированную версию данного файла с разметкой для AMP страницы.

Ссылка на "версию для печати" в мире, где распечатывать документы на принтере становиться плохим тоном (под соусом что мы за экологию и против вырубания лесов) имеет смысл приспособить для пользы своего веб-сайта. И совместить возможность печати (тем, кому это действительно нужно) и разметку AMP страницы для роботом.

Например, если обернуть стандартную строку html кода в шаблоне fullstory.tpl дополнительными тегами определяющими тип устройства с которого просматривают сайта.

И вместо базовых:

[print-link]Распечатать[/print-link]

Написать так:

[print-link]
[desktop]Распечатать[/desktop] [not-desktop]AMP версия страницы[/not-desktop] [/print-link]

Но посетители с ПК будут видеть привычную ссылка на "Распечатать", а посетители со смартфонов ссылку на AMP версию страницы

Пример шаблона AMP страницы. В основе AMP шаблона готовые скины с официального сайта amp amp.dev/ru/documentation/templates/simple_article/

Принцип работы AMP с DataLife Engine

AMP версия создается только для статьи целиком (то, что обычно отображается при просмотре полной новости). После подключения и активации плагина DLE-print-page4amp у каждой статьи сайта в метатегах генерируемых CMS появляется новый тег информирующий о наличии AMP версии страницы. Где rel="amphtml" это тот самый признак AMP-версии, а ссылка вида https://sitename.com/o-skripte/print:page,1,1-post1.html (на самом деле это версия для печати) и есть адрес AMP страницы.

Проверить корректность работы всегда можно через https://search.google.com/test/rich-results

В файле шаблона print.tpl работают все теги, которые заявлены в DLE. Мы не вносили никаких дополнительных правок. На практике это означает, что если в новых версиях движка появятся новые теги для страницы печати, то они так же будут доступны и в нашей версии AMP-шаблона на основе этого файла. 

Обратите внимание:

Формат amp страниц чувствителен к синтаксису разметки. Все картинки в теле полной новости по этой причине скрыты на уровне CSS 
И если вы ходите отображать свои изображения, то для них требуется использовать amp-img теги с обязательными атрибутами ширины и высоты.

Пример:

[image-1]...[/image-1]

Данный код выведет amp-изображения первой картинки из краткой новости.

Так же для вывода видео используется свой код amp-video в том числе для ютуба. Потребуется реализовать отображение ролика через дополнительное поле публикации.

Например дополнительное поле с именем amp-youtube-id

[xfgiven_amp-youtube-id]...[/xfgiven_amp-youtube-id]

Если ваш сайт использует функцию движка для вывода шаблона smartphone то файлы из папки templates/{THEME}/ необходимо скопировать в папку smartphone

Иначе при тестировании со стороны Google вашего сайта он не сможет обнаружить шаблон с amp разметкой.

Для использования контекстной рекламы на AMP страницах необходимо использовать специальные блоки информация о которых в официальной документации https://amp.dev/

Страница разработки https://github.com/tcse/DLE-print-page4amp
Актуальный релиз https://github.com/tcse/DLE-print-page4amp/releases

Комментарии

  1. TCSE (Клиенты)

    9 ноября 2021 09:19 46 комментариев

    Небольшой фикс

    В версии 1.0.1  для файла шаблона print.tpl добавлена поддержка нового тега {amp-full-story} вместо обычного {full-story} внутри которого происходит автоматическая замена тегов img на amp-img для текста в теле публикации целиком.

    Так же замены тегов:

    video на amp-video

    audio на amp-audio


    1. Crashlabs (Клиенты)

      16 ноября 2021 09:54 8 комментариев

      Спасибо за модуль! Вопрос: есть ли какой-нибудь способ сохранить оригинальные размеры изображений внутри статьи, а не принудительно задавать им разрешение amp-img width="320" height="240"?

      1. TCSE (Клиенты)

        17 ноября 2021 12:39 46 комментариев

        Я как минимум знаю два способа:


        1. Использовать кадрирование для картинок. Например плагин TimThumb ( https://tcse-cms.com/works/1604-timthumb-by-tcse.html ) 

        Использование данного плагина наиболее актуально при создании AMP-версий публикаций сайта.

        Так как картинки в amp-img должны обязательно иметь ширину и высоту. Без этих параметров они не будут обработаны Google.

        amp-img src="/resize?src={image-1}&w=480&h=240&a=c" width="480" height="240" При использовании ссылки на картинку через строку /resize?src={image-1}&w=480&h=240&a=c мы создаем точный размер картинки именно с заданными параметрам для AMP изображений.


        2. Доработать правила обработки изображение как в примере https://gist.github.com/elalemanyo/034490164beb7b935559585ff1cc7d9f 

        вот в этой строке https://github.com/tcse/DLE-print-page4amp/blob/eaf477c51e61a9c283b537a8e80b9ddbe1529eb5/DLE-print-page4amp.xml#L59

  2. Captain (Клиенты)

    18 ноября 2021 11:54 139 комментариев

    Это конечно всё хорошо, только на хрена в ПС AMP-страницы для версии для печати?

    Disallow: /print: # всё что для них (ПС) нужно.

Информация

Комментирование публикаций доступно только пользователям имеющим действующую лицензию на скрипт. Если вы уже приобретали скрипт, то вам необходимо зайти на сайт под своим клиентским аккаунтом.

Календарь

«    Декабрь 2021    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031 

Опрос на сайте

Совершаете ли вы покупки в интернет?