d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

async

Browse Source
This commit is contained in:
tangly1024
2023-06-04 16:10:40 +08:00
parent 9246c8d7f8
commit 70ef50c6d0
12 changed files with 118 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
components/DebugPanel.js
View File

@@ -8,7 +8,7 @@ import { useGlobal } from '@/lib/global'
*
* @returns 调试面板
*/
export function DebugPanel() {
const DebugPanel = () => {
const [show, setShow] = useState(false)
const { theme, changeTheme, switchTheme, locale } = useGlobal()
const [siteConfig, updateSiteConfig] = useState({})
@@ -128,3 +128,4 @@ export function DebugPanel() {
</>
)
}
export default DebugPanel

58
components/ExternalPlugins.js Normal file
View File

@@ -0,0 +1,58 @@
import BLOG from 'blog.config'
import dynamic from 'next/dynamic'
// import TwikooCommentCounter from '@/components/TwikooCommentCounter'
// import { DebugPanel } from '@/components/DebugPanel'
// import { ThemeSwitch } from '@/components/ThemeSwitch'
// import { Fireworks } from '@/components/Fireworks'
// import { Nest } from '@/components/Nest'
// import { FlutteringRibbon } from '@/components/FlutteringRibbon'
// import { Ribbon } from '@/components/Ribbon'
// import { Sakura } from '@/components/Sakura'
// import { StarrySky } from '@/components/StarrySky'
// import { Analytics } from '@vercel/analytics/react'
const TwikooCommentCounter = dynamic(() => import('@/components/TwikooCommentCounter'), { ssr: false })
const DebugPanel = dynamic(() => import('@/components/DebugPanel'), { ssr: false })
const ThemeSwitch = dynamic(() => import('@/components/ThemeSwitch'), { ssr: false })
const Fireworks = dynamic(() => import('@/components/Fireworks'), { ssr: false })
const Nest = dynamic(() => import('@/components/Nest'), { ssr: false })
const FlutteringRibbon = dynamic(() => import('@/components/FlutteringRibbon'), { ssr: false })
const Ribbon = dynamic(() => import('@/components/Ribbon'), { ssr: false })
const Sakura = dynamic(() => import('@/components/Sakura'), { ssr: false })
const StarrySky = dynamic(() => import('@/components/StarrySky'), { ssr: false })
const Analytics = dynamic(() => import('@vercel/analytics/react').then(async (m) => { return m.Analytics }), { ssr: false })
const MusicPlayer = dynamic(() => import('@/components/Player'), { ssr: false })
const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
const Busuanzi = dynamic(() => import('@/components/Busuanzi'), { ssr: false })
const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), { ssr: false })
const Messenger = dynamic(() => import('@/components/FacebookMessenger'), { ssr: false })
/**
* 各种第三方组件
* @param {*} props
* @returns
*/
const ExternalPlugin = (props) => {
return <>
{JSON.parse(BLOG.THEME_SWITCH) && <ThemeSwitch />}
{JSON.parse(BLOG.DEBUG) && <DebugPanel />}
{BLOG.ANALYTICS_ACKEE_TRACKER && <Ackee />}
{BLOG.ANALYTICS_GOOGLE_ID && <Gtag />}
{BLOG.ANALYTICS_VERCEL && <Analytics />}
{JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <Busuanzi />}
{BLOG.ADSENSE_GOOGLE_ID && <GoogleAdsense />}
{BLOG.FACEBOOK_APP_ID && BLOG.FACEBOOK_PAGE_ID && <Messenger />}
{JSON.parse(BLOG.FIREWORKS) && <Fireworks />}
{JSON.parse(BLOG.SAKURA) && <Sakura />}
{JSON.parse(BLOG.STARRY_SKY) && <StarrySky />}
{JSON.parse(BLOG.MUSIC_PLAYER) && <MusicPlayer />}
{JSON.parse(BLOG.NEST) && <Nest />}
{JSON.parse(BLOG.FLUTTERINGRIBBON) && <FlutteringRibbon />}
{JSON.parse(BLOG.COMMENT_TWIKOO_COUNT_ENABLE) && <TwikooCommentCounter {...props}/>}
{JSON.parse(BLOG.RIBBON) && <Ribbon />}
</>
}
export default ExternalPlugin

