medium catalog aos

components/Tabs.js

@@ -53,7 +53,7 @@ const Tabs = ({ className, children }) => {
                     data-aos="fade-up"
                     data-aos-duration="600"
                     data-aos-easing="ease-in-out"
-                    data-aos-once="false"
+                    data-aos-once="true"
                     data-aos-anchor-placement="top-bottom">
                     {currentTab === index && item}
                 </section>

themes/medium/components/Catalog.js

@@ -10,10 +10,13 @@ import JumpToTopButton from './JumpToTopButton'
  * @constructor
  */
 const Catalog = ({ toc }) => {
-  // 无目录就直接返回空
-  if (!toc || toc.length < 1) {
-    return <></>
-  }
+  const tocIds = []
+
+  // 目录自动滚动
+  const tRef = useRef(null)
+  // 同步选中目录事件
+  const [activeSection, setActiveSection] = React.useState(null)
+
   // 监听滚动事件
   React.useEffect(() => {
     window.addEventListener('scroll', actionSectionScrollSpy)
@@ -23,12 +26,6 @@ const Catalog = ({ toc }) => {
     }
   }, [])
 
-  // 目录自动滚动
-  const tRef = useRef(null)
-  const tocIds = []
-
-  // 同步选中目录事件
-  const [activeSection, setActiveSection] = React.useState(null)
   const throttleMs = 100
   const actionSectionScrollSpy = React.useCallback(throttle(() => {
     const sections = document.getElementsByClassName('notion-h')
@@ -57,6 +54,11 @@ const Catalog = ({ toc }) => {
     tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
   }, throttleMs))
 
+  // 无目录就直接返回空
+  if (!toc || toc.length < 1) {
+    return <></>
+  }
+
   return <div className='px-3'>
     <div className='w-full mt-2 mb-4'>
       <Progress />