Vorschau der Artikel erstellen

cracksilver · Thu Mar 13, 2025 9:32 am

Hallo zusammen
Wir wollen Bludit als reine Blogsoftware nutzten um künftig die Artikel per RSS in die Webseite zu integrieren.
Nun möchte ich Fragen wie wir die Artikel erstellen müssen, dass das mit der Vorschau und dem weiterlesen Button funktioniert. Wo oder wie kann ich das im Editor aufteilen? Leider bringt die page break Funktion rein gar nichts. Da passiert danach nichts.
Es ist auch so, dass das Vorschaubild nach dem Weiterlesen noch einmal in den Text integriert wird, also zweimal ersichtlich ist.
Vielen Dank im Voraus. Grüsse Gregor

wjar · Fri Mar 14, 2025 5:43 pm

Soll die Vorschau auf der einzubindenden Website mithilfe des RSS-Feeds erstellt werden? Das RSS-Plugin berücksichtigt die Pagebreak-Funktion doch (allerdings wird alles danach abgeschnitten, auch schließende Tags).

cracksilver · Tue Mar 18, 2025 10:28 am

ja die Posts sollen auf einer Automad Seite mittels RSS-Feed aus dem Bludit System eingefügt werden. Dort habe ich einen html code in der Seite "news" eingebunden welcher die Posts aus automad abruft.

Mit der Pagebrack Funktion habe ich auch bereits rumgespielt. Das war für mich auch das naheliegendste. Leider wird dann der zweite Teil, also alles unterhalb des Pagebreaks nicht mehr angezeigt und verschwindet komplett.

Ich habe hier mal den Code welchen ich in Automad eingebunden habe. Sorry, bin nicht Coder. Habe das zusammen mit ChatGPT gemacht. Hat eine Weile gedauert bis wir die Kategorien und die Tag eingebunden hatten.

Ja vielleicht sieht hier ein Profi woran es liegen könnte.

Code: Select all

<script>
async function loadRSS() {
    const rssFeed = "https://mydomain.com/blog/rss.xml";

    try {
        const response = await fetch(rssFeed);
        const text = await response.text();
        const parser = new DOMParser();
        const xml = parser.parseFromString(text, "text/xml");
        const items = xml.querySelectorAll("item");

        let html = "<ul style='list-style:none; padding:0;'>";
        items.forEach((item, index) => {
            let title = item.querySelector("title").textContent;
            let link = item.querySelector("link").textContent;
            let pubDate = new Date(item.querySelector("pubDate").textContent).toLocaleDateString();
            let description = item.querySelector("description").textContent;
            
            // Kategorien und Tags separat ermitteln
            let categories = [];
            let tags = [];
            item.querySelectorAll("category").forEach(cat => {
                if (cat.getAttribute("domain") === "tags") {
                    tags.push(cat.textContent);
                } else {
                    categories.push(cat.textContent);
                }
            });

            let categoryText = categories.length ? categories.join(", ") : "Allgemein";
            let tagsText = tags.length ? tags.join(", ") : "Keine Tags";

            html += `
                <li style="margin-bottom: 25px; padding-bottom: 10px; border-bottom: 1px solid #ccc;">
                    <h2 style="cursor:pointer; color:#0056b3; margin-bottom:0;" onclick="toggleArticle(${index})">${title}</h2>
                    <p style="font-weight: bold; margin-top:0;">
                        Kategorie: <span style="font-weight: normal;">${categoryText}</span>  
                        Tags: <span style="font-weight: normal;">${tagsText}</span>
                    </p>
                    <p style="font-weight: bold; margin-bottom: 20px;">
                        Veröffentlicht am: <span style="font-weight: normal;">${pubDate}</span>
                    </p>
                    <p>${description}</p>
                    <a href="javascript:void(0);" onclick="toggleArticle(${index})" style="color:#0056b3; text-decoration:none;">Weiterlesen...</a>
                    <div id="article-${index}" style="display:none; margin-top:10px;">
                        <p>${description}</p>
                    </div>
                </li>
            `;
        });
        html += "</ul>";

        document.getElementById("rss-feed").innerHTML = html;
    } catch (error) {
        document.getElementById("rss-feed").innerHTML = "Fehler beim Laden des Feeds.";
    }
}

