Merge branch 'alpha'

.env.local

@@ -1,5 +1,5 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=4.3.2
+NEXT_PUBLIC_VERSION=4.4.0
 
 
 # 可在此添加环境变量，去掉最左边的（# ）注释即可

components/AlgoliaSearchModal.js

@@ -1,4 +1,4 @@
-import { useState, useImperativeHandle, useRef, useEffect } from 'react'
+import { useState, useImperativeHandle, useRef, useEffect, Fragment } from 'react'
 import algoliasearch from 'algoliasearch'
 import replaceSearchResult from '@/components/Mark'
 import Link from 'next/link'
@@ -7,6 +7,22 @@ import throttle from 'lodash/throttle'
 import { siteConfig } from '@/lib/config'
 import { useHotkeys } from 'react-hotkeys-hook';
 
+const ShortCutActions = [
+  {
+    key: '↑ ↓',
+    action: '选择'
+  },
+  {
+    key: 'Enter',
+    action: '跳转'
+  },
+  {
+    key: 'Esc',
+    action: '关闭'
+  }
+
+]
+
 /**
  * 结合 Algolia 实现的弹出式搜索框
  * 打开方式 cRef.current.openSearch()
@@ -234,6 +250,15 @@ export default function AlgoliaSearchModal({ cRef }) {
         </ul>
         <Pagination totalPage={totalPage} page={page} switchPage={switchPage} />
         <div className='flex items-center justify-between mt-2 sm:text-sm text-xs dark:text-gray-300'>
+          {totalHit === 0 && (<div className='flex items-center'>
+            {
+              ShortCutActions.map((action, index) => {
+                return <Fragment key={index}><div className='border-gray-300 dark:text-gray-300 text-gray-600 px-2 rounded border inline-block'>{action.key}</div>
+                  <span className='ml-2 mr-4  text-gray-600 dark:text-gray-300'>{action.action}</span></Fragment>
+              })
+            }
+          </div>)
+          }
           <div>
             {totalHit > 0 && (
               <p>

lib/global.js

@@ -16,8 +16,8 @@ export function GlobalContextProvider(props) {
   const [lang, updateLang] = useState(NOTION_CONFIG?.LANG || LANG) // 默认语言
   const [locale, updateLocale] = useState(generateLocaleDict(NOTION_CONFIG?.LANG || LANG)) // 默认语言
   const [theme, setTheme] = useState(NOTION_CONFIG?.THEME || THEME) // 默认博客主题
-  const defaultDarkMode = NOTION_CONFIG?.APPEARANCE || APPEARANCE === 'dark'
-  const [isDarkMode, updateDarkMode] = useState(defaultDarkMode) // 默认深色模式
+  const defaultDarkMode = NOTION_CONFIG?.APPEARANCE || APPEARANCE
+  const [isDarkMode, updateDarkMode] = useState(defaultDarkMode === 'dark') // 默认深色模式
   const [onLoading, setOnLoading] = useState(false) // 抓取文章数据
   const router = useRouter()
 
@@ -58,13 +58,13 @@ export function GlobalContextProvider(props) {
   }
 
   useEffect(() => {
-    initDarkMode(updateDarkMode,defaultDarkMode)
+    initDarkMode(updateDarkMode, defaultDarkMode)
     initLocale(lang, locale, updateLang, updateLocale)
   }, [])
 
   // 加载进度条
   useEffect(() => {
-    const handleStart = (url) => {
+    const handleStart = url => {
       const { theme } = router.query
       if (theme && !url.includes(`theme=${theme}`)) {
         const newUrl = `${url}${url.includes('?') ? '&' : '?'}theme=${theme}`
@@ -87,27 +87,28 @@ export function GlobalContextProvider(props) {
   }, [router])
 
   return (
-        <GlobalContext.Provider value={{
-          fullWidth,
-          NOTION_CONFIG,
-          toggleDarkMode,
-          onLoading,
-          setOnLoading,
-          lang,
-          changeLang,
-          locale,
-          updateLocale,
-          isDarkMode,
-          updateDarkMode,
-          theme,
-          setTheme,
-          switchTheme,
-          siteInfo,
-          categoryOptions,
-          tagOptions
-        }}>
-            {children}
-        </GlobalContext.Provider>
+    <GlobalContext.Provider
+      value={{
+        fullWidth,
+        NOTION_CONFIG,
+        toggleDarkMode,
+        onLoading,
+        setOnLoading,
+        lang,
+        changeLang,
+        locale,
+        updateLocale,
+        isDarkMode,
+        updateDarkMode,
+        theme,
+        setTheme,
+        switchTheme,
+        siteInfo,
+        categoryOptions,
+        tagOptions
+      }}>
+      {children}
+    </GlobalContext.Provider>
   )
 }
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "notion-next",
-    "version": "4.3.2",
+    "version": "4.4.0",
     "homepage": "https://github.com/tangly1024/NotionNext.git",
     "license": "MIT",
     "repository": {

public/dplayer.htm

@@ -8,8 +8,17 @@
     <!-- 引入 DPlayer 样式文件 -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css">
     <style>
+        html,
         body {
-            margin: 0px 0px;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+
+        #dplayer-container {
+            width: 100%;
+            height: 100%;
         }
     </style>
 </head>
@@ -25,7 +34,7 @@
 
     <script>
         var myParam = decodeURIComponent(location.search.split('n=')[1]);
-        if(!myParam){
+        if (!myParam) {
             alert('无效的视频地址')
         }
         // 创建 DPlayer 实例

themes/fukasawa/components/AsideLeft.js

@@ -14,7 +14,7 @@ import { AdSlot } from '@/components/GoogleAdsense'
 import { siteConfig } from '@/lib/config'
 import MailChimpForm from './MailChimpForm'
 import { useGlobal } from '@/lib/global'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { isBrowser } from '@/lib/utils'
 import { debounce } from 'lodash'
 
@@ -45,6 +45,23 @@ function AsideLeft(props) {
     }
   }, [isCollapsed])
 
+  const position = useMemo(() => {
+    const isReverse = JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE'))
+    if (isCollapsed) {
+      if (isReverse) {
+        return 'right-2'
+      } else {
+        return 'left-2'
+      }
+    } else {
+      if (isReverse) {
+        return 'right-80'
+      } else {
+        return 'left-80'
+      }
+    }
+  }, [isCollapsed])
+
   // 折叠侧边栏
   const toggleOpen = () => {
     setIsCollapse(!isCollapsed)
@@ -75,14 +92,15 @@ function AsideLeft(props) {
       }
     }
   }, [])
-
+
+
   return <div className={`sideLeft relative ${isCollapsed ? 'w-0' : 'w-80'} duration-300 transition-all bg-white dark:bg-hexo-black-gray min-h-screen hidden lg:block z-20`}>
         {/* 折叠按钮 */}
