update docs

Author: wu-clan

docs/.vuepress/components/SponsorPanel.vue

@@ -1,38 +1,26 @@
 <template>
-  <div class="brand-header" @click="toggleCollapse">
+  <div class="brand-header">
     <span>倾情赞助</span>
-    <span class="toggle-icon">
-      <Icon v-if="isCollapsed" name="iconamoon:arrow-right-2" />
-      <Icon v-else name="iconamoon:arrow-down-2" />
-    </span>
   </div>
   <div class="brand-container">
     <div class="gold-sponsors">
       <div
           v-for="brand in goldSponsors"
           v-show="shouldShowSponsor(brand)"
-          :class="{ 'collapsed-mode': isCollapsed }"
           class="brand-item gold"
           @click="openSponsorLink(brand.href, '_blank')"
       >
-        <img v-if="!isCollapsed" :alt="brand.alt" :src="brand.link" class="brand-image" />
-        <span v-else class="brand-text collapsed-text">
-          {{ brand.alt }}
-        </span>
+        <img :alt="brand.alt" :src="brand.link" class="brand-image" />
       </div>
     </div>
     <div class="general-sponsors">
       <div
           v-for="brand in generalSponsors"
           v-show="shouldShowSponsor(brand)"
-          :class="{ 'collapsed-mode': isCollapsed }"
           class="brand-item"
           @click="openSponsorLink(brand.href, '_blank')"
       >
-        <img v-if="!isCollapsed" :alt="brand.alt" :src="brand.link" class="brand-image" />
-        <span v-else class="brand-text collapsed-text">
-          {{ brand.alt }}
-        </span>
+        <img :alt="brand.alt" :src="brand.link" class="brand-image" />
       </div>
     </div>
     <div
@@ -54,26 +42,11 @@ import {
   shouldShowSponsor,
   sponsorUrl
 } from "../data/sponsors";
-import { useStorage } from "@vueuse/core";
-
-const isCollapsed = useStorage('fba-docs-sponsor-collapsed', false);
 
 const shouldShowExtraBecomeSponsor = computed(() => {
   return (goldSponsors.filter(brand => shouldShowSponsor(brand)).length +
       generalSponsors.filter(brand => shouldShowSponsor(brand)).length) < 9;
 });
-
-const toggleCollapse = () => {
-  isCollapsed.value = !isCollapsed.value;
-};
-
-const brandItemGoldHeight = computed(() => {
-  return isCollapsed.value ? '32px' : '96px'
-})
-
-const brandItemHeight = computed(() => {
-  return isCollapsed.value ? '32px' : '66px'
-})
 </script>
 
 <style scoped>
