Skip to content

Commit e791752

Browse files
tangly1024tangly1024
committed
async theme
1 parent 70ef50c commit e791752

File tree

23 files changed

+127
-136
lines changed

23 files changed

+127
-136
lines changed

‎components/DebugPanel.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import BLOG from '@/blog.config'
2-
import * as ThemeMap from '@/themes'
32
import { useEffect, useState } from 'react'
43
import Select from './Select'
5-
import { ALL_THEME } from '@/themes'
64
import { useGlobal } from '@/lib/global'
5+
import { ALL_THEME } from '@/lib/theme'
6+
77
/**
88
*
99
* @returns 调试面板
1010
*/
1111
const DebugPanel = () => {
1212
const [show, setShow] = useState(false)
13-
const { theme, changeTheme, switchTheme, locale } = useGlobal()
13+
const { changeTheme, switchTheme, locale } = useGlobal()
1414
const [siteConfig, updateSiteConfig] = useState({})
15-
const [themeConfig, updateThemeConfig] = useState({})
15+
// const [themeConfig, updateThemeConfig] = useState({})
1616
const [debugTheme, updateDebugTheme] = useState(BLOG.THEME)
1717

1818
// 主题下拉框
@@ -21,7 +21,7 @@ const DebugPanel = () => {
2121
useEffect(() => {
2222
changeTheme(BLOG.THEME)
2323
updateSiteConfig(Object.assign({}, BLOG))
24-
updateThemeConfig(Object.assign({}, ThemeMap[BLOG.THEME].THEME_CONFIG))
24+
// updateThemeConfig(Object.assign({}, ThemeMap[BLOG.THEME].THEME_CONFIG))
2525
}, [])
2626

2727
function toggleShow() {
@@ -30,13 +30,13 @@ const DebugPanel = () => {
3030

3131
function handleChangeDebugTheme() {
3232
const newTheme = switchTheme()
33-
updateThemeConfig(Object.assign({}, ThemeMap[newTheme].THEME_CONFIG))
33+
// updateThemeConfig(Object.assign({}, ThemeMap[newTheme].THEME_CONFIG))
3434
updateDebugTheme(newTheme)
3535
}
3636

3737
function handleUpdateDebugTheme(e) {
3838
changeTheme(e)
39-
updateThemeConfig(Object.assign({}, ThemeMap[theme].THEME_CONFIG))
39+
// updateThemeConfig(Object.assign({}, ThemeMap[theme].THEME_CONFIG))
4040
updateDebugTheme(e)
4141
}
4242

@@ -90,7 +90,7 @@ const DebugPanel = () => {
9090
</div>
9191

9292
<div>
93-
<div>
93+
{/* <div>
9494
<div className="font-bold w-18 border-b my-2">
9595
主题配置{`config_${debugTheme}.js`}:
9696
</div>
@@ -106,7 +106,7 @@ const DebugPanel = () => {
106106
</div>
107107
))}
108108
</div>
109-
</div>
109+
</div> */}
110110
<div className="font-bold w-18 border-b my-2">
111111
站点配置[blog.config.js]
112112
</div>

‎components/Live2D.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,10 @@ export default function Live2D() {
99

1010
useEffect(() => {
1111
if (BLOG.WIDGET_PET) {
12-
// setLive2DLoaded(true)
13-
// console.log('加载宠物挂件')
1412
Promise.all([
1513
loadExternalResource('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js', 'js')
1614
]).then((e) => {
17-
if (window?.loadlive2d) {
15+
if (typeof window?.loadlive2d !== 'undefined') {
1816
// https://github.com/xiazeyu/live2d-widget-models
1917
loadlive2d('live2d', BLOG.WIDGET_PET_LINK)
2018
}

‎components/Loading.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
* 主题文件被加载出之前的占位符
3+
* @returns
4+
*/
5+
const Loading = () => {
6+
return <div className="w-screen h-screen flex justify-center items-center">
7+
<h1>Loading... <i className='ml-2 fas fa-spinner animate-spin' /></h1>
8+
</div>
9+
}
10+
export default Loading

‎components/ThemeSwitch.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useGlobal } from '@/lib/global'
2-
import { ALL_THEME } from '@/themes'
32
import React from 'react'
43
import { Draggable } from './Draggable'
4+
import { ALL_THEME } from '@/lib/theme'
55
/**
66
*
77
* @returns 主题切换

‎jsconfig.json

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"paths": {
55
"@/*": ["./*"],
66
"@/components/*": ["components/*"],
7+
"@/theme/*": ["theme/*"],
78
"@/data/*": ["data/*"],
89
"@/lib/*": ["lib/*"],
910
"@/styles/*": ["styles/*"]

‎lib/global.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import { generateLocaleDict, initLocale } from './lang'
22
import { createContext, useContext, useEffect, useState } from 'react'
33
import Router, { useRouter } from 'next/router'
44
import BLOG from '@/blog.config'
5-
import { initDarkMode, initTheme, saveThemeToCookies } from '@/lib/theme'
6-
import { ALL_THEME } from '@/themes'
5+
import { ALL_THEME, initDarkMode, initTheme, saveThemeToCookies } from '@/lib/theme'
76
import NProgress from 'nprogress'
87

98
const GlobalContext = createContext()

‎lib/theme.js

+14-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,21 @@
11
import cookie from 'react-cookies'
22
import BLOG from '@/blog.config'
3-
import { ALL_THEME } from '@/themes'
43
import { isBrowser, getQueryVariable } from './utils'
54

5+
/**
6+
* 所有主题枚举
7+
*/
8+
export const ALL_THEME = [
9+
'hexo',
10+
'matery',
11+
'next',
12+
'medium',
13+
'fukasawa',
14+
'nobelium',
15+
'example',
16+
'simple'
17+
]
18+
619
/**
720
* 初始化主题 , 优先级 query > cookies > systemPrefer
821
* @param isDarkMode

‎pages/404.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
2-
import * as ThemeMap from '@/themes'
32
import { useGlobal } from '@/lib/global'
3+
import dynamic from 'next/dynamic'
4+
import Loading from '@/components/Loading'
45

56
/**
67
* 404
@@ -9,9 +10,9 @@ import { useGlobal } from '@/lib/global'
910
*/
1011
const NoFound = props => {
1112
const { theme, siteInfo } = useGlobal()
12-
const ThemeComponents = ThemeMap[theme]
1313
const meta = { title: `${props?.siteInfo?.title} | 页面找不到啦`, image: siteInfo?.pageCover }
14-
return <ThemeComponents.Layout404 {...props} meta={meta}/>
14+
const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: false, loading: () => <Loading /> })
15+
return <Layout404 {...props} meta={meta}/>
1516
}
1617

1718
export async function getStaticProps () {

‎pages/[...slug].js

+14-13
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@ import BLOG from '@/blog.config'
22
import { getPostBlocks } from '@/lib/notion'
33
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
44
import { useGlobal } from '@/lib/global'
5-
import * as ThemeMap from '@/themes'
6-
import React from 'react'
5+
import { useEffect, useState } from 'react'
76
import { idToUuid } from 'notion-utils'
8-
import Router from 'next/router'
7+
import { useRouter } from 'next/router'
98
import { isBrowser } from '@/lib/utils'
109
import { getNotion } from '@/lib/notion/getNotion'
1110
import { getPageTableOfContents } from '@/lib/notion/getPageTableOfContents'
1211
import md5 from 'js-md5'
12+
import dynamic from 'next/dynamic'
13+
import Loading from '@/components/Loading'
1314

1415
/**
1516
* 根据notion的slug访问页面
@@ -18,14 +19,14 @@ import md5 from 'js-md5'
1819
*/
1920
const Slug = props => {
2021
const { theme, changeLoadingState } = useGlobal()
21-
const ThemeComponents = ThemeMap[theme]
2222
const { post, siteInfo } = props
23-
const router = Router.useRouter()
23+
const router = useRouter()
2424

2525
// 文章锁🔐
26-
const [lock, setLock] = React.useState(post?.password && post?.password !== '')
26+
const [lock, setLock] = useState(post?.password && post?.password !== '')
27+
const LayoutSlug = dynamic(() => import(`@/themes/${theme}/LayoutSlug`).then(async (m) => { return m.LayoutSlug }), { ssr: false, loading: () => <Loading /> })
2728

28-
React.useEffect(() => {
29+
useEffect(() => {
2930
changeLoadingState(false)
3031
if (post?.password && post?.password !== '') {
3132
setLock(true)
@@ -37,6 +38,9 @@ const Slug = props => {
3738

3839
setLock(false)
3940
}
41+
router.events.on('routeChangeComplete', () => {
42+
window.scrollTo({ top: 0, behavior: 'smooth' })
43+
})
4044
}, [post])
4145

4246
if (!post) {
@@ -51,7 +55,8 @@ const Slug = props => {
5155
}
5256
}, 8 * 1000) // 404时长 8秒
5357
const meta = { title: `${props?.siteInfo?.title || BLOG.TITLE} | loading`, image: siteInfo?.pageCover || BLOG.HOME_BANNER_IMAGE }
54-
return <ThemeComponents.LayoutSlug {...props} showArticleInfo={true} meta={meta} />
58+
59+
return <LayoutSlug {...props} showArticleInfo={true} meta={meta} />
5560
}
5661

5762
/**
@@ -80,12 +85,8 @@ const Slug = props => {
8085
tags: post?.tags
8186
}
8287

83-
Router.events.on('routeChangeComplete', () => {
84-
window.scrollTo({ top: 0, behavior: 'smooth' })
85-
})
86-
8788
return (
88-
<ThemeComponents.LayoutSlug {...props} showArticleInfo={true} meta={meta} />
89+
<LayoutSlug {...props} showArticleInfo={true} meta={meta} />
8990
)
9091
}
9192

‎pages/archive/index.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
22
import React from 'react'
33
import { useGlobal } from '@/lib/global'
4-
import * as ThemeMap from '@/themes'
4+
import dynamic from 'next/dynamic'
55
import BLOG from '@/blog.config'
6+
import Loading from '@/components/Loading'
67

78
const ArchiveIndex = props => {
89
const { theme, locale } = useGlobal()
9-
const ThemeComponents = ThemeMap[theme]
1010
const { siteInfo } = props
1111
const meta = {
1212
title: `${locale.NAV.ARCHIVE} | ${siteInfo?.title}`,
@@ -16,7 +16,8 @@ const ArchiveIndex = props => {
1616
type: 'website'
1717
}
1818

19-
return <ThemeComponents.LayoutArchive {...props} meta={meta} />
19+
const LayoutArchive = dynamic(() => import(`@/themes/${theme}/LayoutArchive`).then(async (m) => { return m.LayoutArchive }), { ssr: false, loading: () => <Loading /> })
20+
return <LayoutArchive {...props} meta={meta} />
2021
}
2122

2223
export async function getStaticProps() {

‎pages/category/[category]/index.js

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
22
import React from 'react'
33
import { useGlobal } from '@/lib/global'
4-
import * as ThemeMap from '@/themes'
4+
import dynamic from 'next/dynamic'
55
import BLOG from '@/blog.config'
6+
import Loading from '@/components/Loading'
67

78
/**
89
* 分类页
@@ -11,11 +12,11 @@ import BLOG from '@/blog.config'
1112
*/
1213
export default function Category(props) {
1314
const { theme } = useGlobal()
14-
const ThemeComponents = ThemeMap[theme]
1515
const { siteInfo, posts } = props
1616
const { locale } = useGlobal()
1717
if (!posts) {
18-
return <ThemeComponents.Layout404 {...props} />
18+
const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: false, loading: () => <Loading /> })
19+
return <Layout404 {...props} />
1920
}
2021
const meta = {
2122
title: `${props.category} | ${locale.COMMON.CATEGORY} | ${
@@ -26,7 +27,9 @@ export default function Category(props) {
2627
image: siteInfo?.pageCover,
2728
type: 'website'
2829
}
29-
return <ThemeComponents.LayoutCategory {...props} meta={meta} />
30+
31+
const LayoutCategory = dynamic(() => import(`@/themes/${theme}/LayoutCategory`).then(async (m) => { return m.LayoutCategory }), { ssr: false, loading: () => <Loading /> })
32+
return <LayoutCategory {...props} meta={meta} />
3033
}
3134

3235
export async function getStaticProps({ params: { category } }) {

‎pages/category/[category]/page/[page].js

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
22
import React from 'react'
33
import { useGlobal } from '@/lib/global'
4-
import * as ThemeMap from '@/themes'
4+
import dynamic from 'next/dynamic'
55
import BLOG from '@/blog.config'
6+
import Loading from '@/components/Loading'
67

78
/**
89
* 分类页
@@ -11,11 +12,11 @@ import BLOG from '@/blog.config'
1112
*/
1213
export default function Category(props) {
1314
const { theme } = useGlobal()
14-
const ThemeComponents = ThemeMap[theme]
1515
const { siteInfo, posts } = props
1616
const { locale } = useGlobal()
1717
if (!posts) {
18-
return <ThemeComponents.Layout404 {...props} />
18+
const Layout404 = dynamic(() => import(`@/themes/${theme}/Layout404`).then(async (m) => { return m.Layout404 }), { ssr: false, loading: () => <Loading /> })
19+
return <Layout404 {...props} />
1920
}
2021
const meta = {
2122
title: `${props.category} | ${locale.COMMON.CATEGORY} | ${
@@ -26,7 +27,9 @@ export default function Category(props) {
2627
image: siteInfo?.pageCover,
2728
type: 'website'
2829
}
29-
return <ThemeComponents.LayoutCategory {...props} meta={meta} />
30+
31+
const LayoutCategory = dynamic(() => import(`@/themes/${theme}/LayoutCategory`).then(async (m) => { return m.LayoutCategory }), { ssr: false, loading: () => <Loading /> })
32+
return <LayoutCategory {...props} meta={meta} />
3033
}
3134

3235
export async function getStaticProps({ params: { category, page } }) {

‎pages/category/index.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
22
import React from 'react'
33
import { useGlobal } from '@/lib/global'
4-
import * as ThemeMap from '@/themes'
4+
import dynamic from 'next/dynamic'
55
import BLOG from '@/blog.config'
66

77
/**
@@ -11,7 +11,6 @@ import BLOG from '@/blog.config'
1111
*/
1212
export default function Category(props) {
1313
const { theme } = useGlobal()
14-
const ThemeComponents = ThemeMap[theme]
1514
const { locale } = useGlobal()
1615
const { siteInfo } = props
1716
const meta = {
@@ -21,7 +20,8 @@ export default function Category(props) {
2120
slug: 'category',
2221
type: 'website'
2322
}
24-
return <ThemeComponents.LayoutCategoryIndex {...props} meta={meta} />
23+
const LayoutCategoryIndex = dynamic(() => import(`@/themes/${theme}/LayoutCategoryIndex`).then(async (m) => { return m.LayoutCategoryIndex }), { ssr: false })
24+
return <LayoutCategoryIndex {...props} meta={meta} />
2525
}
2626

2727
export async function getStaticProps() {

‎pages/index.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import BLOG from '@/blog.config'
22
import { getPostBlocks } from '@/lib/notion'
33
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
4-
import * as ThemeMap from '@/themes'
54
import { useGlobal } from '@/lib/global'
65
import { generateRss } from '@/lib/rss'
76
import { generateRobotsTxt } from '@/lib/robots.txt'
7+
import dynamic from 'next/dynamic'
8+
import Loading from '@/components/Loading'
89

910
/**
1011
* 首页布局
@@ -13,8 +14,10 @@ import { generateRobotsTxt } from '@/lib/robots.txt'
1314
*/
1415
const Index = props => {
1516
const { theme } = useGlobal()
16-
const ThemeComponents = ThemeMap[theme]
17-
return <ThemeComponents.LayoutIndex {...props} />
17+
const LayoutIndex = dynamic(() => import(`@/themes/${theme}/LayoutIndex`)
18+
.then(async (m) => { return m.LayoutIndex }), { ssr: false, loading: () => <Loading /> }
19+
)
20+
return <LayoutIndex {...props} />
1821
}
1922

2023
/**

0 commit comments

Comments
 (0)