feat: integrate PhotoSwipe lightbox, enhance scrollbar functionality, and update layout components

- Added a new PhotoSwipe component for image lightbox functionality in the layout. - Enhanced scrollbar component with an auto-hide delay feature. - Updated global styles to improve scrollbar appearance and added styles for PhotoSwipe. - Included new Head layout component for better SEO and meta tag management. - Added images to existing posts for improved visual content. This commit improves user experience with enhanced image viewing and layout consistency.
2025-06-15 19:22:52 +02:00 · 2025-01-23 08:23:43 +00:00 · 2025-01-23 08:23:43 +00:00 · 1af92d92c8
commit 1af92d92c8
parent ac9e839a75
10 changed files with 131 additions and 51 deletions
--- a/package.json
+++ b/package.json
@ -47,7 +47,7 @@
  "devDependencies": {
    "@antfu/eslint-config": "^3.16.0",
    "@types/markdown-it": "^14.1.2",
-    "@types/node": "^22.10.7",
+    "@types/node": "^22.10.9",
    "@types/sanitize-html": "^2.13.0",
    "@unocss/eslint-plugin": "^65.4.3",
    "@unocss/preset-attributify": "^65.4.3",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -13,7 +13,7 @@ importers:
        version: 0.9.4(typescript@5.7.3)
      '@astrojs/mdx':
        specifier: ^4.0.7
-        version: 4.0.7(astro@5.1.8(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0))
+        version: 4.0.7(astro@5.1.8(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0))
      '@astrojs/partytown':
        specifier: ^2.1.3
        version: 2.1.3
@ -31,10 +31,10 @@ importers:
        version: 65.4.3
      astro:
        specifier: ^5.1.8
-        version: 5.1.8(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0)
+        version: 5.1.8(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0)
      astro-compress:
        specifier: ^2.3.6
-        version: 2.3.6(@types/node@22.10.7)(jiti@2.4.2)(rollup@4.31.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0)
+        version: 2.3.6(@types/node@22.10.9)(jiti@2.4.2)(rollup@4.31.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0)
      astro-robots-txt:
        specifier: ^1.0.0
        version: 1.0.0
@ -94,7 +94,7 @@ importers:
        version: 5.0.0
      vite:
        specifier: ^6.0.11
-        version: 6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0)
+        version: 6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0)
    devDependencies:
      '@antfu/eslint-config':
        specifier: ^3.16.0
@ -103,8 +103,8 @@ importers:
        specifier: ^14.1.2
        version: 14.1.2
      '@types/node':
-        specifier: ^22.10.7
-        version: 22.10.7
+        specifier: ^22.10.9
+        version: 22.10.9
      '@types/sanitize-html':
        specifier: ^2.13.0
        version: 2.13.0
@ -134,7 +134,7 @@ importers:
        version: 1.5.0
      unocss:
        specifier: ^65.4.3
