{"id":543,"date":"2025-06-06T12:35:25","date_gmt":"2025-06-06T12:35:25","guid":{"rendered":"https:\/\/ai-business.ch\/blog\/"},"modified":"2025-07-15T19:50:13","modified_gmt":"2025-07-15T19:50:13","slug":"blog","status":"publish","type":"page","link":"https:\/\/ai-business.ch\/de\/blog\/","title":{"rendered":"Blog"},"content":{"rendered":"\n<div id=\"blog-listing-block_4cc1006030c791c17ebe5af934dbec07\" class=\"blog-listing-container \">\n\n    <div class=\"blog-listing-container__wrapper\">\n        <div class=\"blog-listing-container__wrapper-header\">\n            <!-- Search Section -->\n            <div class=\"search-section\">\n                <div class=\"search-input-container\">\n                    <input type=\"text\" id=\"blog-search\" class=\"input-search\"\n                        placeholder=\"Suche\">\n                    <button type=\"button\" class=\"button-search\">\n                        <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                                d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" \/>\n                        <\/svg>\n                    <\/button>\n                <\/div>\n            <\/div>\n\n            <!-- Categories Filter -->\n            <div class=\"categories-filter\">\n                <button type=\"button\" class=\"category-filter active\" data-category=\"all\">\n                    All                <\/button>\n                                    <button type=\"button\" class=\"category-filter\" data-category=\"ai-de\">\n                        KI                    <\/button>\n                            <\/div>\n        <\/div>\n\n        <!-- Posts Grid -->\n        <div id=\"posts-grid\" class=\"blog-listing-container__wrapper-posts\">\n            <!-- Posts will be loaded here via JavaScript -->\n        <\/div>\n\n        <!-- Pagination -->\n        <div id=\"pagination\" class=\"flex justify-center items-center gap-2\">\n            <!-- Pagination will be loaded here via JavaScript -->\n        <\/div>\n    <\/div>\n<\/div>\n\n<template id=\"post-template\">\n    <article class=\"post-card group\">\n        <a href=\"\" class=\"contents link-post\">\n            <span class=\"sr-only post-title-span\"><\/span>\n            <div class=\"col h-full\">\n                <figure class=\"post-thumbnail-figure\">\n                    <img decoding=\"async\" class=\"post-thumbnail group-hover:scale-105\" src=\"\" alt=\"\">\n                <\/figure>\n                <div class=\"post-card-content\">\n                    <div class=\"post-card-wrapper \">\n\n                        <div class=\"post-meta\">\n                            <span class=\"post-date-container\">\n                                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n                                    xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path\n                                        d=\"M15 4V2M15 4V6M15 4H10.5M3 10V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V10H3Z\"\n                                        stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" \/>\n                                    <path d=\"M3 10V6C3 4.89543 3.89543 4 5 4H7\" stroke=\"white\" stroke-width=\"1.5\"\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                                    <path d=\"M7 2V6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" \/>\n                                    <path d=\"M21 10V6C21 4.89543 20.1046 4 19 4H18.5\" stroke=\"white\" stroke-width=\"1.5\"\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                                <\/svg>\n\n                                <span class=\"post-date\"><\/span>\n                            <\/span>\n                            <span class=\"post-reading-time-container\">\n                                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n                                    xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path d=\"M9 2H15\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" \/>\n                                    <path d=\"M12 10V14\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" \/>\n                                    <path\n                                        d=\"M12 22C16.4183 22 20 18.4183 20 14C20 9.58172 16.4183 6 12 6C7.58172 6 4 9.58172 4 14C4 18.4183 7.58172 22 12 22Z\"\n                                        stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" \/>\n                                <\/svg>\n                                <span class=\"post-reading-time\"><\/span>\n                            <\/span>\n                        <\/div>\n                        <div class=\"post-title-and-excerpt\">\n                            <h3 class=\"post-title\"><\/h3>\n                            <p class=\"post-excerpt\"><\/p>\n                        <\/div>\n                    <\/div>\n                    \t\t<a href=\"\" class=\"button-animated group with-arrow-animated link-post group-hover:!w-full !no-underline !text-white md:mt-auto\">\n\t\t\t<span class=\"button-animated__container\">\n\t\t\t\t<span class=\"button-content lg:!p-[14px] group-hover:lg:!py-[14px]\">\n\t\t\t\t\t<span class=\"label-btn\">MEHR LESEN<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<svg class=\"arrow-animated group-hover:rotate-0\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M4.00001 12.0004C4.00001 11.7171 4.09601 11.4797 4.28801 11.2884C4.47935 11.0964 4.71668 11.0004 5.00001 11.0004L16.175 11.0004L11.3 6.12539C11.1 5.92539 11 5.68772 11 5.41239C11 5.13772 11.1 4.90039 11.3 4.70039C11.5 4.50039 11.7333 4.40039 12 4.40039C12.2667 4.40039 12.5 4.50039 12.7 4.70039L19.3 11.3004C19.4 11.4004 19.471 11.5087 19.513 11.6254C19.5543 11.7421 19.575 11.8671 19.575 12.0004C19.575 12.1337 19.5543 12.2631 19.513 12.3884C19.471 12.5131 19.4 12.6171 19.3 12.7004L12.7 19.3004C12.5 19.5004 12.2667 19.6004 12 19.6004C11.7333 19.6004 11.5 19.5004 11.3 19.3004C11.1 19.1004 11 18.8627 11 18.5874C11 18.3127 11.1 18.0754 11.3 17.8754L16.175 13.0004L5.00001 13.0004C4.71668 13.0004 4.47935 12.9047 4.28801 12.7134C4.09601 12.5214 4.00001 12.2837 4.00001 12.0004Z\" fill=\"white\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t<\/span>\n\t\t<\/a>\n                <\/div>\n            <\/div>\n        <\/a>\n\n    <\/article>\n<\/template>\n\n<script>\n    document.addEventListener('DOMContentLoaded', function () {\n        const postsGrid = document.getElementById('posts-grid');\n        const pagination = document.getElementById('pagination');\n        const searchInput = document.getElementById('blog-search');\n        const categoryFilters = document.querySelectorAll('.category-filter');\n        const postTemplate = document.getElementById('post-template');\n\n        let currentPage = 1;\n        let currentCategory = 'all';\n        let currentSearch = '';\n        let debounceTimer;\n\n        \/\/ Load initial posts\n        loadPosts();\n\n        \/\/ Search input handler with debounce\n        searchInput.addEventListener('input', function (e) {\n            clearTimeout(debounceTimer);\n            debounceTimer = setTimeout(() => {\n                currentSearch = e.target.value;\n                currentPage = 1;\n                loadPosts();\n            }, 500);\n        });\n\n        \/\/ Category filter handler\n        categoryFilters.forEach(button => {\n            button.addEventListener('click', function () {\n                categoryFilters.forEach(btn => btn.classList.remove('active'));\n                this.classList.add('active');\n                currentCategory = this.dataset.category;\n                currentPage = 1;\n                loadPosts();\n            });\n        });\n\n        function loadPosts() {\n            \/\/ Show loading state\n            postsGrid.innerHTML = '<div class=\"loading-state\"><\/div>';\n\n            \/\/ Build request body\n            const requestBody = {\n                page: currentPage,\n                per_page: 6,\n                lang: 'de',\n                exclude_post_id: []\n            };\n\n            if (currentCategory !== 'all') {\n                requestBody.category = currentCategory;\n            }\n\n            if (currentSearch) {\n                requestBody.search = currentSearch;\n            }\n\n            \/\/ Fetch posts from API\n            fetch('\/wp-json\/ai_business\/v1\/blog', {\n                method: 'POST',\n                headers: {\n                    'Content-Type': 'application\/json'\n                },\n                body: JSON.stringify(requestBody)\n            })\n                .then(response => response.json())\n                .then(response => {\n                    if (response.data) {\n                        renderPosts(response.data.posts);\n                        renderPagination(response.data.pagination);\n                    } else {\n                        throw new Error('Invalid response format');\n                    }\n                })\n                .catch(error => {\n                    console.error('Error loading posts:', error);\n                    postsGrid.innerHTML = '<div class=\"col-span-full text-center text-white\">Error loading posts. Please try again.<\/div>';\n                });\n        }\n\n        function renderPosts(posts) {\n            if (!posts || !posts.length) {\n                postsGrid.innerHTML = `\n                <div class=\"col-span-full text-white\">\n                    <span class=\"text-m-h4 md:text-d-h4\">\n                        Keine Beitr\u00e4ge gefunden mit dem Wort: \"${currentSearch}\"\n                    <\/span>\n                    <div class=\"mt-5\">\n                        <span class=\"text-m-h5 md:text-d-h5\">\n                            Versuchen Sie Ihre Suche mit diesen Tipps zu wiederholen:                        <\/span>\n                        <ul class=\"!mt-4 col !gap-y-4 text-m-s2\">\n                            <li class=\"\">\n                                Bitte vergewissern Sie sich, dass Sie den Suchbegriff richtig eingegeben haben.                                <\/li>\n                                <li>\n                                Verwenden Sie allgemeinere Begriffe, um Ihre Suche zu erweitern.                                <\/li>\n                                <li>\n                                Erkunden Sie unsere Kategorien, um \u00e4hnliche Artikel zu finden.                            <\/li>\n                        <\/ul>\n                    <\/div>\n                <\/div>`;\n                return;\n            }\n\n            postsGrid.innerHTML = '';\n            posts.forEach(post => {\n                const postElement = postTemplate.content.cloneNode(true);\n                const article = postElement.querySelector('article');\n\n                article.querySelectorAll('.link-post').forEach(link => link.href = post.link);\n                if (post.thumbnail) {\n                    article.querySelector('img').srcset = post.thumbnail;\n                }\n                article.querySelector('img').alt = post.title;\n                article.querySelector('img').title = post.title;\n                article.querySelector('img').loading = \"lazy\";\n                article.querySelector('img').width = \"346\";\n                article.querySelector('img').height = \"250\";\n                article.querySelector('.post-date').textContent = `${formatDate(post.post_date)}`;\n                article.querySelector('.post-reading-time').textContent = `${post.reading_time || '5 min'}`;\n                article.querySelector('.post-title').textContent = post.title;\n                article.querySelector('.post-title-span').textContent = post.title;\n                article.querySelector('.post-excerpt').textContent = post.excerpt;\n\n                postsGrid.appendChild(postElement);\n            });\n        }\n\n        function renderPagination(paginationData) {\n            const paginationElement = document.getElementById('pagination');\n\n            if (!paginationData || paginationData.total_pages <= 1) {\n                paginationElement.innerHTML = '';\n                return;\n            }\n\n            let paginationHTML = '';\n\n            \/\/ Previous button\n            paginationHTML += `\n            <button type=\"button\" \n                    class=\"pagination-button ${paginationData.current_page === 1 ? 'disabled' : ''}\"\n                    ${paginationData.current_page === 1 ? 'disabled' : ''}\n                    data-page=\"${paginationData.current_page - 1}\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M14.6296 7.24879C14.8538 7.3312 15 7.52534 15 7.74067L15 16.2592C15 16.4745 14.8538 16.6686 14.6296 16.751C14.4054 16.8334 14.1473 16.7879 13.9757 16.6357L9.17574 12.3764C8.94142 12.1685 8.94142 11.8314 9.17574 11.6235L13.9757 7.3642C14.1473 7.21194 14.4054 7.16639 14.6296 7.24879Z\" fill=\"white\"\/>\n            <\/svg>\n            <\/button>\n        `;\n\n            \/\/ Page numbers\n            for (let i = 1; i <= paginationData.total_pages; i++) {\n                if (\n                    i === 1 || \/\/ First page\n                    i === paginationData.total_pages || \/\/ Last page\n                    (i >= paginationData.current_page - 1 && i <= paginationData.current_page + 1) \/\/ Pages around current\n                ) {\n                    paginationHTML += `\n                    <button type=\"button\" \n                            class=\"pagination-button ${i === paginationData.current_page ? 'active' : ''}\"\n                            data-page=\"${i}\">\n                        ${i}\n                    <\/button>\n                `;\n                } else if (\n                    (i === paginationData.current_page - 2 && paginationData.current_page > 3) ||\n                    (i === paginationData.current_page + 2 && paginationData.current_page < paginationData.total_pages - 2)\n                ) {\n                    paginationHTML += '<span class=\"px-2 text-white\">...<\/span>';\n                }\n            }\n\n            \/\/ Next button\n            paginationHTML += `\n            <button type=\"button\" \n                    class=\"pagination-button ${paginationData.current_page === paginationData.total_pages ? 'disabled' : ''}\"\n                    ${paginationData.current_page === paginationData.total_pages ? 'disabled' : ''}\n                    data-page=\"${paginationData.current_page + 1}\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.37039 16.9577C9.14618 16.8717 9 16.6691 9 16.4444L9 7.55558C9 7.33084 9.14618 7.12833 9.37039 7.04233C9.59459 6.95633 9.85267 7.00381 10.0243 7.1627L14.8243 11.6071C15.0586 11.8241 15.0586 12.1759 14.8243 12.3928L10.0243 16.8373C9.85267 16.9962 9.59459 17.0437 9.37039 16.9577Z\" fill=\"white\"\/>\n                    <\/svg>\n            <\/button>\n        `;\n\n            paginationElement.innerHTML = paginationHTML;\n\n            \/\/ Add click handlers to pagination buttons\n            paginationElement.querySelectorAll('.pagination-button:not(.disabled)').forEach(button => {\n                button.addEventListener('click', function () {\n                    currentPage = parseInt(this.dataset.page, 10);\n                    loadPosts();\n                    window.scrollTo({\n                        top: postsGrid.offsetTop - 100,\n                        behavior: 'smooth'\n                    });\n                });\n            });\n        }\n\n        function formatDate(dateString) {\n            \/\/ Handle undefined, null or invalid date string\n            if (!dateString) {\n                return '';\n            }\n\n            try {\n                \/\/ Parse date in format: YYYY-MM-DD HH:mm:ss\n                const [datePart] = dateString.split(' ');\n                const [year, month, day] = datePart.split('-').map(num => parseInt(num, 10));\n\n                const date = new Date(year, month - 1, day); \/\/ month is 0-based in JavaScript\n\n                \/\/ Check if date is valid\n                if (isNaN(date.getTime())) {\n                    return '';\n                }\n\n                const parts = new Intl.DateTimeFormat('en-US', {\n                    year: 'numeric',\n                    month: 'long',\n                    day: 'numeric'\n                }).formatToParts(date);\n\n                const dayPart = parts.find(p => p.type === 'day')?.value;\n                const monthPart = parts.find(p => p.type === 'month')?.value;\n                const yearPart = parts.find(p => p.type === 'year')?.value;\n\n                return `${dayPart} ${monthPart} ${yearPart}`;\n            } catch (error) {\n                console.error('Error formatting date:', error);\n                return '';\n            }\n        }\n    });\n<\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-blog.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-543","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/ai-business.ch\/de\/wp-json\/wp\/v2\/pages\/543","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ai-business.ch\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ai-business.ch\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ai-business.ch\/de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ai-business.ch\/de\/wp-json\/wp\/v2\/comments?post=543"}],"version-history":[{"count":0,"href":"https:\/\/ai-business.ch\/de\/wp-json\/wp\/v2\/pages\/543\/revisions"}],"wp:attachment":[{"href":"https:\/\/ai-business.ch\/de\/wp-json\/wp\/v2\/media?parent=543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}