优化首页视觉效果跟蓝P站基本一致 (#2857)

w7corp · Nov 13, 2024 · 66c64cd · 66c64cd
1 parent 540aa1c
commit 66c64cd
Show file tree

Hide file tree

Showing 3 changed files with 146 additions and 25 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -27,7 +27,11 @@ const nav = [
   {
     text: '赞助',
     link: 'https://github.com/sponsors/overtrue'
-  }
+  },
+  {
+    text: '蓝P站',
+    link: 'https://wechatpay.im/'
+  },
 ]
 
 export const sidebar = versions.reduce(
@@ -57,22 +61,24 @@ export default {
       'meta',
       {
         name: 'twitter:image',
-        content: 'https://easywechat/logo.png'
+        content: 'https://easywechat.com/logo.svg'
       }
     ],
-    // google analytics
-    [
-      'script',
-      { async: '', src: 'https://www.googletagmanager.com/gtag/js?id=G-ZVHYZEP1SR' }
-    ],
-    [
-      'script',
-      {},
-      `window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-      gtag('config', 'G-ZVHYZEP1SR');`
-    ]
+    // google analytics, without tracing dev
+    ...(process?.argv?.[2] === 'dev' ? [] : [
+      [
+        'script',
+        { async: '', src: 'https://www.googletagmanager.com/gtag/js?id=G-ZVHYZEP1SR' }
+      ],
+      [
+        'script',
+        {},
+        `window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-ZVHYZEP1SR');`
+      ],
+    ]),
     // end google analytics
   ],
 