-        version: 65.4.3(postcss@8.5.1)(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+        version: 65.4.3(postcss@8.5.1)(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
      unocss-preset-theme:
        specifier: ^0.14.1
        version: 0.14.1(@unocss/core@65.4.3)
@ -1052,8 +1052,8 @@ packages:
  '@types/node@22.10.5':
    resolution: {integrity: sha512-F8Q+SeGimwOo86fiovQh8qiXfFEh2/ocYv7tU5pJ3EXMSSxk1Joj5wefpFK2fHTf/N6HKGSxIDBT9f3gCxXPkQ==}

-  '@types/node@22.10.7':
-    resolution: {integrity: sha512-V09KvXxFiutGp6B7XkpaDXlNadZxrzajcY50EuoLIpQ6WWYCSvf19lVIazzfIzQvhUN2HjX12spLojTnhuKlGg==}
+  '@types/node@22.10.9':
+    resolution: {integrity: sha512-Ir6hwgsKyNESl/gLOcEz3krR4CBGgliDqBQ2ma4wIhEx0w+xnoeTq3tdrNw15kU3SxogDjOgv9sqdtLW8mIHaw==}

  '@types/normalize-package-data@2.4.4':
    resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
@ -1717,8 +1717,8 @@ packages:
  duplexer@0.1.2:
    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}

-  electron-to-chromium@1.5.85:
-    resolution: {integrity: sha512-UgTI7ZHxtSjOUwV0vZLpqT604U1Z8L3bq8mAtAKtuRPlMZ/6dLFMYgYnLdXSi/urbVTP2ykDb9EDDUrdIzw4Qg==}
+  electron-to-chromium@1.5.86:
+    resolution: {integrity: sha512-/D7GAAaCRBQFBBcop6SfAAGH37djtpWkOuYhyAajw0l5vsfeSsUQYxaFPwr1c/mC/flARCDdKFo5gpFqNI+18w==}

  emmet@2.4.11:
    resolution: {integrity: sha512-23QPJB3moh/U9sT4rQzGgeyyGIrcM+GH5uVYg2C6wZIxAIJq7Ng3QLT79tl8FUwDXhyq9SusfknOrofAKqvgyQ==}
@ -4070,12 +4070,12 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@astrojs/mdx@4.0.7(astro@5.1.8(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0))':
+  '@astrojs/mdx@4.0.7(astro@5.1.8(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0))':
    dependencies:
      '@astrojs/markdown-remark': 6.0.2
      '@mdx-js/mdx': 3.1.0(acorn@8.14.0)
      acorn: 8.14.0
-      astro: 5.1.8(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0)
+      astro: 5.1.8(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0)
      es-module-lexer: 1.6.0
      estree-util-visit: 2.0.0
      hast-util-to-html: 9.0.4
@ -4771,7 +4771,7 @@ snapshots:
    dependencies:
      undici-types: 6.20.0

-  '@types/node@22.10.7':
+  '@types/node@22.10.9':
    dependencies:
      undici-types: 6.20.0

@ -4783,7 +4783,7 @@ snapshots:

  '@types/sax@1.2.7':
    dependencies:
-      '@types/node': 22.10.7
+      '@types/node': 22.10.9

  '@types/unist@2.0.11': {}

@ -4868,13 +4868,13 @@ snapshots:

  '@ungap/structured-clone@1.2.1': {}

-  '@unocss/astro@65.4.3(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@unocss/astro@65.4.3(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
    dependencies:
      '@unocss/core': 65.4.3
      '@unocss/reset': 65.4.3
-      '@unocss/vite': 65.4.3(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@unocss/vite': 65.4.3(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
    optionalDependencies:
-      vite: 6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0)
    transitivePeerDependencies:
      - rollup
      - supports-color
@ -5024,7 +5024,7 @@ snapshots:
    dependencies:
      '@unocss/core': 65.4.3

-  '@unocss/vite@65.4.3(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@unocss/vite@65.4.3(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
    dependencies:
      '@ampproject/remapping': 2.3.0
      '@rollup/pluginutils': 5.1.4(rollup@4.31.0)
@ -5034,7 +5034,7 @@ snapshots:
      chokidar: 3.6.0
      magic-string: 0.30.17
      tinyglobby: 0.2.10
-      vite: 6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0)
    transitivePeerDependencies:
      - rollup
      - supports-color
@ -5212,12 +5212,12 @@ snapshots:

  astring@1.9.0: {}

-  astro-compress@2.3.6(@types/node@22.10.7)(jiti@2.4.2)(rollup@4.31.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0):
+  astro-compress@2.3.6(@types/node@22.10.9)(jiti@2.4.2)(rollup@4.31.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0):
    dependencies:
      '@playform/pipe': 0.1.2
      '@types/csso': 5.0.4
      '@types/html-minifier-terser': 7.0.2
-      astro: 5.1.8(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0)
+      astro: 5.1.8(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0)
      commander: 13.0.0
      csso: 5.0.5
      deepmerge-ts: 7.1.3
@ -5284,7 +5284,7 @@ snapshots:
      valid-filename: 4.0.0
      zod: 3.24.1

-  astro@5.1.8(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0):
+  astro@5.1.8(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0):
    dependencies:
      '@astrojs/compiler': 2.10.3
      '@astrojs/internal-helpers': 0.4.2
@ -5336,8 +5336,8 @@ snapshots:
      unist-util-visit: 5.0.0
      unstorage: 1.14.4
      vfile: 6.0.3
-      vite: 6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0)
-      vitefu: 1.0.5(vite@6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))
+      vite: 6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0)
+      vitefu: 1.0.5(vite@6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))
      which-pm: 3.0.0
      xxhash-wasm: 1.1.0
      yargs-parser: 21.1.1
@ -5425,7 +5425,7 @@ snapshots:
  browserslist@4.24.4:
    dependencies:
      caniuse-lite: 1.0.30001695
-      electron-to-chromium: 1.5.85
+      electron-to-chromium: 1.5.86
      node-releases: 2.0.19
      update-browserslist-db: 1.1.2(browserslist@4.24.4)

@ -5687,7 +5687,7 @@ snapshots:

  duplexer@0.1.2: {}

-  electron-to-chromium@1.5.85: {}
+  electron-to-chromium@1.5.86: {}

  emmet@2.4.11:
    dependencies:
@ -8225,9 +8225,9 @@ snapshots:
      '@unocss/core': 65.4.3
      '@unocss/rule-utils': 0.63.6

-  unocss@65.4.3(postcss@8.5.1)(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)):
+  unocss@65.4.3(postcss@8.5.1)(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)):
    dependencies:
-      '@unocss/astro': 65.4.3(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@unocss/astro': 65.4.3(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
      '@unocss/cli': 65.4.3(rollup@4.31.0)
      '@unocss/core': 65.4.3
      '@unocss/postcss': 65.4.3(postcss@8.5.1)
@ -8243,9 +8243,9 @@ snapshots:
      '@unocss/transformer-compile-class': 65.4.3
      '@unocss/transformer-directives': 65.4.3
      '@unocss/transformer-variant-group': 65.4.3
-      '@unocss/vite': 65.4.3(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@unocss/vite': 65.4.3(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
    optionalDependencies:
-      vite: 6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0)
    transitivePeerDependencies:
      - postcss
      - rollup
@ -8299,13 +8299,13 @@ snapshots:
      '@types/unist': 3.0.3
      vfile-message: 4.0.2

-  vite@6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0):
+  vite@6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0):
    dependencies:
      esbuild: 0.24.2
      postcss: 8.5.1
      rollup: 4.31.0
    optionalDependencies:
-      '@types/node': 22.10.7
+      '@types/node': 22.10.9
      fsevents: 2.3.3
      jiti: 2.4.2
      lightningcss: 1.28.2
@ -8313,9 +8313,9 @@ snapshots:
      tsx: 4.19.2
      yaml: 2.7.0

-  vitefu@1.0.5(vite@6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0)):
+  vitefu@1.0.5(vite@6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0)):
    optionalDependencies:
-      vite: 6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0)
+      vite: 6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0)

  volar-service-css@0.0.62(@volar/language-service@2.4.11):
    dependencies:
--- a/src/components/PhotoSwipe.astro
+++ b/src/components/PhotoSwipe.astro
@ -0,0 +1,52 @@
+<script>
+  import PhotoSwipeLightbox from 'photoswipe/lightbox'
+  import 'photoswipe/style.css'
+
+  // Store lightbox instance for later use
+  let lightbox: PhotoSwipeLightbox | null = null
+  const pswp = import('photoswipe')
+
+  // Initialize PhotoSwipe lightbox with custom configuration
+  function createPhotoSwipe() {
+    lightbox = new PhotoSwipeLightbox({
+      gallery: 'article img',
+      pswpModule: () => pswp,
+      closeSVG: '<svg xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" width="3.8rem" fill="#A0A09F"><path d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z"/></svg>',
+      zoomSVG: '<svg xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" width="3.8rem" fill="#A0A09F"><path d="M340-540h-40q-17 0-28.5-11.5T260-580q0-17 11.5-28.5T300-620h40v-40q0-17 11.5-28.5T380-700q17 0 28.5 11.5T420-660v40h40q17 0 28.5 11.5T500-580q0 17-11.5 28.5T460-540h-40v40q0 17-11.5 28.5T380-460q-17 0-28.5-11.5T340-500v-40Zm40 220q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>',
+      wheelToZoom: true,
+      arrowPrev: false,
+      arrowNext: false,
+      imageClickAction: 'close',
+      tapAction: 'close',
+      doubleTapAction: 'zoom',
+    })
+
+    // Add custom filter to handle image data and dimensions
+    lightbox.addFilter('domItemData', (itemData: any, element: Element) => {
+      if (element instanceof HTMLImageElement) {
+        itemData.src = element.src
+        itemData.w = Number(element.naturalWidth || window.innerWidth)
+        itemData.h = Number(element.naturalHeight || window.innerHeight)
+        itemData.msrc = element.src
+      }
+      return itemData
+    })
+
+    lightbox.init()
+  }
+
+  // Cleanup function to destroy lightbox instance
+  function cleanup() {
+    if (lightbox) {
+      lightbox.destroy()
+      lightbox = null
+    }
+  }
+
+  // Initialize PhotoSwipe when DOM is ready
+  document.addEventListener('DOMContentLoaded', () => {
+    createPhotoSwipe()
+  })
+
+  document.addEventListener('astro:before-swap', cleanup)
+  </script>
--- a/src/components/Scrollbar.astro
+++ b/src/components/Scrollbar.astro
@ -14,6 +14,7 @@ function initScrollbar() {
      scrollbars: {
        theme: document.documentElement.classList.contains('dark') ? 'scrollbar-dark' : 'scrollbar-light',
        autoHide: 'scroll',
+        autoHideDelay: 800,
      },
      overflow: {
        x: 'hidden',
--- a/src/content/posts/hometown.md
+++ b/src/content/posts/hometown.md
@ -4,6 +4,8 @@ published: 1977-07-18
 tags: ["鲁迅"]
 ---

+![花](https://image.radishzz.cc/image/gallery/03.webp)
+
 我冒了严寒，回到相隔二千余里，别了二十余年的故乡去。

 时候既然是深冬；渐近故乡时，天气又阴晦了，冷风吹进船舱中，呜呜的响，从蓬隙向外一望，苍黄的天底下，远近横着几个萧索的荒村，没有一些活气。我的心禁不住悲凉起来了。
--- a/src/content/posts/rashomon.md
+++ b/src/content/posts/rashomon.md
@ -4,6 +4,8 @@ published: 1984-09-17
 tags: ["黑泽明"]
 ---

+![花](https://image.radishzz.cc/image/gallery/03.webp)
+
 一天，天色已晚。 仆人纪宁正在罗生门下等待雨停。

 除了他，宽大的门下空无一人。 只有一只蟋蟀栖息在一根大柱子上，柱子上有的地方已经脱漆。 罗生门位于铃作大寺街上，除了这个人之外，应该还有两三个人，包括避雨的一笠和搓着乌鸦帽的真江吉。 但是，除了这个人之外，一个人也没有。
--- a/src/components/Head.astro
+++ b/src/components/Head.astro
@ -15,6 +15,7 @@ const { verification = {}, twitterID = '', facebookID = '', facebookLink = '', g
 const { google = '', bing = '', yandex = '', baidu = '' } = verification
 const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '', customUmamiAnalyticsURL = '', customUmamiAnalyticsJS = '' } = themeConfig.preload
 ---
+<head>
 <!-- Basic -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
@ -142,3 +143,4 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
    />
  )
 }
+</head>
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -1,9 +1,11 @@
 ---
-import Head from '@/components/Head.astro'
+import PhotoSwipe from '@/components/PhotoSwipe.astro'
 import Scrollbar from '@/components/Scrollbar.astro'
 import ThemeToggle from '@/components/ThemeToggle.astro'
 import themeConfig from '@/config'
+import Head from '@/layouts/Head.astro'
 import '@/styles/global.css'
+import '@/styles/photoswipe.css'

 interface Props {
  postTitle?: string
@ -22,9 +24,7 @@ const colorMode = themeConfig.color.mode
  class:list={[fontStyle, colorMode]}
  data-overlayscrollbars-initialize
 >
-  <head>
-    <Head {postTitle} {postDescription} {postImage} />
-  </head>
+  <Head {postTitle} {postDescription} {postImage} />
  <body data-overlayscrollbars-initialize>
    <ThemeToggle />
    <main
@ -34,5 +34,6 @@ const colorMode = themeConfig.color.mode
      <slot />
    </main>
    <Scrollbar />
+    <PhotoSwipe />
  </body>
 </html>
--- a/src/styles/global.css
+++ b/src/styles/global.css
@ -7,7 +7,7 @@ html {
  --at-apply: 'scroll-smooth antialiased text-62.5%';
 }
 body {
-  --at-apply: 'bg-background text-secondary text-1.6rem';
+  --at-apply: 'bg-background c-secondary text-1.6rem';
 }
@supports not (view-transition-name: none) {
  body {
@ -17,30 +17,33 @@ body {
 * {
  scrollbar-width: none;
  -ms-overflow-style: none;
-}
-*::-webkit-scrollbar {
-  display: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 h1, h2, h3 {
    text-rendering: optimizeLegibility;
  }
 h1 {
-  --at-apply: 'text-[3.6rem]';
+  --at-apply: 'text-3.6rem';
 }
 h2 {
-  --at-apply: 'text-[3rem]';
+  --at-apply: 'text-3rem';
 }
 h3 {
-  --at-apply: 'text-[2.4rem]';
+  --at-apply: 'text-2.4rem';
 }
 h4 {
-  --at-apply: 'text-[2rem]';
+  --at-apply: 'text-2rem';
 }
 h5 {
-  --at-apply: 'text-[1.8rem]';
+  --at-apply: 'text-1.8rem';
 }
 h6 {
-  --at-apply: 'text-[1.6rem]';
+  --at-apply: 'text-1.6rem';
+}
+article img {
+  cursor: zoom-in;
 }
 /* Horizontal reveal animation on theme toggle */
@keyframes reveal {
@ -64,4 +67,4 @@ html:not(.dark) {
  transition: none;
  animation: none;
  z-index: -1;
-}
+}
--- a/src/styles/photoswipe.css
+++ b/src/styles/photoswipe.css
@ -0,0 +1,17 @@
+.pswp__button {
+  --at-apply: 'flex items-center justify-center transition';
+}
+.pswp__button--zoom,
+.pswp__button--close {
+  --at-apply: 'mt-2 lg:mt-4 active:scale-90';
+}
+.pswp__button--zoom svg:hover,
+.pswp__button--close svg:hover {
+    fill: #BEBEBE;
+}
+.pswp__button--close {
+  --at-apply: 'mr-4 lg:mr-8';
+}
+.pswp__button--zoom {
+  --at-apply: 'mr--6 lg:mr-0';
+}