-        {siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_BUTTON', null, CONFIG) && <div className={`${isCollapsed ? '' : 'ml-80'} hidden lg:block sticky top-0 mx-2 cursor-pointer hover:scale-110 duration-300 px-3 py-2`} onClick={toggleOpen}>
+    {siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_BUTTON', null, CONFIG) && <div className={`${position} hidden lg:block fixed top-0 cursor-pointer hover:scale-110 duration-300 px-3 py-2   dark:text-white`} onClick={toggleOpen}>
             {isCollapsed ? <i className="fa-solid fa-indent text-xl"></i> : <i className='fas fa-bars text-xl'></i>}
         </div>}
 
-        <div className={`h-full ${isCollapsed ? 'hidden' : 'px-8'}`}>
+        <div className={`h-full ${isCollapsed ? 'hidden' : 'p-8'}`}>
 
             <Logo {...props} />
 
@@ -133,13 +151,12 @@ function AsideLeft(props) {
                 <DarkModeButton />
             </section>
 
-            <section className='sticky top-0 pt-12'>
+            <section className='sticky top-0 pt-12  flex flex-col max-h-screen '>
                 <Catalog toc={post?.toc} />
                 <div className='flex justify-center'>
                     <div>{slot}</div>
                 </div>
             </section>
-
         </div>
     </div>
 }

themes/fukasawa/components/Catalog.js

@@ -54,35 +54,32 @@ const Catalog = ({ toc }) => {
 
   // 目录自动滚动
   const tRef = useRef(null)
-
   // 无目录就直接返回空
   if (!toc || toc?.length < 1) {
     return <></>
   }
-
-  return <div id='catalog'>
+  return <div id='catalog' className='flex-1 flex-col flex overflow-hidden'>
     <div className='w-full dark:text-gray-300 mb-2'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
-    <div className='h-96'>
-      <nav ref={tRef} className='h-full overflow-y-auto overscroll-none 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 dark:text-gray-300
+    <nav ref={tRef} className='flex-1 overflow-auto  overscroll-none scroll-hidden   text-black mb-6'>
+      {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 dark:text-gray-300
               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'}`}
+              title={tocItem.text}
             >
-              <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`${activeSection === id && ' font-bold text-red-400 underline'}`}
-              >
-                {tocItem.text}
-              </span>
-            </a>
-          )
-        })}
-      </nav>
-    </div>
+              {tocItem.text}
+            </span>
+          </a>
+        )
+      })}
+    </nav>
   </div>
 }
 

themes/movie/index.js

@@ -157,7 +157,7 @@ const LayoutSlug = props => {
 
       // 创建一个新的容器元素
       const videoWrapper = document.createElement('div')
-      videoWrapper.className = 'video-wrapper p-2 bg-gray-100 dark:bg-hexo-black-gray max-w-5xl mx-auto'
+      videoWrapper.className = 'video-wrapper p-2 bg-gray-100 dark:bg-hexo-black-gray max-w-4xl mx-auto'
 
       // 创建一个新的容器元素
       const carouselWrapper = document.createElement('div')