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/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 () { 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..30682f97 100644 --- a/lib/theme.js +++ b/lib/theme.js @@ -19,6 +19,18 @@ export const initDarkMode = (isDarkMode, updateDarkMode) => { } } +/** + * 从cookie中读取 用户默认主题 + * @param {*} theme + * @param {*} changeTheme + */ +export const initTheme = (theme, changeTheme) => { + const userTheme = loadThemeFromCookies() + if (userTheme !== theme) { + changeTheme(userTheme) + } +} + /** * 是否优先深色模式 * @returns {*} @@ -37,10 +49,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 +76,6 @@ export const loadDarkModeFromCookies = () => { * 保存默认主题 * @param newTheme */ -export const saveDarkModeToCookies = (newTheme) => { +export const saveThemeToCookies = (newTheme) => { cookie.save('theme', newTheme, { path: '/' }) } diff --git a/themes/empty/LayoutBase.js b/themes/empty/LayoutBase.js index 004a12e5..ed2de109 100644 --- a/themes/empty/LayoutBase.js +++ b/themes/empty/LayoutBase.js @@ -1,6 +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' /** * 基础布局 采用左右两侧布局，移动端使用顶部导航栏 @@ -9,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 (
@@ -18,18 +23,30 @@ const LayoutBase = props => { 首页 - - 分类 - - - 标签 -
{/* 内容主体 */}
-
{children}
+
{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}
+
+ ))} + + + + ) } 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}