Наша команда-партнер Artmisto
Гэты артыкул навучыць вас, як зрабіць SEO дружалюбны і зручны Ajax пагинации з дапамогай ExpressionEngine прыкладна 6 хвілін. 
Вось мэты, якія мы выканаем з гэтым прагрэсіўным паляпшэннем:
- Вялікі вопыт карыстальніка
- Прапускная здольнасць зручна для мабільных карыстальнікаў
- Мінімізацыя серверных рэсурсаў
- SEO-дружалюбныя, а менавіта:
- Прасканаваць ўсе пошукавыя сістэмы
- Правільныя загалоўкі старонак
- Гісторыя Правільны браўзэр
- Правільнае паводзіны 404
У нашым прыкладзе мы будуем вельмі важны сайт, які мае фантастычны спіс ключавых кантактаў для кожнага важнага месца ў Сусвеце. Гэта вялікі спіс, таму мы хочам пастаронкавыя, і я хацеў бы паказаць восем ў той час. Мы будзем працаваць з вонкавага боку ў, так што, што кампаненты макета будзе мець сэнс.
Першае, што трэба зрабіць, гэта зрабіць бацькоўскі HTML-макет, які таксама будзе прымаць Ajax запыты без адпраўкі або апрацоўкі ўсёй старонкі. Мы будзем выкарыстоўваць новую {} is_ajax_request зменную ў ExpressionEngine 3.2, каб зрабіць гэта. Звярніце ўвагу на тое, што я папярэднічаючы свае імёны шаблонаў макета з падкрэсьліваньнем. Гэта робіць іх «схаваныя» шаблоны, якія не могуць быць даступныя непасрэдна на наведвальнік; яны могуць быць даступныя толькі пры ўказанні іх альбо як макеты або ўкараненне.
макеты / _html-layout.html
{Калі is_ajax_request} {раскладка: змест} {калі: яшчэ} <HTML> <HEAD> <META кадовак = "UTF-8"> <! - Тут мы дазволім шаблоны з выкарыстаннем гэтага макета ўсталяваць тэг загалоўка <DOCTYPE HTML!>! , -> <назва> {! Калі макет: назва = ''} {размяшчэнне: назва} | {/, Калі} {site_name} </ title> </ HEAD> <BODY> <! - Тут, напэўна, ёсць свой сайт нав загаловак старонкі і г.д., але для гэтага прыкладу, я скарачальны разметку для толькі тое, што мае дачыненне да нашага Ajax напрыклад пастаронкавага. -> <! - пераменная змесціва макета будзе заменена зместам шаблонаў, якія выкарыстоўваюць гэты фармат. Мы таксама дадаем шлях для шаблонаў, каб забяспечыць ідэнтыфікатар атрыбут, каб мы маглі зачапіцца гэтым кантэйнерам для CSS ці JavaScript. -> <ідэнтыфікатар падзелу = "{калі размяшчэнне: content_id} {размяшчэнне: content_id} {/, калі}">! {Макет: змест} </ падзел> <- Астатняя частка разметкі вашага сайта для бакавых панэляў, ваша зноска, іншыя скрыпты і г.д. будуць тут. Звярніце ўвагу на тое, што мы маем зменную макет для любой старонкі канкрэтных JavaScript, што дадзены шаблон можа спатрэбіцца для загрузкі ці даць. -> <сцэнар SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"> </ скрыпт> {размяшчэнне: JS} </ body> </ HTML> {/, калі}
Звярніце ўвагу на тое, што калі гэта запыт Ajax, адзінае ўтрыманне мы выводзячы гэта змесціва кантэйнера , што пастаўляюцца нашымі шаблонамі. У нашым выпадку гэта будзе ў першую чаргу запісу канала тэгаў. Мы хочам, каб гэтая знешняя абгортка для агульнага прызначэння і паўторнае выкарыстанне. Мы выкарыстоўваем {раскладкі: Js} зменную, якая таксама дазваляе пастаўку шаблонаў, неабходнае паводзіны. Мы маглі б зрабіць тое ж самае з бакавымі панэлямі і іншымі кампанентамі, якія не зьяўляюцца аднолькавымі на кожнай старонцы сайта.
Зараз давайце ачысціць адзін пласт лука назад і паглядзець на нашым наступным шаблоне макета:
макеты / _multi-макет
Як вы можаце сказаць па назве, мы цяпер атрымліваем больш канкрэтнымі мэты нашай макеце, у дадзеным выпадку для старонак мульты-уваходу. У канчатковым рахунку гэта будзе выкарыстоўвацца для нашых менеджэраў лістынга старонкі, і гэта агульная мэта, таму ён можа быць выкарыстаны на іншых старонках шматразовых неабходнасці. Ён будзе трымаць нашу JavaScript для пагинации Ajax, вызначанай у {макета: усталяваць імя = «JS»} {/ размяшчэнне: набор} пару тэгаў, якія мы ўжо сказалі, бацькоўскі _html-макет абгортцы, дзе яна належыць.
{ «Макеты / _html-макет» макет =} <! - Падаць ідэнтыфікатар атрыбуту для нашага кантэйнера кантэнту. -> {размяшчэнне: усталяваць імя = 'content_id' значэнне = 'менеджэры-рэклама'} <- Прынясіце наперад ўтрыманне з нашага шаблону !. -> {макет: змест} <- Устанавіць JS, што ўсе нашы «менеджэры» змест старонак трэба !. Гэта можа выглядаць страшна, але ёсць толькі дзясятак радкоў кода, астатнія многословные каментары, якія тлумачаць метадалогію. . -> {размяшчэнне: усталяваць імя = "JS"} <скрыпт> $ (дакумент) .ready (функцыя () {// '# менеджэры-рэклама' з'яўляецца ід мы прадугледзелі для бацькоўскага кантэйнера нашага кантэнту ў // ' .managers-лістынг-пагинация »клас мы дамо нашу спасылцы разбіўкі на кантэйнеры. // Паколькі змест, у тым ліку пагинации, замяняюцца ў DOM па кожным запыце Ajax, // мы вызначаем гэты апрацоўшчык падзей з дэлегацыяй падзей, назіраючы бацькоўскі кантэйнер // які існуе ў нашай першапачатковай разметцы і ня замененыя або выдаленыя з DOM. $ ( «# менеджэраў-лістынг»). на ( «націсніце», «.managers-лістынг-пастаронкава а», функцыя (е ) {// Прадухіліць браўзэр ад яго нармальных паводзінаў пры пстрычцы на спасылцы // і захапіць HREF ў ссылку пастаронкавага яны клікнулі e.preventDefault () ;. крыніца вар = $ (гэта) .attr ( «HREF»); // Дадае індыкатар нагрузкі для павольных злучэнняў. Выкарыстоўвайце тое, што вы хочаце, калі вы не знаёмыя з // іх рэалізацыі вы можаце атрымаць некаторыя ідэі ў http://cssload.net вар loadIndicator = $ ( '<DIV клас = » загрузнік "ID =" Аякс-нагрузка indicato г "> </ DIV> '); . $ ( '# Мэнэджары-рэклама') перад імем (loadIndicator); // Fetch наш кантэнт $ .get (крыніца, функцыя (дадзеныя) {// Устаўце наш новы кантэнт, выдаляючы індыкатар нагрузкі $ ( '# менеджэры-рэклама') HTML (дадзеныя) .. $ ( '# Аякса нагрузкі -indicator «) Згасанне (.» хутка ') выдаліць () ;. // Які абнаўляецца наш загаловак старонкі для ўкладак браўзэра, атрымаць нумар старонкі з дапамогай спасылкі пастаронкавага яны клікнулі // Паколькі нашы разбіцця на старонкі спасылкі існуюць двойчы ў DOM (уверсе. і знізу), мы толькі хочам, каб захапіць: .. // першая ці старонка 3 будзе адлюстроўваць «Page 33», і гэтак далей уаг назва = «менеджэры - старонка» + $ ( »менеджэраў-спіс-нумарацыя старонак: спачатку. актыўны «) тэкст () +» | {site_name} '; document.title = назву; // па меркаваннях бяспекі, PushState () не будзе абнаўляць URL, калі ён уключае ў сябе вобласць, // таму мы выкарыстоўваем рэгулярны выраз трымаць толькі шлях, напрыклад / менеджэраў / P4 вар шлях = source.replace (/ HTTPS: \ / \ / [^ \ /] + / я, ''?); // Устаўце гэтую старонку ў стэк гісторыі браўзэра для. . наперад / назад функцыянальныя кнопкі history.pushState ({}, назва, шлях);}); }); }); </ Скрыпт> {/ размяшчэнне: набор}
У инлайн каментары падрабязна растлумачыць, што мы робім. У асноўным мы назіраем за разбіцця на старонкі, каб спасылкі не пстрыкнулі, прынясіце іх змесціва з дапамогай Ajax, і пераканайцеся, што загалоўкі старонак і гісторыя браўзэра абнаўляюцца адпаведна. Такім чынам, мы паступова павысілі карыстацкі досвед, не парушаючы якое-небудзь чаканае паводзіны браўзэра дзеля таго, каб быць слізкім. А для робатаў пошукавых сістэм , якія разумеюць JavaScript, гэта вельмі важна для індэксацыі.
Цяпер нам трэба стварыць шаблон для URL / менеджэраў, якія будуць выкарыстоўваць _multi-макет. Мы дадамо наш Entries Channel бірку з пагинацией, і мы зрабілі!
менеджэры / індэкс
{Макет = 'макеты / _multi-макета'} {ехр: Канал: запісаў канала = мяжа 'мэнэджараў =' 8 'пастаронкавага =' як 'OrderBy =' назва 'роду =' узр '} {калі no_results} {перанакіроўваць = «404»} {/, калі} <! - Ваша разметка для адлюстравання запісаў будзе тут. -> <h2> {назву} </ h2> <! - Наш пагинация блок ніжэй, ён будзе змешчаны вышэй і ніжэй запісаў, так як мы паказалі = разбіваць на старонкі "і" -> {пастаронкавага} <! - - Устанавіць пераменны макет для загалоўка старонкі. Гэта важна, калі поўны доступ да старонкі і карыстацкімі агентамі, якія не маюць JavaScript. Для нашых запытаў Ajax, мы ўжо паклапаціліся пра гэта ў _managers-макеце. Звярніце ўвагу на тое, што ў гэтым выпадку «| {site_name}» крыху клапоцяцца ў нашым _html-макеце тэг загалоўка выводзіцца. -> {размяшчэнне: усталяваць імя = "назва»} Мэнэджары - Старонка {current_page}! {/ Размяшчэнне: набор} <- Нашы разбіцця на старонкі спасылкі ў кантэйнеры з класам мы выкарыстоўвалі ў нашай JavaScript раней. -> <DIV клас = 'менеджэры-лістынг-пагинацию'> {pagination_links} </ DIV> {/ пастаронкавага} {/ Exp: канал: запісаў}
Зноў инлайн каментары растлумачыць, што мы робім, але я хацеў бы звярнуць увагу на некаторую абарону мы дадалі да URL дробязны або няправільна набраны спасылкі.
{Калі no_results} {перанакіроўваць = '404'} {/}, калі
Гэта сведчыць ExpressionEngine, каб адлюстраваць старонку 404 сайта (з правільнымі загалоўкамі 404), які мы вызначаны ў нашым шаблоне налады калі няма якіх-небудзь вынікаў. Калі гэта будзе? Калі URL дае ключы да пазнакі аб тым, каб паказаць, але няма ніякіх запісаў, якія адпавядаюць гэтым крытэрам. Напрыклад, з запытаў старонак мяжы, як старонкі 4872, калі не так шмат запісаў: / менеджэры / P4872.
Гэты просты прыклад можа быць пашыраны на, і, вядома ж, размечаны і стыль да зместу вашага сэрца. Асноўныя тэхнічныя элементы рэалізацыі з'яўляюцца:
- Выкарыстоўвайце {пастаронкавага} {/ пастаронкавага} пары тэгаў як для пагинации і ўсталяваць загаловак старонкі, на пачатковай загрузцы ў URL.
- Зрабіць Ajax выклікае лёгкі вага, толькі апрацоўка і абслугоўванне тэгі, неабходныя для дастаўкі кантэнту.
- Выкарыстоўвайце history.pushState (), каб захаваць загалоўкі старонак і гісторыю браўзэра, як для карыстацкага досведу і SEO прыязнасці.
- Ўстаноўка 404 рэдырэкту для па-за межамі запытаў, запусціць жорсткі карабель!
- Знаходжанне DRY з дапамогай макетаў і {} is_ajax_request пераменнага, так што вам не трэба ствараць спецыяльныя шаблоны Ajax.
- Гэты ж метад можа быць непасрэдна ужыты да якія ахопліваюць адну запіс на некалькіх старонках ,
Выконвайце гэтыя прынцыпы, і вы можаце лёгка даставіць SEO і зручны Ajax пагинацию, ўражлівыя кліент і палепшыўшы вопыт для наведвальнікаў свайго сайта.
HTTPS: \ / \ / [^ \ /] + / я, ''?Калі гэта будзе?
