Verwendet man den Blog von Jimdo, so hat man unter Blog eine Übersicht aller Blog-Beiträge (siehe dazu auch "Mit Jimdo einen Blog erstellen"). Über die Kategorien kann man diese zusätzlich noch in die jeweiligen Kategorien unterteilen (siehe dazu auch "Der Jimdo Blog und seine Möglichkeiten"). Trotzdem kann es sein, dass diese out-of-the-box Funktion nicht ausreicht.
Möchte man beispielsweise auf der Startseite die letzten Blog-Beiträge anzeigen, dann geht dies nur mit einem eigenen Script. Nachfolgend wird ein kurzes Script vorgestellt mit dem es möglich ist, über ein "Widget/HTML", eine Vorschau für die letzten 3 Blog-Beiträge zu erstellen. Die Vorschau aktualisiert sich dann automatisch sobald ein neuer Blog-Beitrag vorhanden ist. (Quelle für das Script: https://www.schulhomepage.de/cms/jimdo-blog-erstellen)
|
Das Script |
Das Script nutzt den RSS-Feed der Webseite um die Vorschau der Blog-Beiträge zu generieren. Um es einzufügen fügt man an der gewünschten Stelle ein "Widget/HTML"-Element hinzu. Dort fügt man dann nachfolgendes Script ein und tauscht die Domain aus:
<center>
<div id="rssnews" class="j-module n j-hgrid">
<div class="cc-m-hgrid-column" style="width: 31%">
<div id="news_publishdate_0">
</div>
<h3>
<a style="font-size: 14px; font-weight: bold; height: 42px; display: block;" id="headline_news_0" name="headline_news_0"></a>
</h3>
<div style="max-width: 100%">
<a id="news_mediacontainer_0" name="news_mediacontainer_0"></a><br />
<br />
<br />
</div>
</div>
<div class="cc-m-hgrid-column" style="width: 31%">
<div id="news_publishdate_1">
</div>
<h3>
<a style="font-size: 14px; font-weight: bold; height: 42px; display: block;" id="headline_news_1" name="headline_news_1"></a>
</h3>
<div style="width: 100%">
<a id="news_mediacontainer_1" name="news_mediacontainer_1"></a><br />
<br />
<br />
</div>
</div>
<div class="cc-m-hgrid-column" style="width: 31%">
<div id="news_publishdate_2">
</div>
<h3>
<a style="font-size: 14px; font-weight: bold; height: 42px; display: block;" id="headline_news_2" name="headline_news_2"></a>
</h3>
<div style="width: 100%">
<a id="news_mediacontainer_2" name="news_mediacontainer_2"></a><br />
<br />
<br />
</div>
</div>
</div>
<script>
/* <![CDATA[ */
fetch('https://www.esecon.at/rss/blog').then((res) => {
res.text().then((xmlTxt) => {
var domParser = new DOMParser()
let doc = domParser.parseFromString(xmlTxt, 'text/xml')
let counter = 0;
let items = doc.querySelectorAll('item');
for(let i = 0; i < 3; i++){
let item = items[i];
document.getElementById('headline_news_' + i).innerHTML = item.querySelector('title').textContent;
document.getElementById('headline_news_' + i).href = item.querySelector('link').textContent;
let date = new Date(Date.parse(item.querySelector('pubDate').textContent));
let pubDate = ('0' + date.getDate()).slice(-2) + '.' + ('0' + (date.getMonth()+1)).slice(-2) + '.' + date.getFullYear();
document.getElementById('news_publishdate_' + i).innerHTML = pubDate;
var ele = document.createElement("div");
ele.innerHTML = item.querySelector('description').textContent;
var image = ele.querySelector("img");
image.style.maxWidth = '100%';
document.getElementById('news_mediacontainer_' + i).innerHTML = image.outerHTML;
document.getElementById('news_mediacontainer_' + i).href = item.querySelector('link').textContent;
}
});
});
/*]]>*/
</script>
WICHTIG: Damit das Script funktioniert, sind zumindest drei Blog-Beiträge notwendig. Diese müssen zusätzlich ein Vorschau-Bild haben. Und übrigens nicht wundern wenn im Editor die Vorschau keine Blog-Beiträge anzeigt. Das funktioniert im Jimdo-Editor nicht.
|
|
Die Vorschau |
Das Script kann auch den Wünschen entsprechend angepasst werden. Beispielsweise kann man auch den RSS-Feed um einzelne Kategorien erweitern. Somit werden nur die letzten drei Beiträge der jeweiligen Kategorie angezeigt. Natürlich kann man das Script auch so anpassen, dass man mehr oder weniger letzten Blog-Beiträge anzeigt. Hier sind der Kreativität keine Grenzen gesetzt. Bei Fragen hinterlass mir einfach einen Kommentar. Viel Spaß beim Ausprobieren!
Kommentar schreiben