docs: 主题列表页面

docs/assets/config/themes.json

@@ -0,0 +1,24 @@
+{
+  "defaultItems": [
+    {
+      "name": "fog",
+      "owner": "wonder-light",
+      "intr": "静态博客主题，不适合追求简洁的博主使用",
+      "secr": "https://github.com/user-attachments/assets/f6e63470-f264-441e-b59f-3534f193ea00",
+      "prev": "https://blog.nianian.cn",
+      "repo": "https://github.com/wonder-light/glidea-theme-fog",
+      "star": 1
+    }
+  ],
+  "githubItems": [
+    {
+      "name": "fog",
+      "owner": "wonder-light",
+      "intr": "静态博客主题，不适合追求简洁的博主使用",
+      "secr": "https://github.com/user-attachments/assets/f6e63470-f264-441e-b59f-3534f193ea00",
+      "prev": "https://blog.nianian.cn",
+      "repo": "https://github.com/wonder-light/glidea-theme-fog",
+      "star": 0
+    }
+  ]
+}

docs/assets/css/main.css

@@ -1,7 +1,13 @@
+/* #ffd100 */
+
 :root {
   --app-name-img-width: 80px;
 }
 
+.jc-center {
+  justify-content: center;
+}
+
 .p-big {
   font-size: 1.4rem;
   font-weight: 700;
@@ -49,7 +55,7 @@
   font-size: 1.05rem;
   letter-spacing: 0.1rem;
   margin: 0.5rem 1rem;
-  padding: 0.75em 2rem;
+  padding: 0.5em 1rem;
   text-decoration: none;
   transition: 0.15s;
 }
@@ -65,6 +71,11 @@
   opacity: 0.8;
 }
 
+.a-button .icon,
+.a-button-cover .icon {
+  color: currentColor;
+}
+
 /* 没有元素时隐藏侧边栏 */
 .b-main-hide button.sidebar-toggle {
   display: none !important;
@@ -135,6 +146,37 @@ a.app-name-link img {
   margin-right: 1rem;
 }
 
-.theme-icon img{
+.theme-icon img {
   width: 1rem;
 }
+
+.left-segm {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.left-segm .el-segmented {
+  --el-segmented-item-selected-color: var(--el-text-color-primary);
+  --el-segmented-item-selected-bg-color: var(--theme-color, #42b983);
+  --el-border-radius-base: 16px;
+}
+
+.left-segm .el-segmented__item {
+  padding: 0.5rem 1rem;
+}
+
+.theme-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.theme-list .theme-card {
+  width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .theme-list .theme-card {
+    width: 50%;
+  }
+}

docs/assets/js/discussion.js

@@ -0,0 +1,3 @@
+const { execDiscussion } = require("./update");
+
+execDiscussion();

docs/assets/js/main.js

@@ -3,9 +3,9 @@ const themeCard = {
   template: `
     <div class="theme-card">
       <div class="theme-content">
-        <a class="theme-img" :style='{ backgroundImage: "url(\\"" + secr +"\\")" }'></a>
+        <a class="theme-img" :style='{ backgroundImage: "url(" + secr +")" }'></a>
         <div class="theme-button">
-          <div class="theme-text">{{name}}{{foo}}</div>
+          <div class="theme-text">{{name}}</div>
           <div>
             <a :href="prev" class="theme-icon" target="_blank">
               <img src="/assets/images/eye.svg" alt="预览"/>
@@ -25,7 +25,64 @@ const themeCard = {
     repo: String, // 仓库地址
   },
   data() {
-    return {}
+    return {};
+  },
+};
+
+// 主题列表
+const themeList = {
+  template: `
+    <div>
+      <div align="center">
+        <a class="a-button-cover" style="display: inline-flex; cursor: pointer">
+          <img src="/assets/images/clothes-line.svg" alt="clothes-line.svg" style="width: 1rem; margin-right: 0.5rem;"/>
+          {{ shared }}
+          <img src="/assets/images/right-arrow.svg" alt="right-arrow.svg" style="width: 1rem; margin-left: 0.4rem;"/>
+        </a>
+      </div>
+      <div class="left-segm" style="padding-right: 1rem">
+        <el-segmented v-model="currentOption" :options="options"></el-segmented>
+      </div>
+      <div v-if="getItems.length > 0" :class="{ 'theme-list': true, 'jc-center': getItems.length <= 1 }">
+        <theme-card v-for="item in getItems" :name="item.name" :secr="item.secr" :prev="item.prev" :repo="item.repo"> </theme-card>
+      </div>
+      <div v-else>
+        <el-empty :image-size="200"></el-empty>
+      </div>
+      <div v-if="hasMoreData" align="center">
+        <div class="a-button" style="display: inline-block; cursor: pointer">
+          {{ loadTip }}
+        </div>
+      </div>
+    </div>
+  `,
+  inject: ["defaultItems", "githubItems"],
+  props: {
+    label: String,
+    shared: String,
+  },
+  data() {
+    return {
+      currentOption: this.label,
+      options: [this.label, "Github"],
+      hasMoreData: false,
+    };
+  },
+  computed: {
+    isGithub() {
+      return this.currentOption == "Github";
+    },
+    getItems() {
+      return this.isGithub ? this.githubItems : this.defaultItems;
+    },
+  },
+  created() {
+    fetch("/assets/config/themes.json")
+      .then((response) => response.json())
+      .then((data) => {
+        this.githubItems = data.githubItems;
+        this.defaultItems = data.defaultItems;
+      });
   },
 };
 
@@ -81,12 +138,28 @@ window.$docsify = {
   // vue 组件
   vueComponents: {
     "theme-card": themeCard,
+    "theme-list": themeList,
+    ElSegmented: ElementPlus.ElSegmented,
+    ElEmpty: ElementPlus.ElEmpty,
   },
   // vue 全局选项
   vueGlobalOptions: {
     data() {
       return {
-        count: 0,
+        defaultItems: [],
+        githubItems: [],
+      };
+    },
+    provide() {
+      return {
+        defaultItems: Vue.computed({
+          get: () => this.defaultItems,
+          set: (value) => (this.defaultItems = value),
+        }),
+        githubItems: Vue.computed({
+          get: () => this.githubItems,
+          set: (value) => (this.githubItems = value),
+        }),
       };
     },
   },