\u679c\u852c\u7cfb\u5217\u5c55\u793a<\/title>\n <style>\n body {\n font-family: '\u5fae\u8f6f\u96c5\u9ed1', sans-serif;\n margin: 0;\n padding: 0;\n background: #f9f9f9;\n color: #333;\n }\n .container {\n max-width: 1000px;\n margin: auto;\n padding: 20px;\n }\n h1 {\n text-align: center;\n color: #003366;\n }\n .brand-filter {\n text-align: center;\n margin-bottom: 20px;\n }\n .brand-filter button {\n padding: 8px 16px;\n margin: 5px;\n border: none;\n border-radius: 4px;\n background-color: #0073e6;\n color: white;\n cursor: pointer;\n }\n .brand-filter button.active {\n background-color: #ff6600;\n }\n .grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr); \/* \u56fa\u5b9a\u4e09\u5217 *\/\n gap: 20px;\n }\n .grid-item {\n text-align: center;\n }\n \/* \u6838\u5fc3\uff1a1:1 \u56fe\u7247\u5bb9\u5668 *\/\n .img-wrapper {\n position: relative;\n width: 100%;\n padding-bottom: 100%; \/* 1:1 \u6bd4\u4f8b\u6838\u5fc3 *\/\n overflow: hidden;\n border-radius: 8px;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\n cursor: zoom-in; \/* \u9f20\u6807\u63d0\u793a\u53ef\u653e\u5927 *\/\n }\n .grid-item img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover; \/* \u4fdd\u6301\u6bd4\u4f8b\uff0c\u88c1\u526a\u591a\u4f59\u90e8\u5206 *\/\n transition: transform 0.2s ease;\n }\n .img-wrapper:hover img {\n transform: scale(1.02); \/* hover \u8f7b\u5fae\u653e\u5927\uff0c\u63d0\u5347\u4ea4\u4e92\u611f *\/\n }\n .caption {\n margin-top: 8px;\n font-weight: bold;\n }\n \/* \u5206\u9875\u6837\u5f0f *\/\n .pagination {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 6px;\n margin: 20px 0;\n }\n .page-btn {\n padding: 6px 12px;\n border: 1px solid #003366;\n background: #fff;\n cursor: pointer;\n border-radius: 4px;\n }\n .page-btn.active {\n background-color: #003366;\n color: #fff;\n }\n .page-btn[disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n \/* \u79fb\u52a8\u7aef\u9002\u914d\uff08\u4ec5\u8c03\u6574\u95f4\u8ddd\/\u6587\u5b57\uff0c\u4fdd\u63011:1\u6bd4\u4f8b\uff09 *\/\n @media (max-width: 768px) {\n .grid {\n grid-template-columns: repeat(3, 1fr);\n gap: 15px; \/* \u79fb\u52a8\u7aef\u7f29\u5c0f\u95f4\u8ddd *\/\n }\n }\n @media (max-width: 480px) {\n .grid {\n gap: 10px;\n }\n .caption {\n font-size: 12px; \/* \u79fb\u52a8\u7aef\u6587\u5b57\u9002\u914d *\/\n }\n }\n\n \/* \u65b0\u589e\uff1a\u56fe\u7247\u9884\u89c8\u5f39\u7a97\u6837\u5f0f *\/\n .img-modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.9);\n display: none;\n justify-content: center;\n align-items: center;\n z-index: 9999;\n padding: 20px;\n box-sizing: border-box;\n }\n .img-modal.active {\n display: flex;\n }\n .modal-content {\n max-width: 90%;\n max-height: 90%;\n position: relative;\n }\n .modal-img {\n max-width: 100%;\n max-height: 90vh;\n border-radius: 8px;\n }\n .close-btn {\n position: absolute;\n top: -40px;\n right: 0;\n color: #fff;\n font-size: 32px;\n cursor: pointer;\n width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n background: rgba(255, 255, 255, 0.1);\n border-radius: 50%;\n transition: background 0.2s;\n }\n .close-btn:hover {\n background: rgba(255, 255, 255, 0.2);\n }\n \/* \u79fb\u52a8\u7aef\u5173\u95ed\u6309\u94ae\u9002\u914d *\/\n @media (max-width: 480px) {\n .close-btn {\n top: -35px;\n font-size: 28px;\n width: 35px;\n height: 35px;\n }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"container\">\n <h1>\u679c\u852c\u7cfb\u5217<\/h1>\n <div class=\"brand-filter\" id=\"brandFilter\"><\/div>\n <div id=\"grid\" class=\"grid\"><\/div>\n <div id=\"pagination\" class=\"pagination\"><\/div>\n<\/div>\n\n\n<div class=\"img-modal\" id=\"imgModal\">\n <div class=\"modal-content\">\n <span class=\"close-btn\" id=\"closeBtn\">×<\/span>\n <img decoding=\"async\" src=\"\" alt=\"\u5168\u56fe\u9884\u89c8\" class=\"modal-img\" id=\"modalImg\">\n <\/div>\n<\/div>\n\n<script>\n const items = [\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u725b\u6cb9\u679c.jpg\", caption: \"\u725b\u6cb9\u679c\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u8292\u679c.jpg\", caption: \"\u8292\u679c\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u54c8\u5bc6\u74dc.jpg\", caption: \"\u54c8\u5bc6\u74dc\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u5c0f\u756a\u8304.jpg\", caption: \"\u5c0f\u756a\u8304\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u897f\u74dc.jpg\", caption: \"\u897f\u74dc\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u67e0\u6aac.jpg\", caption: \"\u67e0\u6aac\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u6a59\u5b50.jpg\", caption: \"\u6a59\u5b50\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u82cf\u5b50\u53f6.jpg\", caption: \"\u82cf\u5b50\u53f6\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u751f\u83dc.jpg\", caption: \"\u751f\u83dc\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u91d1\u9488\u83c7.webp\", caption: \"\u91d1\u9488\u83c7\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u677e\u8338\u83c7.jpg\", caption: \"\u677e\u8338\u83c7\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u821e\u8338\u83c7.jpg\", caption: \"\u821e\u8338\u83c7\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u9752\u74dc.jpg\", caption: \"\u9752\u74dc\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u79cb\u8475.jpg\", caption: \"\u79cb\u8475\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u83dc\u5fc3.jpg\", caption: \"\u83dc\u5fc3\" },\n ];\n\n let currentPage = 1;\n const itemsPerPage = 12;\n\n const grid = document.getElementById('grid');\n const pagination = document.getElementById('pagination');\n \/\/ \u65b0\u589e\uff1a\u83b7\u53d6\u5f39\u7a97\u76f8\u5173\u5143\u7d20\n const imgModal = document.getElementById('imgModal');\n const modalImg = document.getElementById('modalImg');\n const closeBtn = document.getElementById('closeBtn');\n\n function renderItems() {\n const start = (currentPage - 1) * itemsPerPage;\n const end = start + itemsPerPage;\n const pageItems = items.slice(start, end);\n\n grid.innerHTML = '';\n pageItems.forEach(item => {\n const div = document.createElement('div');\n div.className = 'grid-item';\n \/\/ \u5173\u952e\uff1a\u7ed9\u56fe\u7247\u5305\u88f91:1\u5bb9\u5668\uff0c\u5e76\u7ed1\u5b9a\u70b9\u51fb\u4e8b\u4ef6\n div.innerHTML = `<div class=\"img-wrapper\" data-img=\"${item.img}\"><img decoding=\"async\" src=\"${item.img}\" alt=\"${item.caption}\"><\/div><div class=\"caption\">${item.caption}<\/div>`;\n grid.appendChild(div);\n });\n\n \/\/ \u65b0\u589e\uff1a\u4e3a\u6240\u6709\u56fe\u7247\u5bb9\u5668\u7ed1\u5b9a\u70b9\u51fb\u4e8b\u4ef6\n bindImgClickEvents();\n renderPagination(items.length);\n }\n\n \/\/ \u65b0\u589e\uff1a\u7ed1\u5b9a\u56fe\u7247\u70b9\u51fb\u4e8b\u4ef6\n function bindImgClickEvents() {\n const imgWrappers = document.querySelectorAll('.img-wrapper');\n imgWrappers.forEach(wrapper => {\n wrapper.addEventListener('click', () => {\n const imgSrc = wrapper.getAttribute('data-img');\n modalImg.src = imgSrc;\n modalImg.alt = wrapper.nextElementSibling.textContent; \/\/ \u540c\u6b65\u56fe\u7247\u6807\u9898\n imgModal.classList.add('active');\n \/\/ \u7981\u6b62\u9875\u9762\u6eda\u52a8\n document.body.style.overflow = 'hidden';\n });\n });\n }\n\n \/\/ \u65b0\u589e\uff1a\u5173\u95ed\u5f39\u7a97\u4e8b\u4ef6\n closeBtn.addEventListener('click', () => {\n imgModal.classList.remove('active');\n \/\/ \u6062\u590d\u9875\u9762\u6eda\u52a8\n document.body.style.overflow = '';\n });\n\n \/\/ \u65b0\u589e\uff1a\u70b9\u51fb\u5f39\u7a97\u906e\u7f69\u5c42\u5173\u95ed\n imgModal.addEventListener('click', (e) => {\n if (e.target === imgModal) {\n imgModal.classList.remove('active');\n document.body.style.overflow = '';\n }\n });\n\n \/\/ \u65b0\u589e\uff1aESC\u952e\u5173\u95ed\u5f39\u7a97\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && imgModal.classList.contains('active')) {\n imgModal.classList.remove('active');\n document.body.style.overflow = '';\n }\n });\n\n function renderPagination(totalItems) {\n const totalPages = Math.ceil(totalItems \/ itemsPerPage);\n pagination.innerHTML = '';\n\n const prevBtn = createPageButton('\u4e0a\u4e00\u9875', currentPage === 1, () => {\n currentPage--;\n renderItems();\n });\n pagination.appendChild(prevBtn);\n\n for (let i = 1; i <= totalPages; i++) {\n const btn = createPageButton(i, false, () => {\n currentPage = i;\n renderItems();\n });\n if (i === currentPage) btn.classList.add('active');\n pagination.appendChild(btn);\n }\n\n const nextBtn = createPageButton('\u4e0b\u4e00\u9875', currentPage === totalPages, () => {\n currentPage++;\n renderItems();\n });\n pagination.appendChild(nextBtn);\n }\n\n function createPageButton(text, disabled, onClick) {\n const btn = document.createElement('button');\n btn.textContent = text;\n btn.className = 'page-btn';\n if (disabled) btn.disabled = true;\n btn.onclick = onClick;\n return btn;\n }\n\n \/\/ \u521d\u59cb\u5316\n renderItems();\n<\/script>\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u679c\u852c\u7cfb\u5217\u5c55\u793a \u679c\u852c\u7cfb\u5217 ×<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-89","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hainongji.com\/index.php\/wp-json\/wp\/v2\/pages\/89","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hainongji.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hainongji.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hainongji.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hainongji.com\/index.php\/wp-json\/wp\/v2\/comments?post=89"}],"version-history":[{"count":7,"href":"https:\/\/hainongji.com\/index.php\/wp-json\/wp\/v2\/pages\/89\/revisions"}],"predecessor-version":[{"id":604,"href":"https:\/\/hainongji.com\/index.php\/wp-json\/wp\/v2\/pages\/89\/revisions\/604"}],"wp:attachment":[{"href":"https:\/\/hainongji.com\/index.php\/wp-json\/wp\/v2\/media?parent=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n\n \n \n \u679c\u852c\u7cfb\u5217\u5c55\u793a<\/title>\n <style>\n body {\n font-family: '\u5fae\u8f6f\u96c5\u9ed1', sans-serif;\n margin: 0;\n padding: 0;\n background: #f9f9f9;\n color: #333;\n }\n .container {\n max-width: 1000px;\n margin: auto;\n padding: 20px;\n }\n h1 {\n text-align: center;\n color: #003366;\n }\n .brand-filter {\n text-align: center;\n margin-bottom: 20px;\n }\n .brand-filter button {\n padding: 8px 16px;\n margin: 5px;\n border: none;\n border-radius: 4px;\n background-color: #0073e6;\n color: white;\n cursor: pointer;\n }\n .brand-filter button.active {\n background-color: #ff6600;\n }\n .grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr); \/* \u56fa\u5b9a\u4e09\u5217 *\/\n gap: 20px;\n }\n .grid-item {\n text-align: center;\n }\n \/* \u6838\u5fc3\uff1a1:1 \u56fe\u7247\u5bb9\u5668 *\/\n .img-wrapper {\n position: relative;\n width: 100%;\n padding-bottom: 100%; \/* 1:1 \u6bd4\u4f8b\u6838\u5fc3 *\/\n overflow: hidden;\n border-radius: 8px;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\n cursor: zoom-in; \/* \u9f20\u6807\u63d0\u793a\u53ef\u653e\u5927 *\/\n }\n .grid-item img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover; \/* \u4fdd\u6301\u6bd4\u4f8b\uff0c\u88c1\u526a\u591a\u4f59\u90e8\u5206 *\/\n transition: transform 0.2s ease;\n }\n .img-wrapper:hover img {\n transform: scale(1.02); \/* hover \u8f7b\u5fae\u653e\u5927\uff0c\u63d0\u5347\u4ea4\u4e92\u611f *\/\n }\n .caption {\n margin-top: 8px;\n font-weight: bold;\n }\n \/* \u5206\u9875\u6837\u5f0f *\/\n .pagination {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 6px;\n margin: 20px 0;\n }\n .page-btn {\n padding: 6px 12px;\n border: 1px solid #003366;\n background: #fff;\n cursor: pointer;\n border-radius: 4px;\n }\n .page-btn.active {\n background-color: #003366;\n color: #fff;\n }\n .page-btn[disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n \/* \u79fb\u52a8\u7aef\u9002\u914d\uff08\u4ec5\u8c03\u6574\u95f4\u8ddd\/\u6587\u5b57\uff0c\u4fdd\u63011:1\u6bd4\u4f8b\uff09 *\/\n @media (max-width: 768px) {\n .grid {\n grid-template-columns: repeat(3, 1fr);\n gap: 15px; \/* \u79fb\u52a8\u7aef\u7f29\u5c0f\u95f4\u8ddd *\/\n }\n }\n @media (max-width: 480px) {\n .grid {\n gap: 10px;\n }\n .caption {\n font-size: 12px; \/* \u79fb\u52a8\u7aef\u6587\u5b57\u9002\u914d *\/\n }\n }\n\n \/* \u65b0\u589e\uff1a\u56fe\u7247\u9884\u89c8\u5f39\u7a97\u6837\u5f0f *\/\n .img-modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.9);\n display: none;\n justify-content: center;\n align-items: center;\n z-index: 9999;\n padding: 20px;\n box-sizing: border-box;\n }\n .img-modal.active {\n display: flex;\n }\n .modal-content {\n max-width: 90%;\n max-height: 90%;\n position: relative;\n }\n .modal-img {\n max-width: 100%;\n max-height: 90vh;\n border-radius: 8px;\n }\n .close-btn {\n position: absolute;\n top: -40px;\n right: 0;\n color: #fff;\n font-size: 32px;\n cursor: pointer;\n width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n background: rgba(255, 255, 255, 0.1);\n border-radius: 50%;\n transition: background 0.2s;\n }\n .close-btn:hover {\n background: rgba(255, 255, 255, 0.2);\n }\n \/* \u79fb\u52a8\u7aef\u5173\u95ed\u6309\u94ae\u9002\u914d *\/\n @media (max-width: 480px) {\n .close-btn {\n top: -35px;\n font-size: 28px;\n width: 35px;\n height: 35px;\n }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"container\">\n <h1>\u679c\u852c\u7cfb\u5217<\/h1>\n <div class=\"brand-filter\" id=\"brandFilter\"><\/div>\n <div id=\"grid\" class=\"grid\"><\/div>\n <div id=\"pagination\" class=\"pagination\"><\/div>\n<\/div>\n\n\n<div class=\"img-modal\" id=\"imgModal\">\n <div class=\"modal-content\">\n <span class=\"close-btn\" id=\"closeBtn\">×<\/span>\n <img decoding=\"async\" src=\"\" alt=\"\u5168\u56fe\u9884\u89c8\" class=\"modal-img\" id=\"modalImg\">\n <\/div>\n<\/div>\n\n<script>\n const items = [\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u725b\u6cb9\u679c.jpg\", caption: \"\u725b\u6cb9\u679c\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u8292\u679c.jpg\", caption: \"\u8292\u679c\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u54c8\u5bc6\u74dc.jpg\", caption: \"\u54c8\u5bc6\u74dc\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u5c0f\u756a\u8304.jpg\", caption: \"\u5c0f\u756a\u8304\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u897f\u74dc.jpg\", caption: \"\u897f\u74dc\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u67e0\u6aac.jpg\", caption: \"\u67e0\u6aac\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u6a59\u5b50.jpg\", caption: \"\u6a59\u5b50\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u82cf\u5b50\u53f6.jpg\", caption: \"\u82cf\u5b50\u53f6\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u751f\u83dc.jpg\", caption: \"\u751f\u83dc\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u91d1\u9488\u83c7.webp\", caption: \"\u91d1\u9488\u83c7\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u677e\u8338\u83c7.jpg\", caption: \"\u677e\u8338\u83c7\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u821e\u8338\u83c7.jpg\", caption: \"\u821e\u8338\u83c7\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u9752\u74dc.jpg\", caption: \"\u9752\u74dc\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u79cb\u8475.jpg\", caption: \"\u79cb\u8475\" },\n { img: \"https:\/\/hainongji.com\/wp-content\/uploads\/2025\/12\/\u83dc\u5fc3.jpg\", caption: \"\u83dc\u5fc3\" },\n ];\n\n let currentPage = 1;\n const itemsPerPage = 12;\n\n const grid = document.getElementById('grid');\n const pagination = document.getElementById('pagination');\n \/\/ \u65b0\u589e\uff1a\u83b7\u53d6\u5f39\u7a97\u76f8\u5173\u5143\u7d20\n const imgModal = document.getElementById('imgModal');\n const modalImg = document.getElementById('modalImg');\n const closeBtn = document.getElementById('closeBtn');\n\n function renderItems() {\n const start = (currentPage - 1) * itemsPerPage;\n const end = start + itemsPerPage;\n const pageItems = items.slice(start, end);\n\n grid.innerHTML = '';\n pageItems.forEach(item => {\n const div = document.createElement('div');\n div.className = 'grid-item';\n \/\/ \u5173\u952e\uff1a\u7ed9\u56fe\u7247\u5305\u88f91:1\u5bb9\u5668\uff0c\u5e76\u7ed1\u5b9a\u70b9\u51fb\u4e8b\u4ef6\n div.innerHTML = `<div class=\"img-wrapper\" data-img=\"${item.img}\"><img decoding=\"async\" src=\"${item.img}\" alt=\"${item.caption}\"><\/div><div class=\"caption\">${item.caption}<\/div>`;\n grid.appendChild(div);\n });\n\n \/\/ \u65b0\u589e\uff1a\u4e3a\u6240\u6709\u56fe\u7247\u5bb9\u5668\u7ed1\u5b9a\u70b9\u51fb\u4e8b\u4ef6\n bindImgClickEvents();\n renderPagination(items.length);\n }\n\n \/\/ \u65b0\u589e\uff1a\u7ed1\u5b9a\u56fe\u7247\u70b9\u51fb\u4e8b\u4ef6\n function bindImgClickEvents() {\n const imgWrappers = document.querySelectorAll('.img-wrapper');\n imgWrappers.forEach(wrapper => {\n wrapper.addEventListener('click', () => {\n const imgSrc = wrapper.getAttribute('data-img');\n modalImg.src = imgSrc;\n modalImg.alt = wrapper.nextElementSibling.textContent; \/\/ \u540c\u6b65\u56fe\u7247\u6807\u9898\n imgModal.classList.add('active');\n \/\/ \u7981\u6b62\u9875\u9762\u6eda\u52a8\n document.body.style.overflow = 'hidden';\n });\n });\n }\n\n \/\/ \u65b0\u589e\uff1a\u5173\u95ed\u5f39\u7a97\u4e8b\u4ef6\n closeBtn.addEventListener('click', () => {\n imgModal.classList.remove('active');\n \/\/ \u6062\u590d\u9875\u9762\u6eda\u52a8\n document.body.style.overflow = '';\n });\n\n \/\/ \u65b0\u589e\uff1a\u70b9\u51fb\u5f39\u7a97\u906e\u7f69\u5c42\u5173\u95ed\n imgModal.addEventListener('click', (e) => {\n if (e.target === imgModal) {\n imgModal.classList.remove('active');\n document.body.style.overflow = '';\n }\n });\n\n \/\/ \u65b0\u589e\uff1aESC\u952e\u5173\u95ed\u5f39\u7a97\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && imgModal.classList.contains('active')) {\n imgModal.classList.remove('active');\n document.body.style.overflow = '';\n }\n });\n\n function renderPagination(totalItems) {\n const totalPages = Math.ceil(totalItems \/ itemsPerPage);\n pagination.innerHTML = '';\n\n const prevBtn = createPageButton('\u4e0a\u4e00\u9875', currentPage === 1, () => {\n currentPage--;\n renderItems();\n });\n pagination.appendChild(prevBtn);\n\n for (let i = 1; i <= totalPages; i++) {\n const btn = createPageButton(i, false, () => {\n currentPage = i;\n renderItems();\n });\n if (i === currentPage) btn.classList.add('active');\n pagination.appendChild(btn);\n }\n\n const nextBtn = createPageButton('\u4e0b\u4e00\u9875', currentPage === totalPages, () => {\n currentPage++;\n renderItems();\n });\n pagination.appendChild(nextBtn);\n }\n\n function createPageButton(text, disabled, onClick) {\n const btn = document.createElement('button');\n btn.textContent = text;\n btn.className = 'page-btn';\n if (disabled) btn.disabled = true;\n btn.onclick = onClick;\n return btn;\n }\n\n \/\/ \u521d\u59cb\u5316\n renderItems();\n<\/script>\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u679c\u852c\u7cfb\u5217\u5c55\u793a \u679c\u852c\u7cfb\u5217 ×<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-89","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hainongji.com\/index.php\/wp-json\/wp\/v2\/pages\/89","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hainongji.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hainongji.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hainongji.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hainongji.com\/index.php\/wp-json\/wp\/v2\/comments?post=89"}],"version-history":[{"count":7,"href":"https:\/\/hainongji.com\/index.php\/wp-json\/wp\/v2\/pages\/89\/revisions"}],"predecessor-version":[{"id":604,"href":"https:\/\/hainongji.com\/index.php\/wp-json\/wp\/v2\/pages\/89\/revisions\/604"}],"wp:attachment":[{"href":"https:\/\/hainongji.com\/index.php\/wp-json\/wp\/v2\/media?parent=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}