{"id":734,"date":"2026-06-16T05:41:55","date_gmt":"2026-06-16T05:41:55","guid":{"rendered":"https:\/\/hku-iamc.visibleone.dev\/projects\/"},"modified":"2026-07-27T05:58:49","modified_gmt":"2026-07-27T05:58:49","slug":"projects","status":"publish","type":"page","link":"https:\/\/hku-iamc.visibleone.dev\/tcn\/projects\/","title":{"rendered":"\u8cc7\u6e90\u4e2d\u5fc3"},"content":{"rendered":"<div block-name=\"project-list\" x-data=\"imac_projects\" class=\"relative project-list\">\n\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\/F1-Projects.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\" x-text=\"currentTypeLabel \"><\/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 href=\"https:\/\/hku-iamc.visibleone.dev\/tcn\/\" target=\"_self\">\n                                        \u9996\u9801                                    <\/a>\n                                <\/li>\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                                                                                                                <li class=\"lg:min-w-max text-grey transition-all duration-300 hover:text-highlight-orange\">\n                                    <a href=\"https:\/\/hku-iamc.visibleone.dev\/tcn\/projects\/\" target=\"_self\">\n                                        \u8cc7\u6e90\u4e2d\u5fc3                                    <\/a>\n                                <\/li>\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                                                                                                                <li class=\"lg:min-w-max text-grey transition-all duration-300 hover:text-highlight-orange\">\n                                    <a href=\"https:\/\/hku-iamc.visibleone.dev\/tcn\/projects\/\" target=\"_self\">\n                                        \u9805\u76ee                                    <\/a>\n                                <\/li>\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                                                                                                                <li class=\"text-white rounded bg-[rgba(255,255,255,0.30)] py-[6px] px-[10px]\">\n                                    <span x-text=\"currentTypeLabel ? currentTypeLabel : 'All Projects'\">\n                                        \u7814\u7a76\u578b\u9805\u76ee                                    <\/span>\n                                <\/li>\n                                                                        <\/ul>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/div>\n    \n        <div class=\"px-3 bg-[#FAFAFA] flex justify-center gap-6 sm:gap-10 lg:gap-[50px] border-b border-stroke\">\n            <div class=\"bg-[#FAFAFA] flex justify-center gap-6 sm:gap-10 lg:gap-[50px]\">\n                <!-- <a href=\"javascript:void(0)\" @click=\"setType('')\"\n                class=\"py-6 text-body-md border-b-4\"\n                :class=\"s_type === '' ? 'text-secondary-green-01 border-secondary-green-01' : 'text-metalic-dark-02 border-transparent'\">\n                All\n            <\/a> -->\n                                    <a href=\"javascript:void(0)\" @click=\"setType('83')\"\n                        class=\"py-6 heading6 border-b-4\"\n                        :class=\"s_type === '83' ? 'text-secondary-green-01 border-secondary-green-01' : 'text-metalic-dark-02 border-transparent transition-all duration-300 hover:text-secondary-green-01 hover:border-secondary-green-01 project-item'\">\n                        \u7814\u7a76\u578b\u9805\u76ee                    <\/a>\n                                    <a href=\"javascript:void(0)\" @click=\"setType('84')\"\n                        class=\"py-6 heading6 border-b-4\"\n                        :class=\"s_type === '84' ? 'text-secondary-green-01 border-secondary-green-01' : 'text-metalic-dark-02 border-transparent transition-all duration-300 hover:text-secondary-green-01 hover:border-secondary-green-01 project-item'\">\n                        \u61c9\u7528\u578b\u9805\u76ee                    <\/a>\n                            <\/div>\n        <\/div>\n    <div class=\"container mx-auto \">\n        <div class=\"container-lg py-10 xs:py-[60px] xl:py-20\">\n            <!-- when you finish search and filter fileds, i will adjust -->\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                        \n                        <div class=\"w-full lg:w-[200px]\">\n                            <p class=\"mb-2 heading6 text-metalic-dark-02\">\u5e74\u4efd<\/p>\n\n\n                            <div class=\"relative\" x-data=\"iamc_project_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_project_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('144', '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('145', '2026')\">\n            2026        <\/li>\n            <\/ul>\n<\/div>\n<script>\n(function() {\n    document.addEventListener('alpine:init', function() {\n        Alpine.data('iamc_project_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_project_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\u5225                            <\/p>\n\n                            <div class=\"relative\" x-data=\"iamc_project_category_dropdown\">\n    <input type=\"text\" id=\"s_category\" name=\"s_category\" x-model=\"s_category\" class=\"hidden\"\n        aria-hidden=\"false\" \/>\n\n    <div class=\"iamc_project_category_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_category\"\n            class=\"mr-2.5 text-nowrap pointer-events-none text-18 font-normal text-darkPurple\"\n            :class=\"!s_category ? '' : ''\" x-text=\"s_category_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_category_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_category_label == 'MiC\u4f9b\u61c9\u93c8\u7ba1\u7406' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('96', 'MiC\u4f9b\u61c9\u93c8\u7ba1\u7406')\">\n            MiC\u4f9b\u61c9\u93c8\u7ba1\u7406        <\/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_category_label == 'MiC\u667a\u6167\u904b\u8f38' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('99', 'MiC\u667a\u6167\u904b\u8f38')\">\n            MiC\u667a\u6167\u904b\u8f38        <\/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_category_label == 'MiC\u667a\u80fd\u540a\u88dd' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('98', 'MiC\u667a\u80fd\u540a\u88dd')\">\n            MiC\u667a\u80fd\u540a\u88dd        <\/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_category_label == 'MiC\u667a\u80fd\u8cea\u6aa2' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('100', 'MiC\u667a\u80fd\u8cea\u6aa2')\">\n            MiC\u667a\u80fd\u8cea\u6aa2        <\/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_category_label == 'MiC\u78b3\u6392\u8ffd\u8e64' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('97', 'MiC\u78b3\u6392\u8ffd\u8e64')\">\n            MiC\u78b3\u6392\u8ffd\u8e64        <\/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_category_label == 'MiC\u7bc0\u9ede\u5275\u65b0' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('101', 'MiC\u7bc0\u9ede\u5275\u65b0')\">\n            MiC\u7bc0\u9ede\u5275\u65b0        <\/li>\n            <\/ul>\n<\/div>\n<script>\n(function() {\n    document.addEventListener('alpine:init', function() {\n        Alpine.data('iamc_project_category_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_category'] = search;\n                this['s_category_label'] = display;\n                this.toggleDropdown();\n                this.getPosts();\n            },\n            handleClickAway: function(e) {\n                if (!e.target.closest('.iamc_project_category_dropdown') && this.dropdownOpened) {\n                    this.toggleDropdown();\n                }\n            },\n        }));\n    });\n})();\n<\/script>\n                        <\/div>\n                        \n                    <\/div>\n\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\n                            <div class=\"search-filter-base search-filter-field relative\">\n                                <div class=\"search-filter-input-text search-filter-input-text h-[50px] search-filter-field__input\">\n                                    <input x-model=\"s_term\" type=\"text\" id=\"search-filter-input-text-0\" aria-label=\"New field\" autocomplete=\"off\" 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\"\n                                            class=\"w-4 h-4\">\n                                    <\/button>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"mt-8 xs:mt-10 xl:mt-[60px]\">\n                <div class=\"search-results\">\n                    <div x-show=\"loading\" x-cloak class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 3xl:gap-10\">\n                        <template x-for=\"n in 6\" :key=\"n\">\n                            <div class=\"flex flex-col gap-4 animate-pulse\">\n                                <div class=\"w-full aspect-[1\/0.58] bg-gray-200 rounded\"><\/div>\n                                <div class=\"h-3 w-1\/3 bg-gray-200 rounded\"><\/div>\n                                <div class=\"h-5 w-3\/4 bg-gray-200 rounded\"><\/div>\n                                <div class=\"h-3 w-1\/2 bg-gray-200 rounded\"><\/div>\n                            <\/div>\n                        <\/template>\n                    <\/div>\n                    <div x-show=\"!loading\" class=\"projects-list grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 3xl:gap-10\">\n                                                    <div class=\"no-results\">\n                                <h5 class=\"heading5 text-metalic-dark-01\">\n                                    \u672a\u627e\u5230\u7d50\u679c                                <\/h5>\n                                <div class=\"mt-3 text-body-md text-metalic-dark-02\">\n                                    \u5617\u8a66\u5176\u4ed6\u95dc\u9375\u5b57\u6216\u6e05\u9664\u641c\u5c0b\u5167\u5bb9\u3002                                <\/div>\n                            <\/div>\n                                            <\/div>\n                    <div class=\"mt-8 xs:mt-10 xl:mt-[60px] paginations\" x-data=\"iamc_projects_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_projects_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    <\/div>\n\n\n<\/div>\n\n<script>\n    (function() {\n        document.addEventListener('alpine:init', function() {\n            Alpine.data('imac_projects', () => ({\n                s_term: \"\",\n                s_year: \"\",\n                s_year_label: \"\u5168\u90e8\",\n                s_order: \"DESC\",\n                s_category: \"\",\n                s_category_label: \"\u5168\u90e8\",\n                s_type: \"83\",\n                current: 1,\n                per_page: 12,\n                showPagination: true,\n                totalPages: Math.ceil(0 \/ 12),\n                loading: false,\n                projectTypesMap: {\"83\":\"\\u7814\\u7a76\\u578b\\u9805\\u76ee\",\"84\":\"\\u61c9\\u7528\\u578b\\u9805\\u76ee\"},\n                get currentTypeLabel() {\n                    return this.projectTypesMap[this.s_type] ?? '';\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\/projects';\n                    const param = {\n                        s_term: this.s_term,\n                        s_year: this.s_year,\n                        s_category: this.s_category,\n                        s_order: this.s_order,\n                        current: this.current,\n                        s_type: this.s_type,\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                        const content = document.querySelector('.projects-list');\n                        content.innerHTML = data.html;\n                        \/\/ update URL\n                        const hrefParams = {\n                            s_term: this.s_term,\n                            s_year: this.s_year,\n                            s_category: this.s_category,\n                            s_order: this.s_order,\n                            current: this.current,\n                            s_type: this.s_type,\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                setType: function(type) {\n                    this.s_type = type;\n                    this.getPosts();\n                },\n                objectToQueryString: function(obj) {\n                    for (let key in obj) {\n                        if (!obj[key]) delete obj[key];\n                    }\n\n                    return Object.keys(obj).map(key => encodeURIComponent(key) + '=' +\n                        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-734","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/pages\/734","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=734"}],"version-history":[{"count":5,"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/pages\/734\/revisions"}],"predecessor-version":[{"id":1120,"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/pages\/734\/revisions\/1120"}],"wp:attachment":[{"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/media?parent=734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}