Готовим AMP

Главные вкладки

Аватар пользователя mozh mozh 22 мая 2017 в 14:50

Так, заказчик хочет видеть на своём новостном сайте AMP (Accelerated mobile pages) https://www.ampproject.org/ru/

Как же все это подружить с друпалом? смотрим, что удалось накопать:

1. имеем верстку под АМП
2. качаем drupal.org/project/amp + drupal.org/project/amptheme + github.com/Lullabot/amp-library
3. делаем из верстки тему (как правило AMP нужен только для страниц node), включаем тему, выбираем в настройках модуля amp нашу тему
4. качаем модуль drupal.org/project/composer_manager, не помню как собирал композер файл, из админки. Файлик с зависимостями появится здесь sites\default\files\composer - переходим в эту папку в консоли и пишем composer update, в итоге скачаем зависимости в папку sites/all/vendor. Должно выглядеть как-то так: http://take.ms/6cHQ3
5. в настройках модуля Amp включаем внизу все птички http://take.ms/DwpBi . Debugging будет показывать что не удалось преобразовать и прочие полезности.

Библиотека вырезает все теги если вы хотите сделать форму подписок на новости для амп страницы, то вам нужно будет пофиксить issue github.com/Lullabot/amp-library/issues/151

На текущий момент имею проблемы с преобразованием картинок по тексту:
если изображение размером 200 на 200px, то на amp странице мы видим его на 100% ширины экрана и когда этот экран равен 1920px, то это просто ужас. Есть вариант задать max-width для но прикол в том, что нельзя его просто задать в max-width:100% (проблема 1)
Если же использовать layout="fixed", то изображение покажется в 100% свою величину, но оно будет выходить за пределы на маленьких экранах...

ВложениеРазмер
Иконка изображения variant1.jpg619.86 КБ
Иконка изображения variant2.jpg344.99 КБ

Комментарии

Аватар пользователя mozh mozh 23 мая 2017 в 10:01

сейчас телефоны с разным разрешением, идеально ограничить контент max-width: 700px
возникает проблема с изображением (эму проблему я пытался решить, но...)

Аватар пользователя gun_dose gun_dose 23 мая 2017 в 12:22

У телефонов с большими разрешением другой pixel-ratio. Там надо медиа-запросы делать не по ширине окна, а по ширине устройства, а для тестов, если нет нормального смартфона, то хотя бы нажать кнопку симулятора в девтулзах.

Аватар пользователя Grayw0lf Grayw0lf 15 марта 2018 в 13:07

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

Аватар пользователя mozh mozh 9 июля 2018 в 10:51

<a href="mailto:sas@drupal.org">sas@drupal.org</a> wrote:

yandex продвигает быструю загрузку для мобильных устройств через свой сервис turbo


яндекс отдельная тема