function toggleArticle(index) { 
    const article = document.getElementById(`article-${index}`); 
    article.style.display = (article.style.display === "none") ? "block" : "none"; 
}

window.onload = loadRSS;

</script>

<div id="rss-feed">Lade News...</div>

wjar · Thu Mar 20, 2025 7:04 pm

Es soll also auf Klick dynamisch der restliche Inhalt sichtbar werden? IMO können dabei die Bludit-Bordmittel nicht helfen, es müsste alles über Dein Script gesteuert werden.

Z. B.: Ein Post umfasst zuerst immer einen Absatz

Suche nach dem ersten schließenden Absatz-Tag (</p>).
Alles bis dahin = Inhalt Variable 1.
Alles ab da = Inhalt Variable 2.
Gib immer Inhalt Variabe 1 aus
Auf Klick wird der Inhalt von Variable 2 sichtbar.

Oder hat jemand Einwände?

cracksilver · Fri Mar 21, 2025 8:30 am

So ich habs rausgefunden, mit Hilfe von meinem Freund ChatGPT

Mit diesem Code eingefügt in Automad als html gibt's sogar ein Inhaltsverzeichnis. Bei Klick wird zum Artikel gesprungen und jeder Artikel kann am Ende wieder mit minimieren geschlossen werden.

Ich denke dieser Code kann jeder für sich anpassen und kann vermutlich auch in anderen CMS/Webseiten gebraucht werden. Oben einfach die Domain anpassen mit der eigenen Bludit Domain. Feedback ist gerne willkommen.

Code: Select all

