{"id":18505,"date":"2026-09-02T02:33:16","date_gmt":"2026-09-02T02:33:16","guid":{"rendered":"https:\/\/krytape.com\/?page_id=18505"},"modified":"2026-09-25T16:28:04","modified_gmt":"2026-09-25T16:28:04","slug":"news","status":"publish","type":"page","link":"https:\/\/krytape.com\/ar\/news\/","title":{"rendered":"News"},"content":{"rendered":"\n<div class=\"wp-block-uagb-container uagb-block-55d47041 alignfull uagb-is-root-container\"><div class=\"uagb-container-inner-blocks-wrap\">\n<h1 class=\"wp-block-heading\" style=\"font-size:20px\">Krytape News| <strong>Tape Industry News &amp; Packaging Solutions<\/strong><br><\/h1>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-ecfd2da8 alignfull uagb-is-root-container\"><div class=\"uagb-container-inner-blocks-wrap\">\n<div class=\"news-grid-container\">\n    <div class=\"news-grid\" id=\"news-grid-list\" aria-live=\"polite\" aria-busy=\"true\">\n        <div class=\"skeleton-card\"><div class=\"sk-img\"><\/div><div class=\"sk-line title\"><\/div><div class=\"sk-line\"><\/div><\/div>\n        <div class=\"skeleton-card\"><div class=\"sk-img\"><\/div><div class=\"sk-line title\"><\/div><div class=\"sk-line\"><\/div><\/div>\n        <div class=\"skeleton-card\"><div class=\"sk-img\"><\/div><div class=\"sk-line title\"><\/div><div class=\"sk-line\"><\/div><\/div>\n        <div class=\"skeleton-card\"><div class=\"sk-img\"><\/div><div class=\"sk-line title\"><\/div><div class=\"sk-line\"><\/div><\/div>\n        <div class=\"skeleton-card\"><div class=\"sk-img\"><\/div><div class=\"sk-line title\"><\/div><div class=\"sk-line\"><\/div><\/div>\n        <div class=\"skeleton-card\"><div class=\"sk-img\"><\/div><div class=\"sk-line title\"><\/div><div class=\"sk-line\"><\/div><\/div>\n        <div class=\"skeleton-card\"><div class=\"sk-img\"><\/div><div class=\"sk-line title\"><\/div><div class=\"sk-line\"><\/div><\/div>\n        <div class=\"skeleton-card\"><div class=\"sk-img\"><\/div><div class=\"sk-line title\"><\/div><div class=\"sk-line\"><\/div><\/div>\n        <div class=\"skeleton-card\"><div class=\"sk-img\"><\/div><div class=\"sk-line title\"><\/div><div class=\"sk-line\"><\/div><\/div>\n    <\/div>\n    <div class=\"pagination-container\" id=\"news-pagination\"><\/div>\n<\/div>\n\n<style>\n.news-grid-container {\n    width: 100%;\n    max-width: 1300px;\n    margin: 0 auto;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n}\n\n.news-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 32px 28px;\n    margin-bottom: 40px;\n    min-height: 200px;\n}\n\n.news-card {\n    display: flex;\n    flex-direction: column;\n    text-decoration: none;\n    color: inherit;\n}\n\n.news-thumb {\n    width: 100%;\n    aspect-ratio: 16 \/ 10;\n    border-radius: 8px;\n    overflow: hidden;\n    background-color: #f2f2f2;\n    margin-bottom: 16px;\n}\n\n.news-thumb img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: transform 0.3s ease;\n}\n\n.news-card:hover .news-thumb img {\n    transform: scale(1.03);\n}\n\n.news-title {\n    font-size: 18px;\n    font-weight: 700;\n    line-height: 1.35;\n    color: #000;\n    margin: 0 0 10px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.news-excerpt {\n    font-size: 14px;\n    color: #666;\n    line-height: 1.5;\n    margin: 0 0 16px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.news-readmore {\n    font-size: 14px;\n    font-weight: 600;\n    color: #000;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: auto;\n}\n\n.news-readmore svg {\n    width: 12px;\n    height: 12px;\n    transition: transform 0.2s ease;\n}\n\n.news-card:hover .news-readmore svg {\n    transform: translate(2px, -2px);\n}\n\n.news-error {\n    grid-column: 1 \/ -1;\n    text-align: center;\n    padding: 40px 20px;\n    color: #666;\n    font-size: 15px;\n}\n\n.news-error button {\n    margin-top: 12px;\n    padding: 8px 20px;\n    border-radius: 20px;\n    border: 1px solid #003e69;\n    background: #fff;\n    color: #003e69;\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.pagination-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 12px;\n}\n\n.page-btn {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    border: 1px solid #e0e0e0;\n    background-color: #ffffff;\n    color: #333333;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 15px;\n    font-weight: 500;\n    cursor: pointer;\n    outline: none;\n    transition: all 0.2s ease;\n    padding: 0;\n}\n\n.page-btn:hover:not(.disabled) {\n    border-color: #003e69;\n    color: #003e69;\n}\n\n.page-btn.active {\n    background-color: #003e69 !important;\n    border-color: #003e69 !important;\n    color: #ffffff !important;\n}\n\n.page-btn.disabled {\n    opacity: 0.35;\n    cursor: not-allowed;\n}\n\n.page-dots {\n    color: #999;\n    font-size: 14px;\n}\n\n.skeleton-card { display: flex; flex-direction: column; }\n.sk-img { width: 100%; aspect-ratio: 16 \/ 10; border-radius: 8px; background: #eee; margin-bottom: 16px; animation: sk-pulse 1.2s infinite; }\n.sk-line { height: 14px; background: #eee; border-radius: 4px; margin-bottom: 8px; animation: sk-pulse 1.2s infinite; }\n.sk-line.title { height: 20px; width: 80%; }\n@keyframes sk-pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }\n\n@media (prefers-reduced-motion: reduce) {\n    .sk-img, .sk-line { animation: none; }\n}\n\n@media (max-width: 992px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }\n@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } .page-btn { width: 36px; height: 36px; font-size: 14px; } }\n<\/style>\n\n<script>\n(function() {\n    const grid = document.getElementById('news-grid-list');\n    const pgn = document.getElementById('news-pagination');\n    if (!grid || !pgn) return;\n\n    const perPage = 9; \/\/ \u5df2\u4fee\u6539\u4e3a\u6bcf\u9875\u663e\u793a9\u4e2a\n    const CACHE_TTL = 5 * 60 * 1000; \n    let activeController = null;\n    let isLoading = false;\n\n    const cacheKey = (page) => `fast_news_p${page}`;\n\n    const PLACEHOLDER_IMG = 'data:image\/svg+xml;utf8,' + encodeURIComponent(\n        '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"600\" height=\"375\" viewBox=\"0 0 600 375\">' +\n        '<rect width=\"600\" height=\"375\" fill=\"%23f2f2f2\"\/>' +\n        '<path d=\"M250 150h100v75H250z\" fill=\"%23dcdcdc\"\/>' +\n        '<\/svg>'\n    );\n\n    function escapeHtml(str) {\n        const div = document.createElement('div');\n        div.textContent = str || '';\n        return div.innerHTML;\n    }\n\n    function getCleanText(html) {\n        const doc = new DOMParser().parseFromString(html || '', 'text\/html');\n        return doc.body.textContent || '';\n    }\n\n    function setLoadingSkeleton() {\n        grid.setAttribute('aria-busy', 'true');\n        grid.innerHTML = Array(9).fill( \/\/ \u9aa8\u67b6\u5c4f\u540c\u6b65\u6539\u4e3a9\u4e2a\n            '<div class=\"skeleton-card\"><div class=\"sk-img\"><\/div><div class=\"sk-line title\"><\/div><div class=\"sk-line\"><\/div><\/div>'\n        ).join('');\n    }\n\n    function renderError(page) {\n        grid.setAttribute('aria-busy', 'false');\n        grid.innerHTML = `\n            <div class=\"news-error\">\n                \u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u91cd\u8bd5\u3002\n                <br>\n                <button type=\"button\" onclick=\"window.__newsRetry(${page})\">\u91cd\u65b0\u52a0\u8f7d<\/button>\n            <\/div>`;\n    }\n\n    function renderGrid(posts) {\n        grid.setAttribute('aria-busy', 'false');\n        grid.innerHTML = posts.map(post => {\n            const thumb = post.thumb || PLACEHOLDER_IMG;\n            return `\n            <a href=\"${post.link}\" class=\"news-card\">\n                <div class=\"news-thumb\">\n                    <img src=\"${thumb}\" alt=\"${escapeHtml(post.title?.rendered || '')}\" loading=\"lazy\" decoding=\"async\">\n                <\/div>\n                <h3 class=\"news-title\">${post.title?.rendered || ''}<\/h3>\n                <p class=\"news-excerpt\">${post.cleanExcerpt}<\/p>\n                <div class=\"news-readmore\">\n                    Read More\n                    <svg viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                        <path d=\"M2 10L10 2M10 2H4M10 2V8\"\/>\n                    <\/svg>\n                <\/div>\n            <\/a>`;\n        }).join('');\n    }\n\n    function renderPagination(current, total) {\n        if (total <= 1) { pgn.innerHTML = ''; return; }\n\n        let html = `<button class=\"page-btn ${current === 1 ? 'disabled' : ''}\" ${current === 1 ? 'disabled' : ''} aria-label=\"\u4e0a\u4e00\u9875\" onclick=\"changeNewsPage(${current - 1})\">&leftarrow;<\/button>`;\n\n        for (let i = 1; i <= total; i++) {\n            if (i === 1 || i === total || (i >= current - 1 && i <= current + 1)) {\n                html += `<button class=\"page-btn ${i === current ? 'active' : ''}\" ${i === current ? 'aria-current=\"page\"' : ''} aria-label=\"\u7b2c ${i} \u9875\" onclick=\"changeNewsPage(${i})\">${i}<\/button>`;\n            } else if (i === current - 2 || i === current + 2) {\n                html += `<span class=\"page-dots\">...<\/span>`;\n            }\n        }\n\n        html += `<button class=\"page-btn ${current === total ? 'disabled' : ''}\" ${current === total ? 'disabled' : ''} aria-label=\"\u4e0b\u4e00\u9875\" onclick=\"changeNewsPage(${current + 1})\">&rightarrow;<\/button>`;\n        pgn.innerHTML = html;\n    }\n\n    function buildUrl(page) {\n        const params = new URLSearchParams({\n            per_page: perPage,\n            page: page,\n            orderby: 'date',\n            order: 'desc',\n            _embed: 'wp:featuredmedia',\n            _fields: 'id,title,excerpt,link,_links,_embedded'\n        });\n        return `\/wp-json\/wp\/v2\/posts?${params.toString()}`;\n    }\n\n    function extractThumb(post) {\n        const media = post._embedded?.['wp:featuredmedia']?.[0];\n        return media?.media_details?.sizes?.medium_large?.source_url || media?.source_url || null;\n    }\n\n    async function loadRemotePosts(page, isSilent) {\n        if (activeController) activeController.abort();\n        activeController = new AbortController();\n        const { signal } = activeController;\n\n        try {\n            const res = await fetch(buildUrl(page), { signal });\n            if (!res.ok) throw new Error(`HTTP ${res.status}`);\n\n            const totalPages = parseInt(res.headers.get('X-WP-TotalPages') || '1', 10);\n            const posts = await res.json();\n\n            posts.forEach(p => {\n                p.thumb = extractThumb(p);\n                p.cleanExcerpt = getCleanText(p.excerpt?.rendered);\n            });\n\n            try {\n                localStorage.setItem(cacheKey(page), JSON.stringify({ posts, totalPages, ts: Date.now() }));\n            } catch (e) { }\n\n            renderGrid(posts);\n            renderPagination(page, totalPages);\n        } catch (err) {\n            if (err.name === 'AbortError') return;\n            if (!isSilent) renderError(page);\n            console.error('News grid fetch failed:', err);\n        } finally {\n            isLoading = false;\n        }\n    }\n\n    function fetchPosts(page) {\n        const cached = localStorage.getItem(cacheKey(page));\n        if (cached) {\n            try {\n                const data = JSON.parse(cached);\n                renderGrid(data.posts);\n                renderPagination(page, data.totalPages);\n                const isFresh = data.ts && (Date.now() - data.ts < CACHE_TTL);\n                loadRemotePosts(page, isFresh);\n                return;\n            } catch (e) { }\n        }\n        setLoadingSkeleton();\n        loadRemotePosts(page, false);\n    }\n\n    window.changeNewsPage = function(page) {\n        if (isLoading) return;\n        isLoading = true;\n        setLoadingSkeleton();\n        fetchPosts(page);\n    };\n\n    window.__newsRetry = function(page) {\n        isLoading = false;\n        window.changeNewsPage(page);\n    };\n\n    fetchPosts(1);\n})();\n<\/script>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Krytape News| Tape Industry News &amp; Packaging Solutions<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-18505","page","type-page","status-publish","hentry"],"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"krystartape@gmail.com","author_link":"https:\/\/krytape.com\/ar\/author\/krystartapegmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"Krytape News| Tape Industry News &amp; Packaging Solutions","_links":{"self":[{"href":"https:\/\/krytape.com\/ar\/wp-json\/wp\/v2\/pages\/18505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/krytape.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/krytape.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/krytape.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/krytape.com\/ar\/wp-json\/wp\/v2\/comments?post=18505"}],"version-history":[{"count":0,"href":"https:\/\/krytape.com\/ar\/wp-json\/wp\/v2\/pages\/18505\/revisions"}],"wp:attachment":[{"href":"https:\/\/krytape.com\/ar\/wp-json\/wp\/v2\/media?parent=18505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}