🔧 build: 优化vue模块以及css文件

Theo-Messi · Dec 19, 2023 · c89ee92 · c89ee92
1 parent 3e7ddd9
commit c89ee92
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 52 deletions.
diff --git a/.vitepress/nav/components/MNavLink.vue → .vitepress/theme/components/MNavLink.vue b/.vitepress/nav/components/MNavLink.vue → .vitepress/theme/components/MNavLink.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import { withBase } from 'vitepress'
 import { slugify } from '@mdit-vue/shared'
 
-import { NavLink } from '../types'
+import { NavLink } from '../../nav/types'
 
 const props = defineProps<{
   noIcon?: boolean
@@ -38,40 +38,20 @@ const formatBadge = computed(() => {
 </script>
 
 <template>
-  <a
-    v-if="link"
-    class="m-nav-link"
-    :href="link"
-    target="_blank"
-    rel="noreferrer"
-  >
+  <a v-if="link" class="m-nav-link" :href="link" target="_blank" rel="noreferrer">
     <article class="box" :class="{ 'has-badge': formatBadge }">
       <div class="box-header">
         <template v-if="!noIcon">
           <div v-if="svg" class="icon" v-html="svg"></div>
           <div v-else-if="icon && typeof icon === 'string'" class="icon">
-            <img
-              :src="withBase(icon)"
-              :alt="title"
-              onerror="this.parentElement.style.display='none'"
-            />
+            <img :src="withBase(icon)" :alt="title" onerror="this.parentElement.style.display='none'" />
           </div>
         </template>
-        <h5
-          v-if="title"
-          :id="formatTitle"
-          class="title"
-          :class="{ 'no-icon': noIcon }"
-        >
+        <h5 v-if="title" :id="formatTitle" class="title" :class="{ 'no-icon': noIcon }">
           {{ title }}
         </h5>
       </div>
-      <Badge
-        v-if="formatBadge"
-        class="badge"
-        :type="formatBadge.type"
-        :text="formatBadge.text"
-      />
+      <Badge v-if="formatBadge" class="badge" :type="formatBadge.type" :text="formatBadge.text" />
       <p v-if="desc" class="desc">{{ desc }}</p>
     </article>
   </a>

diff --git a/.vitepress/nav/components/MNavLinks.vue → .vitepress/theme/components/MNavLinks.vue b/.vitepress/nav/components/MNavLinks.vue → .vitepress/theme/components/MNavLinks.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import { slugify } from '@mdit-vue/shared'
 
 import MNavLink from './MNavLink.vue'
-import type { NavLink } from '../types'
+import type { NavLink } from '../../nav/types'
 
 // 定义props，title为字符串，noIcon为布尔值，items为NavLink类型的数组
 const props = defineProps<{
@@ -45,9 +45,7 @@ const formatTitle = computed(() => {
 }
 
 @each $media,
-  $size
-    in (500px: 140px, 640px: 155px, 768px: 175px, 960px: 200px, 1440px: 240px)
-{
+$size in (500px: 140px, 640px: 155px, 768px: 175px, 960px: 200px, 1440px: 240px) {
   @media (min-width: $media) {
     .m-nav-links {
       grid-template-columns: repeat(auto-fill, minmax($size, 1fr));

diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css
@@ -552,7 +552,7 @@
   display: none;
 }
 
-
+/** 导航栏透明设置 **/
 :root {
   --vp-nav-bg-color: transparent;
 }
@@ -578,4 +578,13 @@
 .VPNavBar,
 .VPLocalNav.reached-top {
   border-bottom: none;
+}
+
+/** 图片放大设置 **/
+.medium-zoom-overlay {
+  z-index: 20;
+}
+
+.medium-zoom-image {
+  z-index: 21;
 }
diff --git a/.vitepress/theme/index.css b/.vitepress/theme/index.css
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -8,7 +8,6 @@ import { inject } from '@vercel/analytics'
 inject()
 import './custom.css'
 import './custom-blocks.css'
-import './index.css'
 
 export default {
   extends: DefaultTheme,

diff --git a/src/nav.md b/src/nav.md
@@ -6,7 +6,7 @@ editLink: false
 ---
 
 <script setup>
-import MNavLinks from '../.vitepress/nav/components/MNavLinks.vue'
+import MNavLinks from '../.vitepress/theme/components/MNavLinks.vue'
 
 import { NAV_DATA } from '../.vitepress/nav/data'
 </script>
@@ -15,5 +15,3 @@ import { NAV_DATA } from '../.vitepress/nav/data'
 <!-- # 前端导航 -->
 
 <MNavLinks v-for="{title, items} in NAV_DATA" :title="title" :items="items"/>
-
-<br />
diff --git a/src/skill/JL-09.md b/src/skill/JL-09.md
@@ -4,7 +4,7 @@ title: VitePress 打造个人前端导航网站
 
 ### 第 1 步 - 修改index.ts
 
-**在 `docs/.vitepress/theme` 目录下新建 `index.ts` 文件**
+**在 `.vitepress/theme` 目录下新建 `index.ts` 文件**
 
 <<< ../../.vitepress/theme/index.ts
 
@@ -14,24 +14,24 @@ title: VitePress 打造个人前端导航网站
 
 <<< @/nav.md
 
-### 第 3 步 - **`docs`目录下新建`nav`文件夹用于存放下列文件**
+### 第 3 步 - **`.vitepress`目录下新建`nav`文件夹用于存放下列文件**
 
-### 第 4 步 - **在 `docs/nav` 目录下新建 `types.ts`**
+### 第 4 步 - **在 `.vitepress/nav` 目录下新建 `types.ts`**
 
 <<< ../../.vitepress/nav/types.ts
 
-### 第 5 步 - **在 `docs/nav` 目录下新建 `nav.scss`**
+### 第 5 步 - **在 `.vitepress/nav` 目录下新建 `nav.scss`**
 
 <<< ../../.vitepress/nav/nav.scss
 
-### 第 6 步 - **在 `docs/nav` 目录下新建 `data.ts`**
+### 第 6 步 - **在 `.vitepress/nav` 目录下新建 `data.ts`**
 
 <<< ../../.vitepress/nav/data.ts
 
-### 第 7 步 - **在 `docs/nav/components` 目录下新建 `MNavLink.vue`**
+### 第 7 步 - **在 `.vitepress/theme/components` 目录下新建 `MNavLink.vue`**
 
-<<< ../../.vitepress/nav/components/MNavLink.vue
+<<< ../../.vitepress/theme/components/MNavLink.vue
 
-### 第 8 步 - **在 `docs/nav/components` 目录下新建 `MNavLinks.vue`**
+### 第 8 步 - **在 `.vitepress/theme/components` 目录下新建 `MNavLinks.vue`**
 
-<<< ../../.vitepress/nav/components/MNavLinks.vue
+<<< ../../.vitepress/theme/components/MNavLinks.vue