Merge pull request #291 from tangly1024/release_3.4.0

Release 3.4.0

components/NotionPage.js

@@ -33,6 +33,7 @@ const NotionPage = ({ post }) => {
   const zoom = isBrowser() && mediumZoom({
     container: '.notion-viewport',
     background: 'rgba(0, 0, 0, 0.2)',
+    scrollOffset: 200,
     margin: getMediumZoomMargin()
   })
 
@@ -58,15 +59,14 @@ const NotionPage = ({ post }) => {
           }
         }
 
+        // 相册中的url替换成可点击
         const cards = document.getElementsByClassName('notion-collection-card')
         for (const e of cards) {
           e.removeAttribute('href')
           const links = e.querySelectorAll('.notion-link')
           if (links && links.length > 0) {
             for (const l of links) {
-              l.onclick = function() {
-                window.open('http://' + l.innerText)
-              }
+              l.parentElement.innerHTML = `<a href='${l.innerText}' rel='noreferrer' target='_blank'>${l.innerText}</a>`
             }
           }
         }
@@ -74,7 +74,7 @@ const NotionPage = ({ post }) => {
     }, 800)
 
     addWatch4Dom()
-  })
+  }, [])
 
   return <div id='container' className='max-w-4xl mx-auto'>
     <NotionRenderer

styles/globals.css

@@ -156,10 +156,6 @@ nav {
     pointer-events: none;
 }
 
-.medium-zoom-image--opened{
-  /* width: auto !important; */
-}
-
 [data-waline] p {
   color: var(--waline-color);
   @apply dark:text-gray-200 !important

styles/notion.css

@@ -207,6 +207,20 @@
 
 .medium-zoom-image--opened {
   z-index: 301;
+  /* width: auto !important; */
+}
+
+@media (max-width: 768px){
+    .medium-zoom-image--opened {
+        object-fit: fill !important;
+        height: auto !important;
+    }
+}
+
+@media (min-width: 768px){
+    .medium-zoom-image--opened {
+        object-fit: scale-down !important;
+    }
 }
 
 .notion-frame {