From 340926bcd30980ae91467d9673020c5cb90d0e8e Mon Sep 17 00:00:00 2001
From: Relakkes <relakkes@gmail.com>
Date: Thu, 26 Sep 2024 15:38:18 +0800
Subject: [PATCH] chore: add vitepress doc custom theme

---
 docs/.vitepress/theme/DynamicAds.vue | 85 ++++++++++++++++++++++++++++
 docs/.vitepress/theme/MyLayout.vue   | 14 +++++
 docs/.vitepress/theme/custom.css     |  9 +++
 docs/.vitepress/theme/index.js       |  9 +++
 4 files changed, 117 insertions(+)
 create mode 100644 docs/.vitepress/theme/DynamicAds.vue
 create mode 100644 docs/.vitepress/theme/MyLayout.vue
 create mode 100644 docs/.vitepress/theme/custom.css
 create mode 100644 docs/.vitepress/theme/index.js

diff --git a/docs/.vitepress/theme/DynamicAds.vue b/docs/.vitepress/theme/DynamicAds.vue
new file mode 100644
index 0000000..213d20a
--- /dev/null
+++ b/docs/.vitepress/theme/DynamicAds.vue
@@ -0,0 +1,85 @@
+<!-- 在vitepress右侧的目录导航中插入动态广告组件-->
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const ads = ref([])
+const currentAdIndex = ref(0)
+let intervalId = null
+
+const fetchAds = async () => {
+  return [
+    {
+      id: 1,
+      imageUrl: 'https://mangoproxy.com/assetsfile/images/logomango.webp',
+      landingUrl: 'https://mangoproxy.com/?utm_source=mediacrawler&utm_medium=repository&utm_campaign=default',
+      text: '全局IP代理白金推荐，支持210+国家'
+    }
+  ]
+}
+
+const nextAd = () => {
+  currentAdIndex.value = (currentAdIndex.value + 1) % ads.value.length
+}
+
+onMounted(async () => {
+  ads.value = await fetchAds()
+  intervalId = setInterval(nextAd, 3000)
+})
+
+onUnmounted(() => {
+  if (intervalId) clearInterval(intervalId)
+})
+</script>
+
+<template>
+  <div class="vp-ad-carousel">
+    <template v-if="ads.length > 0">
+      <div class="ad-content">
+        <a :href="ads[currentAdIndex].landingUrl" target="_blank" rel="noopener noreferrer">
+          <img :src="ads[currentAdIndex].imageUrl" :alt="ads[currentAdIndex].text" class="ad-image">
+          <p class="ad-text">{{ ads[currentAdIndex].text }}</p>
+        </a>
+      </div>
+    </template>
+    <p v-else class="loading">Loading ads...</p>
+  </div>
+</template>
+
+<style scoped>
+.vp-ad-carousel {
+  margin-top: 1rem;
+  padding: 1rem;
+  background-color: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.ad-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.ad-image {
+  max-width: 130px;
+  height: auto;
+  margin-bottom: 0.5rem;
+}
+
+.ad-text {
+  text-align: center;
+  color: var(--vp-c-text-1);
+}
+
+.loading {
+  text-align: center;
+  color: var(--vp-c-text-2);
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+</style>
diff --git a/docs/.vitepress/theme/MyLayout.vue b/docs/.vitepress/theme/MyLayout.vue
new file mode 100644
index 0000000..517f3b3
--- /dev/null
+++ b/docs/.vitepress/theme/MyLayout.vue
@@ -0,0 +1,14 @@
+<!--.vitepress/theme/MyLayout.vue-->
+<script setup>
+import DefaultTheme from 'vitepress/theme'
+import DynamicAds from './DynamicAds.vue'
+const { Layout } = DefaultTheme
+</script>
+
+<template>
+  <Layout>
+    <template #aside-bottom>
+      <DynamicAds />
+    </template>
+  </Layout>
+</template>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
new file mode 100644
index 0000000..fcc8e90
--- /dev/null
+++ b/docs/.vitepress/theme/custom.css
@@ -0,0 +1,9 @@
+/* .vitepress/theme/custom.css */
+/**
+ * Component: Sidebar
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-sidebar-width: 285px;
+  --vp-sidebar-bg-color: var(--vp-c-bg-alt);
+}
\ No newline at end of file
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
new file mode 100644
index 0000000..d3eb3e7
--- /dev/null
+++ b/docs/.vitepress/theme/index.js
@@ -0,0 +1,9 @@
+// .vitepress/theme/index.js
+import DefaultTheme from 'vitepress/theme'
+import MyLayout from './MyLayout.vue'
+
+export default {
+  extends: DefaultTheme,
+  // 使用注入插槽的包装组件覆盖 Layout
+  Layout: MyLayout
+}
\ No newline at end of file