7
components/Fireworks.js
View File

@@ -2,16 +2,17 @@
* https://codepen.io/juliangarnier/pen/gmOwJX
* custom by hexo-theme-yun @YunYouJun
*/
import React from 'react'
import { useEffect } from 'react'
import anime from 'animejs'
import BLOG from 'blog.config'
export const Fireworks = () => {
React.useEffect(() => {
const Fireworks = () => {
useEffect(() => {
createFireworks({})
}, [])
return <canvas id='fireworks' className='fireworks'></canvas>
}
export default Fireworks
/**
* 创建烟花

8
components/FlutteringRibbon.js
View File

@@ -1,5 +1,5 @@
/* eslint-disable */
import React from 'react'
import { useEffect } from 'react'
const id = 'canvasFlutteringRibbon'
export const FlutteringRibbon = () => {
const destroyRibbon = ()=>{
@@ -9,15 +9,17 @@ export const FlutteringRibbon = () => {
}
}
React.useEffect(() => {
useEffect(() => {
createFlutteringRibbon()
return () => destroyRibbon()
}, [])
return <></>
}
export default FlutteringRibbon
/**
* 创建连接点
* @param config

7
components/MusicPlayer.js
View File

@@ -1,7 +0,0 @@
import dynamic from 'next/dynamic'
const MusicPlayer = dynamic(
() => import('@/components/Player'),
{ ssr: false }
)
export default MusicPlayer

4
components/Nest.js
View File

@@ -1,7 +1,7 @@
/* eslint-disable */
import { useEffect } from 'react'
const id = 'canvasNestCreated'
export const Nest = () => {
const Nest = () => {
const destroyNest = ()=>{
const nest = document.getElementById(id)
if(nest && nest.parentNode){
@@ -16,6 +16,8 @@ export const Nest = () => {
return <></>
}
export default Nest
/**
* 创建连接点
* @param config

4
components/Ribbon.js
View File

@@ -2,7 +2,7 @@
import { useEffect } from 'react'
const id = 'canvasRibbon'
export const Ribbon = () => {
const Ribbon = () => {
const destroyRibbon = ()=>{
const ribbon = document.getElementById(id)
if(ribbon && ribbon.parentNode){
@@ -17,6 +17,8 @@ export const Ribbon = () => {
return <></>
}
export default Ribbon
/**
* 创建连接点
* @param config

4
components/Sakura.js
View File

@@ -1,7 +1,7 @@
/* eslint-disable */
import { useEffect } from 'react'
const id = 'canvas_sakura'
export const Sakura = () => {
const Sakura = () => {
const destroySakura = ()=>{
const sakura = document.getElementById(id)
if(sakura && sakura.parentNode){
@@ -16,6 +16,8 @@ export const Sakura = () => {
return <></>
}
export default Sakura
/**
* 创建樱花雨
* @param config

3
components/StarrySky.js
View File

@@ -1,7 +1,7 @@
/* eslint-disable */
import React from 'react'
export const StarrySky = () => {
const StarrySky = () => {
React.useEffect(() => {
dark()
}, [])
@@ -12,6 +12,7 @@ export const StarrySky = () => {
)
}
export default StarrySky
/**
* 创建星空雨
* @param config

4
components/ThemeSwitch.js
View File

@@ -6,7 +6,7 @@ import { Draggable } from './Draggable'
*
* @returns 主题切换
*/
export function ThemeSwitch() {
const ThemeSwitch = () => {
const { theme, changeTheme } = useGlobal()
const onSelectChange = (e) => {
@@ -30,3 +30,5 @@ export function ThemeSwitch() {
</>
)
}
export default ThemeSwitch

60
pages/_app.js
View File

@@ -1,6 +1,4 @@
import BLOG from 'blog.config'
import React, { useEffect } from 'react'
import dynamic from 'next/dynamic'
import { useEffect } from 'react'
import 'animate.css'
import '@/styles/globals.css'
@@ -11,56 +9,21 @@ import 'react-notion-x/src/styles.css'
import '@/styles/notion.css' // 重写部分样式
import { GlobalContextProvider } from '@/lib/global'
import { DebugPanel } from '@/components/DebugPanel'
import { ThemeSwitch } from '@/components/ThemeSwitch'
import { Fireworks } from '@/components/Fireworks'
import { Nest } from '@/components/Nest'
import { FlutteringRibbon } from '@/components/FlutteringRibbon'
import { Ribbon } from '@/components/Ribbon'
import { Sakura } from '@/components/Sakura'
import { StarrySky } from '@/components/StarrySky'
import MusicPlayer from '@/components/MusicPlayer'
import ExternalScript from '@/components/ExternalScript'
import smoothscroll from 'smoothscroll-polyfill'
import { Analytics } from '@vercel/analytics/react'
import { isMobile } from '@/lib/utils'
import AOS from 'aos'
import 'aos/dist/aos.css' // You can also use <link> for styles
import { isMobile } from '@/lib/utils'
import TwikooCommentCounter from '@/components/TwikooCommentCounter'
const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
const Busuanzi = dynamic(() => import('@/components/Busuanzi'), { ssr: false })
const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), {
ssr: false
})
const Messenger = dynamic(() => import('@/components/FacebookMessenger'), {
ssr: false
})
import smoothscroll from 'smoothscroll-polyfill'
import dynamic from 'next/dynamic'
// 自定义样式css和js引入
import ExternalScript from '@/components/ExternalScript'
// 各种扩展插件 动画等
const ExternalPlugins = dynamic(() => import('@/components/ExternalPlugins'))
const MyApp = ({ Component, pageProps }) => {
// 外部插件
const externalPlugins = <>
{JSON.parse(BLOG.THEME_SWITCH) && <ThemeSwitch />}
{JSON.parse(BLOG.DEBUG) && <DebugPanel />}
{BLOG.ANALYTICS_ACKEE_TRACKER && <Ackee />}
{BLOG.ANALYTICS_GOOGLE_ID && <Gtag />}
{BLOG.ANALYTICS_VERCEL && <Analytics />}
{JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <Busuanzi />}
{BLOG.ADSENSE_GOOGLE_ID && <GoogleAdsense />}
{BLOG.FACEBOOK_APP_ID && BLOG.FACEBOOK_PAGE_ID && <Messenger />}
{JSON.parse(BLOG.FIREWORKS) && <Fireworks />}
{JSON.parse(BLOG.SAKURA) && <Sakura />}
{JSON.parse(BLOG.STARRY_SKY) && <StarrySky />}
{JSON.parse(BLOG.MUSIC_PLAYER) && <MusicPlayer />}
{JSON.parse(BLOG.NEST) && <Nest />}
{JSON.parse(BLOG.FLUTTERINGRIBBON) && <FlutteringRibbon />}
{JSON.parse(BLOG.COMMENT_TWIKOO_COUNT_ENABLE) && <TwikooCommentCounter {...pageProps}/>}
{JSON.parse(BLOG.RIBBON) && <Ribbon />}
<ExternalScript/>
</>
useEffect(() => {
AOS.init()
if (isMobile()) {
@@ -71,7 +34,8 @@ const MyApp = ({ Component, pageProps }) => {
return (
<GlobalContextProvider>
<Component {...pageProps} />
{externalPlugins}
<ExternalPlugins {...pageProps}/>
<ExternalScript/>
</GlobalContextProvider>
)
}

46
themes/index.js
View File

@@ -1,32 +1,32 @@
/**
* 切换主题请修改 blog.config.js 中的 THEME 字段
*/
import * as next from './next'
import * as fukasawa from './fukasawa'
import * as hexo from './hexo'
import * as medium from './medium'
import * as nobelium from './nobelium'
import * as matery from './matery'
import * as example from './example'
import * as simple from './simple'
// import * as next from './next'
// import * as fukasawa from './fukasawa'
// import * as medium from './medium'
// import * as nobelium from './nobelium'
// import * as matery from './matery'
// import * as example from './example'
// import * as simple from './simple'
export const ALL_THEME = [
'hexo',
'matery',
'next',
'medium',
'fukasawa',
'nobelium',
'example',
'simple'
'hexo'
// 'matery',
// 'next',
// 'medium',
// 'fukasawa',
// 'nobelium',
// 'example',
// 'simple'
]
export {
hexo,
next,
medium,
fukasawa,
nobelium,
matery,
example,
simple
hexo
// next,
// medium,
// fukasawa,
// nobelium,
// matery,
// example,
// simple
}