From 25e0d24dfa3fc588abfbec1c65ee261466bba408 Mon Sep 17 00:00:00 2001
From: camera-2018 <2907618001@qq.com>
Date: Tue, 20 Feb 2024 00:13:19 +0800
Subject: [PATCH] feat: add img zoom

---
 .vitepress/theme/Layout.vue                   |  5 +++-
 .vitepress/theme/index.js                     |  6 +++--
 .vitepress/theme/style.css                    |  8 +++++++
 .vitepress/theme/useMediumZoom.js             | 24 +++++++++++++++++++
 1.杭电生存指南/1.4小心项目陷阱.md |  2 +-
 ...1.9问题专题：好想进入实验室.md |  4 ++--
 CONTRIBUTING.md                               | 21 +++++++++++++++-
 components/Parallax.vue                       |  2 +-
 package-lock.json                             |  6 +++++
 package.json                                  |  1 +
 10 files changed, 71 insertions(+), 8 deletions(-)
 create mode 100644 .vitepress/theme/useMediumZoom.js

diff --git a/.vitepress/theme/Layout.vue b/.vitepress/theme/Layout.vue
index a4567b2..fca50f0 100644
--- a/.vitepress/theme/Layout.vue
+++ b/.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>
diff --git a/.vitepress/theme/index.js b/.vitepress/theme/index.js
index ad36b60..fc9a083 100644
--- a/.vitepress/theme/index.js
+++ b/.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,6 +15,7 @@ let homePageStyle = undefined
 export default {
   ...DefaultTheme,
   Layout: Layout,
+
   enhanceApp(ctx) {
     DefaultTheme.enhanceApp(ctx)
     ctx.app.component('Download', Download)
@@ -21,12 +23,12 @@ export default {
     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)
   },
 }
 
diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
index 2c05ab8..4b411ac 100644
--- a/.vitepress/theme/style.css
+++ b/.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;
 }
\ No newline at end of file
diff --git a/.vitepress/theme/useMediumZoom.js b/.vitepress/theme/useMediumZoom.js
new file mode 100644
index 0000000..20ed64f
--- /dev/null
+++ b/.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()),
+  )
+}
\ No newline at end of file
diff --git a/1.杭电生存指南/1.4小心项目陷阱.md b/1.杭电生存指南/1.4小心项目陷阱.md
index c2c449e..c2e9117 100644
--- a/1.杭电生存指南/1.4小心项目陷阱.md
+++ b/1.杭电生存指南/1.4小心项目陷阱.md
@@ -52,7 +52,7 @@
 
 但是大家参与之前你一定要想你的能力是否等于这个项目的量级，一般情况下，要么你技术特别强，要么可能会存在一定的问题。
 
-![](https://cdn.xyxsw.site/boxcnPSolGcUy1R0Dk2FUhPaLLc.png)
+![](https://cdn.xyxsw.site/boxcnPSolGcUy1R0Dk2FUhPaLLc.png){.no-zoom}
 
 所以说，还是那句话，小心甄别。
 
diff --git a/1.杭电生存指南/1.9问题专题：好想进入实验室.md b/1.杭电生存指南/1.9问题专题：好想进入实验室.md
index fec7ab0..88f78e3 100644
--- a/1.杭电生存指南/1.9问题专题：好想进入实验室.md
+++ b/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。
 
 论文的阅读能力：在了解一个领域的时候，最开始会发现什么词都不懂，一篇文章无论是从语言上还是英文上都无法阅读，所以能否具备快速阅读并读懂一篇文章的能力也是非常重要的。
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 38b0c16..4727f4c 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -384,4 +384,23 @@ Fork 本仓库，然后在你的仓库中进行修改，修改完成后在本仓
     $ yarn add -D vitepress
     ```
 
-    :::
\ No newline at end of file
+    :::
+
+
+4. 图片缩放
+
+图片默认支持缩放，鼠标悬浮图片上方会出现放大镜图标，点击即可放大图片。
+
+如果不想让图片缩放，可以在图片class内后添加 `no-zoom` 参数。
+
+markdown 的使用方式如下
+
+```markdown
+# 默认（支持缩放）
+![](static/xxx.png)
+```
+
+```markdown
+# 不支持缩放
+![](static/xxx.png){.no-zoom}
+```
diff --git a/components/Parallax.vue b/components/Parallax.vue
index 50b5c6e..8dada12 100644
--- a/components/Parallax.vue
+++ b/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>
diff --git a/package-lock.json b/package-lock.json
index 55f3f28..bef882b 100644
--- a/package-lock.json
+++ b/package-lock.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": {
@@ -7043,6 +7044,11 @@
       "resolved": "https://registry.npmmirror.com/mdurl/-/mdurl-2.0.0.tgz",
       "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
     },
+    "node_modules/medium-zoom": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/medium-zoom/-/medium-zoom-1.1.0.tgz",
+      "integrity": "sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ=="
+    },
     "node_modules/mensch": {
       "version": "0.3.4",
       "resolved": "https://registry.npmmirror.com/mensch/-/mensch-0.3.4.tgz",
diff --git a/package.json b/package.json
index 353a747..81b113f 100644
--- a/package.json
+++ b/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": {