docs: update style

didi · Jan 20, 2025 · 3d13685 · 3d13685
1 parent 87d27fd
commit 3d13685
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 74 deletions.
diff --git a/docs-vitepress/.vitepress/config.ts b/docs-vitepress/.vitepress/config.ts
@@ -1,5 +1,6 @@
 import { defineConfig } from "vitepress"
 import { withPwa } from "@vite-pwa/vitepress"
+import { algoliaTranslations } from "./theme/translations"
 
 const sidebar = {
     "/guide/": [
@@ -207,55 +208,6 @@ const sidebar = {
     ],
 }
 
-const algoliaTranslations = {
-    button: {
-        buttonText: "搜索",
-    },
-    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: "向我们反馈",
-        },
-    },
-}
-
-const i18n = {
-    search: '搜索',
-    menu: '菜单',
-    toc: '本页目录',
-    returnToTop: '返回顶部',
-    appearance: '外观',
-    previous: '前一篇',
-    next: '下一篇',
-    pageNotFound: '页面未找到',
-}
-
 const ogUrl = "https://mpxjs.cn/"
 const ogImage = `${ogUrl}logo.png`
 const title = "Mpx 框架"

diff --git a/docs-vitepress/.vitepress/theme/components/AlgoliaSearchBox.vue b/docs-vitepress/.vitepress/theme/components/AlgoliaSearchBox.vue
@@ -8,18 +8,21 @@
 <script>
 import docsearch from '@docsearch/js'
 import '@docsearch/css'
