Наша команда-партнер Artmisto
W tym artykule dowiesz się, jak zrobić przyjazną dla SEO i przyjazną dla użytkownika stronicowanie Ajax przy użyciu ExpressionEngine w około 6 minut.
Oto cele, które osiągniemy dzięki tej progresywnej poprawie:
- Świetne wrażenia dla użytkownika
- Przyjazna przepustowość dla użytkowników mobilnych
- Zminimalizuj zasoby po stronie serwera
- Przyjazne dla SEO, w szczególności:
- Indeksowane przez wszystkie wyszukiwarki
- Właściwe tytuły stron
- Właściwa historia przeglądarki
- Właściwe zachowanie 404
W naszym przykładzie budujemy naprawdę ważną stronę internetową, która ma fantastyczną listę kluczowych kontaktów dla każdej ważnej lokalizacji we wszechświecie. To ogromna lista, więc chcemy ją pogrupować, a chciałbym pokazać osiem na raz. Będziemy pracować od zewnątrz, aby elementy układu miały sens.
Pierwszą rzeczą do zrobienia jest stworzenie nadrzędnego układu HTML, który akceptuje także żądania Ajax bez wysyłania lub przetwarzania całej strony. W tym celu użyjemy nowej zmiennej {is_ajax_request} w ExpressionEngine 3.2. Zwróć uwagę, że poprzedzam nazwy szablonów układu podkreśleniem. To czyni je „ukrytymi” szablonami, do których użytkownik nie może uzyskać bezpośredniego dostępu; mogą być dostępne tylko wtedy, gdy określisz je jako układy lub osadzone.
layouts / _html-layout.html
{if is_ajax_request} {layout: contents} {if: else} <! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <! - Tutaj pozwalamy szablonom używającym tego układu ustawić tag tytułu . -> <title> {if layout: title! = ''} {layout: title} | {/ if} {site_name} </title> </head> <body> <! - Tutaj prawdopodobnie masz nawigację witryny, nagłówek strony itp., ale dla tego przykładu skracam znaczniki do tylko to, co jest istotne dla naszego przykładu stronicowania Ajax. -> <! - Zmienna zawartości układu zostanie zastąpiona treścią szablonów, które używają tego układu. Dodajemy również sposób, w jaki szablony dostarczają atrybut id, abyśmy mogli dołączyć do tego kontenera dla CSS lub JavaScript. -> <section id = "{if layout: content_id} {layout: content_id} {/ if}"> {layout: contents} </section> <! - Reszta znaczników witryny dla pasków bocznych, twojej stopki, inne skrypty itp. Zauważ, że mamy także zmienną układu dla dowolnego specyficznego dla strony kodu JavaScript, który może wymagać załadowania lub dostarczenia dany szablon. -> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"> </script> {layout: js} </body> </ html> {/ if}Zauważ, że jeśli jest to żądanie Ajax, jedyną zawartością, którą wypisujemy, jest zawartość kontenera dostarczona przez nasze szablony. W naszym przypadku będzie to przede wszystkim znacznik wpisów kanału. Chcemy, aby ta zewnętrzna owijka była uniwersalna i wielokrotnego użytku. Używamy zmiennej {layout: js}, która pozwala również szablonom dostarczać potrzebne zachowania. Moglibyśmy zrobić to samo z paskami bocznymi i innymi komponentami, które nie są takie same na każdej stronie witryny.
Teraz zbierzmy jedną warstwę cebuli i spójrzmy na nasz następny szablon układu:
layouts / _multi-layout
Jak można powiedzieć po nazwie, teraz stajemy się bardziej konkretni w celu naszego układu, w tym przypadku dla stron z wieloma wpisami. Ostatecznie będzie to wykorzystane na naszej stronie z listą menedżerów, i jest to ogólne przeznaczenie, więc może być używane w razie potrzeby na innych stronach z wieloma wpisami. Będzie on zawierał nasz JavaScript dla stronicowania Ajax, zdefiniowany w parze znaczników {layout: set name = "js"} {/ layout: set}, które już powiedzieliśmy opakowaniu macierzystemu _html-layout, gdzie należy.
{layout = 'layouts / _html-layout'} <! - Podaj atrybut id dla naszego kontenera treści. -> {layout: set name = 'content_id' value = 'manager-listing'} <! - Przesyłanie treści z naszego szablonu. -> {layout: contents} <! - Ustaw JS, aby wszystkie nasze strony z treścią „Menedżerowie” potrzebowały. Może to wyglądać przerażająco, ale jest tylko kilkanaście linii kodu, reszta to szczegółowe komentarze wyjaśniające metodologię. -> {layout: set name = "js"} <script> $ (document) .ready (function () {// „lista # menedżerów” to identyfikator, który podaliśmy dla kontenera nadrzędnego naszej zawartości. // ” .managers-listing-pagination 'to klasa, którą damy naszym kontenerom linków do stron. // Ponieważ zawartość, w tym paginacja, jest zastępowana w DOM przez każde żądanie Ajax, // definiujemy tę obsługę zdarzeń z delegacją zdarzeń, obserwując kontener nadrzędny //, który istnieje w naszym oryginalnym znaczniku i nie jest zastępowany ani usuwany z DOM. $ ('# menedżer-list'). on ('click', '.managers-list-pagination a', funkcja (e ) {// Zabezpiecz przeglądarkę przed normalnym zachowaniem po kliknięciu łącza // i pobierz href klikniętego linku do paginacji. E.preventDefault (); var source = $ (this) .attr ('href'); // Dodaj wskaźnik ładowania dla wolnych połączeń. Użyj tego, co chcesz, jeśli nie jesteś zaznajomiony z implementacją, możesz uzyskać kilka pomysłów na http://cssload.net var loadIndicator = $ ('<div class = " loader "id =" ajax-load-indicato r "> </div> '); $ ('# manager-listing'). prepend (loadIndicator); // Pobierz naszą zawartość $ .get (źródło, funkcja (dane) {// Wstaw naszą nową zawartość, usuń wskaźnik obciążenia. $ ('# Manager-listing'). Html (dane); $ ('# ajax-load -indicator '). fadeOut (' fast '). remove (); // Zaktualizuj nasz tytuł strony dla kart przeglądarki, uzyskując numer strony z klikniętego linku do paginacji. // Ponieważ nasze linki stronicowania istnieją dwukrotnie w DOM (top i na dole), chcemy tylko pobrać: pierwszą // lub stronę 3, wyświetli się „Strona 33” itd. var title = 'Managers - Page' + $ ('. paginacja listy menedżerów: najpierw a. active '). text () +' | {site_name} '; document.title = title; // Ze względów bezpieczeństwa pushState () nie aktualizuje adresu URL, jeśli zawiera domenę, // więc używamy wyrażenia regularnego do zachowaj tylko ścieżkę, np. / manager / P4 var path = source.replace (/ https?: / [^ /] + / i, ''); // Wciśnij tę stronę do stosu historii przeglądarki dla funkcjonalność przycisku do przodu / do tyłu history.pushState ({}, tytuł, ścieżka);}); }); }); </script> {/ layout: set}Komentarze wbudowane wyjaśniają szczegółowo, co robimy. Zasadniczo uważamy, aby klikać linki stronicowania, pobierać ich zawartość przez Ajax i upewnić się, że tytuły stron i historia przeglądarki są odpowiednio aktualizowane. W ten sposób stopniowo ulepszaliśmy wrażenia użytkownika, nie łamiąc przy tym oczekiwanych zachowań przeglądarki, aby być dobrym. A dla robotów wyszukiwarek, które rozumieją JavaScript, jest bardzo ważne dla indeksowania.
Teraz musimy utworzyć szablon dla adresu URL / manager, który użyje układu _multi. Dodamy nasz tag Entry Channel z podziałem na strony i skończyliśmy!
menedżerowie / indeks
{layout = 'layouts / _multi-layout'} {exp: channel: wpisy channel = 'managers' limit = '8' paginate = 'both' orderby = 'title' sort = 'asc'} {if no_results} {redirect = '404'} {/ if} <! - Twoje znaczniki do wyświetlenia wpisów zostaną wyświetlone tutaj. -> <h2> {title} </h2> <! - Nasz blok stronicowania znajduje się poniżej, zostanie umieszczony powyżej i poniżej wpisów, ponieważ określiliśmy paginate = "both" -> {paginate} <! - - Ustaw zmienną układu dla tytułu strony. Jest to ważne, gdy uzyskuje się dostęp do pełnej strony i agentów użytkownika, które nie mają JavaScript. Dla naszych żądań Ajax zadbaliśmy już o to w układzie _managers. Zauważ, że w tym przypadku bit „| {site_name}” jest zajęty w naszym układzie _html, w którym jest wyprowadzany tag tytułu. -> {layout: set name = 'title'} Managers - Page {current_page} {/ layout: set} <! - Nasze linki stronicowania znajdują się w kontenerze z klasą, której wcześniej używaliśmy w JavaScript. -> <div class = 'manager-listing-pagination'> {pagination_links} </div> {/ paginate} {/ exp: channel: wpisy}Znowu komentarze wyjaśniają, co robimy, ale chciałbym zwrócić uwagę na jakąś ochronę, którą dodaliśmy w stosunku do skrzypienia URL lub błędnie wpisanych linków.
{if no_results} {redirect = '404'} {/ if}To mówi ExpressionEngine, aby wyświetlić stronę 404 strony (z odpowiednimi 404 nagłówkami), którą mamy zdefiniowane w naszych ustawieniach szablonu jeśli nie ma żadnych wyników. Kiedy to nastąpi? Gdy adres URL daje wskazówki do tagu o tym, co należy pokazać, ale nie ma żadnych wpisów spełniających te kryteria. Na przykład żądania stron poza granicami, np. Strona 4 872, gdy nie ma tak wielu wpisów: / managers / P4872.
Ten prosty przykład można rozwinąć i oczywiście oznaczyć i stylizować na treść twojego serca. Kluczowe elementy techniczne wdrożenia to:
- Użyj pary znaczników {paginate} {/ paginate} zarówno do paginacji, jak i do ustawienia tytułu strony przy początkowym ładowaniu adresu URL.
- Uczyń Ajaxa lekkim, wywołując tylko przetwarzanie i obsługę tagów niezbędnych do dostarczenia treści.
- Użyj history.pushState (), aby zachować tytuły stron i historię przeglądarki, zarówno dla wygody użytkownika, jak i przyjazności SEO.
- Ustaw przekierowanie 404 na żądania poza granicami, uruchom zwarty statek!
- Pozostań suchy, używając układów i zmiennej {is_ajax_request}, dzięki czemu nie musisz tworzyć specjalnych szablonów Ajax.
- Ta sama technika może być bezpośrednio zastosowana łącząc pojedynczy wpis na wielu stronach .
Postępuj zgodnie z tymi zasadami i możesz łatwo zapewnić SEO i przyjazną dla użytkownika paginację Ajax, imponując klientom i poprawiając wrażenia użytkowników witryny.
Https?Kiedy to nastąpi?
