{"id":26723,"date":"2024-09-19T10:14:39","date_gmt":"2024-09-19T10:14:39","guid":{"rendered":"https:\/\/devwp02.visibleone.io\/vowp\/blog\/"},"modified":"2024-12-19T10:18:07","modified_gmt":"2024-12-19T10:18:07","slug":"blog","status":"publish","type":"page","link":"https:\/\/devwp02.visibleone.io\/vowp\/zh-hk\/blog\/","title":{"rendered":"Insight"},"content":{"rendered":"\n<div block-name=\"BlogSearchFilter\"  x-data=\"blog_search_filter\">\n  <div class=\"relative z-30 pt-[43px] md:pt-[61px] xl:pt-[65px] 2xl:pt-[74px]\">\n    <div class=\"px-4 md:px-8 lg:px-24 2xl:px-36 max-w-screen-2xl mx-auto pt-6 md:pt-8 xl:pt-12\">\n      \n<div class=\"lg:flex items-center relative z-10\" x-data=\"blog_search_filter_filter\">\n  <h1 class=\"font-semibold text-[#2e475d] fs-5xl\" x-text=\"searched_text\">\n    Blog  <\/h1>\n    <div class=\"lg:ml-auto mt-5 lg:mt-auto\">\n    <form method=\"get\" action=\"https:\/\/devwp02.visibleone.io\/vowp\/zh-hk\/blog\/search\/\"\n      class=\"flex border rounded bg-white relative md:position-[unset] lg:max-w-max transition duration-300 border-[#7691AD]\"\n      x-ref=\"searchFormRef\">\n      <fieldset>\n        <legend class=\"h-full\">\n          <label for=\"search\" class=\"hidden\">Terms<\/label>\n          <input id=\"search\" type=\"text\" name=\"search\"\n            class=\"h-full min-w-0 px-4 outline-none lg:max-w-md bg-transparent flex-1\" value=\"\" x-model=\"search\"\n            placeholder=\"Search...\" aria-label=\"Search Keyword\" \/>\n        <\/legend>\n      <\/fieldset>\n      <fieldset>\n        <legend>\n          <label for=\"category\" class=\"hidden\">c id<\/label>\n          <input id=\"category\" type=\"text\" name=\"category\" hidden aria-hidden=\"true\" :value=\"category\" \/>\n        <\/legend>\n      <\/fieldset>\n      <div class=\"md:relative flex items-stretch md:border-l transition duration-300 border-[#7691AD]\">\n        <button tabindex=\"0\" title=\"Category Filter\" class=\"px-3 flex items-center cursor-pointer md:ml-3 searchFilterIcon\" @click=\"toggleDropdown\">\n        <img decoding=\"async\" alt=\"\" aria-hidden=\"true\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/blog\/hamburger-icon.svg\"\n              class=\"size-full object-contain mr-2.5 max-w-3\" \/>\n\n          <span class=\"fs-base md:min-w-[15ch] max-w-[15ch] whitespace-nowrap overflow-hidden text-ellipsis pointer-events-none hidden md:block pr-2 font-medium text-[#516F90]\"\n            x-text=\"c_text\">\n            All Categories          <\/span>\n        <\/button>\n        <ul x-ref=\"dropdown\"\n          class=\"searchFilterContent absolute -bottom-px right-0 md:right-[unset] min-w-[15ch] md:left-0 translate-y-full w-full bg-white py-3 px-5 shadow-lg hidden transition-opacity\">\n          <li class=\"mb-3 last:mb-0\">\n            <button tabindex=\"0\" aria-label='All Categories'\n            class=\"mb-3 w-full text-left font-normal last:mb-0 fs-base cursor-pointer max-w-full overflow-hidden text-ellipsis transition duration-300 hover:text-[#00DB92]\"\n            :class=\"category == '' ? 'text-[#00DB92]' : 'text-[#516F90]'\"\n            @click=\"changeCategory('', 'All Categories')\">\n            All Categories            <\/button>\n            \n          <\/li>\n\n                  <\/ul>\n      <\/div>\n\n      <button type=\"submit\" title=\"form submit\"\n        class=\"bg-[#00DB92] p-3 rounded-tr-sm rounded-br-sm transition-colors duration-300 hover:bg-themePrimary\/80\">\n        <div class=\"size-6\">\n          <img decoding=\"async\" alt=\"\" aria-hidden=\"true\" class=\"size-full object-contain\"\n            src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/themes\/visibleone\/public\/images\/blog\/search-icon.svg\" \/>\n        <\/div>\n      <\/button>\n    <\/form>\n  <\/div>\n<\/div>\n<script>\n  (function () {\n    document.addEventListener('alpine:init', function () {\n      Alpine.data('blog_search_filter_filter', () => ({\n        c_text: 'All Categories',\n        dropdown: null,\n        clickawayHandler: null,\n        showDropdown: false,\n        init() {\n          if (this.blockShowResult) {\n            this.$refs.searchFormRef.addEventListener(\"submit\", (e) => {\n              e.preventDefault();\n              this.getPosts();\n            });\n          }\n\n          this.dropdown = this.$refs.dropdown;\n          this.clickawayHandler = (e) => { this.clickaway(e) };\n        },\n        clickaway(e) {\n          if (e.target !== this.dropdown && !this.dropdown.contains(e.target)) {\n            this.toggleDropdown();\n          }\n        },\n        toggleDropdown() {\n          if (this.showDropdown) {\n            this.showDropdown = false;\n            this.dropdown.style.removeProperty('opacity');\n            setTimeout(() => {\n              this.dropdown.classList.add('hidden');\n            }, 150);\n            document.removeEventListener('click', this.clickawayHandler);\n          } else {\n            this.showDropdown = true;\n            this.dropdown.classList.remove('hidden');\n            void this.dropdown.clientHeight;\n            this.dropdown.style.setProperty('opacity', 1);\n            setTimeout(() => {\n              document.addEventListener('click', this.clickawayHandler);\n            }, 1);\n          }\n        },\n        changeCategory(id, text) {\n          this.category = id; \/\/ update parent variable\n          this.c_text = text;\n          this.toggleDropdown();\n          if (this.blockShowResult) {\n            this.getPosts();\n          }\n        }\n      }));\n    });\n  })();\n<\/script>    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  (function () {\n    function formatToDDMMYY(date) {\n      const day = String(date.getDate()).padStart(2, '0');\n      const month = String(date.getMonth() + 1).padStart(2, '0'); \n      const year = String(date.getFullYear()).slice(-2); \n\n      return `${day}\/${month}\/${year}`;\n    }\n\n    document.addEventListener('alpine:init', function () {\n      Alpine.data('blog_search_filter', () => ({\n        category: '',\n        search: '',\n        searched_text: `Blog`,\n        posts: [],\n        loading: false,\n        per_page: 12,\n        current: 1,\n        showPagination: Math.ceil(0 \/ 12),\n        totalPages: Math.ceil(0 \/ 12),\n        lang: 'ICL_LANGUAGE_CODE',\n        blockShowResult: Boolean(''),\n        formatDate: (date) => formatToDDMMYY(new Date(date)),\n        updateSearchedText() {\n          if (!this.search) {\n            this.searched_text = 'Blog';\n            return;\n          }\n\n          const prefix = 'Search Results for' + ' \"';\n          const suffix = '\"';\n          this.searched_text = prefix + `${this.search}` + suffix;\n        },\n        getPosts: async function (resetCurrent = true) {\n          this.updateSearchedText();\n          \/\/ clean up paged\n          if (resetCurrent) this.current = 1;\n          this.loading = true;\n\n          \/\/ fetch\n          const baseUrl = 'https:\/\/devwp02.visibleone.io\/vowp\/zh-hk\/wp-json\/wp\/v2\/posts';\n          const param = {\n            category: this.category,\n            search: this.search,\n            page: this.current,\n            per_page: this.per_page\n          }\n          if (this.lang) {\n            param.lang = this.lang;\n          }\n          const fetchURL = baseUrl + \"?\" + this.objectToQueryString(param);\n\n          try {\n            const res = await fetch(fetchURL);\n            const fetchPosts = await res.json();\n            const totalPost = res.headers.get('X-WP-Total');\n            this.posts = fetchPosts;\n            this.totalPages = Math.ceil(totalPost \/ 12);\n            this.showPagination = Math.ceil(totalPost \/ 12);\n\n            \/\/ render\n            const content = document.querySelector('[block-name=\"BlogSearchFilter\"] .result-wrapper');\n            if (content) {\n              if (!content.querySelector('template')) {\n                const template = `<template x-for=\"post in posts\" :key=\"post.id\">\n    <div class=\"w-full group overflow-hidden flex flex-col false \" :id=\"post.id\">\n      <a :href=\"post.link\" class=\"block w-full\">\n        <div class=\"text-center\">\n          <img :src=\"post.img\"\n            class=\"max-h-[190px] xl:max-h-[208px] 2xl:max-h-[215px] w-full object-cover aspect-video rounded\">\n        <\/div>\n      <\/a>\n\n      <div class=\"py-4\">\n        <div class=\"flex flex-nowrap items-start overflow-x-auto\">\n          <template x-for=\"category in post.categories\" :key=\"category.term_id\">\n            <div class=\"block pr-2\">\n              <a :href=\"'https:\/\/devwp02.visibleone.io\/vowp\/zh-hk\/blog\/search\/?category=' + category.term_id\"\n                class=\"block max-w-[250px] overflow-hidden text-ellipsis  whitespace-nowrap fs-sm leading-relaxed font-light text-primary hover:text-[#5f8bb9] mb-2 py-1 px-2 rounded-2xl bg-[#d9d9d975] hover:bg-[#d9d9d990] duration-75 \" x-text=\"category.name\">\n              <\/a>\n            <\/div>\n          <\/template>\n        <\/div>\n\n        <a :href=\"post.link\">\n          <div class=\"fs-base  text-[#213343] font-semibold line-clamp-2 my-3 group-hover:underline\" x-text=\"post.title\">\n          <\/div>\n          <p class=\"fs-sm text-[#213343] font-light line-clamp-3 mb-3\" x-text=\"post.excerpt\">\n          <\/p>\n          <p class=\"fs-sm text-[#516f90] font-light\" x-text=\"formatDate(post.date)\">\n          <\/p>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/template>`;\n                Alpine.morph(content, `\n                  <div class=\"${content.className}\">\n                    ${template}\n                  <\/div>\n                `)\n              }\n            }\n\n            \/\/ update url\n            const hrefParams = {\n              category: this.category,\n              search: this.search,\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\n          return Object.keys(obj).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(obj[key])).join('&');\n        }\n      }));\n    })\n  })();\n<\/script>\n\n\n\n<div block-name=\"BlogBanner\" class=\"BlogBanner text-primary\" >\n  <div class=\" relative overflow-hidden px-4 md:px-8 lg:px-24 2xl:px-36 max-w-screen-2xl mx-auto py-8 xl:py-16  \">\n    \n    <div class=\"flex flex-col lg:flex-row justify-center items-stretch gap-8\">\n              <div class=\"w-full lg:w-[58%] flex\">\n          <div class=\"w-full group overflow-hidden flex flex-col  bg-[#00DB921A]\">\n            <a href=\"https:\/\/devwp02.visibleone.io\/vowp\/blog\/test\/\" class=\"block w-full\">\n              <div class=\"text-center\">\n                <img decoding=\"async\" alt=\"Test\" src=\"\" class=\"h-auto w-full object-cover aspect-[2500\/1640] rounded\" \/>\n              <\/div>\n            <\/a>\n            <div class=\"p-4\">\n              <div class=\"flex flex-nowrap items-start overflow-x-auto\">\n                              <\/div>\n\n              <a href=\"https:\/\/devwp02.visibleone.io\/vowp\/blog\/test\/\">\n                <div class=\"fs-2xl  text-[#213343] font-semibold line-clamp-2 my-3 group-hover:underline\">\n                  Test                <\/div>\n                <p class=\"fs-sm text-[#213343] font-light line-clamp-3 mb-3\">\n                                  <\/p>\n                <p class=\"fs-sm text-[#516f90] font-light\">\n                  9\/12\/24                <\/p>\n              <\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n      \n          <\/div>\n  <\/div>\n<\/div>\n\n\n<div block-name=\"BlogThreeColumn\" id=\"blog_three_column_01\"  class=\"container relative overflow-hidden BlogThreeColumn\">\n  <div class=\"flex items-end mb-7 pb-3 border-b-2 border-[#1bc5bd]\">\n    <h2 class=\"font-semibold text-[#2e475d] fs-3xl\">Lasted<\/h2>\n      <\/div>\n\n  <\/div>\n\n\n<div block-name=\"BlogThreeColumn\"   class=\"container relative overflow-hidden BlogThreeColumn\">\n  <div class=\"flex items-end mb-7 pb-3 border-b-2 border-[#1bc5bd]\">\n    <h2 class=\"font-semibold text-[#2e475d] fs-3xl\">Digital Marketing<\/h2>\n      <\/div>\n\n  <\/div>\n\n\n<div block-name=\"BlogThreeColumn\"   class=\"container relative overflow-hidden BlogThreeColumn\">\n  <div class=\"flex items-end mb-7 pb-3 border-b-2 border-[#1bc5bd]\">\n    <h2 class=\"font-semibold text-[#2e475d] fs-3xl\">Web Design<\/h2>\n      <\/div>\n\n  <\/div>\n\n\n\n<div class=\"Topic container relative overflow-hidden\">\n  <div class=\"w-full mx-auto px-4 lg:px-4 xl:px-12 text-center mb-4 lg:mb-8 \">\n    <div class=\"fs-5xl font-semibold mb-2 text-primary\">Explore More Topics<\/div>\n      <\/div>\n  <div class=\"w-full flex flex-col justify-center items-stretch md:flex-row md:items-center\">\n          <a href=\"https:\/\/devwp02.visibleone.io\/vowp\/blog\/category\/website-security\/\"\n        class=\"group text-secondary flex md:flex-col md:justify-center items-center my-3 md:m-4 bg-slate-100 shadow-lg md:shadow-md\">\n        <div class=\"mr-4 md:m-auto rounded-r-md md:rounded-none md:rounded-t-md overflow-hidden\">\n          <img loading=\"lazy\" decoding=\"async\" width=\"336\" height=\"148\" alt=\"24-hour responsive service icon in visible one\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/email-marketing_e5ef345f.svg\"\n            class=\"w-full max-w-[80px] md:max-w-[240px] lg:max-w-[380px] h-auto aspect-square md:aspect-auto object-cover\" \/>\n        <\/div>\n\n        <div class=\"flex-1  md:py-8 xl:py-9 px-2 overflow-hidden\">\n          <div class=\"flex justify-center items-center\">\n            <p class=\"fs-lg font-semibold group-hover:underline capitalize\">\n              Website Security            <\/p>\n            <svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 24 24\"\n              class=\"inline-block text-xl\" height=\"1em\" width=\"1em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n              <path d=\"M10.707 17.707L16.414 12 10.707 6.293 9.293 7.707 13.586 12 9.293 16.293z\"><\/path>\n            <\/svg>\n          <\/div>\n        <\/div>\n      <\/a>\n            <a href=\"https:\/\/devwp02.visibleone.io\/vowp\/blog\/category\/guidelines-tips\/\"\n        class=\"group text-secondary flex md:flex-col md:justify-center items-center my-3 md:m-4 bg-slate-100 shadow-lg md:shadow-md\">\n        <div class=\"mr-4 md:m-auto rounded-r-md md:rounded-none md:rounded-t-md overflow-hidden\">\n          <img loading=\"lazy\" decoding=\"async\" width=\"336\" height=\"148\" alt=\"24-hour responsive service icon in visible one\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/customer-retention1_f1817310.svg\"\n            class=\"w-full max-w-[80px] md:max-w-[240px] lg:max-w-[380px] h-auto aspect-square md:aspect-auto object-cover\" \/>\n        <\/div>\n\n        <div class=\"flex-1  md:py-8 xl:py-9 px-2 overflow-hidden\">\n          <div class=\"flex justify-center items-center\">\n            <p class=\"fs-lg font-semibold group-hover:underline capitalize\">\n              Guidelines &amp; Tips            <\/p>\n            <svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 24 24\"\n              class=\"inline-block text-xl\" height=\"1em\" width=\"1em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n              <path d=\"M10.707 17.707L16.414 12 10.707 6.293 9.293 7.707 13.586 12 9.293 16.293z\"><\/path>\n            <\/svg>\n          <\/div>\n        <\/div>\n      <\/a>\n            <a href=\"https:\/\/devwp02.visibleone.io\/vowp\/blog\/category\/local-seo\/\"\n        class=\"group text-secondary flex md:flex-col md:justify-center items-center my-3 md:m-4 bg-slate-100 shadow-lg md:shadow-md\">\n        <div class=\"mr-4 md:m-auto rounded-r-md md:rounded-none md:rounded-t-md overflow-hidden\">\n          <img loading=\"lazy\" decoding=\"async\" width=\"336\" height=\"148\" alt=\"24-hour responsive service icon in visible one\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/09\/ig-marketing_10d72235.svg\"\n            class=\"w-full max-w-[80px] md:max-w-[240px] lg:max-w-[380px] h-auto aspect-square md:aspect-auto object-cover\" \/>\n        <\/div>\n\n        <div class=\"flex-1  md:py-8 xl:py-9 px-2 overflow-hidden\">\n          <div class=\"flex justify-center items-center\">\n            <p class=\"fs-lg font-semibold group-hover:underline capitalize\">\n              Local SEO            <\/p>\n            <svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 24 24\"\n              class=\"inline-block text-xl\" height=\"1em\" width=\"1em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n              <path d=\"M10.707 17.707L16.414 12 10.707 6.293 9.293 7.707 13.586 12 9.293 16.293z\"><\/path>\n            <\/svg>\n          <\/div>\n        <\/div>\n      <\/a>\n        <\/div>\n<\/div>\n\n\n\n<div class=\"BlogSearchFilter\">\n  <div id=\"\"\n    class=\"overflow-hidden text-[#2E475D] mx-auto pt-16 pb-8 px-4 md:px-8 lg:px-16 xl:px-20 2xl:px-24 relative \"\n    style=\"background-color: #e6fbf4;\">\n    <div class=\"flex lg:gap-16 flex-col md:flex-row justify-center items-center max-w-screen-2xl mx-auto\">\n      <div class=\"w-full\">\n        <div class=\"fs-3xl font-semibold\"><\/div>\n        <p class=\"my-4\">Pick the blog emails you want to receive<\/p>\n        <div class=\"\">\n          <div>\n            <div id=\"blogFooterHubspotForm\"><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"w-full hidden lg:block\"><img decoding=\"async\" width=\"232\" height=\"150\" src=\"https:\/\/devwp02.visibleone.io\/vowp\/wp-content\/uploads\/2024\/08\/Maintanence_c1544ad8.svg\"\n          alt=\"24-hour responsive service icon in visible one\" loading=\"lazy\" class=\"max-w-lg ml-auto\"><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function () {\n    \/\/ Your HubSpot form details\n    const portalId = \"5194436\";\n    const formId = \"ebd445fb-a3ba-416f-9eee-4d9c12df6521\";\n\n\n    function loadHubSpotBlogFooterForm() {\n      const script = document.createElement('script');\n      script.src = 'https:\/\/js.hsforms.net\/forms\/v2.js';\n      script.onload = () => {\n        window.hbspt.forms.create({\n          portalId: portalId,\n          formId: formId,\n          target: '#blogFooterHubspotForm',\n          css:'',\n          onFormReady: function ($form) {\n            const targetElement = $form.find('.hs-form-field label');\n            targetElement?.each(function (key, label) {\n              const placeholder = label?.getAttribute('placeholder');\n              const placeholder1=label?.closest('.hs-form-field').querySelector('input')?.getAttribute('placeholder');\n              label?.querySelector('span:first-child')?.setAttribute('arial-label',placeholder1)\n              label?.setAttribute('arial-label', placeholder1);\n              label?.closest('.hs-form-field').querySelector('input')?.setAttribute('arial-label', placeholder1)\n            });\n            const style = document.createElement('style');\n                        style.innerHTML = `\n                        .hs-error-msgs label {\n                            color: ##c010c;\n                        }\n                        `;\n                        document.querySelector('iframe').contentDocument.head.appendChild(style);\n          }\n        });\n      };\n      document.body.appendChild(script);\n    }\n\n    loadHubSpotBlogFooterForm();\n  });\n<\/script>","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-26723","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/devwp02.visibleone.io\/vowp\/zh-hk\/wp-json\/wp\/v2\/pages\/26723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devwp02.visibleone.io\/vowp\/zh-hk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/devwp02.visibleone.io\/vowp\/zh-hk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/devwp02.visibleone.io\/vowp\/zh-hk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devwp02.visibleone.io\/vowp\/zh-hk\/wp-json\/wp\/v2\/comments?post=26723"}],"version-history":[{"count":4,"href":"https:\/\/devwp02.visibleone.io\/vowp\/zh-hk\/wp-json\/wp\/v2\/pages\/26723\/revisions"}],"predecessor-version":[{"id":61246,"href":"https:\/\/devwp02.visibleone.io\/vowp\/zh-hk\/wp-json\/wp\/v2\/pages\/26723\/revisions\/61246"}],"wp:attachment":[{"href":"https:\/\/devwp02.visibleone.io\/vowp\/zh-hk\/wp-json\/wp\/v2\/media?parent=26723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}