Tutorial - Dodaj dynamiczne treści do statycznej strony internetowej generowanej przez Cecil

Wprowadzenie

Tutorial wyjaśnia, jak używać generatora strony Cecil do wyświetlania zawartości dynamicznej strony. Podczas połączenia z API, aby pobrać i wyświetlić informacje na stronie generowanej przez Cecil.

Dowiedz się, jak dodać połączenie do zewnętrznego API na stronie statycznej.

Wymagania początkowe

• Posiadanie hostingu OVHcloud z dostępem SSH Dostęp ten pozwala na zainstalowanie w wierszu poleceń jednego lub kilku rozwiązań alternatywnych wobec rozwiązań oferowanych domyślnie w naszej ofercie hostingu.
• Zaznajomiony z wprowadzaniem wiersza poleceń.
• Instalacja i skonfigurowanie aplikacji Cecil na Twoim hostingu (zapoznaj się z naszym tutorialem dotyczącym instalacji i konfiguracji Cecil).

W praktyce

Wybranym przykładem jest wykorzystanie jednego z API usługi dostarczającej dane meteorologiczne. To zależy od miasta wpisanego przez użytkownika.

Etapy te są następujące:

• utworzyć nową stronę Cecil i dodać tę stronę do menu strony;
• utworzyć konto i pobrać klucz do wykonywania zapytań do interfejsu API pogody
• zmodyfikować plik .md utworzony poprzez dodanie kodu HTML;
• dodawanie assets (JavaScript i CSS);
• wygenerować i przetestować rozwiązanie.

Stwórz nową stronę

Przygotuj środowisko, logując się przez SSH na hostingu i postępuj zgodnie z instrukcjami zawartymi w przewodniku "Instalacja i konfiguracja Cecil", aby zainstalować aplikację Cecil w dedykowanym katalogu.

Stwórz katalog i umieszczaj go w:

mkdir myWebSite
cd myWebSite

Korzystanie z API OpenWeather

W tym tutorialu użyjemy interfejsu API dostarczonego przez stronę OpenWeather. Pozwala on na poznanie informacji meteorologicznych w zależności od nazwy miasta.

Załóż konto na https://home.openweathermap.org/users/sign_up
Po zatwierdzeniu konta (wysyłając e-mail z potwierdzeniem) przejdź do menu "My API keys". Klucz został wygenerowany domyślnie. Uzyskaj go i zachowaj do końca tego tutoriala.

Dodanie kodu HTML

Utwórz nową stronę za pomocą polecenia:

php cecil.phar new:page weather.md

Następnie edytuj wygenerowaną stronę:

nano pages/weather.md

Zmień nagłówek pliku, aby strona wyświetliła się w menu:

---
title: "Weather"
date: 2022-11-28
published: true
menu: main
---

Po nagłówku dodaj kod HTML, aby wyświetlić wybrane miasto, temperatury zwracane przez API i przycisk, aby zmienić ustawienia:

---
title: "Weather"
date: 2022-11-28
published: true
menu: main
---
<h1>Weather</h1>
<div>
    <span id="city">Roubaix</span>
    <div id="temperature"><span id="temperatureValue"></span> °C</div>
    <div id="modify">Change city</div>
</div>

Wygeneruj stronę HTML za pomocą polecenia:

php cecil.phar build

Sprawdź wynik w swojej przeglądarce i kliknij link "Weather", który został dodany w menu głównym:

Dodaj kod JavaScript

Nie można dodać znacznika <script> do pliku Markdown. Musisz zmienić szablon dostarczony domyślnie.

Zmień szablon

Szablony są dostępne w katalogu layouts. Możesz je wyświetlić za pomocą polecenia:

ls -la layouts

Plik zawiera katalog blog i plik index.html.twig:

Otwórz plik index.html.twig:

Plik odnosi się do szablonu, który nie jest obecny w katalogu. Ten plik (i inne) są w rzeczywistości w pliku cecil.phar. Rozszerzenia .phar to archiwa plików PHP, które można obsłużyć bez rozpakowania. Rozłącz pliki tego archiwum, aby były widoczne:

