Fukasawa 样式微调

themes/Fukasawa/LayoutSlug.js

@@ -1,4 +1,5 @@
 import BLOG from '@/blog.config'
+import { getPageTableOfContents } from 'notion-utils'
 import 'prismjs'
 import 'prismjs/components/prism-bash'
 import 'prismjs/components/prism-javascript'
@@ -17,6 +18,11 @@ export const LayoutSlug = (props) => {
     tags: post.tags
   }
 
+  if (post?.blockMap?.block) {
+    post.content = Object.keys(post.blockMap.block)
+    post.toc = getPageTableOfContents(post, post.blockMap)
+  }
+
   return (
     <LayoutBase meta={meta} {...props} >
       <ArticleDetail {...props} />

themes/Fukasawa/components/AsideLeft.js

@@ -5,11 +5,13 @@ import GroupMenu from './GroupMenu'
 import GroupTag from './GroupTag'
 import SearchInput from './SearchInput'
 import SiteInfo from './SiteInfo'
+import Catalog from './Catalog'
 
 function AsideLeft (props) {
-  const { tags, currentTag, categories, currentCategory } = props
-  return <div className='w-72 bg-white min-h-screen px-10 py-14 hidden lg:block'>
+  const { tags, currentTag, categories, currentCategory, post } = props
+  console.log(post)
 
+  return <div className='w-72 bg-white min-h-screen px-10 py-14 hidden lg:block'>
     <Logo />
 
     <section className='flex flex-col text-gray-600'>
@@ -42,6 +44,10 @@ function AsideLeft (props) {
       <SiteInfo/>
     </section>
 
+    <section className='sticky top-0 pt-12'>
+      <Catalog toc={post?.toc}/>
+    </section>
+
   </div>
 }
 

themes/Fukasawa/components/Catalog.js

@@ -0,0 +1,81 @@
+import React from 'react'
+import throttle from 'lodash.throttle'
+import { uuidToId } from 'notion-utils'
+
+/**
+ * 目录导航组件
+ * @param toc
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Catalog = ({ toc }) => {
+  // 无目录就直接返回空
+  if (!toc || toc.length < 1) {
+    return <></>
+  }
+  // 监听滚动事件
+  React.useEffect(() => {
+    window.addEventListener('scroll', actionSectionScrollSpy)
+    actionSectionScrollSpy()
+    return () => {
+      window.removeEventListener('scroll', actionSectionScrollSpy)
+    }
+  }, [])
+
+  // 同步选中目录事件
+  const [activeSection, setActiveSection] = React.useState(null)
+  const throttleMs = 100
+  const actionSectionScrollSpy = React.useCallback(throttle(() => {
+    const sections = document.getElementsByClassName('notion-h')
+    let prevBBox = null
+    let currentSectionId = activeSection
+    for (let i = 0; i < sections.length; ++i) {
+      const section = sections[i]
+      if (!section || !(section instanceof Element)) continue
+      if (!currentSectionId) {
+        currentSectionId = section.getAttribute('data-id')
+      }
+      const bbox = section.getBoundingClientRect()
+      const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+      const offset = Math.max(150, prevHeight / 4)
+      // GetBoundingClientRect returns values relative to viewport
+      if (bbox.top - offset < 0) {
+        currentSectionId = section.getAttribute('data-id')
+        prevBBox = bbox
+        continue
+      }
+      // No need to continue loop, if last element has been detected
+      break
+    }
+    setActiveSection(currentSectionId)
+  }, throttleMs))
+
+  return <div>
+    <div className='w-full'><i className='mr-1 fas fa-stream' /> 目录</div>
+    <nav className='font-sans overflow-y-auto scroll-hidden text-black'>
+      {toc.map((tocItem) => {
+        const id = uuidToId(tocItem.id)
+        return (
+          <a
+            key={id}
+            href={`#${id}`}
+            className={`notion-table-of-contents-item duration-300 transform font-light
+            notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
+          >
+                      <span
+                        style={{
+                          display: 'inline-block',
+                          marginLeft: tocItem.indentLevel * 16
+                        }}
+                        className={`${activeSection === id && ' font-bold text-red-400 underline'}`}
+                      >
+                        {tocItem.text}
+                      </span>
+          </a>
+        )
+      })}
+    </nav>
+  </div>
+}
+
+export default Catalog