fix(plugin/lightbox): fix import for non-browser env

docs/docs/.vitepress/config.ts

@@ -17,29 +17,6 @@ export default defineConfig({
           'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi',
       },
     ],
-    // light gallery
-    [
-      'link',
-      {
-        href: 'https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.3.0/css/lightgallery.css',
-        rel: 'stylesheet',
-      },
-    ],
-    [
-      'script',
-      {
-        src: 'https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.3.0/lightgallery.min.js',
-      },
-    ],
-    // katex
-    [
-      'link',
-      {
-        href: 'https://unpkg.com/[email protected]/dist/katex.min.css',
-        rel: 'stylesheet',
-      },
-    ],
-    ['script', { src: 'https://unpkg.com/[email protected]/dist/katex.min.js' }],
   ],
 
   lastUpdated: true,
@@ -168,10 +145,6 @@ export default defineConfig({
               text: 'HTTP API',
               link: 'https://artalk.js.org/http-api.html',
             },
-            {
-              text: '贡献指南',
-              link: 'https://github.com/ArtalkJS/Artalk/blob/master/CONTRIBUTING.md',
-            },
           ],
         },
       ],

docs/docs/.vitepress/theme/Artalk.vue

@@ -7,6 +7,9 @@ import { watch, nextTick, ref, onMounted, onUnmounted } from 'vue'
 import { useData, useRouter } from 'vitepress'
 import Artalk from 'artalk'
 import { ArtalkKatexPlugin } from '@artalk/plugin-katex'
+import { ArtalkLightboxPlugin } from '@artalk/plugin-lightbox'
+import 'lightgallery/css/lightgallery.css'
+import 'katex/dist/katex.min.css'
 import 'artalk/dist/Artalk.css'
 
 const el = ref<HTMLElement | null>(null)
@@ -38,6 +41,11 @@ onUnmounted(() => {
 
 function initArtalk(conf: any) {
   Artalk.use(ArtalkKatexPlugin)
+  Artalk.use(ArtalkLightboxPlugin, {
+    lightGallery: {
+      lib: async () => (await import('lightgallery')).default
+    }
+  })
 
   artalk = Artalk.init({
     el: el.value,
@@ -58,27 +66,6 @@ function getConfByPage() {
 }
 
 function loadExtraFuncs() {
-  // 图片灯箱插件
-  artalk.on('list-loaded', () => {
-    document
-      .querySelectorAll('.atk-comment .atk-content')
-      .forEach(($content) => {
-        const imgEls = $content.querySelectorAll<HTMLImageElement>(
-          'img:not([atk-emoticon]):not([atk-lightbox])',
-        )
-        imgEls.forEach((imgEl) => {
-          imgEl.setAttribute('atk-lightbox', '')
-          const linkEl = document.createElement('a')
-          linkEl.setAttribute('class', 'atk-img-link')
-          linkEl.setAttribute('href', imgEl.src)
-          linkEl.setAttribute('data-src', imgEl.src)
-          linkEl.append(imgEl.cloneNode())
-          imgEl.replaceWith(linkEl)
-        })
-        if (imgEls.length && typeof window !== 'undefined' && typeof (<any>window).lightGallery !== 'undefined') (<any>window).lightGallery($content, { selector: '.atk-img-link' })
-      })
-  })
-
   // 夜间模式
   const darkMode = document.querySelector('html').classList.contains('dark')
   artalk.setDarkMode(darkMode)

docs/docs/guide/frontend/lightbox.md

@@ -2,7 +2,9 @@
 
 Artalk LightBox 插件能帮助你将网站**现有的图片灯箱**功能自动集成到 Artalk 中。
 
-```html
+::: code-group
+
+```html [浏览器引入]
 <!-- 1. 引入图片灯箱依赖，例如 LightGallery (通常博客主题已提供，无需再引入) -->
 <script src="lightgallery.js"></script>
 
@@ -14,48 +16,48 @@ Artalk LightBox 插件能帮助你将网站**现有的图片灯箱**功能自动
 <script src="https://unpkg.com/@artalk/plugin-lightbox/dist/artalk-plugin-lightbox.js"></script>
 ```
 
-如上所示，额外引入一个 `artalk-plugin-lightbox.js` 文件即可。
+```ts [Node 引入]
+// pnpm add lightgallery @artalk/plugin-lightbox
+import Artalk from 'artalk'
+import { ArtalkLightboxPlugin } from '@artalk/plugin-lightbox'
+import 'lightgallery/css/lightgallery.css'
+
+Artalk.use(ArtalkLightboxPlugin, {
+  // 手动配置引入灯箱库
+  lightGallery: {
+    lib: async () => (await import('lightgallery')).default
+  }
+})
+```
+
+:::
 
-目前自动集成支持：[LightGallery](https://github.com/sachinchoolur/lightGallery) [v2.5.0] / [FancyBox](https://github.com/fancyapps/fancybox) [v4.0.27] / [lightbox2](https://github.com/lokesh/lightbox2) [v2.11.3]
+目前自动集成支持：[LightGallery](https://github.com/sachinchoolur/lightGallery) • [FancyBox](https://github.com/fancyapps/fancybox) • [lightbox2](https://github.com/lokesh/lightbox2) • [PhotoSwipe](https://photoswipe.com/)
 
-对于还未适配的图片灯箱，欢迎提交 PR -> [查看代码](https://github.com/ArtalkJS/Artalk/blob/master/ui/plugin-lightbox/main.ts)
+对于暂未适配的灯箱库，我们期待你的 PR 😉：[@artalk/plugin-lightbox](https://github.com/ArtalkJS/Artalk/blob/master/ui/plugin-lightbox/src/main.ts)。
 
 ::: details 附：图片灯箱依赖 CDN 资源
 
-注：通常一个博客主题本来就是有图片灯箱插件的，所以无需重复引入。
+注：一个博客主题可能包含现成的图片灯箱插件，无需重复引入。
 
 #### LightGallery
 
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/lightgallery@2.5.0/css/lightgallery.css"
+  href="https://unpkg.com/lightgallery@2.7.2/css/lightgallery.css"
 />
-<script src="https://unpkg.com/lightgallery@2.5.0/lightgallery.min.js"></script>
+<script src="https://unpkg.com/lightgallery@2.7.2/lightgallery.min.js"></script>
 ```
 
 #### FancyBox
 
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@fancyapps/[email protected].27/dist/fancybox.css"
+  href="https://unpkg.com/@fancyapps/[email protected].31/dist/fancybox.css"
 />
-<script src="https://unpkg.com/@fancyapps/[email protected].27/dist/fancybox.umd.js"></script>
+<script src="https://unpkg.com/@fancyapps/[email protected].31/dist/fancybox.umd.js"></script>
 ```
 
 :::
-
-### 配置灯箱
-
-在引入 `artalk-plugin-lightbox.js` 之前对全局变量 `ATK_LIGHTBOX_CONF` 进行设置，如下：
-
-```html
-<script>
-  window.ATK_LIGHTBOX_CONF = {
-    groupAll: true,
-    // ...其他配置
-  }
-</script>
-<script src="artalk-plugin-lightbox.js"></script>
-```

docs/docs/package.json

@@ -22,6 +22,9 @@
   },
   "dependencies": {
     "@artalk/plugin-katex": "^0.1.9",
+    "@artalk/plugin-lightbox": "^0.2.1",
+    "katex": "^0.16.10",
+    "lightgallery": "^2.7.2",
     "vue": "^3.4.26"
   }
 }