php cecil.phar util:extract

Wyświetl ponownie zawartość katalogu layouts:

Zmień domyślny szablon, aby wstawić tag <script> zawierający kod umożliwiający wywołanie API:

nano layouts/_default/page.html.twig

Ten znacznik i jego zawartość należy umieścić przed zamkniętym znacznikiem </body> na dole:

    </footer>
    {%- include 'partials/googleanalytics.js.twig' with {site} only ~%}
    {% block javascript %}
    <script src="{{ asset('script.js', {minify: true}) }}"></script>
    {% endblock %}
  </body>
</html>

Jeśli jeden lub więcej plików assets ulegnie zmianie, odbuduj cache za pomocą polecenia:

php cecil.phar cache:clear:assets

Jeśli modyfikacje nie są widoczne w Twojej przeglądarce internetowej, wyczyść jej cache. Możesz również usunąć pliki wygenerowane na Twoim hostingu:

php cecil.phar clear

Następnie zbuduj rozwiązanie, używając następującego polecenia:

php cecil.phar build

Dodaj plik JavaScript

Pliki JavaScript, takie jak pliki CSS, muszą być umieszczone w katalogu assets. Możesz je zorganizować w różnych katalogach.

Utwórz plik script.js wymieniony powyżej w katalogu assets:

nano assets/script.js

Zastąp wartość zmiennej apiKey kluczem pobranym wcześniej na stronie OpenWeather

let apiKey = '123456789'; // Zastąp tą wartość
let city = 'Roubaix'; // Wpisz tutaj domyślne miasto, które zostanie wyświetlone na stronie pogody
getTemperature(city);  // Wywołanie funkcji wywołującej API z parametrem 'city'

// Dodanie wydarzenia na kliknięciu przycisku "Change city"
let button = document.querySelector('#modify');
button.addEventListener('click', () => {
    city = prompt('Choose a city');
    getTemperature(city);
});

// Funkcja wywołania API za pomocą obiektu XMLHttpRequest dla zapytania asynchronicznego
function getTemperature(city) {
    let url = 'https://api.openweathermap.org/data/2.5/weather?q=' + city + '&appid=' + apiKey + '&units=metric';
    let xhrQuery = new XMLHttpRequest();
    xhrQuery.open('GET', url);
    xhrQuery.responseType = 'json';
    xhrQuery.send();

    xhrQuery.onload = function() {
        if (xhrQuery.readyState === XMLHttpRequest.DONE) {
            if (xhrQuery.status === 200) {
                let city = xhrQuery.response.name;
                let temperature = xhrQuery.response.main.temp;
                document.querySelector('#city').textContent = city;
                document.querySelector('#temperatureValue').textContent = temperature;
            } else {
                alert('A problem has occurred, please come try later.');
            }
        }
    };
}

Testy

Teraz możesz sprawdzić Twoją stronę WWW za pomocą przeglądarki internetowej:

Kliknij na "Zmień miasto" i wpisz nazwę gminy:

Podsumowanie

Tutorial przedstawia przykład integracji dynamicznych danych pochodzących ze źródeł zewnętrznych za pośrednictwem API. Możesz zbudować i uruchomić stronę WWW, modyfikując ręcznie zawartość lub tworząc nowe. Wzbogacając zawartość stron internetowych.

Sprawdź również

• Kilka interfejsów API do przetestowania na Twojej stronie WWW
  • Numery API
  • NASA
  • Nowe API
  • Poligon
  • lista publicznych API
• Komendy Cecil.

Skontaktuj się z partnerami OVHcloud, jeśli szukasz zaawansowanych rozwiązań (indeksowanie, rozwój, etc).

Jeśli chcesz otrzymywać wsparcie w zakresie konfiguracji i korzystania z rozwiązań OVHcloud, sprawdź naszą ofertę wsparcia.

Dołącz do grona naszych użytkowników.