{"id":237,"date":"2023-12-05T22:56:15","date_gmt":"2023-12-05T13:56:15","guid":{"rendered":"https:\/\/nora-l.com\/?p=237"},"modified":"2024-01-02T02:05:01","modified_gmt":"2024-01-01T17:05:01","slug":"bogo-dropdown","status":"publish","type":"post","link":"https:\/\/nora-l.com\/zh\/blog\/bogo-dropdown\/","title":{"rendered":"\u81ea\u5b9aBogo\uff1a\u5efa\u7acb\u4e0b\u62c9\u9078\u55ae\u8a9e\u8a00\u9078\u64c7\u5668"},"content":{"rendered":"\n<p>\u4e0a\u4e00\u7bc7\u6587\u7ae0\u63d0\u5230\u6211\u6c7a\u5b9a\u7528Bogo\u4f86\u88fd\u4f5c\u6211\u7684\u591a\u8a9e\u8a00\u4f5c\u54c1\u96c6\u7db2\u7ad9\uff0c\u4ee5\u4e0b\u662f\u6211\u5982\u4f55\u8a2d\u5b9a\u5b83\u4e26\u4fee\u6539\u5b83\u4ee5\u9069\u5408\u6211\u7684\u7db2\u7ad9\u3002<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u76ee\u9304<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nora-l.com\/zh\/blog\/bogo-dropdown\/#%E8%A8%AD%E5%AE%9ABogo\" >\u8a2d\u5b9aBogo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nora-l.com\/zh\/blog\/bogo-dropdown\/#%E8%87%AA%E8%A8%82%E8%AA%9E%E8%A8%80%E5%88%87%E6%8F%9B%E5%99%A8\" >\u81ea\u8a02\u8a9e\u8a00\u5207\u63db\u5668<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nora-l.com\/zh\/blog\/bogo-dropdown\/#%E9%80%8F%E9%81%8E%E7%B6%B2%E7%AB%99%E7%B7%A8%E8%BC%AF%E5%99%A8%E6%B7%BB%E5%8A%A0%E5%88%87%E6%8F%9B%E5%99%A8\" >\u900f\u904e\u7db2\u7ad9\u7de8\u8f2f\u5668\u6dfb\u52a0\u5207\u63db\u5668<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nora-l.com\/zh\/blog\/bogo-dropdown\/#%E4%BD%BF%E7%94%A8PHP%E4%BF%AE%E6%94%B9%E9%A1%AF%E7%A4%BA%E5%85%83%E7%B4%A0\" >\u4f7f\u7528PHP\u4fee\u6539\u986f\u793a\u5143\u7d20<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nora-l.com\/zh\/blog\/bogo-dropdown\/#%E4%BD%BF%E7%94%A8JavaScript%E6%8E%A7%E5%88%B6%E7%A7%BB%E5%8B%95%E5%92%8C%E9%A1%AF%E7%A4%BA\" >\u4f7f\u7528JavaScript\u63a7\u5236\u79fb\u52d5\u548c\u986f\u793a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nora-l.com\/zh\/blog\/bogo-dropdown\/#%E4%BD%BF%E7%94%A8CSS%E7%BE%8E%E5%8C%96%E5%A4%96%E8%A7%80\" >\u4f7f\u7528CSS\u7f8e\u5316\u5916\u89c0<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nora-l.com\/zh\/blog\/bogo-dropdown\/#%E9%9C%80%E8%A6%81%E6%94%B9%E9%80%B2%E7%9A%84%E5%9C%B0%E6%96%B9%EF%BC%9F\" >\u9700\u8981\u6539\u9032\u7684\u5730\u65b9\uff1f<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E8%A8%AD%E5%AE%9ABogo\"><\/span>\u8a2d\u5b9aBogo<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ol>\n<li>\u9996\u5148\uff0c\u6211\u4e0b\u8f09\u4e26\u5b89\u88dd\u4e86<a href=\"https:\/\/wordpress.org\/plugins\/bogo\/\" target=\"_blank\" rel=\"noopener\">Bogo<\/a>\u3002\u4f60\u6703\u770b\u5230\u4e00\u500b\u65b0\u7684\u300c\u8a9e\u8a00\u300d\u6a19\u7c64\uff0c\u53ef\u4ee5\u9078\u64c7\u4f60\u60f3\u652f\u63f4\u7684\u8a9e\u8a00\u3002<img data-opt-id=1636079389  fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"626\" src=\"https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:1024\/h:626\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/activate-language-pack.png\" alt=\"\" class=\"wp-image-194\" title=\"\" srcset=\"https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:1024\/h:626\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/activate-language-pack.png 1024w, https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:300\/h:183\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/activate-language-pack.png 300w, https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:768\/h:469\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/activate-language-pack.png 768w, https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:1536\/h:938\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/activate-language-pack.png 1536w, https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:2000\/h:1222\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/activate-language-pack.png 2000w, https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:2000\/h:1222\/q:mauto\/f:best\/dpr:2\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/activate-language-pack.png 2x\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/li>\n\n<li>\u5728\u6587\u7ae0\u6216\u9801\u9762\u7de8\u8f2f\u5668\u4e2d\uff0c\u6709\u4e00\u500b\u65b0\u7684\u5074\u6b04\u90e8\u5206\u53ef\u6dfb\u52a0\u7ffb\u8b6f\u3002\u9ede\u64ca\u6309\u9215\u6703\u5c07\u5167\u5bb9\u8907\u88fd\u5230\u65b0\u7684\u6587\u7ae0\u6216\u9801\u9762\u3002<img data-opt-id=464392685  fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"502\" src=\"https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:1024\/h:502\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/add-translation.png\" alt=\"\" class=\"wp-image-203\" title=\"\" srcset=\"https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:1024\/h:502\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/add-translation.png 1024w, https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:300\/h:147\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/add-translation.png 300w, https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:768\/h:377\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/add-translation.png 768w, https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:1536\/h:753\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/add-translation.png 1536w, https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:1984\/h:973\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/add-translation.png 1984w, https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:1984\/h:973\/q:mauto\/f:best\/dpr:2\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/add-translation.png 2x\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/li>\n\n<li>\u7136\u5f8c\uff0c\u53ea\u9700\u7de8\u8f2f\u8907\u88fd\u7684\u6587\u7ae0\u6216\u9801\u9762\u4e26\u624b\u52d5\u7ffb\u8b6f\u6587\u5b57\u5373\u53ef\u3002\u6211\u8a66\u904e\u6539\u8b8a\u8907\u88fd\u9801\u9762\u7684\u7db2\u5740\u5225\u540d\uff0c\u975e\u5e38\u9806\u5229\uff0c\u4f46\u6211\u6c92\u6709\u689d\u6539\u7db2\u5740\u5225\u540d\u7684\u9700\u8981\uff0c\u6240\u4ee5\u6211\u6c7a\u5b9a\u4fdd\u6301\u76f8\u540c\u7684\u7db2\u5740\u5225\u540d\u3002<\/li>\n\n<li>\u9644\u6ce8\uff1a\u5100\u8868\u677f\u6709\u4e00\u500b\u8a9e\u8a00\u5207\u63db\u5668\u3002\u65b0\u6587\u7ae0\u548c\u9801\u9762\u7684\u9810\u8a2d\u8a9e\u8a00\u5c07\u8207\u73fe\u6709\u7684\u8a9e\u8a00\u8a2d\u5b9a\u76f8\u7b26\u3002<img data-opt-id=970726404  fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"220\" src=\"https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:1024\/h:220\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/switch-in-dashboard.png\" alt=\"\" class=\"wp-image-200\" title=\"\" srcset=\"https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:1024\/h:220\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/switch-in-dashboard.png 1024w, https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:300\/h:65\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/switch-in-dashboard.png 300w, https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:768\/h:165\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/switch-in-dashboard.png 768w, https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:1536\/h:330\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/switch-in-dashboard.png 1536w, https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:1990\/h:428\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/switch-in-dashboard.png 1990w, https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:1990\/h:428\/q:mauto\/f:best\/dpr:2\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/switch-in-dashboard.png 2x\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/li><\/ol>\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-md--margin-top\"><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E8%87%AA%E8%A8%82%E8%AA%9E%E8%A8%80%E5%88%87%E6%8F%9B%E5%99%A8\"><\/span>\u81ea\u8a02\u8a9e\u8a00\u5207\u63db\u5668<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u9810\u8a2d\u60c5\u6cc1\u4e0b\uff0c\u8a9e\u8a00\u5207\u63db\u5668\u662f\u4e00\u500b\u5217\u51fa\u6240\u6709\u5df2\u555f\u7528\u7684\u8a9e\u8a00\u5217\u8868\uff0c\u5373\u4f7f\u5c0d\u65bc\u6c92\u6709\u7ffb\u8b6f\u7684\u9801\u9762\u4e5f\u662f\u5982\u6b64\u3002\u4f46\u4ee5\u4e0b\u662f\u6211\u5982\u4f55\u5c07\u5176\u8f49\u63db\u70ba\u4e0b\u62c9\u5217\u8868\uff0c\u611f\u8b1di-nob\u7684\u6709\u7528\u6587\u7ae0\u3002<\/p>\n\n\n<div class=\"ark-block-blogCard arkb-boxLink\" data-arkb-linkbox>\n\t<div class=\"arkb-boxLink__inner\" data-type=\"external\">\n\t\t\t\t\t<figure class=\"arkb-boxLink__figure is-fixed-ratio\">\n\t\t\t\t<img data-opt-id=949570359  data-opt-src=\"https:\/\/d2l930y2yx77uc.cloudfront.net\/production\/social_images\/ea7ceb7a849b8b9d23fa5b8ed9817d745901c572.jpg\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" class=\"arkb-boxLink__img arkb-obf-cover\" title=\"\">\n\t\t\t<\/figure>\n\t\t\t\t<div class=\"arkb-boxLink__body\">\n\t\t\t<a href=\"https:\/\/note.com\/inob\/n\/n63ee9a88d451\" class=\"arkb-boxLink__title\" target=\"_blank\" rel=\"noopener noreferrer\" data-arkb-link>\n\t\t\t\t\u3010WordPress\u3011\u591a\u8a00\u8a9e\u5316\u30d7\u30e9\u30b0\u30a4\u30f3\u300cBogo\u300d\u306e\u8a00\u8a9e\u5207\u66ff\u3092\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u578b\u306b\u3057\u305f\u8a71\uff5ci-nob\t\t\t<\/a>\n\t\t\t\t\t\t\t<div class=\"arkb-boxLink__content arkb-only-pc\">\n\t\t\t\t\t\u6700\u8fd1\u306e\u30de\u30a4\u30d6\u30fc\u30e0\u306f\u30bd\u30ed\u30d7\u30ec\u30a4\u3067\u304d\u308b\u30dc\u30fc\u30c9\u30b2\u30fc\u30e0\u3067\u904a\u3076\u3053\u3068\uff01  \u3069\u3046\u3082\u3001\u30d5\u30ea\u30fc\u30e9\u30f3\u30b9\u306eWeb\u5236\u4f5c\u8005\u306ei-nob(@inobcreate)\u3067\u3059\u3002   WordPress\u3067\u591a\u8a00\u8a9e\u5316&#8230;\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<div class=\"arkb-boxLink__more\">\n\t\t\t\t\t\t\t\t\t\t\t<img data-opt-id=76263991  data-opt-src=\"https:\/\/assets.st-note.com\/poc-image\/manual\/note-common-images\/production\/icons\/android-chrome-192x192.png\"  decoding=\"async\" class=\"arkb-boxLink__more__favicon\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20192%20192%22%20width%3D%22192%22%20height%3D%22192%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22192%22%20height%3D%22192%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" aria-hidden=\"true\" title=\"\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"arkb-boxLink__more__text\">note\uff08\u30ce\u30fc\u30c8\uff09<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E9%80%8F%E9%81%8E%E7%B6%B2%E7%AB%99%E7%B7%A8%E8%BC%AF%E5%99%A8%E6%B7%BB%E5%8A%A0%E5%88%87%E6%8F%9B%E5%99%A8\"><\/span>\u900f\u904e\u7db2\u7ad9\u7de8\u8f2f\u5668\u6dfb\u52a0\u5207\u63db\u5668<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u5728\u6211\u7684\u60c5\u6cc1\u4e0b\uff0c\u6211\u5e0c\u671b\u5c07\u8a9e\u8a00\u5207\u63db\u5668\u653e\u5728\u5c0e\u822a\u6b04\u4e2d\u3002<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69dc414505a47&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69dc414505a47\" class=\"wp-block-image size-large wp-lightbox-container\"><img data-opt-id=1911242105  data-opt-src=\"https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:1024\/h:285\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/add-html-code.png\"  decoding=\"async\" width=\"1024\" height=\"285\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201024%20285%22%20width%3D%221024%22%20height%3D%22285%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%221024%22%20height%3D%22285%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" class=\"wp-image-208\" title=\"\" old-srcset=\"https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:1024\/h:285\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/add-html-code.png 1024w, https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:300\/h:84\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/add-html-code.png 300w, https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:768\/h:214\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/add-html-code.png 768w, https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:1536\/h:428\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/add-html-code.png 1536w, https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:2048\/h:570\/q:mauto\/f:best\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/add-html-code.png 2048w, https:\/\/mlqlfumsodzm.i.optimole.com\/cb:BxIO.26150\/w:2048\/h:570\/q:mauto\/f:best\/dpr:2\/https:\/\/nora-l.com\/wp-content\/uploads\/2023\/12\/add-html-code.png 2x\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#F8F8F2;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#34362e;color:#efefe1\">HTML<\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;div class=&quot;display-item&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;wp-block-bogo-language-switcher&quot;&gt;[bogo]&lt;\/div&gt;\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">class<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;display-item&quot;<\/span><span style=\"color: #F8F8F2\">&gt;&lt;\/<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">class<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;wp-block-bogo-language-switcher&quot;<\/span><span style=\"color: #F8F8F2\">&gt;[bogo]&lt;\/<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E4%BD%BF%E7%94%A8PHP%E4%BF%AE%E6%94%B9%E9%A1%AF%E7%A4%BA%E5%85%83%E7%B4%A0\"><\/span>\u4f7f\u7528PHP\u4fee\u6539\u986f\u793a\u5143\u7d20<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u4ee5\u4e0b\u662f\u6211\u6240\u505a\u7684\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5f9e\u8a9e\u8a00\u5207\u63db\u6309\u9215\u4e2d\u79fb\u9664\u570b\u65d7\u5716\u6a19<\/li>\n\n\n\n<li>\u6539\u8b8a\u8a9e\u8a00\u5207\u63db\u6309\u9215\u7684\u8868\u793a\u65b9\u5f0f<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-accent-color vk_block-margin-sm--margin-top vk_block-margin-md--margin-bottom is-style-vk_borderBox-style-solid-kado-tit-tab\"><div class=\"vk_borderBox_title_container has-background has-accent-background-color\"><i class=\"fa-regular fa-lightbulb\"><\/i><h4 class=\"vk_borderBox_title\"> \u70ba\u4ec0\u9ebc\u79fb\u9664\u570b\u65d7<\/h4><\/div><div class=\"vk_borderBox_body\">\n<p>\u79fb\u9664\u570b\u65d7\u662f\u56e0\u70ba\u5b83\u53ea\u4ee3\u8868\u570b\u5bb6\u6216\u5730\u5340\uff0c\u800c\u751f\u6d3b\u5728\u6d77\u5916\u7684\u4eba\u4e5f\u53ef\u80fd\u4f7f\u7528\u540c\u4e00\u7a2e\u8a9e\u8a00\u3002<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#F8F8F2;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#34362e;color:#efefe1\">PHP<\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/Hide Bogo flag\nadd_filter( 'bogo_use_flags','bogo_use_flags_false');\nfunction bogo_use_flags_false(){\n\treturn false;\n}\n\n\/\/Change language display name\nadd_filter( 'bogo_language_switcher_links', 'custom_bogo_language_title_name', 10, 2 );\nfunction custom_bogo_language_title_name( $links ) {\n  foreach ( $links as $code =&gt; $name ) {\n    if ( $name['lang'] === 'en-GB' ) {\n      $links[$code]['title'] = 'English';\n      $links[$code]['native_name'] = 'ENG';\n    } elseif ( $name['lang'] === 'ja' ) {\n      $links[$code]['title'] = '\u65e5\u672c\u8a9e';\n      $links[$code]['native_name'] = '\u65e5\u672c\u8a9e';\n    } elseif ( $name['lang'] === 'zh-HK' ) {\n      $links[$code]['title'] = '\u4e2d\u6587';\n      $links[$code]['native_name'] = '\u4e2d\u6587';\n    }\n  }\n  return $links;\n}\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88846F\">\/\/Hide Bogo flag<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">add_filter<\/span><span style=\"color: #F8F8F2\">( <\/span><span style=\"color: #E6DB74\">&#39;bogo_use_flags&#39;<\/span><span style=\"color: #F8F8F2\">,<\/span><span style=\"color: #E6DB74\">&#39;bogo_use_flags_false&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF; font-style: italic\">function<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">bogo_use_flags_false<\/span><span style=\"color: #F8F8F2\">(){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">\t<\/span><span style=\"color: #F92672\">return<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">false<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\">\/\/Change language display name<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">add_filter<\/span><span style=\"color: #F8F8F2\">( <\/span><span style=\"color: #E6DB74\">&#39;bogo_language_switcher_links&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #E6DB74\">&#39;custom_bogo_language_title_name&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #AE81FF\">10<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #AE81FF\">2<\/span><span style=\"color: #F8F8F2\"> );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #66D9EF; font-style: italic\">function<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">custom_bogo_language_title_name<\/span><span style=\"color: #F8F8F2\">( $links ) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #F92672\">foreach<\/span><span style=\"color: #F8F8F2\"> ( $links <\/span><span style=\"color: #F92672\">as<\/span><span style=\"color: #F8F8F2\"> $code <\/span><span style=\"color: #F92672\">=&gt;<\/span><span style=\"color: #F8F8F2\"> $name ) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #F92672\">if<\/span><span style=\"color: #F8F8F2\"> ( $name[<\/span><span style=\"color: #E6DB74\">&#39;lang&#39;<\/span><span style=\"color: #F8F8F2\">] <\/span><span style=\"color: #F92672\">===<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">&#39;en-GB&#39;<\/span><span style=\"color: #F8F8F2\"> ) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      $links[$code][<\/span><span style=\"color: #E6DB74\">&#39;title&#39;<\/span><span style=\"color: #F8F8F2\">] <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">&#39;English&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      $links[$code][<\/span><span style=\"color: #E6DB74\">&#39;native_name&#39;<\/span><span style=\"color: #F8F8F2\">] <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">&#39;ENG&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    } <\/span><span style=\"color: #F92672\">elseif<\/span><span style=\"color: #F8F8F2\"> ( $name[<\/span><span style=\"color: #E6DB74\">&#39;lang&#39;<\/span><span style=\"color: #F8F8F2\">] <\/span><span style=\"color: #F92672\">===<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">&#39;ja&#39;<\/span><span style=\"color: #F8F8F2\"> ) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      $links[$code][<\/span><span style=\"color: #E6DB74\">&#39;title&#39;<\/span><span style=\"color: #F8F8F2\">] <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">&#39;\u65e5\u672c\u8a9e&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      $links[$code][<\/span><span style=\"color: #E6DB74\">&#39;native_name&#39;<\/span><span style=\"color: #F8F8F2\">] <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">&#39;\u65e5\u672c\u8a9e&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    } <\/span><span style=\"color: #F92672\">elseif<\/span><span style=\"color: #F8F8F2\"> ( $name[<\/span><span style=\"color: #E6DB74\">&#39;lang&#39;<\/span><span style=\"color: #F8F8F2\">] <\/span><span style=\"color: #F92672\">===<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">&#39;zh-HK&#39;<\/span><span style=\"color: #F8F8F2\"> ) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      $links[$code][<\/span><span style=\"color: #E6DB74\">&#39;title&#39;<\/span><span style=\"color: #F8F8F2\">] <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">&#39;\u4e2d\u6587&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      $links[$code][<\/span><span style=\"color: #E6DB74\">&#39;native_name&#39;<\/span><span style=\"color: #F8F8F2\">] <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">&#39;\u4e2d\u6587&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #F92672\">return<\/span><span style=\"color: #F8F8F2\"> $links;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E4%BD%BF%E7%94%A8JavaScript%E6%8E%A7%E5%88%B6%E7%A7%BB%E5%8B%95%E5%92%8C%E9%A1%AF%E7%A4%BA\"><\/span>\u4f7f\u7528JavaScript\u63a7\u5236\u79fb\u52d5\u548c\u986f\u793a<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u63a5\u4e0b\u4f86\uff0c\u6211\u900f\u904e\u4ee5\u4e0b\u65b9\u5f0f\u5c07\u5207\u63db\u5668\u8b8a\u6210\u4e0b\u62c9\u5217\u8868\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5c07\u7576\u524d\u8a9e\u8a00\u986f\u793a\u70ba\u9810\u8a2d\u9805\u76ee<\/li>\n\n\n\n<li>\u96b1\u85cf\u6c92\u6709\u7ffb\u8b6f\u7684\u8a9e\u8a00\u9078\u9805<\/li>\n\n\n\n<li>\u5305\u62ec\u6839\u64da\u5217\u8868\u9805\u76ee\u6578\u91cf\u8a08\u7b97\u4e0b\u62c9\u5217\u8868\u9ad8\u5ea6\u7684\u4ee3\u78bc\uff0c\u4ee5\u7522\u751f\u4e00\u500b\u5f88\u597d\u7684\u5c55\u958b\u52d5\u756b<\/li>\n\n\n\n<li>\u53ea\u6709\u5728\u5176\u4ed6\u7ffb\u8b6f\u53ef\u7528\u6642\u624d\u5141\u8a31\u9ede\u64ca\u89f8\u767c<\/li>\n\n\n\n<li>\u5982\u679c\u6c92\u6709\u5176\u4ed6\u7ffb\u8b6f\uff0c\u5247\u6dfb\u52a0\u4e00\u500b\u985e\u5225\u5230\u4e0b\u62c9\u5217\u8868\uff0c\u4ee5\u4fbf\u4ee5\u5f8c\u9032\u4e00\u6b65\u8a2d\u8a08\u98a8\u683c<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#F8F8F2;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#34362e;color:#efefe1\">JavaScript<\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/Bogo - hide li item if no translation\ndocument.addEventListener(&quot;DOMContentLoaded&quot;, function() {\n    const listItems = document.querySelectorAll('.bogo-language-switcher li');\n\n    listItems.forEach(item =&gt; {\n        if (!item.querySelector('a')) {\n            item.style.display = 'none';\n        }\n    });\n\n});\n\n\n\/\/Bogo - dynamic dropdown height\ndocument.addEventListener(&quot;DOMContentLoaded&quot;, function() {\n    \/\/ Get the ul element by class name\n    const dynamicList = document.querySelector('.bogo-language-switcher');\n\n    \/\/ Get the number of visible list items\n    const visibleListItems = dynamicList.querySelectorAll('li:not([style*=&quot;display: none&quot;])');\n    const numberOfVisibleItems = visibleListItems.length;\n\n    \/\/ Add class to display if only 1 visible item\n    if (numberOfVisibleItems === 1) {\n        const display = document.querySelector('.display-item');\n        display.classList.add('bogo-disable');\n    }\n\n    \/\/ Subtract one from the count if necessary\n    const adjustedNumberOfItems = Math.max(0, numberOfVisibleItems - 1);\n\n    \/\/ Set the value of --list-items CSS variable\n    document.documentElement.style.setProperty('--list-items', adjustedNumberOfItems);\n});\n\n\n\/\/Bogo dropdown\njQuery(function($) {\n    let selectBox = $('.wp-block-bogo-language-switcher');\n    let selectItems = $('.wp-block-bogo-language-switcher li');\n    let display = $('.display-item');\n    let displayButton = $('.display-item:not(.bogo-disable)');\n\n    const currentLang = $('.bogo-language-switcher li.current').attr('class').split(' ')[0];\n    display.addClass(currentLang); \/\/ Add current language code as a class to display-item\n\n    const firstLang = $('.bogo-language-switcher &gt; .current span').find('.current');\n    const firstLangName = firstLang.first().text();\n    display.text(firstLangName);\n    display.append('&lt;span class=&quot;arrow&quot;&gt;&lt;\/span&gt;');\n\n    let selectBoxFlag = false;\n    $(firstLang).css('background','#ccc').attr('tabindex', -1).removeAttr('href');\n    displayButton.on('click', function() {\n        if (selectBoxFlag === false) {\n            selectBoxFlag = true;\n            display.addClass('active');\n            selectBox.addClass('active');\n        } else {\n            selectBoxFlag = false;\n            display.removeClass('active');\n            selectBox.removeClass('active');\n        }\n    });\n    selectItems.on('click', function() {\n        $(this).find('a').trigger('click');\n    });\n});\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88846F\">\/\/Bogo - hide li item if no translation<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">document.<\/span><span style=\"color: #A6E22E\">addEventListener<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&quot;DOMContentLoaded&quot;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #66D9EF; font-style: italic\">function<\/span><span style=\"color: #F8F8F2\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">const<\/span><span style=\"color: #F8F8F2\"> listItems <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> document.<\/span><span style=\"color: #A6E22E\">querySelectorAll<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;.bogo-language-switcher li&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    listItems.<\/span><span style=\"color: #A6E22E\">forEach<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #FD971F; font-style: italic\">item<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF; font-style: italic\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #F92672\">if<\/span><span style=\"color: #F8F8F2\"> (<\/span><span style=\"color: #F92672\">!<\/span><span style=\"color: #F8F8F2\">item.<\/span><span style=\"color: #A6E22E\">querySelector<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;a&#39;<\/span><span style=\"color: #F8F8F2\">)) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            item.style.display <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E6DB74\">&#39;none&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    });<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">});<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\">\/\/Bogo - dynamic dropdown height<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">document.<\/span><span style=\"color: #A6E22E\">addEventListener<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&quot;DOMContentLoaded&quot;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #66D9EF; font-style: italic\">function<\/span><span style=\"color: #F8F8F2\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #88846F\">\/\/ Get the ul element by class name<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">const<\/span><span style=\"color: #F8F8F2\"> dynamicList <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> document.<\/span><span style=\"color: #A6E22E\">querySelector<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;.bogo-language-switcher&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #88846F\">\/\/ Get the number of visible list items<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">const<\/span><span style=\"color: #F8F8F2\"> visibleListItems <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> dynamicList.<\/span><span style=\"color: #A6E22E\">querySelectorAll<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;li:not([style*=&quot;display: none&quot;])&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">const<\/span><span style=\"color: #F8F8F2\"> numberOfVisibleItems <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> visibleListItems.length;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #88846F\">\/\/ Add class to display if only 1 visible item<\/span><\/span>\n<span class=\"line cbp-see-more-line \"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #F92672\">if<\/span><span style=\"color: #F8F8F2\"> (numberOfVisibleItems <\/span><span style=\"color: #F92672\">===<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">1<\/span><span style=\"color: #F8F8F2\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">const<\/span><span style=\"color: #F8F8F2\"> display <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> document.<\/span><span style=\"color: #A6E22E\">querySelector<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;.display-item&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        display.classList.<\/span><span style=\"color: #A6E22E\">add<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;bogo-disable&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #88846F\">\/\/ Subtract one from the count if necessary<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">const<\/span><span style=\"color: #F8F8F2\"> adjustedNumberOfItems <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> Math.<\/span><span style=\"color: #A6E22E\">max<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">, numberOfVisibleItems <\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">1<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #88846F\">\/\/ Set the value of --list-items CSS variable<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    document.documentElement.style.<\/span><span style=\"color: #A6E22E\">setProperty<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;--list-items&#39;<\/span><span style=\"color: #F8F8F2\">, adjustedNumberOfItems);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">});<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\">\/\/Bogo dropdown<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">jQuery<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #66D9EF; font-style: italic\">function<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #FD971F; font-style: italic\">$<\/span><span style=\"color: #F8F8F2\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">let<\/span><span style=\"color: #F8F8F2\"> selectBox <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">$<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;.wp-block-bogo-language-switcher&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">let<\/span><span style=\"color: #F8F8F2\"> selectItems <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">$<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;.wp-block-bogo-language-switcher li&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">let<\/span><span style=\"color: #F8F8F2\"> display <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">$<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;.display-item&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">let<\/span><span style=\"color: #F8F8F2\"> displayButton <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">$<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;.display-item:not(.bogo-disable)&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">const<\/span><span style=\"color: #F8F8F2\"> currentLang <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">$<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;.bogo-language-switcher li.current&#39;<\/span><span style=\"color: #F8F8F2\">).<\/span><span style=\"color: #A6E22E\">attr<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;class&#39;<\/span><span style=\"color: #F8F8F2\">).<\/span><span style=\"color: #A6E22E\">split<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39; &#39;<\/span><span style=\"color: #F8F8F2\">)[<\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">];<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    display.<\/span><span style=\"color: #A6E22E\">addClass<\/span><span style=\"color: #F8F8F2\">(currentLang); <\/span><span style=\"color: #88846F\">\/\/ Add current language code as a class to display-item<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">const<\/span><span style=\"color: #F8F8F2\"> firstLang <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">$<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;.bogo-language-switcher &gt; .current span&#39;<\/span><span style=\"color: #F8F8F2\">).<\/span><span style=\"color: #A6E22E\">find<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;.current&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">const<\/span><span style=\"color: #F8F8F2\"> firstLangName <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> firstLang.<\/span><span style=\"color: #A6E22E\">first<\/span><span style=\"color: #F8F8F2\">().<\/span><span style=\"color: #A6E22E\">text<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    display.<\/span><span style=\"color: #A6E22E\">text<\/span><span style=\"color: #F8F8F2\">(firstLangName);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    display.<\/span><span style=\"color: #A6E22E\">append<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;&lt;span class=&quot;arrow&quot;&gt;&lt;\/span&gt;&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">let<\/span><span style=\"color: #F8F8F2\"> selectBoxFlag <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">false<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #A6E22E\">$<\/span><span style=\"color: #F8F8F2\">(firstLang).<\/span><span style=\"color: #A6E22E\">css<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;background&#39;<\/span><span style=\"color: #F8F8F2\">,<\/span><span style=\"color: #E6DB74\">&#39;#ccc&#39;<\/span><span style=\"color: #F8F8F2\">).<\/span><span style=\"color: #A6E22E\">attr<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;tabindex&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #AE81FF\">1<\/span><span style=\"color: #F8F8F2\">).<\/span><span style=\"color: #A6E22E\">removeAttr<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;href&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    displayButton.<\/span><span style=\"color: #A6E22E\">on<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;click&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #66D9EF; font-style: italic\">function<\/span><span style=\"color: #F8F8F2\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #F92672\">if<\/span><span style=\"color: #F8F8F2\"> (selectBoxFlag <\/span><span style=\"color: #F92672\">===<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">false<\/span><span style=\"color: #F8F8F2\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            selectBoxFlag <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">true<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            display.<\/span><span style=\"color: #A6E22E\">addClass<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;active&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            selectBox.<\/span><span style=\"color: #A6E22E\">addClass<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;active&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        } <\/span><span style=\"color: #F92672\">else<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            selectBoxFlag <\/span><span style=\"color: #F92672\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">false<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            display.<\/span><span style=\"color: #A6E22E\">removeClass<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;active&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            selectBox.<\/span><span style=\"color: #A6E22E\">removeClass<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;active&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    selectItems.<\/span><span style=\"color: #A6E22E\">on<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;click&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #66D9EF; font-style: italic\">function<\/span><span style=\"color: #F8F8F2\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #A6E22E\">$<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #FD971F\">this<\/span><span style=\"color: #F8F8F2\">).<\/span><span style=\"color: #A6E22E\">find<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;a&#39;<\/span><span style=\"color: #F8F8F2\">).<\/span><span style=\"color: #A6E22E\">trigger<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E6DB74\">&#39;click&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">});<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E4%BD%BF%E7%94%A8CSS%E7%BE%8E%E5%8C%96%E5%A4%96%E8%A7%80\"><\/span>\u4f7f\u7528CSS\u7f8e\u5316\u5916\u89c0<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u6700\u5f8c\uff0c\u6211\u4f7f\u7528\u4ee5\u4e0b\u8a2d\u5b9a\u4f86\u6539\u5584\u4e0b\u62c9\u5217\u8868\u7684\u5916\u89c0\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5c07\u8a9e\u8a00\u5207\u63db\u6587\u672c\u5c0d\u9f4a\u5230\u5de6\u5074<\/li>\n\n\n\n<li>\u9f20\u6a19\u61f8\u505c\u6642\u6539\u8b8a\u6587\u672c\u548c\u80cc\u666f\u984f\u8272<\/li>\n\n\n\n<li>\u7576\u6c92\u6709\u5176\u4ed6\u7ffb\u8b6f\u53ef\u7528\u6642\u6539\u8b8a\u6587\u672c\u984f\u8272<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#F8F8F2;--cbp-line-number-width:calc(3 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#34362e;color:#efefe1\">CSS<\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/* Dropdown *\/\n.bogo-dropdown {\n  gap: 0;\n  align-items: flex-start;\n  height: 44px;\n}\n\n\/* Language Switcher *\/\n.bogo-language-switcher {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid #CACACA;\n  border-top: 0;\n  border-radius: 0 0 4px 4px;\n  position: absolute;\n  margin: 0;\n  padding: 0;\n  width: 96px;\n  box-sizing: border-box;\n}\n\n.bogo-language-switcher li {\n  cursor: default;\n  box-sizing: border-box;\n  padding: 4px 8px!important;\n  text-align: left;\n}\n\n.bogo-language-switcher li a {\n  text-decoration: none;\n  font-weight: 600;\n}\n\n.active .bogo-language-switcher li:hover {\n  background: var(--wp--preset--color--contrast);\n}\n\n.active .bogo-language-switcher li:hover a {\n  color: var(--wp--preset--color--accent);\n}\n\n.bogo-language-switcher .ja {\n  order: 1;\n}\n\n.bogo-language-switcher .en-GB {\n  order: 2;\n}\n\n\/* Display Item *\/\n.display-item {\n  transition: 0.15s ease;\n  width: 96px;\n  border: 1px solid #CACACA;\n  border-radius: 4px;\n  padding: 8px;\n  text-align: left;\n  border-radius: 4px 4px 0 0;\n  border-bottom: 1px solid #FDFFFA;\n  padding-bottom: 0;\n  font-weight: 600;\n}\n\n.bogo-language-name a {\n  display: block;\n  width: 100%;\n  color: #333;\n}\n\n\/* Arrow *\/\n.arrow {\n  width: 13px;\n  height: 13px;\n  display: inline-block;\n  position: relative;\n  bottom: -8px;\n  left: -10px;\n  transition: 0.4s ease;\n  margin-top: 2px;\n  text-align: left;\n  transform: rotate(45deg);\n  float: right;\n}\n\n.arrow:before,\n.arrow:after {\n  position: absolute;\n  content: '';\n  display: inline-block;\n  width: 12px;\n  height: 3px;\n  background-color: var(--wp--preset--color--contrast);\n  transition: 0.4s ease;\n}\n\n.arrow:after {\n  transform: rotate(90deg);\n  top: -5px;\n  left: 5px;\n}\n\n\/* Active Arrow *\/\n.display-item.active .arrow {\n  transform: rotate(45deg) translate(-5px, -5px);\n}\n\n.display-item.active .arrow:before {\n  transform: translate(10px, 0);\n}\n\n.display-item.active .arrow:after {\n  transform: rotate(90deg) translate(10px, 0);\n}\n\n\/* Active List *\/\n.display-item.active ul {\n  opacity: 0.3;\n  height: 108px;\n}\n\n\/* Language Switcher Animation *\/\n.wp-block-bogo-language-switcher .bogo-language-switcher {\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 4px;\n  transition: 0.4s ease;\n}\n\n\/* CSS Variable for Height *\/\n:root {\n  --item-height: 34px;\n}\n\n.wp-block-bogo-language-switcher.active .bogo-language-switcher {\n  height: calc(var(--item-height) * var(--list-items));\n  overflow: auto;\n  padding-bottom: 0;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n\n\/* Disabled Styles *\/\n.bogo-disable {\n  color: var(--wp--preset--color--accent-5);\n}\n\n.bogo-disable .arrow:before,\n.bogo-disable .arrow:after {\n  background-color: var(--wp--preset--color--accent-5);\n}\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88846F\">\/* Dropdown *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.bogo-dropdown<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">gap<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">align-items<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">flex-start<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">height<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">44<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\">\/* Language Switcher *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.bogo-language-switcher<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">display<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">flex<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">flex-direction<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">column<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">border<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">1<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF\">solid<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">#CACACA<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">border-top<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">border-radius<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">4<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">4<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">position<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">absolute<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">margin<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">padding<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">width<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">96<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">box-sizing<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">border-box<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.bogo-language-switcher<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F92672\">li<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">cursor<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">default<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line cbp-see-more-line \"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">box-sizing<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">border-box<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">padding<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">4<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">8<\/span><span style=\"color: #F92672\">px!important<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">text-align<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">left<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.bogo-language-switcher<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F92672\">li<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F92672\">a<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">text-decoration<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">none<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">font-weight<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">600<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.active<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">.bogo-language-switcher<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F92672\">li<\/span><span style=\"color: #A6E22E\">:hover<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">background<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">var<\/span><span style=\"color: #F8F8F2\">(--wp--preset--color--contrast);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.active<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">.bogo-language-switcher<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F92672\">li<\/span><span style=\"color: #A6E22E\">:hover<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F92672\">a<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">color<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">var<\/span><span style=\"color: #F8F8F2\">(--wp--preset--color--accent);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.bogo-language-switcher<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">.ja<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">order<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">1<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.bogo-language-switcher<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">.en-GB<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">order<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">2<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\">\/* Display Item *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.display-item<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">transition<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">0.15<\/span><span style=\"color: #F92672\">s<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF\">ease<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">width<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">96<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">border<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">1<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF\">solid<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">#CACACA<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">border-radius<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">4<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">padding<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">8<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">text-align<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">left<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">border-radius<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">4<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">4<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">border-bottom<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">1<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF\">solid<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">#FDFFFA<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">padding-bottom<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">font-weight<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">600<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.bogo-language-name<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F92672\">a<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">display<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">block<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">width<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">color<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">#333<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\">\/* Arrow *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.arrow<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">width<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">13<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">height<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">13<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">display<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">inline-block<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">position<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">relative<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">bottom<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">-8<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">left<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">-10<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">transition<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">0.4<\/span><span style=\"color: #F92672\">s<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF\">ease<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">margin-top<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">2<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">text-align<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">left<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">transform<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">rotate<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #AE81FF\">45<\/span><span style=\"color: #F92672\">deg<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">float<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">right<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.arrow:before<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.arrow:after<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">position<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">absolute<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">content<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E6DB74\">&#39;&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">display<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">inline-block<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">width<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">12<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">height<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">3<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">background-color<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">var<\/span><span style=\"color: #F8F8F2\">(--wp--preset--color--contrast);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">transition<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">0.4<\/span><span style=\"color: #F92672\">s<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF\">ease<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.arrow:after<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">transform<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">rotate<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #AE81FF\">90<\/span><span style=\"color: #F92672\">deg<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">top<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">-5<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">left<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">5<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\">\/* Active Arrow *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.display-item.active<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">.arrow<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">transform<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">rotate<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #AE81FF\">45<\/span><span style=\"color: #F92672\">deg<\/span><span style=\"color: #F8F8F2\">) <\/span><span style=\"color: #66D9EF\">translate<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #AE81FF\">-5<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #AE81FF\">-5<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.display-item.active<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">.arrow:before<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">transform<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">translate<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #AE81FF\">10<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.display-item.active<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">.arrow:after<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">transform<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">rotate<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #AE81FF\">90<\/span><span style=\"color: #F92672\">deg<\/span><span style=\"color: #F8F8F2\">) <\/span><span style=\"color: #66D9EF\">translate<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #AE81FF\">10<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\">\/* Active List *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.display-item.active<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F92672\">ul<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">opacity<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">0.3<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">height<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">108<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\">\/* Language Switcher Animation *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.wp-block-bogo-language-switcher<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">.bogo-language-switcher<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">height<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">overflow<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">hidden<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">padding-bottom<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">4<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">transition<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">0.4<\/span><span style=\"color: #F92672\">s<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF\">ease<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\">\/* CSS Variable for Height *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">:root<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  --item-height: <\/span><span style=\"color: #AE81FF\">34<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.wp-block-bogo-language-switcher.active<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">.bogo-language-switcher<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">height<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">calc<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #66D9EF\">var<\/span><span style=\"color: #F8F8F2\">(--item-height) <\/span><span style=\"color: #F92672\">*<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF\">var<\/span><span style=\"color: #F8F8F2\">(--list-items));<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">overflow<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">auto<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">padding-bottom<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">-ms-overflow-style<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">none<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">scrollbar-width<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">none<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88846F\">\/* Disabled Styles *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.bogo-disable<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">color<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">var<\/span><span style=\"color: #F8F8F2\">(--wp--preset--color--accent-5);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.bogo-disable<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">.arrow:before<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.bogo-disable<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">.arrow:after<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">background-color<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">var<\/span><span style=\"color: #F8F8F2\">(--wp--preset--color--accent-5);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E9%9C%80%E8%A6%81%E6%94%B9%E9%80%B2%E7%9A%84%E5%9C%B0%E6%96%B9%EF%BC%9F\"><\/span>\u9700\u8981\u6539\u9032\u7684\u5730\u65b9\uff1f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u7531\u65bc\u9019\u500b\u7248\u672c\u7684\u8a9e\u8a00\u5207\u63db\u5668\u5728\u6c92\u6709\u9ede\u64ca\u7684\u60c5\u6cc1\u4e0b\uff0c\u53ea\u6703\u986f\u793a\u7576\u524d\u9801\u793a\u7684\u8a9e\u8a00\u540d\u7a31\uff0c\u6211\u4e00\u76f4\u5728\u601d\u8003\uff0c\u8aaa\u4e0d\u540c\u8a9e\u8a00\u7684\u7528\u6236\u662f\u5426\u6703\u7406\u89e3\u9019\u500b\u8a9e\u8a00\u5207\u63db\u5668\uff0c\u5c24\u5176\u662f\u5982\u679c\u4ed6\u5011\u5728\u4e00\u500b\u4ed6\u5011\u4e0d\u719f\u6089\u7684\u8a9e\u8a00\u7684\u9801\u9762\u4e0a\u3002\u6211\u6b63\u5728\u8003\u616e\u9032\u884c\u4e00\u4e9b\u7528\u6236\u6e2c\u8a66\u4f86\u627e\u51fa\u7b54\u6848\u3002\u6b64\u5916\uff0c\u6211\u5728\u60f3\u5982\u679c\u7528\u6236\u5617\u8a66\u9ede\u64ca\u8a9e\u8a00\u5207\u63db\u5668\uff0c\u800c\u8a72\u6587\u7ae0\u53ea\u6709\u7576\u524d\u6b63\u5728\u95b1\u8b80\u7684\u8a9e\u8a00\uff0c\u73fe\u5728\u9019\u500b\u975e\u6fc0\u6d3b\u7684\u8868\u9054\u65b9\u5f0f\u6703\u5426\u4ee4\u4ed6\u5011\u611f\u5230\u56f0\u60d1\u3002\u5982\u679c\u4ed6\u5011\u6709\u9047\u5230\u9019\u500b\u60c5\u6cc1\uff0c\u6211\u5c07\u6703\u6dfb\u52a0\u4e00\u500b\u63d0\u793a\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4e0a\u4e00\u7bc7\u6587\u7ae0\u63d0\u5230\u6211\u6c7a\u5b9a\u7528Bogo\u4f86\u88fd\u4f5c\u6211\u7684\u591a\u8a9e\u8a00\u4f5c\u54c1\u96c6\u7db2\u7ad9\uff0c\u4ee5\u4e0b\u662f\u6211\u5982\u4f55\u8a2d\u5b9a\u5b83\u4e26\u4fee\u6539\u5b83\u4ee5\u9069\u5408\u6211\u7684\u7db2\u7ad9\u3002 \u8a2d\u5b9aBo [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":769,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"zh_HK","_original_post":"https:\/\/nora-l.com\/?p=172","footnotes":""},"categories":[18],"tags":[],"class_list":["post-237","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-site-building","zh-HK"],"_links":{"self":[{"href":"https:\/\/nora-l.com\/wp-json\/wp\/v2\/posts\/237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nora-l.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nora-l.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nora-l.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nora-l.com\/wp-json\/wp\/v2\/comments?post=237"}],"version-history":[{"count":9,"href":"https:\/\/nora-l.com\/wp-json\/wp\/v2\/posts\/237\/revisions"}],"predecessor-version":[{"id":788,"href":"https:\/\/nora-l.com\/wp-json\/wp\/v2\/posts\/237\/revisions\/788"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nora-l.com\/wp-json\/wp\/v2\/media\/769"}],"wp:attachment":[{"href":"https:\/\/nora-l.com\/wp-json\/wp\/v2\/media?parent=237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nora-l.com\/wp-json\/wp\/v2\/categories?post=237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nora-l.com\/wp-json\/wp\/v2\/tags?post=237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}