<script>
async function loadRSS() {
    const rssFeed = "https://mydomain.com/rss.xml";

    try {
        const response = await fetch(rssFeed);
        const text = await response.text();
        const parser = new DOMParser();
        const xml = parser.parseFromString(text, "text/xml");
        const items = xml.querySelectorAll("item");

        let html = "<ul style='list-style:none; padding:0;'>";
        let tocHtml = "<ul style='list-style:none; padding:0; margin-bottom: 45px;'>"; // Inhaltsverzeichnis
        let faqSchema = { 
            "@context": "https://schema.org", 
            "@type": "FAQPage", 
            "mainEntity": [] 
        }; // FAQ Schema vorbereiten

        window.fullArticles = [];
        window.previews = [];

        items.forEach((item, index) => {
            let title = item.querySelector("title").textContent;     
            let pubDate = new Date(item.querySelector("pubDate").textContent).toLocaleDateString();
            let fullDescription = item.querySelector("description").textContent;

            // Bild holen
            let imageTag = item.querySelector("image");
            let imageUrl = imageTag ? imageTag.textContent : "https://example.com/default-image.jpg"; // Fallback-Bild

            // HTML dekodieren
            let textarea = document.createElement("textarea");
            textarea.innerHTML = fullDescription;
            let decodedDescription = textarea.value;

            // Autor holen (Falls vorhanden, ansonsten "Der Autor" verwenden)
            let author = item.querySelector("dc\\:creator") ? item.querySelector("dc\\:creator").textContent : "Der Autor";

            // Vorschau: 150 Zeichen
            let previewLength = 150;
            let preview = decodedDescription.slice(0, previewLength);
            if (decodedDescription.length > previewLength) {
                preview += "...";
            }

            // Kategorien und Tags
            let categories = [];
            let tags = [];
            item.querySelectorAll("category").forEach(cat => {
                if (cat.getAttribute("domain") === "tags") {
                    tags.push(cat.textContent);
                } else {
                    categories.push(cat.textContent);
                }
            });

            let categoryText = categories.length ? categories.join(", ") : "Allgemein";
            let tagsText = tags.length ? tags.join(", ") : "Keine Tags";

            // Speichern
            window.fullArticles[index] = decodedDescription.replace(/<\/p>/g, '</p><div style="margin-bottom: 16px;"></div>');
            window.previews[index] = `
                <div style="margin-bottom: 10px;">${preview}</div>
                <a href="javascript:void(0);" onclick="showFullArticle(${index})" 
                   style="color:#0056b3; text-decoration:none; display:inline-block; margin-top:10px;"> weiterlesen &raquo;</a>
                <div style="height:20px;"></div>
            `;

            // Füge einen Eintrag im Inhaltsverzeichnis hinzu
            tocHtml += `<li><a href="javascript:void(0);" onclick="scrollToArticle(${index})" style="color:#0056b3;">${title}</a></li>`;

            // Hinzufügen der FAQ-Fragen und -Antworten zum Schema
            faqSchema.mainEntity.push({
                "@type": "Question",
                "name": title,
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": decodedDescription
                }
            });

            // Artikel-Schema hinzufügen
            const articleSchema = {
                "@type": "Article",
                "headline": title,  // Headline = Titel des Artikels
                "image": imageUrl,  // Bild aus RSS
                "author": {
                    "@type": "Organization",
                    "name": author // Hier wird der Autor hinzugefügt, entweder aus dem Feed oder als "Der Autor"
                },
                "datePublished": pubDate,
                "articleBody": decodedDescription
            };

            // HTML erzeugen
            html += `
                <li style="margin-bottom: 25px; padding-bottom: 10px; border-bottom: 1px solid #ccc;">
                    <h2 style="color:#0056b3; margin-bottom:0;" id="article-${index}">${title}</h2>
                    <p style="font-weight: bold; margin-top:0;">
                        Kategorie: <span style="font-weight: normal;">${categoryText}</span>  
                        Tags: <span style="font-weight: normal;">${tagsText}</span>
                    </p>
                    <p style="font-weight: bold; margin-bottom: 20px;">
                        Veröffentlicht am: <span style="font-weight: normal;">${pubDate}</span>
                    </p>
                    ${imageUrl ? `<img src="${imageUrl}" alt="${title}" 
                         style="width:100%; max-width:1199px; height:130px; object-fit:cover; border-radius:10px; margin-bottom:20px; margin-top:20px; cursor:pointer;" onclick="showFullArticle(${index})">` : ""}
                    <div id="preview-${index}">
                        ${window.previews[index]}
                    </div>
                </li>
            `;

            // Füge das JSON-LD für Artikel hinzu
            const scriptTag = document.createElement("script");
            scriptTag.type = "application/ld+json";
            scriptTag.innerHTML = JSON.stringify(articleSchema);
            document.head.appendChild(scriptTag);

        });

        tocHtml += "</ul>";

        // Inhaltsverzeichnis oben anzeigen
        document.getElementById("rss-toc").innerHTML = tocHtml;

        html += "</ul>";
        document.getElementById("rss-feed").innerHTML = html;

        // Füge das FAQ Schema als JSON-LD in den <head>-Bereich ein
        const faqScriptTag = document.createElement("script");
        faqScriptTag.type = "application/ld+json";
        faqScriptTag.innerHTML = JSON.stringify(faqSchema);
        document.head.appendChild(faqScriptTag);

    } catch (error) {
        document.getElementById("rss-feed").innerHTML = "Fehler beim Laden des Feeds.";
    }
}

// Funktion, um zu einem Artikel zu scrollen
function scrollToArticle(index) {
    const element = document.getElementById(`article-${index}`);
    window.scrollTo({
        top: element.offsetTop - 100, // Etwas Abstand nach oben für Sichtbarkeit
        behavior: 'smooth' // Weiches Scrollen
    });
}

// Vorschau durch vollständigen Artikel ersetzen
function showFullArticle(index) {
    const previewDiv = document.getElementById(`preview-${index}`);
    previewDiv.innerHTML = `
    <div>${window.fullArticles[index]}</div>
    <a href="javascript:void(0);" onclick="collapseArticle(${index})" 
       style="color:#0056b3; text-decoration:none; display:inline-block; margin-top:10px;">« minimieren</a>
    <div style="height:20px;"></div>
`;

}

// Volle Ansicht zurück auf Vorschau
function collapseArticle(index) {
    const previewDiv = document.getElementById(`preview-${index}`);
    previewDiv.innerHTML = window.previews[index];
}

window.onload = loadRSS;
</script>

<div id="rss-toc" style="margin-bottom: 20px;"></div>
<div id="rss-feed">Lade News...</div>