feat: add page search and configure switch

Author: lan-yonghui

settings.yaml

@@ -64,14 +64,16 @@ spec:
           label: Banner背景图片
           value: /themes/theme-ocean/assets/images/default-background.png
         - $formkit: radio
-          name: banner_search
-          label: 是否显示搜索框
-          value: true
+          name: search_method
+          value: page
+          label: 搜索形式
           options:
-            - label: 显示
-              value: true
+            - label: 页面
+              value: page
+            - label: 弹窗
+              value: popup
             - label: 隐藏
-              value: false
+              value: none
         - $formkit: tagCheckbox
           name: tags
           id: tags

src/alpine-data/pagination.ts

@@ -49,4 +49,4 @@ export default (page: number, totalPages: number, totalVisible: number) => ({
 
     return range;
   },
-});
+});

src/alpine-data/post-util.ts

@@ -1,71 +1,75 @@
 import axios from "axios";
 
-export default (postId: any,likeNum: string) => ({
+export default (postId: any, likeNum: string) => ({
   postId: postId,
   likeNum: likeNum,
   loading: false,
   liked: false,
   get upvote() {
-    this.init()
+    this.init();
     if (this.loading || this.liked) return;
 
     this.loading = true;
-    axios.post(
-      '/apis/api.halo.run/v1alpha1/trackers/upvote', 
-      {
+    axios
+      .post(
+        "/apis/api.halo.run/v1alpha1/trackers/upvote",
+        {
           group: "content.halo.run",
           plural: "posts",
           name: this.postId,
-      },
-      {
-        headers: {
-          'Content-Type': 'application/json; charset=utf-8'
+        },
+        {
+          headers: {
+            "Content-Type": "application/json; charset=utf-8",
+          },
         }
-      }
-    ).then(() => {
-      this.liked = true;
-      this.loading = false;
-      localStorage.setItem("likeNum:" + this.postId, String(Number(this.likeNum) + 1))
-      this.likeNum = String(Number(this.likeNum) + 1)
-      }).catch(() =>  {
+      )
+      .then(() => {
+        this.liked = true;
+        this.loading = false;
+        localStorage.setItem("likeNum:" + this.postId, String(Number(this.likeNum) + 1));
+        this.likeNum = String(Number(this.likeNum) + 1);
+      })
+      .catch(() => {
         this.loading = false;
       });
   },
   get downvote() {
     if (this.loading || !this.liked) return;
 
     this.loading = true;
-    axios.post(
-      '/apis/api.halo.run/v1alpha1/trackers/downvote',
-      {
-        group: "content.halo.run",
-        plural: "posts",
-        name: this.postId,
-      },
-      {
-        headers: {
-          'Content-Type': 'application/json; charset=utf-8'
+    axios
+      .post(
+        "/apis/api.halo.run/v1alpha1/trackers/downvote",
+        {
+          group: "content.halo.run",
+          plural: "posts",
+          name: this.postId,
+        },
+        {
+          headers: {
+            "Content-Type": "application/json; charset=utf-8",
+          },
         }
-      }
-    ).then(() => {
-      let num = Number(this.likeNum) - 1
-      this.likeNum = String(num < 0 ? 0 : num)
-      localStorage.removeItem("likeNum:" + this.postId)
-      this.loading = false;
-      this.liked = !this.liked
-    }).catch(() =>  {
-      this.loading = false;
-    });
+      )
+      .then(() => {
+        let num = Number(this.likeNum) - 1;
+        this.likeNum = String(num < 0 ? 0 : num);
+        localStorage.removeItem("likeNum:" + this.postId);
+        this.loading = false;
+        this.liked = !this.liked;
+      })
+      .catch(() => {
+        this.loading = false;
+      });
   },
   init() {
-    if(this.likeNumExists(this.postId) !== null && Number(this.likeNumExists(this.postId)) > 0){
-      this.liked = true
+    if (this.likeNumExists(this.postId) !== null && Number(this.likeNumExists(this.postId)) > 0) {
+      this.liked = true;
     }
-    return this.liked
+    return this.liked;
   },
   likeNumExists(id: any) {
     return localStorage.getItem("likeNum:" + id);
   },
-
 });
-

src/alpine-data/search.ts

@@ -0,0 +1,46 @@
+import axios from "axios";
+
+export default () => ({
+  loading: false,
+  isSearch: false,
+  keys: "",
+  searchData: {},
+  init() {
+    this.searchData = {};
+    this.isSearch = false;
+  },
+  get keywords() {
+    if (this.loading || this.keys == "") {
+      this.keyClear
+      return;
+    }
+    this.loading = true;
+    axios
+      .get("/apis/api.halo.run/v1alpha1/indices/post", {
+        params: {
+          limit: 20,
+          keyword: this.keys,
+          highlightPreTag: "<b style='background-color:#D8EAFD;color:#1077D1'>",
+          highlightPostTag: "</b>",
+        },
+        headers: {
+          "Content-Type": "application/json; charset=utf-8",
+        },
+      })
+      .then((res) => {
+        this.loading = false;
+        this.searchData = res.data;
+        this.isSearch = true;
+      })
+      .catch(() => {
+        this.isSearch = false;
+        this.loading = false;
+      });
+  },
+  get keyClear() {
+    this.keys = "";
+    this.searchData = {};
+    this.isSearch = false;
+    return;
+  },
+});

src/main.ts

@@ -6,6 +6,7 @@ import dropdown from "./alpine-data/dropdown";
 import colorSchemeSwitcher from "./alpine-data/color-scheme-switcher";
 import pagination from "./alpine-data/pagination";
 import postUtil from "./alpine-data/post-util";
+import search from "./alpine-data/search";
 
 window.Alpine = Alpine;
 
@@ -15,6 +16,8 @@ Alpine.data("colorSchemeSwitcher", colorSchemeSwitcher);
 Alpine.data("pagination", pagination);
 // @ts-ignore
 Alpine.data("postUtil", postUtil);
+// @ts-ignore
+Alpine.data("search", search);
 
 Alpine.start();
 
@@ -83,22 +86,28 @@ window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", fun
 });
 
 /*移除HTML标签代码*/
-export function removeHTMLTag(str: String){
-  str = str.replace(/<.*?>/g, ''); //去除HTML tag
-  str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML tag
-  str = str.replace(/[ | ]*\n/g, '\n'); //去除行尾空
-  str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行
-  str = str.replace(/ /ig, '');//去掉 
+export function removeHTMLTag(str: String) {
+  str = str.replace(/<.*?>/g, ""); //去除HTML tag
+  str = str.replace(/<\/?[^>]*>/g, ""); //去除HTML tag
+  str = str.replace(/[ | ]*\n/g, "\n"); //去除行尾空
+  str = str.replace(/\n[\s| | ]*\r/g, "\n"); //去除多余空行
+  str = str.replace(/ /gi, ""); //去掉
   // str = str.replace(/[a-zA-Z]+/g, ''); //去除字母
   return str;
 }
 
 /*阅读时间*/
-export function readTime(){
+export function readTime() {
   const contentHtml: HTMLElement | null = document.getElementById("content");
   // @ts-ignore
-  let str = contentHtml.innerHTML
-  return '文章共计 ' + removeHTMLTag(str).length +' 个字，阅读完成需要 '+ Math.ceil(removeHTMLTag(str).length/400) +' 分钟';
+  let str = contentHtml.innerHTML;
+  return (
+    "文章共计 " +
+    removeHTMLTag(str).length +
+    " 个字，阅读完成需要 " +
+    Math.ceil(removeHTMLTag(str).length / 400) +
+    " 分钟"
+  );
 }
 
 // 快速返回顶部或底部
@@ -108,7 +117,7 @@ const onScrollToTop = () => {
   if (window.scrollY < 100) {
     backToTop?.classList.add("hidden");
     backToDown?.classList.add("hidden");
-  }else if (window.scrollY > 300) {
+  } else if (window.scrollY > 300) {
     backToTop?.classList.remove("hidden");
     backToDown?.classList.add("hidden");
   } else {
@@ -118,5 +127,3 @@ const onScrollToTop = () => {
 };
 
 window.addEventListener("scroll", onScrollToTop);
-
-

src/styles/main.css

@@ -1,5 +1,5 @@
 body {
-  font-family: Roboto,Helvetica,PingFang SC,Arial,sans-serif !important;
+  font-family: Roboto, Helvetica, PingFang SC, Arial, sans-serif !important;
   color: #333;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -40,7 +40,7 @@ body {
 }
 
 .text-overflow {
-  overflow: hidden; 
+  overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -56,32 +56,32 @@ body {
 }
 
 /*a标签增加指上下划线*/
-.hover-within a{
-  position: relative
+.hover-within a {
+  position: relative;
 }
 
-.hover-within a::after{
+.hover-within a::after {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255/var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   content: "";
   display: block;
   height: 1px;
   margin-top: 2px;
   position: absolute;
   right: 0;
-  transition: width .2s ease;
-  -webkit-transition: width .2s ease;
-  width: 0
+  transition: width 0.2s ease;
+  -webkit-transition: width 0.2s ease;
+  width: 0;
 }
 
 .hover-within a:hover::after {
-  background: #3296EF;
+  background: #3296ef;
   left: 0;
-  width: 100%
+  width: 100%;
 }
 
 /*a标签增加指上下划线*/
 
 .prose h1 {
   font-size: 2em !important;
-}
+}