@wot-ui/vitepress-theme 2.0.0-alpha.20 → 2.0.0

package/README.md

@@ -96,6 +96,11 @@ export default createWotVitePressTheme({
   },
   cases: {
     urls: ['https://api.example.com/cases.json']
+  },
+  specialSponsor: {
+    urls: ['https://api.example.com/sponsor.json'],
+    enabled: true,
+    sponsorLink: '/reward/sponsor'
   }
 })
 ```
@@ -135,6 +140,7 @@ const { data: sponsors } = useSponsor()
 - `analytics.trackBaiduRoute`: 开启后，在路由变化时调用 `_hmt.push(['_trackPageview'])`。
 - `demoIframe`: 配置右侧手机模拟器相关选项。
 - `banner` / `sponsors` / `ads` / `team` / `friendly` / `cases`: 提供给对应功能模块的请求地址数组（支持多线路重试）。
+- `specialSponsor`: 特别赞助位配置，支持赞助数据源 `urls`、右侧赞助位显示开关 `enabled`，以及开通赞助位跳转地址 `sponsorLink`。
 
 ## 构建要求
 

package/dist/theme/components/AsideSponsors.vue

@@ -1,8 +1,23 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 import { useSpecialSponsor } from '../composables/specialSponsor'
+import { wotThemeOptionsKey } from '../options'
 
 const { data } = useSpecialSponsor()
+const options = inject(wotThemeOptionsKey)
+const defaultSponsorLink = '/reward/sponsor'
+
+const specialSponsorOptions = computed(() => {
+  return options?.specialSponsor === false ? null : options?.specialSponsor
+})
+
+const showAsideSponsors = computed(() => {
+  return specialSponsorOptions.value?.enabled !== false
+})
+
+const sponsorLink = computed(() => {
+  return specialSponsorOptions.value?.sponsorLink || defaultSponsorLink
+})
 
 // 分离超级赞助和金牌赞助
 const superSponsors = computed(() => {
@@ -20,8 +35,8 @@ const isGoldSponsorsOdd = computed(() => {
 </script>
 
 <template>
-  <div class="VPDocAsideSponsors">
-    <a class="sponsors-aside-text" href="/reward/sponsor">赞助位</a>
+  <div v-if="showAsideSponsors" class="VPDocAsideSponsors">
+    <a class="sponsors-aside-text" :href="sponsorLink">赞助位</a>
     <div class="VPSponsors vp-sponsor aside">
       <!-- 超级赞助：一行一个 -->
       <section class="vp-sponsor-section" v-if="superSponsors?.items.length">
@@ -52,7 +67,7 @@ const isGoldSponsorsOdd = computed(() => {
           </div>
           <!-- 当金牌赞助为奇数时，默认赞助位填补到金牌赞助位置 -->
           <div class="vp-sponsor-grid-item" v-if="isGoldSponsorsOdd">
-            <a class="vp-sponsor-grid-link" href="/reward/sponsor" rel="sponsored noopener">
+            <a class="vp-sponsor-grid-link" :href="sponsorLink" rel="sponsored noopener">
               <article class="vp-sponsor-grid-box">
                 <span class="vp-sponsor-grid-text">成为赞助商</span>
               </article>
@@ -65,7 +80,7 @@ const isGoldSponsorsOdd = computed(() => {
       <section class="vp-sponsor-section" v-if="!isGoldSponsorsOdd || !goldSponsors?.items.length">
         <div class="VPSponsorsGrid vp-sponsor-grid xmini" data-vp-grid="1">
           <div class="vp-sponsor-grid-item">
-            <a class="vp-sponsor-grid-link" href="/reward/sponsor" rel="sponsored noopener">
+            <a class="vp-sponsor-grid-link" :href="sponsorLink" rel="sponsored noopener">
               <article class="vp-sponsor-grid-box">
                 <span class="vp-sponsor-grid-text">成为赞助商</span>
               </article>

package/dist/theme/components/Banner.vue

@@ -122,7 +122,10 @@ html.banner-show {
   font-size: 18px;
   font-weight: 600;
   color: var(--vp-c-white);
-  background: var(--vp-c-bg-alt);
+  background: #0f0f13;
+  background-image: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   display: none;
   justify-content: center;
   align-items: center;
@@ -189,11 +192,13 @@ button:active {
   height: 28px;
   fill: var(--vp-c-white);
   transform: rotate(45deg);
-  transition: transform 0.2s ease;
+  transition: all 0.3s ease;
+  filter: drop-shadow(0 0 0 transparent);
 }
 
 button:hover .close {
   transform: rotate(45deg) scale(1.1);
+  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
 }
 
 .vt-banner-text {

package/dist/types.d.ts

@@ -27,6 +27,19 @@ export interface WotThemeSponsorOptions {
      */
     urls: string[];
 }
+/**
+ * 特别赞助位配置。
+ */
+export interface WotThemeSpecialSponsorOptions extends WotThemeSponsorOptions {
+    /**
+     * 是否显示文档右侧赞助位，默认为 true。
+     */
+    enabled?: boolean;
+    /**
+     * 开通赞助位跳转地址。
+     */
+    sponsorLink?: string;
+}
 /**
  * 广告位配置。
  */
@@ -107,7 +120,7 @@ export interface WotVitePressThemeOptions {
     /**
      * 特别赞助位配置，传入 false 表示关闭。
      */
-    specialSponsor?: false | WotThemeSponsorOptions;
+    specialSponsor?: false | WotThemeSpecialSponsorOptions;
     /**
      * 广告位配置，传入 false 表示关闭。
      */
@@ -300,7 +313,7 @@ export interface WotResolvedThemeOptions {
     /**
      * 归一化后的特别赞助位配置。
      */
-    specialSponsor: false | WotThemeSponsorOptions;
+    specialSponsor: false | WotThemeSpecialSponsorOptions;
 }
 /**
  * 过滤空值后的有效 Vite 插件类型。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wot-ui/vitepress-theme",
-  "version": "2.0.0-alpha.20",
+  "version": "2.0.0",
   "type": "module",
   "files": [
     "dist"