@@ -87,12 +60,6 @@ const brandItemHeight = computed(() => {
   margin: 3px 0 2px;
 }
 
-.toggle-icon {
-  font-size: 10px;
-  transform: scale(1.2);
-  opacity: 0.7;
-}
-
 .brand-container {
   display: flex;
   flex-direction: column;
@@ -117,7 +84,7 @@ const brandItemHeight = computed(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: v-bind(brandItemHeight);
+  height: 66px;
   transition: all 0.3s ease;
   position: relative;
 }
@@ -127,7 +94,7 @@ const brandItemHeight = computed(() => {
 }
 
 .brand-item.gold {
-  height: v-bind(brandItemGoldHeight);
+  height: 96px;
 }
 
 .brand-image {
@@ -152,24 +119,6 @@ const brandItemHeight = computed(() => {
   font-size: 13px;
 }
 
-.collapsed-mode {
-  height: 32px !important;
-}
-
-.collapsed-mode .brand-image {
-  opacity: 0;
-}
-
-.collapsed-text {
-  color: var(--vp-c-brand-1) !important;
-  font-weight: 600;
-  transform: scale(1.05);
-}
-
-.collapsed-mode:hover .collapsed-text {
-  color: var(--vp-c-text-1) !important;
-}
-
 .become-brand {
   height: 32px;
   background-color: unset;

docs/.vuepress/components/SponsorSidebar.vue

@@ -26,6 +26,7 @@ import { homeSponsor, openSponsorLink, shouldShowSponsor } from "../data/sponsor
 
 <style scoped>
 .brand-header {
+  text-align: left;
   font-size: 11px;
   color: var(--vp-c-text-3);
 }

docs/.vuepress/layouts/Layout.vue

@@ -5,6 +5,12 @@ import SponsorPanel from "../components/SponsorPanel.vue";
 import BannerTop from "../components/BannerTop.vue";
 import SponsorSidebar from "../components/SponsorSidebar.vue";
 import Footer from "../components/Footer.vue";
+import { useData } from 'vuepress-theme-plume/composables'
+import { computed } from "vue";
+
+const { frontmatter } = useData()
+const showSidebarSponsorOnAsideTop = computed(() => frontmatter.value.sponsor_sidebar)
+
 </script>
 
 <template>
@@ -19,6 +25,16 @@ import Footer from "../components/Footer.vue";
         <SponsorSidebar />
       </div>
     </template>
+    <template #aside-top>
+      <div v-if="showSidebarSponsorOnAsideTop" style="margin-bottom: 8px">
+        <SponsorSidebar />
+      </div>
+    </template>
+    <template #posts-aside-top>
+      <div style="margin-bottom: 8px">
+        <SponsorSidebar />
+      </div>
+    </template>
     <template #doc-title-after>
         <PageContextMenu />
     </template>

docs/architecture.md

@@ -1,5 +1,6 @@
 ---
 title: 架构
+sponsor_sidebar: true
 ---
 
 待补充

docs/community-open-source.md

@@ -1,5 +1,6 @@
 ---
 title: 社区开源
+sponsor_sidebar: true
 ---
 
 作者正在翘首以盼的等着投喂🥹，这里是你的 Show Time 时刻！

docs/group.md

@@ -1,5 +1,6 @@
 ---
 title: 交流群
+sponsor_sidebar: true
 ---
 
 [通过 fba 作者主页与他互动](https://wu-clan.github.io/homepage/){.read-more}

docs/open-source.md

@@ -1,5 +1,6 @@
 ---
 title: 官方开源
+sponsor_sidebar: true
 ---
 
 在此之前，让我们通过维基百科简单了解下 [开源](https://zh.wikipedia.org/wiki/%E5%BC%80%E6%BA%90%E8%BD%AF%E4%BB%B6) 这个词

docs/questions.md

@@ -1,5 +1,6 @@
 ---
 title: 常见问题
+sponsor_sidebar: true
 ---
 
 ::: tip

docs/sponsors.md

@@ -1,5 +1,6 @@
 ---
 title: 成为 fba 的赞助者
+sponsor_sidebar: true
 ---
 
 ::: note ⚡
@@ -61,7 +62,8 @@ title: 成为 fba 的赞助者
             <td>
                 - 首页独家展示位<br>
                 - 文档左侧边栏独家展示位<br>
-                - 固定不可折叠<br>
+                - 文档右侧边栏独家展示位<br>
+                - 博客右侧边栏独家展示位<br>
                 - 移动端可见
             </td>
             <td rowspan="2">
@@ -76,19 +78,17 @@ title: 成为 fba 的赞助者
             <td style="color: orangered">（目前空缺）</td>
             <td>与作者沟通 / 月</td>
             <td>
-                - 首页信息轮播展示位<br>
-                - 文档右侧边栏大号展示位<br>
-                - 可折叠
+                - 首页轮播固定展示位<br>
+                - 文档右侧边栏大号展示位
             </td>
         </tr>
         <tr>
             <td><strong>普通展位</strong></td>
             <td style="color: orangered">（目前空缺）</td>
             <td>与作者沟通 / 月</td>
             <td>
-                - 首页滚动展示位<br>
-                - 文档右侧边栏小号展示位<br>
-                - 可折叠
+                - 首页轮播滚动展示位<br>
+                - 文档右侧边栏小号展示位
             </td>
             <td>
                 - 赞助商名称<br>

docs/stack.md

@@ -1,5 +1,6 @@
 ---
 title: 技术栈
+sponsor_sidebar: true
 ---
 
 fba 采用当前主流技术框架，我们追求新事物，拥抱新事物，并且积极更新与跟进