feat: add img zoom

.vitepress/theme/Layout.vue

@@ -2,7 +2,7 @@
 import { useData } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import { nextTick, provide } from 'vue'
-
+import { useMediumZoom } from './useMediumZoom';
 const { isDark } = useData()
 
 const enableTransitions = () =>
@@ -36,7 +36,10 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }) => {
       pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`
     }
   )
+  
 })
+
+useMediumZoom()
 </script>
 
 <template>

.vitepress/theme/index.js

@@ -1,5 +1,6 @@
 // https://vitepress.dev/guide/custom-theme
-import { h, watch } from 'vue'
+import { watch } from 'vue'
+import { createMediumZoomProvider } from './useMediumZoom'
 // import Theme from 'vitepress/theme'
 import DefaultTheme from 'vitepress/theme-without-fonts'
 import Layout from './Layout.vue'
@@ -14,19 +15,20 @@ let homePageStyle = undefined
 export default {
   ...DefaultTheme,
   Layout: Layout,
+
   enhanceApp(ctx) {
     DefaultTheme.enhanceApp(ctx)
     ctx.app.component('Download', Download)
     ctx.app.component('Bilibili', Bilibili)
     ctx.app.component('Parallax', Parallax)
     if (typeof window === 'undefined')
       return
-
     watch(
       () => ctx.router.route.data.relativePath,
       () => updateHomePageStyle(location.pathname === '/' || location.pathname === '/contributors'),
       { immediate: true },
     )
+    createMediumZoomProvider(ctx.app, ctx.router)
   },
 }
 

.vitepress/theme/style.css

@@ -205,4 +205,12 @@ mjx-container {
 
 mjx-container > svg {
   display: inline-block;
+}
+
+.medium-zoom-overlay {
+  z-index: 99;
+}
+
+.medium-zoom-image {
+  z-index: 99;
 }

.vitepress/theme/useMediumZoom.js

@@ -0,0 +1,24 @@
+import mediumZoom from 'medium-zoom'
+import { inject, nextTick, onMounted, watch } from 'vue'
+
+export const mediumZoomSymbol = Symbol('mediumZoom')
+
+export function useMediumZoom() {
+  return onMounted(() => inject(mediumZoomSymbol)?.refresh())
+}
+
+export function createMediumZoomProvider(app, router) {
+  if (import.meta.env.SSR)
+    return
+  const zoom = mediumZoom()
+  zoom.refresh = () => {
+    zoom.detach()
+    zoom.attach(':not(a) > img:not(.no-zoom)')
+    zoom.update({ background: 'var(--vp-c-bg)' })
+  }
+  app.provide(mediumZoomSymbol, zoom)
+  watch(
+    () => router.route.path,
+    () => nextTick(() => zoom.refresh()),
+  )
+}

1.杭电生存指南/1.4小心项目陷阱.md

@@ -52,7 +52,7 @@
 
 但是大家参与之前你一定要想你的能力是否等于这个项目的量级，一般情况下，要么你技术特别强，要么可能会存在一定的问题。
 
-![](https://cdn.xyxsw.site/boxcnPSolGcUy1R0Dk2FUhPaLLc.png)
+![](https://cdn.xyxsw.site/boxcnPSolGcUy1R0Dk2FUhPaLLc.png){.no-zoom}
 
 所以说，还是那句话，小心甄别。
 

1.杭电生存指南/1.9问题专题：好想进入实验室.md

@@ -10,11 +10,11 @@
 
 概括一下：摒弃伸手，被动思维，能够主动争取各种机会，带着一个能够独当一面的能力进入实验室，与老师能够形成合作关系。
 
-**能力上：**目前计算机上的科研主要在两大方向，第一大方向是 AI（关于这件事情是不是畸形要后期在讨论）第二大方向是系统数据库，
+**能力上：** 目前计算机上的科研主要在两大方向，第一大方向是 AI（关于这件事情是不是畸形要后期在讨论）第二大方向是系统数据库，
 
 对于数据库与系统，我目前还没有涉及
 
-**领域的基础能力：**这里要我力推我们的课题教程，有较好的 AI 路线图，尽管 AI 有非常多子方向，如 NLP,CV，多模态，CV 下面又有检测 语义分割，NLP 又有推荐系统等云云，但是无论如何他们的源头都是 MLP，MLP 的源头都是多维线性回归，都是基于统计学习理论体系下，都是使用 Pytorch,都要学习数学理论体系，所以是可以要有一套类似的培养体系的。视觉被推荐 cs231n NLP 被推荐 CS224n。
+**领域的基础能力：** 这里要我力推我们的课题教程，有较好的 AI 路线图，尽管 AI 有非常多子方向，如 NLP,CV，多模态，CV 下面又有检测 语义分割，NLP 又有推荐系统等云云，但是无论如何他们的源头都是 MLP，MLP 的源头都是多维线性回归，都是基于统计学习理论体系下，都是使用 Pytorch,都要学习数学理论体系，所以是可以要有一套类似的培养体系的。视觉被推荐 cs231n NLP 被推荐 CS224n。
 
 论文的阅读能力：在了解一个领域的时候，最开始会发现什么词都不懂，一篇文章无论是从语言上还是英文上都无法阅读，所以能否具备快速阅读并读懂一篇文章的能力也是非常重要的。
 

CONTRIBUTING.md

@@ -384,4 +384,23 @@ Fork 本仓库，然后在你的仓库中进行修改，修改完成后在本仓
     $ yarn add -D vitepress
     ```
 
-    :::
+    :::
+
+
+4. 图片缩放
+
+图片默认支持缩放，鼠标悬浮图片上方会出现放大镜图标，点击即可放大图片。
+
+如果不想让图片缩放，可以在图片class内后添加 `no-zoom` 参数。
+
+markdown 的使用方式如下
+
+```markdown
+# 默认（支持缩放）
+![](static/xxx.png)
+```
+
+```markdown
+# 不支持缩放
+![](static/xxx.png){.no-zoom}
+```

components/Parallax.vue

@@ -109,7 +109,7 @@ export default {
         <div :style="cardStyle">
           <div id="kirakira"></div>
           <div :style="layer2"></div>
-          <img :style="layer1" class="image" />
+          <img :style="layer1" class="image no-zoom" />
           <div :style="cardWindowStyle">
             <img :style="layer0" class="image" />
           </div>

package.json

@@ -13,6 +13,7 @@
     "canvas-confetti": "^1.9.2",
     "markdown-it": "^14.0.0",
     "markdown-it-pangu": "^1.0.2",
+    "medium-zoom": "^1.1.0",
     "sitemap": "^7.1.1"
   },
   "devDependencies": {