+import { algoliaTranslations } from "../../theme/translations"
+
 export default {
   props: ['options'],
   mounted () {
     this.initialize()
   },
   methods: {
     initialize () {
-    docsearch({
-      container: '#docsearch-container',
-      appId: 'DZ8S6HN0MP',
-      apiKey: 'a34809e24ae1eb13ca3afc255d0a0cef',
-      indexName: 'mpxjs',
+      docsearch({
+        container: '#docsearch-container',
+        appId: 'DZ8S6HN0MP',
+        apiKey: 'a34809e24ae1eb13ca3afc255d0a0cef',
+        indexName: 'mpxjs',
+        translations: algoliaTranslations,
       })
     }
   },

diff --git a/docs-vitepress/.vitepress/theme/components/MobileView.vue b/docs-vitepress/.vitepress/theme/components/MobileView.vue
@@ -32,7 +32,7 @@
           :src="item.micon"
           loading="lazy"
           width="34"
-          style="height: 34px;"
+          style="height: 34px;display: inline-block;"
         />
         <p class="m-advan-section-title">{{ item.title }}</p>
       </li>
@@ -41,9 +41,9 @@
     <div class="mdemo-wrapper">
       <div class="mdemo-title">{{ $frontmatter.threeSection.title }}</div>
       <p class="mdemo-subtitle">
-        扫码体验Mpx版本的
+        扫码体验 Mpx 版本的
         <a class="target-link" href="https://github.com/didi/mpx/tree/master/examples/mpx-todoMVC">todoMVC</a>
-        在各个小程序平台和web中的一致表现 ，更多示例项目可点击
+        在各个小程序平台和 web 中的一致表现 ，更多示例项目可点击
         <a class="target-link" href="https://github.com/didi/mpx/tree/master/examples">这里</a>
         进入查看。
       </p>

diff --git a/docs-vitepress/.vitepress/theme/components/Navbar.vue b/docs-vitepress/.vitepress/theme/components/Navbar.vue
@@ -181,6 +181,7 @@ export default {
   box-shadow rgb(240 241 242) 0px 2px 8px
   padding: 0.5rem 3rem;
   // justify-content center
+  box-sizing: content-box;
 }
 
 .nav-link {
@@ -189,6 +190,7 @@ export default {
   align-items: center;
   width: 100%;
   justify-content: space-between;
+  font-weight: 500;
 }
 
 a.router-link-active {

diff --git a/docs-vitepress/.vitepress/theme/global-components/Content.vue b/docs-vitepress/.vitepress/theme/global-components/Content.vue
@@ -30,7 +30,7 @@
     <section class="two-section">
       <ul class="row">
         <li class="two-section__item" v-for="(item, index) in $frontmatter.features" :key="index">
-          <img :src="item.icon" alt="svg" loading="lazy" width="80" style="height: 80px;" />
+          <img :src="item.icon" alt="svg" loading="lazy" width="80" style="height: 80px;display: inline-block;" />
           <p class="two-section__title">{{item.title}}</p>
           <p class="two-section__desc">{{item.details}}</p>
           <div class="two-section__line"></div>
@@ -46,7 +46,7 @@
             <div class="three-section__phone">
               <img
                   width="410"
-                  style="height: 712px;"
+                  style="height: 712px;max-width: none;"
                   src="https://dpubstatic.udache.com/static/dpubimg/Vx5n_3YCtP/anli_pic_phone.png"
                   alt="phone"
                   loading="lazy" />
@@ -67,11 +67,11 @@
           <div>
             <span class="dot-inner" style="background: #fff; margin: 0 auto;"></span>
             <p class="white-text title">{{$frontmatter.threeSection.title}}</p>
-            <p class="white-text desc">
+            <p class="white-text desc" >
               <!-- {{$frontmatter.threeSection.details}} -->
-              扫码体验Mpx版本的
+              扫码体验 Mpx 版本的
               <a class="target-link" href="https://github.com/didi/mpx/tree/master/examples/mpx-todoMVC">todoMVC</a>
-              在各个小程序平台和web中的一致表现 ，更多示例项目可点击
+              在各个小程序平台和 web 中的一致表现 ，更多示例项目可点击
               <a class="target-link" href="https://github.com/didi/mpx/tree/master/examples">这里</a>
               进入查看。
             </p>
@@ -208,8 +208,6 @@
 import Swiper from '../components/Swiper.vue';
 import SwiperImg from '../components/SwiperImg.vue';
 import CodeList from '../components/CodeList.vue';
-import { useData } from 'vitepress'
-import { toRefs } from 'vue'
 
 export default {
   data () {
@@ -272,12 +270,14 @@ section
 
 .title
   font-size 30px
+  margin-top 40px
   margin-bottom 20px
   font-weight 500
 
 .desc
   font-size 14px
   line-height 22px
+  margin-top 30px
   margin-bottom 40px
 
 .btn
@@ -323,6 +323,7 @@ section
   flex 1
 
 .one-section__title
+  margin-top 30px
   margin-bottom 20px
   font-size 40px
   font-weight 500
@@ -332,6 +333,7 @@ section
   width 450px
   line-height 30px
   margin-bottom 70px
+  padding-top 20px
 
 .one-section__btn
   width 162px

diff --git a/docs-vitepress/.vitepress/theme/global-components/Footer.vue b/docs-vitepress/.vitepress/theme/global-components/Footer.vue
@@ -55,7 +55,7 @@
       </ul>
     </footer>
     <div class="copyright">
-      <div>备案号：<a href="https://beian.miit.gov.cn/">蜀ICP备15023364号-2</a></div>
+      <div>备案号：<a href="https://beian.miit.gov.cn/" style="color: var(--vt-c-brand);">蜀ICP备15023364号-2</a></div>
       <div>Copyright 2020 滴滴出行</div>
     </div>
   </div>
@@ -150,7 +150,8 @@ ul li
 
 @media (max-width: 750px) {
   .footer__list {
-    margin-bottom 16px
+    margin 16px 0
+    padding-left 16px
   }
 
   .footer__text {

diff --git a/docs-vitepress/.vitepress/theme/translations.ts b/docs-vitepress/.vitepress/theme/translations.ts
@@ -0,0 +1,37 @@
+export const algoliaTranslations = {
+    button: {
+        buttonText: "搜索",
+    },
+    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: "向我们反馈",
+        },
+    },
+}
diff --git a/docs-vitepress/index.md b/docs-vitepress/index.md
@@ -10,21 +10,21 @@ githubText: Github
 githubLink: https://github.com/didi/mpx
 features:
 - title: 高性能
-  details: Mpx高度关注小程序性能与包体积，深度整合了运行时性能优化与包体积分析优化能力，让开发者在大部分场景下只需专注于业务开发，就能生产出媲美甚至超出原生的高性能小程序应用。
+  details: Mpx 高度关注小程序性能与包体积，深度整合了运行时性能优化与包体积分析优化能力，让开发者在大部分场景下只需专注于业务开发，就能生产出媲美甚至超出原生的高性能小程序应用。
   icon: https://dpubstatic.udache.com/static/dpubimg/PsrcQ_igBl/texing_icon_you.png
   micon: https://dpubstatic.udache.com/static/dpubimg/BBQBgCRCOl/y_icon_you.png
 - title: 优体验
-  details: 以增强的方式将Vue中优良的开发特性引入到小程序开发中，如数据响应、组合式api等，配合强大的工程化能力，大大提升了小程序开发的体验与效率，同时保障了框架开发的可维护性与可预期性。
+  details: 以增强的方式将 Vue 中优良的开发特性引入到小程序开发中，如数据响应、组合式 api 等，配合强大的工程化能力，大大提升了小程序开发的体验与效率，同时保障了框架开发的可维护性与可预期性。
   icon: https://dpubstatic.udache.com/static/dpubimg/N7sc6TZnja/texing_icon_gao.png
   micon: https://dpubstatic.udache.com/static/dpubimg/0S3n12uc1k/y_icon_gao.png
 - title: 跨平台
-  details: Mpx专注解决小程序跨端问题，通过静态转译与运行时适配结合，将一份源码跨端输出到所有开放的小程序平台和web环境下运行，同时最大限度减少跨端带来的性能与包体积损失。
+  details: Mpx 专注解决小程序跨端问题，通过静态转译与运行时适配结合，将一份源码跨端输出到所有开放的小程序平台和 web 环境下运行，同时最大限度减少跨端带来的性能与包体积损失。
   icon: https://dpubstatic.udache.com/static/dpubimg/bJMx84lznm/texing_icon_kua.png
   micon: https://dpubstatic.udache.com/static/dpubimg/KPG_IXLuwU/y_icon_kua.png
 threeSection:
   title: 示例项目
-  details: 扫码查看使用Mpx开发的todoMVC项目在各个小程序平台及web下的运行情况，更多示例项目代码可点击这里查看。
-  mdetails: TodoMVC是一个示例项目，它使用目前流行的不同JavaScript框架的来实现同一个Demo，来帮助你熟悉和选择最合适的前端框架。
+  details: 扫码查看使用 Mpx 开发的 todoMVC 项目在各个小程序平台及 web 下的运行情况，更多示例项目代码可点击这里查看。
+  mdetails: TodoMVC 是一个示例项目，它使用目前流行的不同 JavaScript 框架的来实现同一个 Demo，来帮助你熟悉和选择最合适的前端框架。
   actionText: 查看详情
   actionLink: https://dpubstatic.udache.com/static/dpubimg/c3b0d3bc-1bb0-4bee-b6da-4205a2744e21.html#/pages/index
   img: https://dpubstatic.udache.com/static/dpubimg/nYbrJSPSz7/anli_pic_phone.png
@@ -53,15 +53,15 @@ threeSection:
       icon: https://dpubstatic.udache.com/static/dpubimg/d4pVP4BUGU/y_icon_web.png
 fourSection:
   title: 极致性能
-  details: 得益于增强的设计思路，Mpx在运行时没有复杂的封装抹平逻辑，而是专注于实现数据响应，setData优化和Composition api等关键增强能力，压缩后体积占用仅为60KB；配合编译构建中灵活强大的包体积分析优化能力，Mpx在性能与包体积方面做到了业内最优。
+  details: 得益于增强的设计思路，Mpx 在运行时没有复杂的封装抹平逻辑，而是专注于实现数据响应，setData 优化和 Composition api 等关键增强能力，压缩后体积占用仅为 60KB；配合编译构建中灵活强大的包体积分析优化能力，Mpx 在性能与包体积方面做到了业内最优。
   img: https://dpubstatic.udache.com/static/dpubimg/jvACYsEQfm/jizhi_pic.png
   mimg: https://dpubstatic.udache.com/static/dpubimg/G4RXehQ40n/y_pic_jizhi.png
   bg: https://gift-static.hongyibo.com.cn/static/kfpub/3547/jizhi_bg_v3.png
   actionText: 点击进入
   actionLink: /guide/basic/start.html
 fiveSection:
   title: 渐进迁移
-  details: 同样得益于增强的设计思路，Mpx能够完整兼容小程序原生技术规范，并以较低的成本进行持续跟进；借助框架提供的渐进迁移能力，小程序开发者可以方便地在Mpx项目中使用已有的原生开发生态，如组件库，统计工具等，同时也能将Mpx开发的组件输出到原生小程序项目中使用。
+  details: 同样得益于增强的设计思路，Mpx 能够完整兼容小程序原生技术规范，并以较低的成本进行持续跟进；借助框架提供的渐进迁移能力，小程序开发者可以方便地在 Mpx 项目中使用已有的原生开发生态，如组件库，统计工具等，同时也能将 Mpx 开发的组件输出到原生小程序项目中使用。
   img: https://dpubstatic.udache.com/static/dpubimg/k5Ft6oWF6F/jianjin_pic.png
   mimg: https://dpubstatic.udache.com/static/dpubimg/Z0W_MvwJ8C/y_pic_jianjin.png
   bg: https://gift-static.hongyibo.com.cn/static/kfpub/3547/jianjin_bg_v3.png
@@ -294,4 +294,4 @@ npm run serve
 npm run build
 ```
 
-使用小程序开发者工具打开项目文件夹下dist中对应平台的文件夹即可预览效果。
+使用小程序开发者工具打开项目文件夹下 dist 中对应平台的文件夹即可预览效果。