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

* fix(plugin_lightbox): fix lightbox plugin import for non-browser env * add artalk as peerDependency * using default object of import result * test and fix photoSwipe, fancyBox * add minimal reproducible example * refine docs
ArtalkJS · Jul 25, 2024 · d22d34c · d22d34c
1 parent 6fe8ffd
commit d22d34c
Show file tree

Hide file tree

Showing 17 changed files with 941 additions and 622 deletions.
diff --git a/docs/docs/.vitepress/config.ts b/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',
-            },
           ],
         },
       ],

diff --git a/docs/docs/.vitepress/theme/Artalk.vue b/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)

diff --git a/docs/docs/guide/frontend/lightbox.md b/docs/docs/guide/frontend/lightbox.md
@@ -1,6 +1,10 @@
 # 图片灯箱
 
-Artalk LightBox 插件能帮助你将网站**现有的图片灯箱**功能自动集成到 Artalk 中。
+Artalk 图片灯箱插件帮助你将网站**现有的图片灯箱**功能自动集成到 Artalk 中。
+
+## 浏览器环境
+
+如果处于浏览器环境，博客主题通常自带图片灯箱，插件将自动检测 `window` 全局对象中的灯箱库，并集成到 Artalk 中，无需额外配置。
 
 ```html
 <!-- 1. 引入图片灯箱依赖，例如 LightGallery (通常博客主题已提供，无需再引入) -->
@@ -14,48 +18,104 @@ Artalk LightBox 插件能帮助你将网站**现有的图片灯箱**功能自动
 <script src="https://unpkg.com/@artalk/plugin-lightbox/dist/artalk-plugin-lightbox.js"></script>
 ```
 
-如上所示，额外引入一个 `artalk-plugin-lightbox.js` 文件即可。
+如有需要，可以通过全局变量 `ATK_LIGHTBOX_CONF` 对灯箱库进行额外的配置：
 
-目前自动集成支持：[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]
+```html
+<script>
+// Config for LightGallery
+window.ATK_LIGHTBOX_CONF = {
+  plugins: [lgZoom, lgThumbnail],
+  speed: 500,
+  licenseKey: 'your_license_key'
+}
+</script>
+```
 
-对于还未适配的图片灯箱，欢迎提交 PR -> [查看代码](https://github.com/ArtalkJS/Artalk/blob/master/ui/plugin-lightbox/main.ts)
+## Node 环境
 
-::: details 附：图片灯箱依赖 CDN 资源
+安装图片灯箱插件：
 
-注：通常一个博客主题本来就是有图片灯箱插件的，所以无需重复引入。
+```bash
+pnpm add @artalk/plugin-lightbox
+```
 
-#### LightGallery
+配置插件，通过 `import` 动态引入灯箱库：
 
-```html
-<link
-  rel="stylesheet"
-  href="https://unpkg.com/[email protected]/css/lightgallery.css"
-/>
-<script src="https://unpkg.com/[email protected]/lightgallery.min.js"></script>
+::: code-group
+
+```ts [LightGallery]
+import Artalk from 'artalk'
+import { ArtalkLightboxPlugin } from '@artalk/plugin-lightbox'
+import 'lightgallery/css/lightgallery.css'
+
+Artalk.use(ArtalkLightboxPlugin, {
+  lightGallery: {
+    lib: () => import('lightgallery'),
+  },
+})
 ```
 
-#### FancyBox
+```ts [PhotoSwipe]
+import Artalk from 'artalk'
+import { ArtalkLightboxPlugin } from '@artalk/plugin-lightbox'
+import 'photoswipe/style.css'
+
+Artalk.use(ArtalkLightboxPlugin, {
+  photoSwipe: {
+    lib: () => import('photoswipe/lightbox'),
+    pswpModule: () => import('photoswipe'),
+  },
+})
+```
 
-```html
-<link
-  rel="stylesheet"
-  href="https://unpkg.com/@fancyapps/[email protected]/dist/fancybox.css"
-/>
-<script src="https://unpkg.com/@fancyapps/[email protected]/dist/fancybox.umd.js"></script>
+```ts [LightBox]
+import Artalk from 'artalk'
+import { ArtalkLightboxPlugin } from '@artalk/plugin-lightbox'
+import 'lightbox2/dist/css/lightbox.min.css'
+import jQuery from 'jquery'
+
+window.$ = jQuery
+
+Artalk.use(ArtalkLightboxPlugin, {
+  lightBox: {
+    // @ts-ignore
+    lib: () => import('lightbox2'),
+  },
+})
 ```
 
-:::
+```ts [FancyBox]
+import Artalk from 'artalk'
+import { ArtalkLightboxPlugin } from '@artalk/plugin-lightbox'
+import 'fancybox/dist/css/jquery.fancybox.css'
+import jQuery from 'jquery'
 
-### 配置灯箱
+window.$ = jQuery
 
-在引入 `artalk-plugin-lightbox.js` 之前对全局变量 `ATK_LIGHTBOX_CONF` 进行设置，如下：
+Artalk.use(ArtalkLightboxPlugin, {
+  fancyBox: {
+    // @ts-ignore
+    lib: () => import('fancybox'),
+  },
+})
+```
 
-```html
-<script>
-  window.ATK_LIGHTBOX_CONF = {
-    groupAll: true,
-    // ...其他配置
-  }
-</script>
-<script src="artalk-plugin-lightbox.js"></script>
+:::
+
+在 Node 环境中，如有需要对灯箱库进行额外的配置，可以通过 `config` 选项配置：
+
+```ts
+Artalk.use(ArtalkLightboxPlugin, {
+  // ...
+  // Config for LightGallery
+  config: {
+    speed: 500,
+  },
+})
 ```
+
+---
+
+目前自动集成支持：[LightGallery](https://github.com/sachinchoolur/lightGallery) • [FancyBox](https://github.com/fancyapps/fancybox) • [lightbox2](https://github.com/lokesh/lightbox2) • [PhotoSwipe](https://photoswipe.com/)
+
+一些灯箱库暂未适配，期待你的 PR 😉：[@artalk/plugin-lightbox](https://github.com/ArtalkJS/Artalk/blob/master/ui/plugin-lightbox/src/main.ts)。
diff --git a/docs/docs/package.json b/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"
   }
 }