{"id":751,"date":"2026-06-21T05:53:17","date_gmt":"2026-06-21T05:53:17","guid":{"rendered":"https:\/\/hku-iamc.visibleone.dev\/reference-material\/"},"modified":"2026-07-22T08:24:01","modified_gmt":"2026-07-22T08:24:01","slug":"reference-material","status":"publish","type":"page","link":"https:\/\/hku-iamc.visibleone.dev\/tcn\/reference-material\/","title":{"rendered":"\u53c3\u8003\u8cc7\u6599"},"content":{"rendered":"\n<div block-name=\"inner-page-banner\" class=\"relative inner-page-banner\">\n        <img decoding=\"async\" class=\"absolute top-0 left-0 w-full h-full object-cover\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/F3-Journal-Articles.png\" alt=\"\" \/>\n        <div class=\"absolute top-0 left-0 w-full h-full object-cover bg-overlay\"><\/div>\n\n    <div class=\"relative container mx-auto\">\n        <div class=\"min-h-[300px] flex flex-col justify-end text-white py-[60px] container-lg\">\n            <h1 class=\"heading1 overflow-hidden text-ellipsis\">\u53c3\u8003\u8cc7\u6599<\/h1>\n            <div class=\"mt-4 breadcrumbs\">\n                <ul class=\"flex flex-wrap lg:flex-nowrap items-center text-eyebrow uppercase\">\n                                                                                                    <li class=\"lg:min-w-max text-grey transition-all duration-300 hover:text-highlight-orange\">\n                                                                    <a class=\"\" href=\"https:\/\/hku-iamc.visibleone.dev\/tcn\/\" target=\"_self\">\u9996\u9801<\/a>\n                                                            <\/li>\n\n                            <span class=\"mx-[10px] inline-flex items-center justify-center\">\n                                <img decoding=\"async\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/breadcrumb-circle.svg\" alt=\"breadcrumbs-arrow\" \/>\n                            <\/span>\n                            \n                                                        \n                                                                                <li class=\"lg:min-w-max text-grey transition-all duration-300 hover:text-highlight-orange\">\n                                                                    <a class=\"\" href=\"https:\/\/hku-iamc.visibleone.dev\/tcn\/projects\/\" target=\"_self\">\u8cc7\u6e90\u4e2d\u5fc3<\/a>\n                                                            <\/li>\n\n                            <span class=\"mx-[10px] inline-flex items-center justify-center\">\n                                <img decoding=\"async\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/breadcrumb-circle.svg\" alt=\"breadcrumbs-arrow\" \/>\n                            <\/span>\n                            \n                                                        \n                                                    \n                                                                                            <li class=\"text-white rounded bg-[rgba(255,255,255,0.30)] py-[6px] px-[10px]\">\n                                    <span class=\"\">\n                                        \u53c3\u8003\u8cc7\u6599                                    <\/span>\n                                <\/li>\n                                                                                        \n                                                                \n                    \n                <\/ul>\n            <\/div>\n\n        <\/div>\n    <\/div>\n<\/div>\n\n\n<div block-name=\"reference-material-list\" x-data=\"iamc_reference_materials\" class=\"relative container mx-auto reference-material-list\">\n\n    <div class=\"container-lg py-10 xs:py-[60px] xl:py-20\">\n        <div class=\"text-body-md text-metalic-dark-02 filter-bar\">\n            <div class=\"flex flex-wrap lg:flex-nowrap items-center justify-between\">\n                <div class=\"w-full lg:w-auto flex flex-wrap sm:flex-nowrap gap-5 md:gap-6 2xl:gap-8 4xl:gap-10\">\n                    <div class=\"w-full lg:w-[200px]\">\n                        <p class=\"mb-2 heading6 text-metalic-dark-02\">\n                            \u5e74\u4efd                        <\/p>\n                        <div class=\"relative\" x-data=\"iamc_rm_year_dropdown\">\n    <input type=\"text\" id=\"s_year\" name=\"s_year\" x-model=\"s_year\" class=\"hidden\"\n        aria-hidden=\"false\" \/>\n\n    <div class=\"iamc_rm_year_dropdown px-3 md:px-5 rounded py-2 md:py-2 border-[1px] border-metalic-grey-02 flex items-center h-[50px]\"\n        :class=\"dropdownOpened ? 'border-black-000' : ''\" @click=\"toggleDropdown\">\n        <label for=\"s_year\"\n            class=\"mr-2.5 text-nowrap pointer-events-none text-18 font-normal text-darkPurple\"\n            :class=\"!s_year ? '' : ''\" x-text=\"s_year_label\"><\/label>\n        <span class=\"ml-auto shrink-0\">\n            <img decoding=\"async\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/resources\/images\/icons\/arrow-down.svg\" alt=\"Down Arrow Svg\"\n                class=\" transition-all pointer-events-none\" :class=\"dropdownOpened ? 'rotate-180' : ''\" \/>\n        <\/span>\n    <\/div>\n\n    <ul class=\"absolute rounded-lg min-w-max w-full -bottom-1.5 left-0 translate-y-full z-[11] bg-white text-18 font-normal text-darkPurple transition-all max-h-0 overflow-hidden border\"\n        :class=\"dropdownOpened ? 'border-black-000' : 'border-white'\" x-ref=\"dropdown\">\n        <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_year_label == '\u5168\u90e8' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('', '\u5168\u90e8')\">\n            \u5168\u90e8        <\/li>\n                <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_year_label == '2025' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('167', '2025')\">\n            2025        <\/li>\n                <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_year_label == '2026' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('166', '2026')\">\n            2026        <\/li>\n            <\/ul>\n<\/div>\n<script>\n(function() {\n    document.addEventListener('alpine:init', function() {\n        Alpine.data('iamc_rm_year_dropdown', () => ({\n            handleClickAwayBound: null,\n            dropdownOpened: false,\n            toggleDropdown: function() {\n                if (this.dropdownOpened) {\n                    this.dropdownOpened = false;\n                    this.hideDropdown();\n                } else {\n                    this.dropdownOpened = true;\n                    this.showDropdown();\n                }\n            },\n            showDropdown: function() {\n                const dropdown = this.$refs.dropdown;\n                let maxHeight = 0;\n                Array.from(dropdown.children).forEach(child => {\n                    maxHeight += child.clientHeight;\n                });\n                dropdown.style.setProperty('max-height', maxHeight + 'px');\n                dropdown.style.setProperty('z-index', 12);\n                this.handleClickAwayBound = this.handleClickAway.bind(\n                    this\n                ); \/\/ using extra var to make function in state when removing listener\n                document.addEventListener('click', this.handleClickAwayBound);\n            },\n            hideDropdown: function() {\n                const dropdown = this.$refs.dropdown;\n                dropdown.style.removeProperty('max-height');\n                dropdown.style.removeProperty('z-index');\n                document.removeEventListener('click', this.handleClickAwayBound);\n            },\n            onOptionClick: function(search, display) {\n                this['s_year'] = search;\n                this['s_year_label'] = display;\n                this.toggleDropdown();\n                this.getPosts();\n            },\n            handleClickAway: function(e) {\n                if (!e.target.closest('.iamc_rm_year_dropdown') && this.dropdownOpened) {\n                    this.toggleDropdown();\n                }\n            },\n        }));\n    });\n})();\n<\/script>\n                    <\/div>    \n                    <div class=\"w-full lg:w-[200px]\">\n                        <p class=\"mb-2 heading6 text-metalic-dark-02\">\n                            \u985e\u578b                        <\/p>\n                        <div class=\"relative\" x-data=\"iamc_rm_type_of_document_dropdown\">\n    <input type=\"text\" id=\"s_doc_type\" name=\"s_doc_type\" x-model=\"s_doc_type\" class=\"hidden\"\n        aria-hidden=\"false\" \/>\n\n    <div class=\"iamc_rm_type_of_document_dropdown px-3 md:px-5 rounded py-2 md:py-2 border-[1px] border-metalic-grey-02 flex items-center h-[50px]\"\n        :class=\"dropdownOpened ? 'border-black-000' : ''\" @click=\"toggleDropdown\">\n        <label for=\"s_doc_type\"\n            class=\"mr-2.5 text-nowrap pointer-events-none text-18 font-normal text-darkPurple\"\n            :class=\"!s_doc_type ? '' : ''\" x-text=\"s_doc_type_label\"><\/label>\n        <span class=\"ml-auto shrink-0\">\n            <img decoding=\"async\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/resources\/images\/icons\/arrow-down.svg\" alt=\"Down Arrow Svg\"\n                class=\" transition-all pointer-events-none\" :class=\"dropdownOpened ? 'rotate-180' : ''\" \/>\n        <\/span>\n    <\/div>\n\n    <ul class=\"absolute rounded-lg min-w-max w-full -bottom-1.5 left-0 translate-y-full z-[11] bg-white text-18 font-normal text-darkPurple transition-all max-h-0 overflow-hidden border\"\n        :class=\"dropdownOpened ? 'border-black-000' : 'border-white'\" x-ref=\"dropdown\">\n        <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_doc_type_label == '\u5168\u90e8' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('', '\u5168\u90e8')\">\n            \u5168\u90e8        <\/li>\n                <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_doc_type_label == '\u53c3\u8003\u8cc7\u6599' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('147', '\u53c3\u8003\u8cc7\u6599')\">\n            \u53c3\u8003\u8cc7\u6599        <\/li>\n                <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_doc_type_label == '\u6280\u8853\u901a\u544a' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('149', '\u6280\u8853\u901a\u544a')\">\n            \u6280\u8853\u901a\u544a        <\/li>\n                <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_doc_type_label == '\u6307\u5357' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('146', '\u6307\u5357')\">\n            \u6307\u5357        <\/li>\n                <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_doc_type_label == '\u6307\u5f15' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('148', '\u6307\u5f15')\">\n            \u6307\u5f15        <\/li>\n            <\/ul>\n<\/div>\n<script>\n(function() {\n    document.addEventListener('alpine:init', function() {\n        Alpine.data('iamc_rm_type_of_document_dropdown', () => ({\n            handleClickAwayBound: null,\n            dropdownOpened: false,\n            toggleDropdown: function() {\n                if (this.dropdownOpened) {\n                    this.dropdownOpened = false;\n                    this.hideDropdown();\n                } else {\n                    this.dropdownOpened = true;\n                    this.showDropdown();\n                }\n            },\n            showDropdown: function() {\n                const dropdown = this.$refs.dropdown;\n                let maxHeight = 0;\n                Array.from(dropdown.children).forEach(child => {\n                    maxHeight += child.clientHeight;\n                });\n                dropdown.style.setProperty('max-height', maxHeight + 'px');\n                dropdown.style.setProperty('z-index', 12);\n                this.handleClickAwayBound = this.handleClickAway.bind(\n                    this\n                ); \/\/ using extra var to make function in state when removing listener\n                document.addEventListener('click', this.handleClickAwayBound);\n            },\n            hideDropdown: function() {\n                const dropdown = this.$refs.dropdown;\n                dropdown.style.removeProperty('max-height');\n                dropdown.style.removeProperty('z-index');\n                document.removeEventListener('click', this.handleClickAwayBound);\n            },\n            onOptionClick: function(search, display) {\n                this['s_doc_type'] = search;\n                this['s_doc_type_label'] = display;\n                this.toggleDropdown();\n                this.getPosts();\n            },\n            handleClickAway: function(e) {\n                if (!e.target.closest('.iamc_rm_type_of_document_dropdown') && this.dropdownOpened) {\n                    this.toggleDropdown();\n                }\n            },\n        }));\n    });\n})();\n<\/script>\n                    <\/div>\n                    <div class=\"w-full lg:w-[200px]\">\n                        <p class=\"mb-2 heading6 text-metalic-dark-02\">\n                            \u4f86\u6e90                        <\/p>\n                        <div class=\"relative\" x-data=\"iamc_rm_source_dropdown\">\n    <input type=\"text\" id=\"s_source\" name=\"s_source\" x-model=\"s_source\" class=\"hidden\"\n        aria-hidden=\"false\" \/>\n\n    <div class=\"iamc_rm_source_dropdown px-3 md:px-5 rounded py-2 md:py-2 border-[1px] border-metalic-grey-02 flex items-center h-[50px]\"\n        :class=\"dropdownOpened ? 'border-black-000' : ''\" @click=\"toggleDropdown\">\n        <label for=\"s_source\"\n            class=\"mr-2.5 text-nowrap pointer-events-none text-18 font-normal text-darkPurple\"\n            :class=\"!s_source ? '' : ''\" x-text=\"s_source_label\"><\/label>\n        <span class=\"ml-auto shrink-0\">\n            <img decoding=\"async\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/resources\/images\/icons\/arrow-down.svg\" alt=\"Down Arrow Svg\"\n                class=\" transition-all pointer-events-none\" :class=\"dropdownOpened ? 'rotate-180' : ''\" \/>\n        <\/span>\n    <\/div>\n\n    <ul class=\"absolute rounded-lg min-w-max w-full -bottom-1.5 left-0 translate-y-full z-[11] bg-white text-18 font-normal text-darkPurple transition-all max-h-0 overflow-hidden border\"\n        :class=\"dropdownOpened ? 'border-black-000' : 'border-white'\" x-ref=\"dropdown\">\n        <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_source_label == '\u5168\u90e8' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('', '\u5168\u90e8')\">\n            \u5168\u90e8        <\/li>\n                <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_source_label == '\u52a0\u62ff\u5927' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('160', '\u52a0\u62ff\u5927')\">\n            \u52a0\u62ff\u5927        <\/li>\n                <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_source_label == '\u5fb7\u570b' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('159', '\u5fb7\u570b')\">\n            \u5fb7\u570b        <\/li>\n                <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_source_label == '\u65b0\u52a0\u5761' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('157', '\u65b0\u52a0\u5761')\">\n            \u65b0\u52a0\u5761        <\/li>\n                <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_source_label == '\u7f8e\u570b' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('155', '\u7f8e\u570b')\">\n            \u7f8e\u570b        <\/li>\n                <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_source_label == '\u82f1\u570b' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('156', '\u82f1\u570b')\">\n            \u82f1\u570b        <\/li>\n                <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_source_label == '\u9999\u6e2f' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('158', '\u9999\u6e2f')\">\n            \u9999\u6e2f        <\/li>\n            <\/ul>\n<\/div>\n<script>\n(function() {\n    document.addEventListener('alpine:init', function() {\n        Alpine.data('iamc_rm_source_dropdown', () => ({\n            handleClickAwayBound: null,\n            dropdownOpened: false,\n            toggleDropdown: function() {\n                if (this.dropdownOpened) {\n                    this.dropdownOpened = false;\n                    this.hideDropdown();\n                } else {\n                    this.dropdownOpened = true;\n                    this.showDropdown();\n                }\n            },\n            showDropdown: function() {\n                const dropdown = this.$refs.dropdown;\n                let maxHeight = 0;\n                Array.from(dropdown.children).forEach(child => {\n                    maxHeight += child.clientHeight;\n                });\n                dropdown.style.setProperty('max-height', maxHeight + 'px');\n                dropdown.style.setProperty('z-index', 12);\n                this.handleClickAwayBound = this.handleClickAway.bind(\n                    this\n                ); \/\/ using extra var to make function in state when removing listener\n                document.addEventListener('click', this.handleClickAwayBound);\n            },\n            hideDropdown: function() {\n                const dropdown = this.$refs.dropdown;\n                dropdown.style.removeProperty('max-height');\n                dropdown.style.removeProperty('z-index');\n                document.removeEventListener('click', this.handleClickAwayBound);\n            },\n            onOptionClick: function(search, display) {\n                this['s_source'] = search;\n                this['s_source_label'] = display;\n                this.toggleDropdown();\n                this.getPosts();\n            },\n            handleClickAway: function(e) {\n                if (!e.target.closest('.iamc_rm_source_dropdown') && this.dropdownOpened) {\n                    this.toggleDropdown();\n                }\n            },\n        }));\n    });\n})();\n<\/script>\n                    <\/div>\n                    \n                <\/div>\n\n                <div class=\"w-full lg:w-auto mt-5 lg:mt-0 lg:ml-5\">\n                    <div class=\"w-full lg:w-[250px] xl:w-[300px]\">\n                        <p class=\"hidden lg:block mb-2 heading6 text-metalic-dark-02\">&nbsp;<\/p>\n                        <div class=\"search-filter-base search-filter-field relative\">\n                            <div class=\"search-filter-input-text h-[50px] search-filter-field__input\">\n                                <input x-model=\"s_term\" type=\"text\" aria-label=\"Search\" autocomplete=\"off\"\n                                    placeholder=\"\u6309\u95dc\u9375\u5b57\u641c\u5c0b\" class=\"search-filter-input-text__input\"\n                                    @input.debounce.500ms=\"getPosts\">\n                                <button type=\"submit\" class=\"absolute right-3 top-1\/2 -translate-y-1\/2\">\n                                    <img decoding=\"async\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/resources\/images\/icons\/search-icon.svg\" alt=\"search icon\" class=\"w-4 h-4\">\n                                <\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"mt-8 xs:mt-10 hidden\">\n            <div class=\"search-results\">\n                <!-- skeleton -->\n                <div x-show=\"loading\" x-cloak class=\"overflow-x-auto table-wrapper animate-pulse\">\n                    <table class=\"w-full min-w-[1300px]\">\n                        <thead>\n                            <tr class=\"heading6\">\n                                <th class=\"min-w-[170px]\">\n                                    \u65e5\u671f                                <\/th>\n                                <th>\n                                    \u985e\u578b                                <\/th>\n                                <th>\n                                    \u6a19\u984c                                <\/th>\n                                <th>\n                                    \u4f86\u6e90                                <\/th>\n                            <\/tr>\n                        <\/thead>\n                        <tbody>\n                            <template x-for=\"n in 6\" :key=\"n\">\n                                <tr>\n                                    <td>\n                                        <div class=\"h-4 bg-gray-200 rounded w-24\"><\/div>\n                                    <\/td>\n                                    <td>\n                                        <div class=\"h-4 bg-gray-200 rounded w-32\"><\/div>\n                                    <\/td>\n                                    <td>\n                                        <div class=\"h-4 bg-gray-200 rounded w-full\"><\/div>\n                                    <\/td>\n                                    <td>\n                                        <div class=\"h-4 bg-gray-200 rounded w-32\"><\/div>\n                                    <\/td>\n                                <\/tr>\n                            <\/template>\n                        <\/tbody>\n                    <\/table>\n                <\/div>\n\n                <!-- results -->\n                <div x-show=\"!loading\" class=\"reference-material-results\">\n                                            <div class=\"overflow-x-auto table-wrapper\">\n                            <table class=\"w-full min-w-[1300px]\">\n                                <thead>\n                                    <tr class=\"heading6\">\n                                        <th class=\"min-w-[170px]\">\n                                            \u65e5\u671f                                        <\/th>\n                                        <th>\n                                            \u985e\u578b                                        <\/th>\n                                        <th>\n                                            \u6a19\u984c                                        <\/th>\n                                        <th>\n                                            \u4f86\u6e90                                        <\/th>\n                                    <\/tr>\n                                <\/thead>\n                                <tbody class=\"text-body-lg\">\n                                                                            <tr>\n                                            <td>July 10, 2026<\/td>\n                                            <td><\/td>\n                                            <td>\n                                                <a href=\"\" target=\"_blank\"\n                                                    class=\"underline text-secondary-green-01\">\n                                                    Lorem ipsum dolor sit amet consectetur.                                                <\/a>\n                                            <\/td>\n                                            <td><\/td>\n                                        <\/tr>\n                                                                            <tr>\n                                            <td>July 10, 2026<\/td>\n                                            <td><\/td>\n                                            <td>\n                                                <a href=\"\" target=\"_blank\"\n                                                    class=\"underline text-secondary-green-01\">\n                                                    Lorem ipsum dolor sit amet consectetur. Amet sit augue aliquam tincidunt. Mi purus sit turpis.                                                <\/a>\n                                            <\/td>\n                                            <td><\/td>\n                                        <\/tr>\n                                                                            <tr>\n                                            <td>July 10, 2026<\/td>\n                                            <td><\/td>\n                                            <td>\n                                                <a href=\"\" target=\"_blank\"\n                                                    class=\"underline text-secondary-green-01\">\n                                                    \u9ad8\u5c64MiC\u5efa\u7bc9\u65b0\u578b\u9023\u7d50\u7cfb\u7d71\u8207\u8a2d\u8a08\u65b9\u6cd5\uff082025\uff09                                                <\/a>\n                                            <\/td>\n                                            <td><\/td>\n                                        <\/tr>\n                                                                    <\/tbody>\n                            <\/table>\n                        <\/div>\n                                    <\/div>\n\n                <div class=\"mt-8 xs:mt-10 xl:mt-[60px] paginations\" x-data=\"iamc_reference_materials_pagination\" x-show=\"totalPages\" x-cloak>\n    <ul class=\"flex justify-center items-center gap-[10px] xs:gap-3\">\n        <li @click=\"onPrev\" class=\"pg-item prev\" :class=\"current === 1 ? 'disabled' : ''\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" fill=\"none\">\n                <path d=\"M6 1L1 6L6 11\" stroke=\"#24353B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n            <\/svg>\n        <\/li>\n\n        <template x-for=\"pageNumber in visiblePages\">\n            <li @click=\"onPaginate(pageNumber)\" :disabled=\"!parseInt(pageNumber)\" class=\"pg-item\"\n                :class=\"pageNumber === current ? 'active' : ''\">\n                <span x-text=\"pageNumber\"><\/span>\n            <\/li>\n        <\/template>\n\n        <li @click=\"onNext\" class=\"pg-item next\" :class=\"current === totalPages ? 'disabled' : ''\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" fill=\"none\">\n                <path d=\"M1 1L6 6L1 11\" stroke=\"#24353B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n            <\/svg>\n        <\/li>\n    <\/ul>\n<\/div>\n<script>\n    (function() {\n        document.addEventListener('alpine:init', function() {\n            Alpine.data('iamc_reference_materials_pagination', () => ({\n                onPrev: function() {\n                    if (this.current - 1) {\n                        this.current -= 1;\n                    } else {\n                        this.current = 1;\n                    }\n                    this.getPosts(false);\n                },\n                onNext: function() {\n                    if (this.current + 1 <= this.totalPages) {\n                        this.current += 1;\n                    } else {\n                        this.current = this.totalPages;\n                    }\n                    this.getPosts(false);\n                },\n                onPaginate: function(index) {\n                    this.current = index;\n                    this.getPosts(false);\n                },\n                get visiblePages() {\n                    const range = 2;\n                    const visible = [];\n\n                    \/\/ Handle single page or no pages\n                    if (this.totalPages <= 1) {\n                        if (this.totalPages === 1) visible.push(1);\n                        return visible;\n                    }\n\n                    visible.push(1);\n\n                    if (this.current - range > 2) {\n                        if (this.current - range < this.totalPages) {\n                            visible.push('...');\n                        }\n                    }\n\n                    for (let i = Math.max(2, this.current - range); i < this.current; i++) {\n                        if (i < this.totalPages) {\n                            visible.push(i);\n                        }\n                    }\n\n                    if (this.current < this.totalPages) {\n                        if (this.current !== 1) {\n                            if (this.current !== this.totalPages) {\n                                visible.push(this.current);\n                            }\n                        }\n                    }\n\n                    for (let i = this.current + 1; i <= Math.min(this.totalPages - 1, this.current + range); i++) {\n                        if (i < this.totalPages) {\n                            visible.push(i);\n                        }\n                    }\n\n                    if (this.current + range < this.totalPages - 1) {\n                        visible.push('...');\n                    }\n\n                    visible.push(this.totalPages);\n\n                    return visible;\n                }\n            }));\n        })\n    })();\n<\/script>\n            <\/div>\n        <\/div>\n    <\/div>\n\n<\/div>\n\n<script>\n    (function() {\n        document.addEventListener('alpine:init', function() {\n            Alpine.data('iamc_reference_materials', () => ({\n                s_term: \"\",\n                s_year: \"\",\n                s_year_label: \"\u5168\u90e8\",\n                s_doc_type: \"\",\n                s_doc_type_label: \"\u5168\u90e8\",\n                s_source: \"\",\n                s_source_label: \"\u5168\u90e8\",\n                s_order: \"DESC\",\n                current: 1,\n                per_page: 10,\n                totalPages: Math.ceil(3 \/ 10),\n                loading: false,\n\n                getPosts: async function(resetCurrent = true) {\n                    if (resetCurrent) this.current = 1;\n                    this.loading = true;\n\n                    const baseUrl = 'https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/iamc\/v1\/reference-materials';\n                    const param = {\n                        s_term: this.s_term,\n                        s_year: this.s_year,\n                        s_doc_type: this.s_doc_type,\n                        s_source: this.s_source,\n                        s_order: this.s_order,\n                        current: this.current,\n                    };\n                    const fetchUrl = baseUrl + \"?\" + this.objectToQueryString(param);\n\n                    try {\n                        const res = await fetch(fetchUrl);\n                        const data = await res.json();\n\n                        this.totalPosts = data.total;\n                        this.totalPages = data.total_pages;\n\n                        document.querySelector('.reference-material-results').innerHTML = data.html;\n\n                        const hrefParams = {\n                            s_term: this.s_term,\n                            s_year: this.s_year,\n                            s_doc_type: this.s_doc_type,\n                            s_source: this.s_source,\n                            s_order: this.s_order,\n                            current: this.current,\n                        };\n                        const newUrl = window.location.href.split(\"?\")[0] + \"?\" + this.objectToQueryString(hrefParams);\n                        window.history.replaceState({}, document.title, newUrl);\n                    } catch (e) {\n                        console.log(e);\n                    } finally {\n                        this.loading = false;\n                    }\n                },\n                objectToQueryString: function(obj) {\n                    for (let key in obj) {\n                        if (!obj[key]) delete obj[key];\n                    }\n                    return Object.keys(obj).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(obj[key])).join('&');\n                },\n            }));\n        });\n    })();\n<\/script>\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":{"_acf_changed":false,"footnotes":""},"class_list":["post-751","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/pages\/751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/comments?post=751"}],"version-history":[{"count":3,"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/pages\/751\/revisions"}],"predecessor-version":[{"id":1123,"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/pages\/751\/revisions\/1123"}],"wp:attachment":[{"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/media?parent=751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}