Tutorial - Dynamischen Inhalt auf einer statischen Webseite hinzufügen, die mit Cecil erstellt wurde

Ziel

In dieser Anleitung erfahren Sie, wie Sie das Web-Entwicklungstool Cecil verwenden, um den Inhalt einer dynamischen Seite wiederzugeben. Dazu wird eine externe API eingebunden, die Informationen auf einer mit Cecil erstellten Seite anzeigt.

In diesem Tutorial wird erläutert, wie Sie API-Aufrufe von Ihrer statischen Webseite aus hinzufügen.

Voraussetzungen

• Sie verfügen über ein OVHcloud Webhosting mit SSH-Zugang. Über diesen Zugriff können Sie eine oder mehrere Alternativlösungen online installieren, ergänzend zu den Webhosting-Standarddiensten.
• Sie sind mit der Befehlszeileneingabe vertraut.
• Sie haben die Anwendung Cecil auf Ihrem Hosting installiert und konfiguriert (gemäß unseres Tutorials zur Installation und Konfiguration von Cecil).

In der praktischen Anwendung

Als Beispiel wird eine API eines Wetterdatendienstes verwendet, basierend auf einer Stadt, die vom Benutzer eingegeben wird.

Die Schritte sind dabei wie folgt:

• Erstellen einer neuen Seite in Cecil und diese in das Menü der Website einfügen.
• Einen Account erstellen und einen Schlüssel für Anfragen an die Wetterdaten-API abrufen.
• Die erstellte .md-Datei durch Hinzufügen von HTML-Code bearbeiten.
• Hinzufügen von assets (JavaScript und CSS).
• Die Lösung anwenden und testen.

Eine neue Seite erstellen

Loggen Sie sich zunächst via SSH auf Ihrem Webhosting ein. Folgen Sie der Anleitung "Installation und Konfiguration von Cecil", um Ihre Cecil Anwendung in einem dedizierten Verzeichnis zu installieren.

Erstellen Sie ein neues Verzeichnis wechseln Sie zu diesem:

mkdir myWebSite
cd myWebSite

Verwendung der API von OpenWeather

Für dieses Tutorial verwenden wir eine API, die von OpenWeather bereitgestellt wird. Sie ermöglicht es, die meteorologischen Informationen je nach einer spezifizierten Stadt abzurufen.

Erstellen Sie einen Account auf https://home.openweathermap.org/users/sign_up.
Sobald Ihr Account validiert wurde (per E-Mail), gehen Sie auf zum Menü "My API keys". Es wurde ein Schlüssel erstellt, den Sie hier kopieren und für die Fortsetzung dieses Tutorials speichern können.

HTML-Code hinzufügen

Erstellen Sie eine neue Seite mit folgendem Befehl:

php cecil.phar new:page weather

Bearbeiten Sie anschließend die erstellte Seite:

nano pages/weather.md

Ändern Sie den Header der Datei, damit die Seite im Menü erscheint:

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

Fügen Sie nach dem Header den HTML-Code hinzu, um die gewählte Stadt, die von der API zurückgegebenen Temperaturen und einen Button zur Parameteränderung anzuzeigen:

---
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>

Erzeugen Sie die HTML-Seite mit folgendem Befehl:

php cecil.phar build

Überprüfen Sie das Ergebnis in Ihrem Browser und klicken Sie auf den Link "Weather", der im Hauptmenü hinzugefügt wurde:

JavaScript-Code hinzufügen

Es ist nicht möglich, einen <script> Tag in eine Markdown-Datei einzufügen. Ändern Sie das Standard-Template.

Template bearbeiten

Die Templates sind im Verzeichnis layouts enthalten. Sie können sie mit folgendem Befehl anzeigen:

ls -la layouts

Die Datei enthält das Verzeichnis blog und die Datei index.html.twig:

Öffnen Sie die Datei index.html.twig:

Die Datei bezieht sich auf ein Template, das nicht im Verzeichnis vorhanden ist. Diese und weitere Dateien sind in cecil.phar enthalten. Dateien mit der Erweiterung .phar sind PHP-Archivdateien, die ohne Dekomprimierung bearbeitet werden können.

Entpacken Sie die Dateien dieses Archivs, um sie sichtbar zu machen:

php cecil.phar util:extract

Anzeige des Inhalts von layouts:

Ändern Sie das Standard-Template, um einen <skript> Tag einzufügen, der den Code für den API-Aufruf enthält:

nano layouts/_default/page.html.twig

Dieser Tag und dessen Inhalt sind vor dem schließenden </body> am Seitenende einzufügen:

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

Wenn eine oder mehrere Dateien in assets geändert wurden, muss der Cache mit folgendem Befehl erneuert werden:

php cecil.phar cache:clear:assets

Wenn die Änderungen in Ihrem Browser nicht angezeigt werden, leeren Sie den Cache. Sie können auch die auf Ihrem Webhosting erzeugten Dateien löschen:

php cecil.phar clear

Regenerieren Sie anschließend die Seite mit folgendem Befehl:

php cecil.phar build

JavaScript-Datei hinzufügen

JavaScript-Dateien, wie etwa CSS-Dateien, sind im Verzeichnis assets zu platzieren. Sie können sie in verschiedenen Verzeichnissen organisieren.

Erstellen Sie die zuvor erwähnte Datei script.js im Wurzelverzeichnis assets:

nano assets/script.js

Ersetzen Sie den Wert der Variable apiKey mit Ihrem zuvor auf OpenWeather erhaltenen Schlüssel.

let apiKey = '123456789'; // Ersetzen Sie diesen Wert
let city = 'Roubaix'; // Geben Sie hier die Stadt an, die auf der Wetterseite angezeigt wird
getTemperature(city);  // Aufrufende Funktion mit dem Parameter "city"

// Ereignis zum Klick auf "Change City"
let button = document.querySelector('#modify');
button.addEventListener('click', () => {
    city = prompt('Choose a city');
    getTemperature(city);
});

// API-Funktion unter Verwendung eines Objekts "XMLHttpRequest" für eine asynchrone Anfrage
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 try later.');
            }
        }
    };
}

Tests

Rufen Sie Ihre Website nun in einem Webbrowser auf.

Klicken Sie auf "Change City" und geben Sie den Namen einer Stadt ein:

Fazit

Dynamische Daten, die über APIs externer Quellen bezogen wurden, können wie oben beschrieben in statische Webseiten integriert werden. Erstellen und pflegen Sie eine Website, indem Sie den Inhalt dieser Seiten manuell ändern oder neue erstellen. Gleichzeitig bereichern sie ihre Inhalte mithilfe externer Websites.

Weiterführende Informationen

• Weitere APIs für Ihre Website:
  • Numbers API
  • NASA
  • News API
  • Polygon.io
  • Liste öffentlicher APIs
• Cecil Befehlsreferenz

Kontaktieren Sie für spezialisierte Dienstleistungen (SEO, Web-Entwicklung etc.) die OVHcloud Partner.

Wenn Sie Hilfe bei der Nutzung und Konfiguration Ihrer OVHcloud Lösungen benötigen, beachten Sie unsere Support-Angebote.

Treten Sie unserer User Community bei.