Merge branch 'main' of https://github.com/tangly1024/NotionNext

blog.config.js

@@ -37,6 +37,9 @@ const BLOG = {
   CONTACT_INSTAGRAM: process.env.NEXT_PUBLIC_CONTACT_INSTAGRAM || '', // 您的instagram地址
   CONTACT_BILIBILI: process.env.NEXT_PUBLIC_CONTACT_BILIBILI || 'https://space.bilibili.com/1036711705', // B站主页
   CONTACT_YOUTUBE: process.env.NEXT_PUBLIC_CONTACT_YOUTUBE || '', // Youtube主页
+  CONTACT_XIAOHONGSHU: process.env.NEXT_PUBLIC_CONTACT_XIAOHONGSHU || '', // 小红书主页
+  CONTACT_ZHISHIXINGQIU: process.env.NEXT_PUBLIC_CONTACT_ZHISHIXINGQIU || '', // 知识星球
+  CONTACT_WEHCHAT_PUBLIC: process.env.NEXT_PUBLIC_CONTACT_WEHCHAT_PUBLIC || '', // 微信公众号 格式：https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=【xxxxxx】==#wechat_redirect
 
   NOTION_HOST: process.env.NEXT_PUBLIC_NOTION_HOST || 'https://www.notion.so', // Notion域名，您可以选择用自己的域名进行反向代理，如果不懂得什么是反向代理，请勿修改此项
 

lib/global.js

@@ -79,7 +79,10 @@ export function GlobalContextProvider(props) {
   useEffect(() => {
     initDarkMode(updateDarkMode, defaultDarkMode)
     initLocale(lang, locale, updateLang, updateLocale)
-    redirectUserLang(NOTION_PAGE_ID)
+    // 可以
+    if (NOTION_CONFIG?.REDIRECT_LANG) {
+      redirectUserLang(NOTION_PAGE_ID)
+    }
   }, [])
 
   // 加载进度条

themes/heo/components/Header.js

@@ -140,7 +140,7 @@ const Header = props => {
       {/* 顶部导航菜单栏 */}
       <nav
         id='nav'
-        className={`z-20 h-16 top-0 w-full
+        className={`z-20 h-16 top-0 w-full duration-500 transition-all
             ${fixedNav ? 'fixed' : 'relative bg-transparent'} 
             ${textWhite ? 'text-white ' : 'text-black dark:text-white'}  
             ${navBgWhite ? 'bg-white dark:bg-[#18171d] shadow' : 'bg-transparent'}`}>

themes/hexo/components/FloatDarkModeButton.js → themes/hexo/components/ButtonFloatDarkMode.js

@@ -1,9 +1,12 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { saveDarkModeToLocalStorage } from '@/themes/theme'
 import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
 
-export default function FloatDarkModeButton () {
+/**
+ * 深色模式按钮
+ */
+export default function ButtonDarkModeFloat() {
   const { isDarkMode, updateDarkMode } = useGlobal()
 
   if (!siteConfig('HEXO_WIDGET_DARK_MODE', null, CONFIG)) {
@@ -23,10 +26,13 @@ export default function FloatDarkModeButton () {
   return (
     <div
       onClick={handleChangeDarkMode}
-      className={'justify-center items-center w-7 h-7 text-center transform hover:scale-105 duration-200'
-      }
-    >
-      <i id="darkModeButton" className={`${isDarkMode ? 'fa-sun' : 'fa-moon'} fas text-xs`}/>
+      className={
+        'justify-center items-center w-7 h-7 text-center transform hover:scale-105 duration-200'
+      }>
+      <i
+        id='darkModeButton'
+        className={`${isDarkMode ? 'fa-sun' : 'fa-moon'} fas text-xs`}
+      />
     </div>
   )
 }

themes/hexo/components/JumpToCommentButton.js → themes/hexo/components/ButtonJumpToComment.js

@@ -1,29 +1,36 @@
-import CONFIG from '../config'
 import { siteConfig } from '@/lib/config'
+import CONFIG from '../config'
 
 /**
  * 跳转到评论区
  * @returns {JSX.Element}
  * @constructor
  */
-const JumpToCommentButton = () => {
+const ButtonJumpToComment = () => {
   if (!siteConfig('HEXO_WIDGET_TO_COMMENT', null, CONFIG)) {
     return <></>
   }
 
   function navToComment() {
     if (document.getElementById('comment')) {
-      window.scrollTo({ top: document.getElementById('comment').offsetTop, behavior: 'smooth' })
+      window.scrollTo({
+        top: document.getElementById('comment').offsetTop,
+        behavior: 'smooth'
+      })
     }
     // 兼容性不好
     // const commentElement = document.getElementById('comment')
     // if (commentElement) {
     // commentElement?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
   }
 
-  return (<div className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-7 text-center' onClick={navToComment} >
-    <i className='fas fa-comment text-xs' />
-  </div>)
+  return (
+    <div
+      className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-7 text-center'
+      onClick={navToComment}>
+      <i className='fas fa-comment text-xs' />
+    </div>
+  )
 }
 
-export default JumpToCommentButton
+export default ButtonJumpToComment

themes/hexo/components/JumpToTopButton.js → themes/hexo/components/ButtonJumpToTop.js

@@ -1,6 +1,6 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
 
 /**
  * 跳转到网页顶部
@@ -10,7 +10,7 @@ import { siteConfig } from '@/lib/config'
  * @returns {JSX.Element}
  * @constructor
  */
-const JumpToTopButton = ({ showPercent = true, percent }) => {
+const ButtonJumpToTop = ({ showPercent = true, percent }) => {
   const { locale } = useGlobal()
 
   if (!siteConfig('HEXO_WIDGET_TO_TOP', null, CONFIG)) {
@@ -22,4 +22,4 @@ const JumpToTopButton = ({ showPercent = true, percent }) => {
     </div>)
 }
 
-export default JumpToTopButton
+export default ButtonJumpToTop

themes/hexo/components/ButtonRandomPost.js

@@ -0,0 +1,29 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+
+/**
+ * 随机跳转到一个文章
+ */
+export default function ButtonRandomPost(props) {
+  const { latestPosts } = props
+  const router = useRouter()
+  const { locale } = useGlobal()
+  /**
+   * 随机跳转文章
+   */
+  function handleClick() {
+    const randomIndex = Math.floor(Math.random() * latestPosts.length)
+    const randomPost = latestPosts[randomIndex]
+    router.push(`${siteConfig('SUB_PATH', '')}/${randomPost?.slug}`)
+  }
+
+  return (
+    <div
+      title={locale.MENU.WALK_AROUND}
+      className='cursor-pointer hover:bg-black hover:bg-opacity-10 rounded-full w-10 h-10 flex justify-center items-center duration-200 transition-all'
+      onClick={handleClick}>
+      <i className='fa-solid fa-podcast'></i>
+    </div>
+  )
+}

themes/hexo/components/ButtonRandomPostMini.js

@@ -0,0 +1,29 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+
+/**
+ * 随机跳转到一个文章
+ */
+export default function ButtonRandomPostMini(props) {
+  const { latestPosts } = props
+  const router = useRouter()
+  const { locale } = useGlobal()
+  /**
+   * 随机跳转文章
+   */
+  function handleClick() {
+    const randomIndex = Math.floor(Math.random() * latestPosts.length)
+    const randomPost = latestPosts[randomIndex]
+    router.push(`${siteConfig('SUB_PATH', '')}/${randomPost?.slug}`)
+  }
+
+  return (
+    <div
+      title={locale.MENU.WALK_AROUND}
+      className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-7 text-center'
+      onClick={handleClick}>
+      <i className='fa-solid fa-podcast'></i>
+    </div>
+  )
+}

themes/hexo/components/Header.js

@@ -5,6 +5,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import CONFIG from '../config'
+import ButtonRandomPost from './ButtonRandomPost'
 import CategoryGroup from './CategoryGroup'
 import Logo from './Logo'
 import { MenuListTop } from './MenuListTop'
@@ -28,6 +29,7 @@ const Header = props => {
   const router = useRouter()
   const [isOpen, changeShow] = useState(false)
   const showSearchButton = siteConfig('HEXO_MENU_SEARCH', false, CONFIG)
+  const showRandomButton = siteConfig('HEXO_MENU_RANDOM', false, CONFIG)
 
   const toggleMenuOpen = () => {
     changeShow(!isOpen)
@@ -172,6 +174,7 @@ const Header = props => {
               )}
             </div>
             {showSearchButton && <SearchButton />}
+            {showRandomButton && <ButtonRandomPost {...props} />}
           </div>
         </div>
       </div>

themes/hexo/components/RightFloatArea.js

@@ -1,7 +1,7 @@
 import throttle from 'lodash.throttle'
 import { useCallback, useEffect, useState } from 'react'
-import FloatDarkModeButton from './FloatDarkModeButton'
-import JumpToTopButton from './JumpToTopButton'
+import ButtonDarkModeFloat from './ButtonFloatDarkMode'
+import ButtonJumpToTop from './ButtonJumpToTop'
 
 /**
  * 悬浮在右下角的按钮，当页面向下滚动100px时会出现
@@ -10,33 +10,40 @@ import JumpToTopButton from './JumpToTopButton'
  */
 export default function RightFloatArea({ floatSlot }) {
   const [showFloatButton, switchShow] = useState(false)
-  const scrollListener = useCallback(throttle(() => {
-    const targetRef = document.getElementById('wrapper')
-    const clientHeight = targetRef?.clientHeight
-    const scrollY = window.pageYOffset
-    const fullHeight = clientHeight - window.outerHeight
-    let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
-    if (per > 100) per = 100
-    const shouldShow = scrollY > 100 && per > 0
+  const scrollListener = useCallback(
+    throttle(() => {
+      const targetRef = document.getElementById('wrapper')
+      const clientHeight = targetRef?.clientHeight
+      const scrollY = window.pageYOffset
+      const fullHeight = clientHeight - window.outerHeight
+      let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
+      if (per > 100) per = 100
+      const shouldShow = scrollY > 100 && per > 0
 
-    // 右下角显示悬浮按钮
-    if (shouldShow !== showFloatButton) {
-      switchShow(shouldShow)
-    }
-  }, 200))
+      // 右下角显示悬浮按钮
+      if (shouldShow !== showFloatButton) {
+        switchShow(shouldShow)
+      }
+    }, 200)
+  )
 
   useEffect(() => {
     document.addEventListener('scroll', scrollListener)
     return () => document.removeEventListener('scroll', scrollListener)
   }, [])
 
   return (
-        <div className={(showFloatButton ? 'opacity-100 ' : 'invisible opacity-0') + '  duration-300 transition-all bottom-12 right-1 fixed justify-end z-20  text-white bg-indigo-500 dark:bg-hexo-black-gray rounded-sm'}>
-                <div className={'justify-center  flex flex-col items-center cursor-pointer'}>
-                    <FloatDarkModeButton />
-                    {floatSlot}
-                    <JumpToTopButton />
-                </div>
-            </div>
+    <div
+      className={
+        (showFloatButton ? 'opacity-100 ' : 'invisible opacity-0') +
+        '  duration-300 transition-all bottom-12 right-1 fixed justify-end z-20  text-white bg-indigo-500 dark:bg-hexo-black-gray rounded-sm'
+      }>
+      <div
+        className={'justify-center  flex flex-col items-center cursor-pointer'}>
+        <ButtonDarkModeFloat />
+        {floatSlot}
+        <ButtonJumpToTop />
+      </div>
+    </div>
   )
 }