О нас
FAQ
Связь
Peклaмa
Логин:
Пароль:

SEO и дружественная Ajax Pagination

  1. макеты / _html-layout.html
  2. макеты / _multi-макет
  3. менеджеры / индекс

Эта статья научит вас, как сделать SEO-дружественную и удобную нумерацию страниц Ajax с помощью ExpressionEngine примерно за 6 минут. Эта статья научит вас, как сделать SEO-дружественную и удобную нумерацию страниц Ajax с помощью ExpressionEngine примерно за 6 минут

Вот цели, которых мы достигнем с помощью этого прогрессивного улучшения:

  • Отличный пользовательский опыт
  • Пропускная способность для мобильных пользователей
  • Минимизируйте ресурсы на стороне сервера
  • SEO-дружественный, в частности:
    • Обрабатываются всеми поисковыми системами
    • Правильные заголовки страниц
    • Правильная история браузера
    • Правильное поведение 404

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

Первое, что нужно сделать, это создать макет родительского HTML, который также будет принимать запросы Ajax без отправки или обработки всей страницы. Мы собираемся использовать новую переменную {is_ajax_request} в ExpressionEngine 3.2, чтобы сделать это. Обратите внимание, что я начинаю с префикса в именах шаблонов макета. Это делает их «скрытыми» шаблонами, к которым посетитель не может получить прямой доступ; к ним можно получить доступ, только если вы укажете их как макеты или встраивания.

макеты / _html-layout.html

{if is_ajax_request} {layout: contents} {if: else} <! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <! - Здесь мы разрешаем шаблонам, использующим этот макет, устанавливать тег заголовка , -> <title> {if layout: title! = ''} {layout: title} | {/ if} {site_name} </ title> </ head> <body> <! - Здесь у вас, вероятно, есть навигация по сайту, заголовок страницы и т. д., но для этого примера я сокращаю разметку до только то, что относится к нашему примеру с нумерацией страниц Ajax. -> <! - Переменная содержимого макета будет заменена содержимым шаблонов, которые используют этот макет. Мы также добавляем в шаблоны способ предоставления атрибута id, чтобы мы могли подключиться к этому контейнеру для CSS или JavaScript. -> <section id = "{if layout: content_id} {layout: content_id} {/ if}"> {layout: contents} </ section> <! - остальная часть разметки вашего сайта для боковых панелей, нижний колонтитул, другие сценарии и т. д. пойдут сюда. Обратите внимание, что у нас также есть переменная макета для любого специфичного для страницы JavaScript, который может потребоваться для загрузки или предоставления данного шаблона. -> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"> </ script> {layout: js} </ body> </ body html> {/ if}

Обратите внимание, что если это Ajax-запрос, мы выводим только содержимое контейнера, предоставляемое нашими шаблонами. В нашем случае это будет в первую очередь тэг Channel Entries. Мы хотим, чтобы эта внешняя обертка была универсальной и многоразовой. Мы используем переменную {layout: js}, которая также позволяет шаблонам обеспечивать необходимое поведение. Мы могли бы сделать то же самое с боковыми панелями и другими компонентами, которые не одинаковы на каждой странице сайта.

Теперь давайте очистим один слой лука назад и посмотрим на наш следующий шаблон макета:

макеты / _multi-макет

Как вы можете сказать по названию, теперь мы более конкретны в назначении нашего макета, в данном случае для многостраничных страниц. В конечном итоге это будет использоваться для нашей страницы со списком менеджеров, и это универсальное назначение, поэтому при необходимости его можно использовать на других страницах с несколькими записями. Он будет содержать наш JavaScript для разбиения на страницы Ajax, определенный в паре тегов {layout: set name = "js"} {/ layout: set}, о которой мы уже говорили родительской обертке _html-layout, где она принадлежит.

