feat: add image zoom feature (#250)

支持点击放大图片。

```release-note
None 
```
JohnNiang-patch-1
Ryan Wang 1 year ago committed by GitHub
parent d8158746f1
commit 12a8b47426
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -190,8 +190,12 @@ const config = {
contextualSearch: true, contextualSearch: true,
appId: "OG53LY1OQH", appId: "OG53LY1OQH",
}, },
zoom: {
selector: ".markdown :not(a) > img",
},
}), }),
plugins: [ plugins: [
require.resolve("docusaurus-plugin-image-zoom"),
[ [
"@docusaurus/plugin-client-redirects", "@docusaurus/plugin-client-redirects",
{ {

@ -24,6 +24,7 @@
"@mdx-js/react": "^1.6.22", "@mdx-js/react": "^1.6.22",
"@svgr/webpack": "^5.5.0", "@svgr/webpack": "^5.5.0",
"clsx": "^1.2.1", "clsx": "^1.2.1",
"docusaurus-plugin-image-zoom": "^1.0.1",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"hast-util-is-element": "1.1.0", "hast-util-is-element": "1.1.0",
"mdx-mermaid": "^1.3.2", "mdx-mermaid": "^1.3.2",

@ -1,5 +1,9 @@
lockfileVersion: '6.0' lockfileVersion: '6.0'
settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
dependencies: dependencies:
'@docusaurus/core': '@docusaurus/core':
specifier: 2.4.1 specifier: 2.4.1
@ -25,6 +29,9 @@ dependencies:
clsx: clsx:
specifier: ^1.2.1 specifier: ^1.2.1
version: 1.2.1 version: 1.2.1
docusaurus-plugin-image-zoom:
specifier: ^1.0.1
version: 1.0.1(@docusaurus/theme-classic@2.4.1)
file-loader: file-loader:
specifier: ^6.2.0 specifier: ^6.2.0
version: 6.2.0(webpack@5.74.0) version: 6.2.0(webpack@5.74.0)
@ -6027,6 +6034,16 @@ packages:
'@leichtgewicht/ip-codec': 2.0.4 '@leichtgewicht/ip-codec': 2.0.4
dev: false dev: false
/docusaurus-plugin-image-zoom@1.0.1(@docusaurus/theme-classic@2.4.1):
resolution: {integrity: sha512-96IpSKUx2RWy3db9aZ0s673OQo5DWgV9UVWouS+CPOSIVEdCWh6HKmWf6tB9rsoaiIF3oNn9keiyv6neEyKb1Q==}
peerDependencies:
'@docusaurus/theme-classic': '>=2.2.0'
dependencies:
'@docusaurus/theme-classic': 2.4.1(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4)
medium-zoom: 1.0.8
validate-peer-dependencies: 2.2.0
dev: false
/dom-converter@0.2.0: /dom-converter@0.2.0:
resolution: {integrity: sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==} resolution: {integrity: sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==}
dependencies: dependencies:
@ -7817,6 +7834,10 @@ packages:
engines: {node: '>= 0.6'} engines: {node: '>= 0.6'}
dev: false dev: false
/medium-zoom@1.0.8:
resolution: {integrity: sha512-CjFVuFq/IfrdqesAXfg+hzlDKu6A2n80ZIq0Kl9kWjoHh9j1N9Uvk5X0/MmN0hOfm5F9YBswlClhcwnmtwz7gA==}
dev: false
/memfs@3.4.1: /memfs@3.4.1:
resolution: {integrity: sha512-1c9VPVvW5P7I85c35zAdEr1TD5+F11IToIHIlrVIcflfnzPkJa0ZoYEoEdYDP8KgPFoSZ/opDrUsAoZWym3mtw==} resolution: {integrity: sha512-1c9VPVvW5P7I85c35zAdEr1TD5+F11IToIHIlrVIcflfnzPkJa0ZoYEoEdYDP8KgPFoSZ/opDrUsAoZWym3mtw==}
engines: {node: '>= 4.0.0'} engines: {node: '>= 4.0.0'}
@ -8335,6 +8356,18 @@ packages:
resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
dev: false dev: false
/path-root-regex@0.1.2:
resolution: {integrity: sha512-4GlJ6rZDhQZFE0DPVKh0e9jmZ5egZfxTkp7bcRDuPlJXbAwhxcl2dINPUAsjLdejqaLsCeg8axcLjIbvBjN4pQ==}
engines: {node: '>=0.10.0'}
dev: false
/path-root@0.1.1:
resolution: {integrity: sha512-QLcPegTHF11axjfojBIoDygmS2E3Lf+8+jI6wOVmNVenrKSo3mFdSGiIgdSHenczw3wPtlVMQaFVwGmM7BJdtg==}
engines: {node: '>=0.10.0'}
dependencies:
path-root-regex: 0.1.2
dev: false
/path-to-regexp@0.1.7: /path-to-regexp@0.1.7:
resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==} resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
dev: false dev: false
@ -9367,6 +9400,13 @@ packages:
engines: {node: '>=4'} engines: {node: '>=4'}
dev: false dev: false
/resolve-package-path@4.0.3:
resolution: {integrity: sha512-SRpNAPW4kewOaNUt8VPqhJ0UMxawMwzJD8V7m1cJfdSTK9ieZwS6K7Dabsm4bmLFM96Z5Y/UznrpG5kt1im8yA==}
engines: {node: '>= 12'}
dependencies:
path-root: 0.1.1
dev: false
/resolve-pathname@3.0.0: /resolve-pathname@3.0.0:
resolution: {integrity: sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==} resolution: {integrity: sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==}
dev: false dev: false
@ -9541,6 +9581,14 @@ packages:
lru-cache: 6.0.0 lru-cache: 6.0.0
dev: false dev: false
/semver@7.5.4:
resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
engines: {node: '>=10'}
hasBin: true
dependencies:
lru-cache: 6.0.0
dev: false
/send@0.17.2: /send@0.17.2:
resolution: {integrity: sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==} resolution: {integrity: sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==}
engines: {node: '>= 0.8.0'} engines: {node: '>= 0.8.0'}
@ -10373,6 +10421,14 @@ packages:
hasBin: true hasBin: true
dev: false dev: false
/validate-peer-dependencies@2.2.0:
resolution: {integrity: sha512-8X1OWlERjiUY6P6tdeU9E0EwO8RA3bahoOVG7ulOZT5MqgNDUO/BQoVjYiHPcNe+v8glsboZRIw9iToMAA2zAA==}
engines: {node: '>= 12'}
dependencies:
resolve-package-path: 4.0.3
semver: 7.5.4
dev: false
/value-equal@1.0.1: /value-equal@1.0.1:
resolution: {integrity: sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==} resolution: {integrity: sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==}
dev: false dev: false

@ -36,3 +36,8 @@ p > img {
box-shadow: 2px 2px 0.4rem 2px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 0.4rem 2px rgba(0, 0, 0, 0.3);
overflow: hidden; overflow: hidden;
} }
.medium-zoom-overlay,
.medium-zoom-image--opened {
z-index: 999;
}

Loading…
Cancel
Save