Code Monkey home page Code Monkey logo

amp4dle's Introduction

AMP4DLE

Модуль AMP страниц для DataLife Engine

Официальная страница https://tcse-cms.com/amp4dle

В качестве исходника - бесплатный модуль DomiTori

Автоматическая генерация AMP версии страниц полной новости.

Суффикс /amp.html в конце ссылки полной новости. Например, у страницы https://tcse-cms.com/main/inet/1447-Sovremennoe-seo-amp-istorii.html - версия AMP будет доступна по ссылке https://tcse-cms.com/main/inet/1447-Sovremennoe-seo-amp-istorii/amp.html .

Автоматическое добавление мета-тегов canonical и amphtml для индексации AMP версии страницы.

Устанока

Загрузить архив плагина через админку Утилиты - Управления плагинами.

Открываем .htaccess в корне вашего сайта, ищем в нем код

# Сам пост

ВЫШЕ вставляем код

# AMP

RewriteRule ^([0-9]{4})/([0-9]{2})/([0-9]{2})/(.*)/amp.html$ index.php?subaction=showfull&year=$1&month=$2&day=$3&news_name=$4&seourl=$4&amp=1 [L]
RewriteRule ^([^.]+)/([0-9]+)-(.*)/amp.html$ index.php?newsid=$2&seourl=$3&seocat=$1&amp=1 [L]
RewriteRule ^([0-9]+)-(.*)/amp.html$ index.php?newsid=$1&seourl=$2&amp=1 [L]

Установка завершена.

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

AMP версия создается только для статьи целиком (то, что обычно отображается в шаблоне {THEME}/fullstory.tpl )

После подключения и активации плагина AMP4DLE_pro у каждой статьи сайта в метатегах генерируемых CMS появляется новый тег информирующий о наличии AMP версии страницы.

<link rel="amphtml" href="https://sitename.com/o-skripte/1-post1/amp.html">

где атрибут rel="amphtml" это тот самый признак AMP-версии, а ссылка вида https://sitename.com/o-skripte/1-post1/amp.html (с окончанием /amp.html ) и есть адрес AMP страницы.

Теги шаблонов

У вас есть 2 файла в папке с вашим шаблоном - custom/amp/main.tpl и custom/amp/fullstory.tpl В них настраиваем внешний вид ваших amp страниц.

{full-link} - ссылка на полную новость

[full-link]..[/full-link] - текст между тегами станет ссылкой на полную новость

{login} - Автор новости

[profile]...[/profile] - текст между тегами станет ссылкой на профиль автора

{views} - количество просмотров новости

{date} - дата новости в формате 17.01.2021

{seo-date} - дата для разметки schema в формате 2021-01-17

{title} - тайтл новости

{full-story} - описание новости

{description} - обрезанное до 150 символов описание новости для мета тегов и микроразметки

{link-category} - ссылки на категории новости

{site-name} - имя сайта из админки DLE

{short-name} - краткое имя сайта из админки DLE

{site-url} - полный адрес сайта

{THEME} - адрес сайта с приставкой /templates/ваша_тема

amp4dle's People

Contributors

pafnuty avatar tcse avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

amp4dle's Issues

спорное значение в качестве ссылки link rel="canonical" href="."

<link rel="canonical" href=".">

иногда тесты https://search.google.com/test/amp выдают ошибку страницы.

Приведенный URL относится не к AMP-странице

Каноническая страница ссылается на страницу без функций AMP. Подробнее о том, как настроить ссылки с обычных страниц на их AMP-версии…

https://support.google.com/webmasters/answer/7478053#canonical_references_non_amp вот тут пояснения.

Вероятно строка

<link rel="canonical" href=".">

Должна стать

<link rel="canonical" href="{full-link}">

Amp

Возможно ли настроить amp только для одной категории?

Uncaught ReferenceError: ShowOrHide is not defined

Подскажите пожалуйста, почему не работает спойлер в amp?
Вот что пишет в консоль
Uncaught ReferenceError: ShowOrHide is not defined
at :1:1

ShowOrHide('sp9a486415aaa2fc3b59a4bc1cea073533')

Добавить конвертер тегов <img> в формат <amp-img>

Так как валидатор AMP страниц https://validator.ampproject.org

требует сделать с картинками все как указано в инструкции https://amp.dev/documentation/guides-and-tutorials/start/create/include_image/?format=websites

Типовые картинки

<src="welcome.jpg" alt="Welcome">

превращать в

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

Без этого валидатор ругается.

Документация по теме https://amp.dev/ru/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp/?format=websites

Добавить новые теги для amp шаблона fullstory

// Формирование различных тегов

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

{image-x} | Выводит URL картинок находящихся в краткой новости, где x это номер картинки в новости, например {image-1} выведет URL первой картинки в краткой новости
[image-x] текст [/image-x] | Выводят текст указанный в них только в случае если картинка с номером X присутствует в новости
[not-image-x] текст [/not-image-x] | Выводят текст, указанный в них только в случае если картинка с номером X отсутствует в новости.
{fullimage-x} | Выводит URL картинки, находящийся в тексте полной новости, где "x" это номер картинки в новости
[fullimage-x] текст [/fullimage-x] | Выводят указанный в них текст, только если картинка с номером "x" присутствует в полной новости.

получается, что вставить картинки отдельно в красивые карусели и слайдеры, которые поддерживает AMP формат нельзя.

{banner_x}

тоже не работает.

{full-story limit="x"}

нужен в качестве альтернативы для вывода только анонса публикации без форматирования. В связке с тегами картинок {image-x} может формировать красивую презентацию из произвольной статьи на сайте.

Нужно будет собрать инструкцию по подключению в шаблон amp-fullstory.tpl тегов из fullstory.tpl

Не обрабатываются [xfvalue_image_url_X] в доп.полях

// Обработка доп полей

Оказалось, что не все типы дополнительных полей обрабатываются :(

Конструкция вида

[xfgiven_x] 
    <amp-img src="[xfvalue_image_url_x]" width="640" height="320"></amp-img> 
[/xfgiven_x]

выводит текстом сам тег [xfvalue_image_url_x]
Как я понимаю, в 2017 году когда разрабатывался исходник этого модуля сам DLE не поддерживал теги вида

[xfvalue_thumb_url_X] | Данный тег может использоваться только если дополнительное поле имеет тип "Изображение". Тег выводит только URL для уменьшенной копии загруженного изображения, где "х" это имя дополнительного поля
[xfvalue_image_url_X] | Данный тег может использоваться только если дополнительное поле имеет тип "Изображение". Тег выводит только URL для полноразмерной картинки загруженного изображения, где "х" это имя дополнительного поля
[xfvalue_X image="Nr"] | Выводит загруженные для дополнительного поля с типом "Галерея" изображения, по отдельности. Где "X" это имя дополнительного поля, а "Nr" это номер изображения из галереи. Например, при использовании [xfvalue_test image="2"] будет выведено изображение номер два, загруженное в дополнительное поле с именем "test".

Надо будет попробовать внедрить.

Переделать работу модуля на BlockPro

По всей видимости, так будет значительно продуктивнее.
В виде расширения для модуля BlockPro 6.
Остается понять, какие обязательные элементы необходимо оставить.

Точно необходимо сделать одну папку для amp шаблонов. Из шаблона сайта по умолчанию. Это актуально для сайтив с активным мобильным шаблоном.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.