{layout = 'layouts / _html-layout'} <! - Укажите атрибут id для нашего контейнера содержимого. -> {layout: set name = 'content_id' value = 'manager-list'} <! - Переносить содержимое из нашего шаблона. -> {layout: contents} <! - Установите JS, который нужен всем нашим страницам контента "Managers". Это может выглядеть страшно, но есть только дюжина или около того строк кода, остальные - подробные комментарии, объясняющие методологию. -> {layout: set name = "js"} <script> $ (document) .ready (function () {// '# manager-list' - это идентификатор, который мы указали для родительского контейнера нашего контента. // ' .managers-list-pagination '- это класс, который мы передадим нашим контейнерам ссылок на страницы. // Поскольку содержимое, включая разбиение на страницы, заменяется в DOM каждым Ajax-запросом, // мы определяем этот обработчик события с делегированием события, наблюдая за родительский контейнер //, который существует в нашей исходной разметке и не заменен и не удален из DOM. $ ('# manager-list'). on ('click', '.managers-list-pagination a', function (e ) {// Предотвращаем браузер от его нормального поведения при нажатии на ссылку // и получаем ссылку на ссылку разбивки на страницы, на которую они нажали. E.preventDefault (); var source = $ (this) .attr ('href'); // Добавить индикатор загрузки для медленных соединений. Используйте все, что вам нравится, если вы // не знакомы с их реализацией, вы можете получить некоторые идеи по адресу http://cssload.net var loadIndicator = $ ('<div class = " загрузчик "id =" ajax-load-Indicato г "> </ DIV> '); . $ ( '# Менеджеры-реклама') перед именем (loadIndicator); // Получить наш контент $ .get (source, function (data) {// Вставить наш новый контент, убрав индикатор загрузки. $ ('# Manager-list'). Html (data); $ ('# ajax-load -indicator '). fadeOut (' fast '). remove (); // Обновляем заголовок нашей страницы для вкладок браузера, получая номер страницы по ссылке на пагинацию, по которой они щелкнули. // Поскольку наши ссылки на страницы существуют дважды в DOM (вверху) и внизу), мы только хотим, чтобы: first // или на странице 3 отображалось «Страница 33» и т. д. var title = 'Managers - Page' + $ ('. manager-list-pagination: first a. active '). text () +' | {site_name} '; document.title = title; // Из соображений безопасности pushState () не будет обновлять URL, если он содержит домен, // поэтому мы используем регулярное выражение для оставьте только путь, например / Manager / P4. var path = source.replace (/ https?: \ / \ / [^ \ /] + / i, ''); // Перетащите эту страницу в стек истории браузера для функциональность кнопки «вперед / назад». history.pushState ({}, заголовок, путь);}); }); }); </ script> {/ layout: set}

Встроенные комментарии подробно объясняют, что мы делаем. По сути, мы следим за переходами по страницам пагинации, выбираем их содержимое через Ajax и следим за тем, чтобы заголовки страниц и история браузера обновлялись соответствующим образом. Таким образом, мы постепенно улучшили пользовательский интерфейс, не нарушая ожидаемого поведения браузера ради простоты. А для роботов поисковых систем, которые понимают JavaScript, это очень важно для индексации.

Теперь нам нужно создать шаблон для URL / manager, который будет использовать _multi-layout. Мы добавим наш тег Channel Entries с нумерацией страниц, и все готово!

менеджеры / индекс

{layout = 'layouts / _multi-layout'} {exp: канал: записи channel = 'manager' limit = '8' paginate = 'both' orderby = 'title' sort = 'asc'} {if no_results} {redirect = '404'} {/ if} <! - Ваша разметка для отображения записей будет здесь. -> <h2> {title} </ h2> <! - Наш блок разбивки на страницы находится ниже, он будет размещен над и под записями, поскольку мы указали paginate = "both" -> {paginate} <! - - Установите переменную макета для заголовка страницы. Это важно, когда к полной странице обращаются и пользовательские агенты, у которых нет JavaScript. Для наших запросов Ajax мы уже позаботились об этом в _managers-layout. Обратите внимание, что в этом случае бит «| {site_name}» позаботится в нашем _html-макете, где выводится тег title. -> {layout: set name = 'title'} Менеджеры - Page {current_page} {/ layout: set} <! - Наши ссылки на страницы находятся в контейнере с классом, который мы использовали в нашем JavaScript ранее. -> <div class = 'manager-list-pagination'> {pagination_links} </ div> {/ paginate} {/ exp: channel: records}

Опять же, встроенные комментарии объясняют, что мы делаем, но я хотел бы обратить внимание на некоторую защиту, которую мы добавили от перебора URL или ошибочных ссылок.

{if no_results} {redirect = '404'} {/ if}

Это говорит ExpressionEngine отображать страницу 404 сайта (с правильными заголовками 404), которую мы определено в наших настройках шаблона если нет никаких результатов. Когда это будет? Когда URL дает подсказку тегу о том, что показывать, но нет записей, соответствующих этому критерию. Например, за пределами страницы запросы, такие как страница 4872, когда не так много записей: / Manager / P4872.

Этот простой пример может быть расширен и, конечно, размечен и стилизован для вашего сердца. Ключевыми техническими элементами реализации являются:

  • Используйте пару тегов {paginate} {/ paginate} как для разбивки на страницы, так и для задания заголовка страницы при начальной загрузке URL-адреса.
  • Сделать Ajax легким вызовом, только обрабатывая и обслуживая теги, необходимые для доставки контента.
  • Используйте history.pushState (), чтобы поддерживать заголовки страниц и историю браузера как для удобства пользователей, так и для удобства SEO.
  • Установите перенаправление 404 для запросов за пределы, запустите плотный корабль!
  • Оставайтесь сухими, используя макеты и переменную {is_ajax_request}, чтобы вам не приходилось создавать специальные шаблоны Ajax.
  • Эта же техника может быть непосредственно применена к охват одной записи на нескольких страницах ,

Следуйте этим принципам, и вы можете легко обеспечить SEO и удобную нумерацию страниц Ajax, впечатляя клиентов и улучшая впечатления для посетителей своего сайта.

Https?
Когда это будет?
Рекомендуем
ochistka_vody_v_domashnih_usloviyah

Очистка воды в домашних условиях
uluchshaem_rabotosposobnost_mozga

Улучшаем работоспособность мозга
puteshestviya_po_francii

Путешествия по Франции
elka_iz_salfetok_svoimi_rukami

Елка из салфеток своими руками!
Cdelay_pervye_dvizheniya_na_konkah

Cделай первые движения на коньках
izdeliya_iz_listvennicy_ekstra-klassa

Изделия из лиственницы экстра-класса
franciya__idealnaya_strana_dlya_romanticheskih_puteshestviy

Франция – идеальная страна для романтических путешествий
zhiloy_kompleks_Grona_Lund

Жилой комплекс «Grona Lund»
s_chego_nachinat_stroitelstvo_doma

С чего начинать строительство дома
kak_nauchit_sobaku_komande_lezhat

Как научить собаку команде лежать

© yaznayu.net, 2017