@@ -83,6 +89,45 @@ export default {
     logo: '/logo-icon.svg',
 
     algolia: {
+      placeholder: '搜索文档',
+      translations: {
+        button: {
+          buttonText: '搜索文档',
+          buttonAriaLabel: '搜索文档'
+        },
+        modal: {
+          searchBox: {
+            resetButtonTitle: '清除查询条件',
+            resetButtonAriaLabel: '清除查询条件',
+            cancelButtonText: '取消',
+            cancelButtonAriaLabel: '取消'
+          },
+          startScreen: {
+            recentSearchesTitle: '搜索历史',
+            noRecentSearchesText: '没有搜索历史',
+            saveRecentSearchButtonTitle: '保存至搜索历史',
+            removeRecentSearchButtonTitle: '从搜索历史中移除',
+            favoriteSearchesTitle: '收藏',
+            removeFavoriteSearchButtonTitle: '从收藏中移除'
+          },
+          errorScreen: {
+            titleText: '无法获取结果',
+            helpText: '你可能需要检查你的网络连接'
+          },
+          footer: {
+            selectText: '选择',
+            navigateText: '切换',
+            closeText: '关闭',
+            searchByText: '搜索提供者'
+          },
+          noResultsScreen: {
+            noResultsText: '无法找到相关结果',
+            suggestedQueryText: '你可以尝试查询',
+            reportMissingResultsText: '你认为该查询应该有结果？',
+            reportMissingResultsLinkText: '点击反馈'
+          },
+        },
+      },
       indexName: 'easywechat',
       appId: 'X3KJL5SQXD',
       apiKey: '5c5ba71b35c48411f245bef4c695fc36'
@@ -91,6 +136,24 @@ export default {
       // }
     },
 
+    returnToTopLabel: '回到顶部',
+    sidebarMenuLabel: '菜单',
+    darkModeSwitchLabel: '主题模式',
+    lightModeSwitchTitle: '浅色模式',
+    darkModeSwitchTitle: '深色模式',
+
+    docFooter: {
+      prev: '上一页',
+      next: '下一页'
+    },
+
+    notFound: {
+      title: '未找到',
+      quote: '您所访问的页面未找到，或者已失效',
+      linkLabel: '返回首页',
+      linkText: '返回首页',
+    },
+
     // carbonAds: {
     //   code: '',
     //   placement: ''

diff --git a/docs/.vitepress/theme/styles/layout.css b/docs/.vitepress/theme/styles/layout.css
@@ -1,7 +1,64 @@
 .VPContent,
 .VPContent .VPContentPage,
 .VPContent .VPContentPage main,
-.VPContent .VPContentPage main > div,
-.VPContent .VPContentPage main > div > div {
+.VPContent .VPContentPage main>div,
+.VPContent .VPContentPage main>div>div {
   @apply flex-1 flex flex-col;
 }
+
+.dark .im-home {
+  --im-gradient-p1: #8356dc;
+  --im-gradient-p3: #5908a6;
+  --im-gradient-p2: #044f1e;
+  --im-gradient-p4: #49bcb7;
+}
+
+.im-home {
+  --im-gradient-p1: #ecd8ff;
+  --im-gradient-p2: #e8fca7;
+  --im-gradient-p3: #dafbe1;
+  --im-gradient-p4: #ffd8b5;
+  background: linear-gradient(-40deg, var(--im-gradient-p1), var(--im-gradient-p2), var(--im-gradient-p3), var(--im-gradient-p4));
+  background-size: 120% 120%;
+}
+
+.im-home .top {
+  --vp-nav-bg-color: transparent;
+  --vp-c-bg: transparent;
+  --vp-c-gutter: transparent;
+  --vp-c-bg-alt: transparent;
+  --vp-c-divider: transparent;
+}
+
+.im-home .VPContent {
+  justify-content: center;
+}
+
+.im-home .bash-composer:before {
+  content: "$";
+  letter-spacing: .35rem;
+  opacity: 1;
+  animation: im-blink 1s ease infinite;
+}
+
+@keyframes im-blink {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 8;
+  }
+}
+
+.im-home .border-t {
+  border-top-color: transparent;
+}
+
+.dark .im-home .dark\:border-black {
+  --tw-border-opacity: 0;
+}
diff --git a/docs/src/index.md b/docs/src/index.md
@@ -1,5 +1,6 @@
 ---
 layout: page
+pageClass: im-home
 title: EasyWeChat - 一个 PHP 微信开发 SDK
 ---
 
@@ -15,12 +16,12 @@ let latestVersion = versions[0]
   <div class="flex-1 flex flex-col items-center justify-center space-y-8">
     <div class="flex justify-center">
       <h1
-        class="tagline md:py-28 text-center text-3xl md:text-7xl xl:text-8xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-green-400"
+        class="tagline md:py-12 text-center text-4xl md:text-7xl xl:text-8xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-green-400 dark:from-green-400 dark:to-yellow-500"
       >
         微信开发，可以更简单
       </h1>
     </div>
-    <p class="py-4 md:py-6 md:text-2xl dark:text-gray-500">
+    <p class="py-4 md:py-3 md:text-2xl">
       每一个细节，都经过精心打磨，只为了提供更好的开发体验。
     </p>
     <div
@@ -30,9 +31,9 @@ let latestVersion = versions[0]
         class="hidden xl:block mr-4 items-center space-around text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded lg:text-lg"
       >
         <code
-          class="text-gray-700 bg-transparent flex items-center"
+          class="bash-composer text-gray-700 bg-transparent flex items-center"
         >
-          $ composer require w7corp/easywechat
+          composer require w7corp/easywechat
         </code>
       </div>
       <a
@@ -63,29 +64,29 @@ let latestVersion = versions[0]
     <a
       href="https://github.com/overtrue"
       target="_blank"
-      class="flex items-center group hover:bg-gray-200 dark:hover:bg-indigo-500 xl:w-64 px-6 py-2 rounded-lg"
+      class="flex items-center group hover:bg-gray-200 dark:hover:bg-indigo-500 xl:w-64 px-6 py-2 rounded-lg justify-center flex-col md:flex-row"
     >
       <div
         class="h-12 w-12 rounded-full border-2 border-blue-200 group-hover:border-blue-400 dark:group-hover:border-gray-300 p-0.5"
       >
         <img src="/overtrue.jpg" alt="overtrue" class="rounded-full"/>
       </div>
-      <div class="px-2 text-left text-gray-400 dark:group-hover:text-gray-300">
+      <div class="px-2 md:text-left text-gray-400 dark:group-hover:text-gray-300">
         <div class="text-gray-700 dark:text-gray-300 dark:group-hover:text-white font-semibold">overtrue</div>
         <small>核心开发者</small>
       </div>
     </a>
     <a
       href="https://www.w7.cc/"
       target="_blank"
-      class="flex items-center group hover:bg-gray-200 dark:hover:bg-indigo-500 xl:w-64 px-6 py-2 rounded-lg"
+      class="flex items-center group hover:bg-gray-200 dark:hover:bg-indigo-500 xl:w-64 px-6 py-2 rounded-lg justify-center flex-col md:flex-row"
     >
       <div
         class="h-12 w-12 rounded-full border-2 border-blue-200 group-hover:border-blue-400 dark:group-hover:border-gray-300 p-0.5"
       >
         <img src="/w7team.jpg" alt="overtrue" class="rounded-full"/>
       </div>
-      <div class="px-2 text-left text-gray-400 dark:group-hover:text-gray-300">
+      <div class="px-2 md:text-left text-gray-400 dark:group-hover:text-gray-300">
         <div class="text-gray-700  dark:text-gray-300 dark:group-hover:text-white font-semibold">微擎</div>
         <small>开源 Saas 平台提供商</small>
       </div>