Jak dodać stronę w AEM Edge Delivery Services

Jeśli właśnie ukończyłeś oficjalny samouczek Edge Deliver Services (dalej EDS), możesz zastanawiać się, jak rozwinąć właśnie utworzoną stronę internetową. W tym artykule dowiesz się, jak utworzyć i opublikować nową stronę w witrynie AEM. W tym artykule założono, że ukończyłeś oryginalny samouczek i masz działającą stronę internetową z rozszerzeniem AEM Sidekick zainstalowanym w przeglądarce.

Najpierw utwórz nowy plik na Dysku Google

Po utworzeniu nowego pliku zostanie wyświetlony monit o "Utwórz i udostępnij", ponieważ folder został już udostępniony stronie [email protected] w oficjalnym samouczku. Udostępnianie folderu, a tym samym znajdujących się w nim dokumentów, umożliwia EDS wyświetlanie i pobieranie treści z Dysku Google do witryny. Kliknij "Utwórz i udostępnij" i rozpocznij edycję nowego dokumentu.

Pierwszą rzeczą, o której należy pamiętać podczas edycji dokumentu w projekcie EDS, jest jego nazwa. Ta nazwa zostanie użyta do utworzenia adresu URL, pod którym znajduje się strona.

Jako przykład, główny adres URL projektu, który widzisz na zrzutach ekranu tego bloga, to https://main--drews-franklin-demo--drew-cummings.hlx.live/.

Jeśli utworzę nowy dokument o nazwie "nowa strona", wówczas adres URL, pod którym strona będzie istnieć po opublikowaniu, to https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page. Warto zauważyć, że wszystkie wygenerowane adresy URL będą pisane małymi literami, nawet jeśli nazwa dokumentu jest pisana wielkimi literami. Ze względu na czytelność i nawigację, upewnij się, że nazwy dokumentów są krótkie i trafne.

Zaktualizuj tytuł dokumentu do "nowa strona".

Dodajmy teraz tytuł na górze naszego dokumentu. Ustaw tekst na "Nagłówek 1" i wpisz tytuł.

Zobaczmy, jak to wygląda na stronie internetowej. Przejdź do wygenerowanego adresu URL, w moim przypadku https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page, i zobacz, jak to wygląda.

O nie! Jeśli to zauważysz, nie panikuj. Tak wygląda błąd "nie znaleziono strony" w domyślnej wersji demonstracyjnej EDS. Nasza witryna nie może teraz znaleźć naszej strony, ponieważ jeszcze jej nie przejrzeliśmy i nie opublikowaliśmy. Przejdź z powrotem do dokumentu i kliknij rozszerzenie AEM Sidekick, ikonę po lewej stronie na poniższym zrzucie ekranu.

Po chwili powinien pojawić się pasek narzędzi pomocniczych. Po lewej stronie powinien znajdować się przycisk "Podgląd" z czerwoną kropką. Ta czerwona kropka wskazuje, że istnieje nowa zawartość, która ma zostać zainscenizowana i przesłana do witryny. Śmiało kliknij ten przycisk i spójrz na stronę, która się załaduje.

To jest podgląd nowej strony. Tak będzie wyglądać Twoja strona w witrynie "na żywo" po jej opublikowaniu. Ważne jest, aby pamiętać, że jeśli zawartość nie została opublikowana, nie pojawi się na stronie na żywo, a strona, która nie została opublikowana, nie pojawi się na stronie na żywo. Pozwala to na eksperymentowanie z treścią i dostosowywanie jej do własnych upodobań bez widoczności dla użytkowników witryny, dopóki nie będziesz gotowy do jej opublikowania. Na razie pozostawmy tę stronę nieopublikowaną i wróćmy do Dokumentu Google, aby dodać więcej treści.

W obecnej formie nasza strona jest raczej prosta. Dodajmy do tego trochę koloru za pomocą obrazu. Dla uproszczenia użyjemy niebieskiego obrazu DNA z przykładowej strony.

Kliknij podgląd i sprawdź, jak to wygląda.

Wygląda dobrze! Jeśli nie chcesz, aby tekst nakładał się na obrazek, umieść obrazek pod tekstem nagłówka w dokumencie zamiast nad nim, a otrzymasz stronę wyglądającą tak.

Nakładka tekstowa pojawia się tylko w przypadku pierwszego obrazu w artykule i tylko wtedy, gdy jest sformatowany tak, jak pokazano na początku, z tekstem w stylu Tytuł lub Nagłówek 1 bezpośrednio pod obrazem.

