From 09101daaab4acdcb3e16fc0f32213b20ad78800c Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 22 Mar 2022 12:38:47 +0800 Subject: [PATCH 1/6] =?UTF-8?q?=E5=B0=81=E8=A3=85theme=EF=BC=8C=E7=94=A8co?= =?UTF-8?q?okie=E4=BF=9D=E5=AD=98=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/DebugPanel.js | 21 +++------------------ components/ThemeSwitch.js | 24 +----------------------- lib/global.js | 21 +++++++++++++++++++-- lib/theme.js | 33 +++++++++++++++++++++++++++++++-- 4 files changed, 54 insertions(+), 45 deletions(-) diff --git a/components/DebugPanel.js b/components/DebugPanel.js index 40f82f54..b1623e50 100644 --- a/components/DebugPanel.js +++ b/components/DebugPanel.js @@ -1,19 +1,17 @@ import BLOG from '@/blog.config' -import { useGlobal } from '@/lib/global' import * as ThemeMap from '@/themes' import { useState } from 'react' -import { useRouter } from 'next/router' import Select from './Select' import { ALL_THEME } from '@/lib/theme' +import { useGlobal } from '@/lib/global' /** * * @returns 调试面板 */ export function DebugPanel () { const [show, setShow] = useState(false) - const GlobalConfig = useGlobal() - const router = useRouter() - const { theme, setTheme } = GlobalConfig + const { theme, changeTheme, switchTheme } = useGlobal() + const themeOptions = [] ALL_THEME.forEach(t => { themeOptions.push({ value: t, text: t }) @@ -23,19 +21,6 @@ export function DebugPanel () { setShow(!show) } - function switchTheme () { - const currentIndex = ALL_THEME.indexOf(theme) - const newIndex = currentIndex < ALL_THEME.length - 1 ? currentIndex + 1 : 0 - changeTheme(ALL_THEME[newIndex]) - } - /** - * 切换主题 - */ - function changeTheme (theme) { - router.query.theme = '' - setTheme(theme) - } - function filterResult (text) { switch (text) { case 'true': diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js index d4a10e7d..12d81812 100644 --- a/components/ThemeSwitch.js +++ b/components/ThemeSwitch.js @@ -1,33 +1,11 @@ import { useGlobal } from '@/lib/global' -import { useRouter } from 'next/router' -import { ALL_THEME } from '@/lib/theme' /** * * @returns 主题切换 */ export function ThemeSwitch () { - const GlobalConfig = useGlobal() - const router = useRouter() - const { theme, setTheme } = GlobalConfig - const themeOptions = [] - ALL_THEME.forEach(t => { - themeOptions.push({ value: t, text: t }) - }) - - function switchTheme () { - const currentIndex = ALL_THEME.indexOf(theme) - const newIndex = currentIndex < ALL_THEME.length - 1 ? currentIndex + 1 : 0 - changeTheme(ALL_THEME[newIndex]) - } - /** - * 切换主题 - */ - function changeTheme (theme) { - router.query.theme = '' - setTheme(theme) - } - + const { theme, switchTheme } = useGlobal() return (
diff --git a/lib/global.js b/lib/global.js index b146523f..8ca8deed 100644 --- a/lib/global.js +++ b/lib/global.js @@ -2,7 +2,7 @@ import { generateLocaleDict, initLocale } from './lang' import { createContext, useContext, useEffect, useState } from 'react' import Router from 'next/router' import BLOG from '@/blog.config' -import { ALL_THEME, initDarkMode } from '@/lib/theme' +import { ALL_THEME, initDarkMode, initTheme, saveThemeToCookies } from '@/lib/theme' const GlobalContext = createContext() let hasInit = false @@ -26,6 +26,22 @@ export function GlobalContextProvider ({ children }) { changeLoadingState(false) }) + function switchTheme () { + const currentIndex = ALL_THEME.indexOf(theme) + const newIndex = currentIndex < ALL_THEME.length - 1 ? currentIndex + 1 : 0 + changeTheme(ALL_THEME[newIndex]) + } + + function changeTheme (theme) { + Router.query.theme = '' + if (ALL_THEME.indexOf(theme) > -1) { + setTheme(theme) + } else { + setTheme(BLOG.THEME) + } + saveThemeToCookies(theme) + } + useEffect(() => { if (!hasInit) { const userTheme = getQueryVariable('theme') @@ -34,12 +50,13 @@ export function GlobalContextProvider ({ children }) { } initLocale(locale, updateLocale) initDarkMode(isDarkMode, updateDarkMode) + initTheme(theme, changeTheme) hasInit = true } }) return ( - + {children} ) diff --git a/lib/theme.js b/lib/theme.js index c8a8dffa..74af95d4 100644 --- a/lib/theme.js +++ b/lib/theme.js @@ -19,6 +19,19 @@ export const initDarkMode = (isDarkMode, updateDarkMode) => { } } +/** + * 从cookie中读取 用户默认主题 + * @param {*} theme + * @param {*} changeTheme + */ +export const initTheme = (theme, changeTheme) => { + const userTheme = loadThemeFromCookies() + console.log('默认主题', userTheme) + if (userTheme !== theme) { + changeTheme(userTheme) + } +} + /** * 是否优先深色模式 * @returns {*} @@ -37,10 +50,26 @@ export function isPreferDark () { } /** - * 读取默认主题 + * 读取深色模式 * @returns {*} */ export const loadDarkModeFromCookies = () => { + return cookie.load('darkMode') +} + +/** + * 保存深色模式 + * @param newTheme + */ +export const saveDarkModeToCookies = (newTheme) => { + cookie.save('darkMode', newTheme, { path: '/' }) +} + +/** + * 读取默认主题 + * @returns {*} + */ +export const loadThemeFromCookies = () => { return cookie.load('theme') } @@ -48,6 +77,6 @@ export const loadDarkModeFromCookies = () => { * 保存默认主题 * @param newTheme */ -export const saveDarkModeToCookies = (newTheme) => { +export const saveThemeToCookies = (newTheme) => { cookie.save('theme', newTheme, { path: '/' }) } From 758e6436e726041bbb5b65665bbc68d8229cc3e7 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 22 Mar 2022 12:44:00 +0800 Subject: [PATCH 2/6] =?UTF-8?q?empty=20=E4=B8=BB=E9=A2=98=E5=8A=A0?= =?UTF-8?q?=E5=85=A5=E7=9C=8B=E6=9D=BF=E5=AE=A0=E7=89=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/empty/LayoutBase.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/themes/empty/LayoutBase.js b/themes/empty/LayoutBase.js index 004a12e5..9bdf2c57 100644 --- a/themes/empty/LayoutBase.js +++ b/themes/empty/LayoutBase.js @@ -1,4 +1,5 @@ import CommonHead from '@/components/CommonHead' +import Live2D from '@/components/Live2D' import Link from 'next/link' /** @@ -28,8 +29,12 @@ const LayoutBase = props => {
{/* 内容主体 */}
-
{children}
+
{children}
+
+
+ +
) } From 88d1f9811634cf279e7bfb3f711790e64b1d8e78 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 22 Mar 2022 12:51:02 +0800 Subject: [PATCH 3/6] =?UTF-8?q?empty=E4=B8=BB=E9=A2=98=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/empty/LayoutBase.js | 30 +++++++++++++++------- themes/empty/LayoutIndex.js | 36 +++++++++++++++++++++++++- themes/empty/LayoutPage.js | 50 ++++++++++++++++++++++++++++++++++--- 3 files changed, 103 insertions(+), 13 deletions(-) diff --git a/themes/empty/LayoutBase.js b/themes/empty/LayoutBase.js index 9bdf2c57..ed2de109 100644 --- a/themes/empty/LayoutBase.js +++ b/themes/empty/LayoutBase.js @@ -1,7 +1,8 @@ import CommonHead from '@/components/CommonHead' import Live2D from '@/components/Live2D' import Link from 'next/link' - +import React from 'react' +import BLOG from '@/blog.config' /** * 基础布局 采用左右两侧布局，移动端使用顶部导航栏 @@ -10,6 +11,9 @@ import Link from 'next/link' */ const LayoutBase = props => { const { children, meta } = props + const d = new Date() + const currentYear = d.getFullYear() + const startYear = BLOG.SINCE && BLOG.SINCE !== currentYear && BLOG.SINCE + '-' return (
@@ -19,12 +23,6 @@ const LayoutBase = props => { 首页 - - 分类 - - - 标签 -
{/* 内容主体 */} @@ -32,9 +30,23 @@ const LayoutBase = props => {
{children}
- ) } diff --git a/themes/empty/LayoutIndex.js b/themes/empty/LayoutIndex.js index 39072ba2..817bcdfb 100644 --- a/themes/empty/LayoutIndex.js +++ b/themes/empty/LayoutIndex.js @@ -1,8 +1,20 @@ +import BLOG from '@/blog.config' +import { useGlobal } from '@/lib/global' import Link from 'next/link' +import { useRouter } from 'next/router' import LayoutBase from './LayoutBase' export const LayoutIndex = props => { - const { posts } = props + const { posts, postCount } = props + + const { locale } = useGlobal() + const router = useRouter() + const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE) + + const page = 1 + const showNext = page < totalPage && posts.length === BLOG.POSTS_PER_PAGE && posts.length < postCount + + const currentPage = +page return ( {posts.map(p => ( @@ -13,6 +25,28 @@ export const LayoutIndex = props => {
{p.summary}
))} + + ) } diff --git a/themes/empty/LayoutPage.js b/themes/empty/LayoutPage.js index 661a104b..2f5f795a 100644 --- a/themes/empty/LayoutPage.js +++ b/themes/empty/LayoutPage.js @@ -1,8 +1,52 @@ +import BLOG from '@/blog.config' +import { useGlobal } from '@/lib/global' +import Link from 'next/link' +import { useRouter } from 'next/router' import LayoutBase from './LayoutBase' export const LayoutPage = (props) => { const { page } = props - return - Page - {page} - + const { posts, postCount } = props + + const { locale } = useGlobal() + const router = useRouter() + const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE) + + const showNext = page < totalPage && posts.length === BLOG.POSTS_PER_PAGE && posts.length < postCount + + const currentPage = +page + return ( + + {posts.map(p => ( +
+ + {p.title} + +
{p.summary}
+
+ ))} + + + + ) } From 1a8e0fb505a7aee92a1b49209513b4cda742e994 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 22 Mar 2022 12:51:39 +0800 Subject: [PATCH 4/6] =?UTF-8?q?=E7=9C=8B=E6=9D=BF=20=E7=82=B9=E5=87=BB?= =?UTF-8?q?=E5=88=87=E6=8D=A2=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Live2D.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/Live2D.js b/components/Live2D.js index e82ee884..fa86636e 100644 --- a/components/Live2D.js +++ b/components/Live2D.js @@ -1,5 +1,6 @@ /* eslint-disable no-undef */ import BLOG from '@/blog.config' +import { useGlobal } from '@/lib/global' import { loadExternalResource } from '@/lib/utils' import { useEffect, useState } from 'react' @@ -8,6 +9,7 @@ export default function Live2D () { return <> } const [init, setInit] = useState() + const { switchTheme } = useGlobal() // if (typeof window !== 'undefined' && !hasLoad) { // initLive2D() @@ -21,7 +23,7 @@ export default function Live2D () { } }, [init]) - return + return } function initLive2D () { From 454388707baf74e8007ebc35eeee85030e4b2cbf Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 22 Mar 2022 16:21:10 +0800 Subject: [PATCH 5/6] =?UTF-8?q?fukasawa=20=E5=BE=AE=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/fukasawa/components/ArticleAround.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/fukasawa/components/ArticleAround.js b/themes/fukasawa/components/ArticleAround.js index efb6c09b..19b5990a 100644 --- a/themes/fukasawa/components/ArticleAround.js +++ b/themes/fukasawa/components/ArticleAround.js @@ -11,12 +11,12 @@ export default function ArticleAround ({ prev, next }) { } return
- + {prev.title} - {next.title} + {next.title} From 4f068dda40deba10a540d9cb197af3ae4fa14f18 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 22 Mar 2022 16:21:18 +0800 Subject: [PATCH 6/6] =?UTF-8?q?=E5=8E=BB=E6=8E=89=E5=A4=9A=E4=BD=99?= =?UTF-8?q?=E6=97=A5=E5=BF=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/theme.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/theme.js b/lib/theme.js index 74af95d4..30682f97 100644 --- a/lib/theme.js +++ b/lib/theme.js @@ -26,7 +26,6 @@ export const initDarkMode = (isDarkMode, updateDarkMode) => { */ export const initTheme = (theme, changeTheme) => { const userTheme = loadThemeFromCookies() - console.log('默认主题', userTheme) if (userTheme !== theme) { changeTheme(userTheme) }