{"id":46,"date":"2026-10-10T14:26:56","date_gmt":"2026-10-10T14:26:56","guid":{"rendered":"https:\/\/bsolution.me\/nl\/blog\/"},"modified":"2026-10-10T14:50:00","modified_gmt":"2026-10-10T14:50:00","slug":"blog","status":"publish","type":"page","link":"https:\/\/bsolution.me\/nl\/blog\/","title":{"rendered":"Artikelen"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"display: flex; justify-content: center; width: 100%;\">\n\n<div style=\"width: 100%; max-width: 1100px; margin: 0 auto;\">\n<!-- ===================================================\n   Bsolution Posts Directory \u2014 WPCode-Ready Snippet\n   \u05de\u05e6\u05d9\u05d2 \u05d0\u05ea \u05db\u05dc \u05d4\u05de\u05d0\u05de\u05e8\u05d9\u05dd (post type=post) \u05de\u05d4-REST API\n   \u05d1\u05e2\u05d9\u05e6\u05d5\u05d1 Gold Standard: \u05d7\u05d9\u05e4\u05d5\u05e9 + \u05e4\u05d9\u05dc\u05d8\u05e8 \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea + Pagination\n   =================================================== -->\n<style>\n#bso-posts {\n  font-family: 'Heebo', system-ui, sans-serif;\n  direction: ltr;\n  --accent:      #4361ee;\n  --accent-soft: rgba(67,97,238,0.09);\n  --border:      rgba(17,24,39,0.09);\n  --card:        #fff;\n  --bg:          #f8fafc;\n  --muted:       #64748b;\n  --text:        #111827;\n  --shadow:      0 4px 16px rgba(0,0,0,0.07);\n  --radius:      16px;\n  color: var(--text);\n  padding: 12px 24px 48px;\n  max-width: 1100px;\n  margin: 0 auto;\n  box-sizing: border-box;\n}\n@media (max-width: 600px) {\n  #bso-posts { padding: 8px 14px 32px; }\n}\nhtml.dark-theme #bso-posts,\n[data-theme=\"dark\"] #bso-posts {\n  --border: rgba(255,255,255,0.10);\n  --card:   rgba(28,28,30,0.9);\n  --bg:     rgba(17,24,39,0.6);\n  --muted:  #9ca3af;\n  --text:   #f5f5f7;\n  --shadow: 0 4px 16px rgba(0,0,0,0.35);\n}\n\n\/* \u2500\u2500 Hero \u2500\u2500 *\/\n#bso-posts .p-hero {\n  text-align: center;\n  padding: 40px 20px 36px;\n  background: linear-gradient(135deg, var(--accent-soft), transparent 70%);\n  border: 1px solid var(--border);\n  border-radius: 24px;\n  margin-bottom: 28px;\n}\n#bso-posts .p-hero h2 {\n  font-size: clamp(1.7rem, 4vw, 2.4rem);\n  font-weight: 800;\n  margin: 0 0 10px;\n  letter-spacing: -.02em;\n  color: var(--text);\n}\n#bso-posts .p-hero p {\n  color: var(--muted);\n  font-size: 1rem;\n  margin: 0 auto 18px;\n  max-width: 560px;\n  line-height: 1.7;\n}\n#bso-posts .p-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  background: var(--accent);\n  color: #fff;\n  padding: 7px 18px;\n  border-radius: 999px;\n  font-size: .85rem;\n  font-weight: 700;\n}\n\n\/* \u2500\u2500 Controls bar (search + category filter) \u2500\u2500 *\/\n#bso-posts .p-controls {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  margin-bottom: 28px;\n  align-items: center;\n}\n#bso-posts .p-search-wrap {\n  position: relative;\n  flex: 1 1 240px;\n}\n#bso-posts #pSearch {\n  width: 100%;\n  padding: 12px 42px 12px 16px;\n  border-radius: 12px;\n  border: 1.5px solid var(--border);\n  background: var(--card);\n  color: var(--text);\n  font-family: inherit;\n  font-size: .97rem;\n  box-sizing: border-box;\n  outline: none;\n  box-shadow: var(--shadow);\n  transition: border-color .2s, box-shadow .2s;\n}\n#bso-posts #pSearch:focus {\n  border-color: var(--accent);\n  box-shadow: 0 0 0 3px rgba(67,97,238,0.13);\n}\n#bso-posts .p-search-icon {\n  position: absolute;\n  left: 13px;\n  top: 50%;\n  transform: translateY(-50%);\n  opacity: .38;\n  pointer-events: none;\n  font-size: 1rem;\n}\n\n\/* Category chips *\/\n#bso-posts .p-cats {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  flex: 0 0 auto;\n}\n#bso-posts .p-cat-chip {\n  padding: 7px 15px;\n  border-radius: 999px;\n  border: 1.5px solid var(--border);\n  background: var(--card);\n  color: var(--muted);\n  font-size: .83rem;\n  font-weight: 700;\n  cursor: pointer;\n  transition: background .18s, color .18s, border-color .18s;\n  font-family: inherit;\n}\n#bso-posts .p-cat-chip:hover { background: var(--accent-soft); color: var(--accent); border-color: rgba(67,97,238,.25); }\n#bso-posts .p-cat-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }\n\n\/* \u2500\u2500 Skeleton \u2500\u2500 *\/\n#bso-posts .p-skeleton { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 20px; }\n#bso-posts .p-skel-card {\n  height: 320px;\n  border-radius: var(--radius);\n  background: linear-gradient(90deg, var(--bg) 25%, var(--border) 50%, var(--bg) 75%);\n  background-size: 200% 100%;\n  animation: bsoPShimmer 1.3s infinite;\n  border: 1px solid var(--border);\n}\n@keyframes bsoPShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }\n\n\/* \u2500\u2500 Grid \u2500\u2500 *\/\n#bso-posts .p-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 20px;\n  margin-bottom: 40px;\n}\n\n\/* \u2500\u2500 Card \u2500\u2500 *\/\n#bso-posts .p-card {\n  display: flex;\n  flex-direction: column;\n  background: var(--card);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow);\n  text-decoration: none !important;\n  color: var(--text) !important;\n  overflow: hidden;\n  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;\n}\n#bso-posts .p-card:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 16px 32px rgba(0,0,0,0.11);\n  border-color: rgba(67,97,238,0.3);\n}\n#bso-posts .p-card-img {\n  width: 100%;\n  aspect-ratio: 16\/9;\n  overflow: hidden;\n  background: var(--bg);\n  position: relative;\n}\n#bso-posts .p-card-img img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform .45s ease;\n  display: block;\n}\n#bso-posts .p-card:hover .p-card-img img { transform: scale(1.06); }\n\n\/* placeholder when no image *\/\n#bso-posts .p-card-img-placeholder {\n  width: 100%;\n  aspect-ratio: 16\/9;\n  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg) 100%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 2.8rem;\n  flex-shrink: 0;\n}\n\n#bso-posts .p-card-body {\n  padding: 18px 18px 0;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n#bso-posts .p-card-meta {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n#bso-posts .p-cat-label {\n  font-size: .76rem;\n  font-weight: 700;\n  color: var(--accent);\n  background: var(--accent-soft);\n  padding: 3px 10px;\n  border-radius: 999px;\n}\n\n#bso-posts .p-card-title {\n  font-size: 1.05rem;\n  font-weight: 800;\n  margin: 0;\n  line-height: 1.4;\n  color: var(--text);\n  transition: color .18s;\n}\n#bso-posts .p-card:hover .p-card-title { color: var(--accent); }\n#bso-posts .p-card-excerpt {\n  font-size: .87rem;\n  line-height: 1.65;\n  color: var(--muted);\n  margin: 0;\n  flex: 1;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n#bso-posts .p-card-foot {\n  padding: 12px 18px 14px;\n  border-top: 1px solid var(--border);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: .82rem;\n  color: var(--muted);\n  margin-top: auto;\n}\n#bso-posts .p-read-more {\n  font-weight: 700;\n  color: var(--accent) !important;\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  transition: gap .15s;\n}\n#bso-posts .p-card:hover .p-read-more { gap: 9px; }\n\n\/* \u2500\u2500 Pagination \u2500\u2500 *\/\n#bso-posts .p-pagination {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n  margin-top: 8px;\n}\n#bso-posts .p-page-btn {\n  min-width: 42px;\n  height: 42px;\n  padding: 0 12px;\n  border-radius: 10px;\n  border: 1.5px solid var(--border);\n  background: var(--card);\n  color: var(--text);\n  font-family: inherit;\n  font-size: .92rem;\n  font-weight: 700;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: background .17s, border-color .17s, transform .17s;\n  text-decoration: none !important;\n}\n#bso-posts .p-page-btn:hover { background: var(--accent-soft); border-color: rgba(67,97,238,.3); transform: translateY(-2px); }\n#bso-posts .p-page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }\n#bso-posts .p-page-btn:disabled { opacity: .35; cursor: default; transform: none; }\n\n\/* \u2500\u2500 No results \u2500\u2500 *\/\n#bso-posts .p-no-res {\n  display: none;\n  text-align: center;\n  padding: 60px 20px;\n  color: var(--muted);\n  border: 1px dashed var(--border);\n  border-radius: var(--radius);\n  background: var(--bg);\n}\n#bso-posts .p-no-res.show { display: block; }\n\n\/* \u2500\u2500 Error \u2500\u2500 *\/\n#bso-posts .p-error { text-align: center; padding: 50px; color: var(--muted); }\n\n\/* \u2500\u2500 Responsive \u2500\u2500 *\/\n@media (max-width: 700px) {\n  #bso-posts .p-grid { grid-template-columns: 1fr; gap: 16px; }\n  #bso-posts .p-skeleton { grid-template-columns: 1fr; }\n  #bso-posts .p-controls { flex-direction: column; }\n  #bso-posts .p-search-wrap { width: 100%; }\n}\n<\/style>\n\n<div id=\"bso-posts\">\n\n  <!-- Hero -->\n  <div class=\"p-hero\">\n    <h2>\ud83d\udcf0 Alle Artikelen<\/h2>\n    <p>Gidsen, tips en inzichten voor bedrijven \u2014 alle onderwerpen op \u00e9\u00e9n plek.<\/p>\n    <div class=\"p-badge\" id=\"pCount\">\u23f3 Laden&#8230;<\/div>\n  <\/div>\n\n  <!-- Controls: Search + Category Filter -->\n  <div class=\"p-controls\">\n    <div class=\"p-search-wrap\">\n      <input type=\"search\" id=\"pSearch\" placeholder=\"Zoek artikel... (bijv. Marketing, SEO, Automatisering)\" aria-label=\"\u05d7\u05d9\u05e4\u05d5\u05e9 artikelen\" \/>\n      <span class=\"p-search-icon\">\ud83d\udd0d<\/span>\n    <\/div>\n    <div class=\"p-cats\" id=\"pCats\">\n      <!-- chips injected by JS -->\n    <\/div>\n  <\/div>\n\n  <!-- No results -->\n  <div class=\"p-no-res\" id=\"pNoRes\">\n    <p style=\"font-size:2rem;margin:0 0 10px\">\ud83d\udd0d<\/p>\n    <p style=\"font-weight:800;margin:0 0 6px\">Geen overeenkomende artikelen gevonden<\/p>\n    <p style=\"margin:0\">Probeer andere zoektermen of selecteer een andere categorie<\/p>\n  <\/div>\n\n  <!-- Skeleton loader -->\n  <div id=\"pSkeleton\" class=\"p-skeleton\">\n    <div class=\"p-skel-card\"><\/div><div class=\"p-skel-card\"><\/div>\n    <div class=\"p-skel-card\"><\/div><div class=\"p-skel-card\"><\/div>\n    <div class=\"p-skel-card\"><\/div><div class=\"p-skel-card\"><\/div>\n  <\/div>\n\n  <!-- Posts grid -->\n  <div id=\"pGrid\" class=\"p-grid\" style=\"display:none;\"><\/div>\n\n  <!-- Pagination -->\n  <div class=\"p-pagination\" id=\"pPagination\"><\/div>\n\n<\/div>\n\n<script>\n(function () {\n  'use strict';\n\n  \/* \u2500\u2500 \u05e7\u05d5\u05e0\u05e4\u05d9\u05d2\u05d5\u05e8\u05e6\u05d9\u05d4 \u2500\u2500 *\/\n  var API_BASE      = 'https:\/\/bsolution.me\/nl\/wp-json\/wp\/v2\/posts';\n  var API_CATS      = 'https:\/\/bsolution.me\/nl\/wp-json\/wp\/v2\/categories';\n  var PER_PAGE      = 9;   \/* \u05db\u05e8\u05d8\u05d9\u05e1\u05d9\u05d5\u05ea \u05dc\u05e2\u05de\u05d5\u05d3 *\/\n  var FETCH_BATCH   = 100; \/* \u05db\u05de\u05d5\u05ea \u05e9\u05dc\u05d9\u05e4\u05d4 \u05de-API *\/\n\n  \/* \u2500\u2500 State \u2500\u2500 *\/\n  var allPosts      = [];  \/* \u05db\u05dc \u05d4\u05e4\u05d5\u05e1\u05d8\u05d9\u05dd \u05dc\u05d0\u05d7\u05e8 \u05e9\u05d0\u05d9\u05dc\u05ea\u05d4 *\/\n  var filteredPosts = [];  \/* \u05dc\u05d0\u05d7\u05e8 \u05e1\u05d9\u05e0\u05d5\u05df *\/\n  var catMap        = {};  \/* id \u2192 name *\/\n  var currentPage   = 1;\n  var activeCat     = 0;   \/* 0 = Alles *\/\n  var searchQuery   = '';\n\n  \/* \u2500\u2500 \u05d0\u05dc\u05de\u05e0\u05d8\u05d9\u05dd \u2500\u2500 *\/\n  var $count      = document.getElementById('pCount');\n  var $skeleton   = document.getElementById('pSkeleton');\n  var $grid       = document.getElementById('pGrid');\n  var $noRes      = document.getElementById('pNoRes');\n  var $pagination = document.getElementById('pPagination');\n  var $catsWrap   = document.getElementById('pCats');\n  var $search     = document.getElementById('pSearch');\n\n  \/* \u2500\u2500 \u05e2\u05d6\u05e8\u05d9\u05dd \u2500\u2500 *\/\n  function esc(s) {\n    return String(s)\n      .replace(\/&\/g,'&amp;').replace(\/\"\/g,'&quot;')\n      .replace(\/<\/g,'&lt;').replace(\/>\/g,'&gt;');\n  }\n\n  function formatDate(iso) {\n    var d = new Date(iso);\n    return d.toLocaleDateString('nl-NL', { year:'numeric', month:'long', day:'numeric' });\n  }\n\n  function readingTime(content) {\n    var words = (content || '').replace(\/<[^>]+>\/g,'').split(\/\\s+\/).length;\n    return Math.max(1, Math.ceil(words \/ 200));\n  }\n\n  \/* \u2500\u2500 \u05e9\u05dc\u05d9\u05e4\u05ea \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea \u2500\u2500 *\/\n  function fetchCategories() {\n    return fetch(API_CATS + '?per_page=100&_fields=id,name', { cache: 'no-store' })\n      .then(function (r) { return r.json(); })\n      .then(function (cats) {\n        cats.forEach(function (c) { catMap[c.id] = c.name; });\n      })\n      .catch(function () {}); \/* \u05dc\u05d0 \u05e7\u05e8\u05d9\u05d8\u05d9 *\/\n  }\n\n  \/* \u2500\u2500 \u05e9\u05dc\u05d9\u05e4\u05ea \u05db\u05dc \u05d4\u05e4\u05d5\u05e1\u05d8\u05d9\u05dd (pagination) \u2500\u2500 *\/\n  function fetchAllPosts() {\n    var url = API_BASE + '?status=publish&per_page=' + FETCH_BATCH +\n              '&page=1&_fields=id,title,link,excerpt,date,categories,featured_media,_links';\n    return fetch(url, { cache: 'no-store' })\n      .then(function (r) {\n        var totalPages = parseInt(r.headers.get('X-WP-TotalPages') || '1', 10);\n        return r.json().then(function (first) {\n          if (totalPages <= 1) return first;\n          var reqs = [];\n          for (var p = 2; p <= totalPages; p++) {\n            reqs.push(\n              fetch(API_BASE + '?status=publish&#038;per_page=' + FETCH_BATCH +\n                    '&#038;page=' + p + '&#038;_fields=id,title,link,excerpt,date,categories,featured_media,_links')\n              .then(function (r2) { return r2.json(); })\n            );\n          }\n          return Promise.all(reqs).then(function (rest) {\n            return first.concat([].concat.apply([], rest));\n          });\n        });\n      });\n  }\n\n  \/* \u2500\u2500 \u05e7\u05d1\u05dc\u05ea \u05ea\u05de\u05d5\u05e0\u05d4 \u05de\u05d9\u05d5\u05e6\u05d2\u05ea \u2500\u2500 *\/\n  function getThumb(post) {\n    \/* \u05e0\u05e1\u05d4 \u05d1-_embedded \u05d0\u05dd \u05e7\u05d9\u05d9\u05dd, \u05d0\u05d7\u05e8\u05ea \u05d4\u05d7\u05d6\u05e8 \u05e8\u05d9\u05e7 *\/\n    try {\n      var media = post._embedded &#038;&#038; post._embedded['wp:featuredmedia'];\n      if (media &#038;&#038; media[0] &#038;&#038; media[0].source_url) return media[0].source_url;\n    } catch(e) {}\n    return '';\n  }\n\n  \/* \u2500\u2500 \u05e9\u05dd \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4 \u05e8\u05d0\u05e9\u05d5\u05e0\u05d4 \u2500\u2500 *\/\n  function getCatName(post) {\n    if (post.categories &#038;&#038; post.categories.length) {\n      return catMap[post.categories[0]] || '';\n    }\n    return '';\n  }\n\n  \/* \u2500\u2500 \u05d1\u05e0\u05d9\u05d9\u05ea \u05db\u05e8\u05d8\u05d9\u05e1\u05d9\u05d9\u05d4 \u2500\u2500 *\/\n  function buildCard(post) {\n    var title   = (post.title &#038;&#038; post.title.rendered ? post.title.rendered : '').replace(\/<[^>]+>\/g,'');\n    var excerpt = (post.excerpt && post.excerpt.rendered ? post.excerpt.rendered : '').replace(\/<[^>]+>\/g,'').trim();\n    var date    = formatDate(post.date);\n    var cat     = getCatName(post);\n    var thumb   = getThumb(post);\n    var rt      = readingTime(post.excerpt && post.excerpt.rendered ? post.excerpt.rendered : '');\n    var url     = post.link || '#';\n\n    var imgHtml;\n    if (thumb) {\n      imgHtml = '<div class=\"p-card-img\"><img decoding=\"async\" src=\"' + esc(thumb) + '\" alt=\"' + esc(title) + '\" loading=\"lazy\"><\/div>';\n    } else {\n      imgHtml = '<div class=\"p-card-img-placeholder\">\ud83d\udcf0<\/div>';\n    }\n\n    return '<a class=\"p-card\" href=\"' + esc(url) + '\" aria-label=\"' + esc(title) + '\"' +\n      ' data-title=\"' + esc(title.toLowerCase()) + '\"' +\n      ' data-excerpt=\"' + esc(excerpt.toLowerCase()) + '\"' +\n      ' data-cat=\"' + esc(post.categories ? post.categories[0] : 0) + '\">' +\n      imgHtml +\n      '<div class=\"p-card-body\">' +\n        '<div class=\"p-card-meta\">' +\n          (cat ? '<span class=\"p-cat-label\">' + esc(cat) + '<\/span>' : '') +\n\n        '<\/div>' +\n        '<h3 class=\"p-card-title\">' + esc(title) + '<\/h3>' +\n        (excerpt ? '<p class=\"p-card-excerpt\">' + esc(excerpt) + '<\/p>' : '') +\n      '<\/div>' +\n      '<div class=\"p-card-foot\">' +\n        '<span>' + rt + ' min leestijd<\/span>' +\n        '<span class=\"p-read-more\">Lees meer \u2192<\/span>' +\n      '<\/div>' +\n    '<\/a>';\n  }\n\n  \/* \u2500\u2500 render \u05e2\u05de\u05d5\u05d3 \u05e0\u05d5\u05db\u05d7\u05d9 \u2500\u2500 *\/\n  function renderPage() {\n    var start = (currentPage - 1) * PER_PAGE;\n    var slice = filteredPosts.slice(start, start + PER_PAGE);\n\n    if (!slice.length) {\n      $grid.style.display = 'none';\n      $noRes.classList.add('show');\n      $pagination.innerHTML = '';\n      return;\n    }\n\n    $noRes.classList.remove('show');\n    $grid.innerHTML = slice.map(buildCard).join('');\n    $grid.style.display = 'grid';\n    renderPagination();\n    window.scrollTo({ top: 0, behavior: 'smooth' });\n  }\n\n  \/* \u2500\u2500 render pagination \u2500\u2500 *\/\n  function renderPagination() {\n    var totalPages = Math.ceil(filteredPosts.length \/ PER_PAGE);\n    if (totalPages <= 1) { $pagination.innerHTML = ''; return; }\n\n    var html = '';\n    html += '<button class=\"p-page-btn\" id=\"pPrev\" aria-label=\"Vorige pagina\"' +\n            (currentPage === 1 ? ' disabled' : '') + '>\u2192<\/button>';\n\n    \/* \u05de\u05e1\u05e4\u05e8\u05d9\u05dd: \u05ea\u05de\u05d9\u05d3 \u05e8\u05d0\u05e9\u05d5\u05df, \u05d0\u05d7\u05e8\u05d5\u05df, \u00b12 \u05e1\u05d1\u05d9\u05d1 \u05d4\u05e0\u05d5\u05db\u05d7\u05d9 *\/\n    var pages = [];\n    for (var i = 1; i <= totalPages; i++) {\n      if (i === 1 || i === totalPages || Math.abs(i - currentPage) <= 2) {\n        pages.push(i);\n      }\n    }\n    var prev = 0;\n    pages.forEach(function (n) {\n      if (prev &#038;&#038; n - prev > 1) html += '<span class=\"p-page-btn\" style=\"pointer-events:none;opacity:.4\">\u2026<\/span>';\n      html += '<button class=\"p-page-btn' + (n === currentPage ? ' active' : '') +\n              '\" data-page=\"' + n + '\">' + n + '<\/button>';\n      prev = n;\n    });\n\n    html += '<button class=\"p-page-btn\" id=\"pNext\" aria-label=\"Volgende pagina\"' +\n            (currentPage === totalPages ? ' disabled' : '') + '>\u2190<\/button>';\n    $pagination.innerHTML = html;\n\n    \/* Events *\/\n    $pagination.querySelectorAll('[data-page]').forEach(function (btn) {\n      btn.addEventListener('click', function () {\n        currentPage = parseInt(this.dataset.page, 10);\n        renderPage();\n      });\n    });\n    var prev_btn = document.getElementById('pPrev');\n    var next_btn = document.getElementById('pNext');\n    if (prev_btn) prev_btn.addEventListener('click', function () {\n      if (currentPage > 1) { currentPage--; renderPage(); }\n    });\n    if (next_btn) next_btn.addEventListener('click', function () {\n      var total = Math.ceil(filteredPosts.length \/ PER_PAGE);\n      if (currentPage < total) { currentPage++; renderPage(); }\n    });\n  }\n\n  \/* \u2500\u2500 \u05e1\u05d9\u05e0\u05d5\u05df \u2500\u2500 *\/\n  function applyFilters() {\n    var q = searchQuery.trim().toLowerCase();\n    filteredPosts = allPosts.filter(function (post) {\n      var catMatch = !activeCat || (post.categories &#038;&#038; post.categories.indexOf(activeCat) !== -1);\n      if (!catMatch) return false;\n      if (!q) return true;\n      var t = (post.title &#038;&#038; post.title.rendered ? post.title.rendered : '').replace(\/<[^>]+>\/g,'').toLowerCase();\n      var e = (post.excerpt && post.excerpt.rendered ? post.excerpt.rendered : '').replace(\/<[^>]+>\/g,'').toLowerCase();\n      return t.includes(q) || e.includes(q);\n    });\n    currentPage = 1;\n    renderPage();\n  }\n\n  \/* \u2500\u2500 Category chips \u2500\u2500 *\/\n  function buildCatChips() {\n    \/* \u05de\u05d5\u05e6\u05d0 \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea \u05e9\u05de\u05d5\u05e4\u05d9\u05e2\u05d5\u05ea \u05d1\u05e4\u05d5\u05e2\u05dc \u05d1\u05e4\u05d5\u05e1\u05d8\u05d9\u05dd *\/\n    var usedCats = {};\n    allPosts.forEach(function (p) {\n      (p.categories || []).forEach(function (cid) {\n        if (catMap[cid]) usedCats[cid] = catMap[cid];\n      });\n    });\n\n    var ids = Object.keys(usedCats);\n    if (!ids.length) return;\n\n    var html = '<button class=\"p-cat-chip active\" data-cat=\"0\">Alles<\/button>';\n    ids.forEach(function (id) {\n      html += '<button class=\"p-cat-chip\" data-cat=\"' + id + '\">' + esc(usedCats[id]) + '<\/button>';\n    });\n    $catsWrap.innerHTML = html;\n\n    $catsWrap.querySelectorAll('.p-cat-chip').forEach(function (btn) {\n      btn.addEventListener('click', function () {\n        $catsWrap.querySelectorAll('.p-cat-chip').forEach(function (b) { b.classList.remove('active'); });\n        this.classList.add('active');\n        activeCat = parseInt(this.dataset.cat, 10);\n        applyFilters();\n      });\n    });\n  }\n\n  \/* \u2500\u2500 Search \u2500\u2500 *\/\n  $search.addEventListener('input', function () {\n    searchQuery = this.value;\n    applyFilters();\n  });\n\n  \/* \u2500\u2500 Init \u2500\u2500 *\/\n  Promise.all([fetchCategories(), fetchAllPosts()])\n    .then(function (results) {\n      allPosts = results[1];\n      filteredPosts = allPosts.slice();\n\n      $skeleton.style.display = 'none';\n\n      $count.textContent = '\u2705 ' + allPosts.length + ' artikelen';\n      buildCatChips();\n      renderPage();\n    })\n    .catch(function (err) {\n      $skeleton.style.display = 'none';\n      $grid.innerHTML = '<div class=\"p-error\"><p>\u26a0\ufe0f Fout bij laden van artikelen.<br><small>' + esc(err.message) + '<\/small><\/p><\/div>';\n      $grid.style.display = 'block';\n      console.error('bso-posts:', err);\n    });\n\n})();\n<\/script>\n\n\n<\/div>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_yoast_wpseo_title":"Artikelen - Bsolution","_yoast_wpseo_metadesc":"Gidsen, tips en inzichten voor bedrijven \u2014 alle onderwerpen op \u00e9\u00e9n plek.","footnotes":""},"class_list":["post-46","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Artikelen - Bsolution<\/title>\n<meta name=\"description\" content=\"Gidsen, tips en inzichten voor bedrijven \u2014 alle onderwerpen op \u00e9\u00e9n plek.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bsolution.me\/nl\/blog\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Artikelen - Bsolution\" \/>\n<meta property=\"og:description\" content=\"Gidsen, tips en inzichten voor bedrijven \u2014 alle onderwerpen op \u00e9\u00e9n plek.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bsolution.me\/nl\/blog\/\" \/>\n<meta property=\"og:site_name\" content=\"Gratis Zakelijke Tools\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-10T14:50:00+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/bsolution.me\\\/nl\\\/blog\\\/\",\"url\":\"https:\\\/\\\/bsolution.me\\\/nl\\\/blog\\\/\",\"name\":\"Artikelen - Bsolution\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/bsolution.me\\\/nl\\\/#website\"},\"datePublished\":\"2026-10-10T14:26:56+00:00\",\"dateModified\":\"2026-10-10T14:50:00+00:00\",\"description\":\"Gidsen, tips en inzichten voor bedrijven \u2014 alle onderwerpen op \u00e9\u00e9n plek.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/bsolution.me\\\/nl\\\/blog\\\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/bsolution.me\\\/nl\\\/blog\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/bsolution.me\\\/nl\\\/blog\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/bsolution.me\\\/nl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Artikelen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/bsolution.me\\\/nl\\\/#website\",\"url\":\"https:\\\/\\\/bsolution.me\\\/nl\\\/\",\"name\":\"Gratis Zakelijke Tools\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/bsolution.me\\\/nl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Artikelen - Bsolution","description":"Gidsen, tips en inzichten voor bedrijven \u2014 alle onderwerpen op \u00e9\u00e9n plek.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bsolution.me\/nl\/blog\/","og_locale":"nl_NL","og_type":"article","og_title":"Artikelen - Bsolution","og_description":"Gidsen, tips en inzichten voor bedrijven \u2014 alle onderwerpen op \u00e9\u00e9n plek.","og_url":"https:\/\/bsolution.me\/nl\/blog\/","og_site_name":"Gratis Zakelijke Tools","article_modified_time":"2026-10-10T14:50:00+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bsolution.me\/nl\/blog\/","url":"https:\/\/bsolution.me\/nl\/blog\/","name":"Artikelen - Bsolution","isPartOf":{"@id":"https:\/\/bsolution.me\/nl\/#website"},"datePublished":"2026-10-10T14:26:56+00:00","dateModified":"2026-10-10T14:50:00+00:00","description":"Gidsen, tips en inzichten voor bedrijven \u2014 alle onderwerpen op \u00e9\u00e9n plek.","breadcrumb":{"@id":"https:\/\/bsolution.me\/nl\/blog\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bsolution.me\/nl\/blog\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/bsolution.me\/nl\/blog\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bsolution.me\/nl\/"},{"@type":"ListItem","position":2,"name":"Artikelen"}]},{"@type":"WebSite","@id":"https:\/\/bsolution.me\/nl\/#website","url":"https:\/\/bsolution.me\/nl\/","name":"Gratis Zakelijke Tools","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bsolution.me\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"}]}},"_links":{"self":[{"href":"https:\/\/bsolution.me\/nl\/wp-json\/wp\/v2\/pages\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bsolution.me\/nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bsolution.me\/nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bsolution.me\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bsolution.me\/nl\/wp-json\/wp\/v2\/comments?post=46"}],"version-history":[{"count":2,"href":"https:\/\/bsolution.me\/nl\/wp-json\/wp\/v2\/pages\/46\/revisions"}],"predecessor-version":[{"id":48,"href":"https:\/\/bsolution.me\/nl\/wp-json\/wp\/v2\/pages\/46\/revisions\/48"}],"wp:attachment":[{"href":"https:\/\/bsolution.me\/nl\/wp-json\/wp\/v2\/media?parent=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}