Dodajmy teraz trochę treści tekstowej do tego artykułu. Użyję Lorem Ipsum, łacińskiego tekstu tradycyjnie używanego w branży wydawniczej do eksperymentowania z układami tekstu. Lorum Ipsum pozwala nam zobaczyć, jak zawartość alfabetu arabskiego będzie wyglądać na stronie bez rozpraszania się przez przypadkowe jej przeczytanie. Zamiast tego możesz dodać dowolną treść tekstową. Oto jak to wygląda w moim dokumencie Google:

A oto jak to wygląda na mojej stronie podglądu:

Na koniec zobaczmy, jak obraz będzie wyglądał, gdy zostanie umieszczony w linii z treścią strony. Dodam jedno ze zdjęć ze strony demonstracyjnej po pierwszym akapicie, aby zademonstrować, jak będzie wyglądać na poniższej stronie:

Warto zauważyć, że EDS pobiera zawartość z Dokumentu Google i wykorzystuje ją do generowania plików HTML, które tworzą stronę internetową. W rezultacie rozmiar obrazu w dokumencie Google nie koreluje z rozmiarem obrazu na stronie podglądu/na żywo. Jeśli chcesz dostosować rozmiar obrazu w witrynie, musisz dostosować natywną rozdzielczość obrazu.

Teraz, gdy mamy już stronę, z której jesteśmy zadowoleni, musimy wykonać jeszcze jeden krok przed publikacją. Chcę zmienić tytuł tej strony w metadanych z "Moja nowa strona" na "Strona demonstracyjna" bez zmiany tytułu mojego artykułu. Chcę również dodać opis do metadanych, aby ułatwić wyszukiwanie strony przez wyszukiwarki. Aby to zrobić, musimy dodać blok metadanych.

Najprostszym sposobem na dodanie bloku metadanych jest skopiowanie i wklejenie tego ze strony głównej wersji demonstracyjnej, ale jeśli jesteś zainteresowany stworzeniem go od podstaw, przeprowadzę Cię przez ten proces.

Najpierw wstaw tabelę 2X3 na końcu dokumentu. Podświetl komórki w pierwszym wierszu, kliknij prawym przyciskiem myszy i wybierz opcję "scal komórki".

Wpisz "Metadane" w górnym wierszu, a następnie wpisz "Tytuł" i "Opis" w komórkach po lewej stronie w kolejnych dwóch wierszach. Wpisz tytuł po prawej stronie komórki "Tytuł" i opis po prawej stronie komórki "Opis". Wynik końcowy powinien wyglądać mniej więcej tak:

Przejdź dalej i wyświetl podgląd strony. Zauważysz, że zawartość strony w ogóle się nie zmieniła, ale jeśli spojrzysz na kartę w Chrome, nasz nowy tytuł zostanie wyświetlony zamiast domyślnego tytułu, który mieliśmy wcześniej.

Jeśli sprawdzimy plik HTML strony internetowej, zobaczymy, że zarówno nasz tytuł, jak i opis są obecne jako właściwości strony internetowej

Jesteś gotowy do publikacji! Kliknij przycisk "Opublikuj" po lewej stronie rozszerzenia AEM Sidekick, który pojawi się na stronie podglądu, i zobacz swoją nową stronę internetową na żywo w swojej witrynie.

Gratulujemy dodania strony do witryny! Istnieje prawdopodobieństwo, że jeśli wcześniej odwiedziłeś adres URL tej strony przed jej opublikowaniem i otrzymałeś błąd 404 Page Not Found, nadal będziesz widzieć ten błąd po opublikowaniu. Może się to zdarzyć z wielu powodów, ale jeśli nie otrzymałeś komunikatu o błędzie z rozszerzenia AEM Sidekick, jest mało prawdopodobne, że Twoja zawartość faktycznie przeszła. Wystarczy odczekać minutę lub dwie, aby odświeżyć stronę i zobaczyć opublikowaną stronę.

Jeśli podobał Ci się ten samouczek i chcesz dowiedzieć się więcej o produktach AEM, zapoznaj się z naszym artykułem na temat tego, czym jest AEM.

O autorze

Podoba ci się to, co usłyszałeś? Masz pytania dotyczące tego, co jest dla Ciebie odpowiednie? Chętnie porozmawiamy! Skontaktuj się z nami

Odcinki podcastu