Starter 主题

blog.config.js

@@ -91,6 +91,30 @@ const BLOG = {
   FONT_AWESOME: process.env.NEXT_PUBLIC_FONT_AWESOME_PATH || 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css', // font-awesome 字体图标地址; 可选 /css/all.min.css ， https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css
 
   // END ************网站字体*****************
+
+  // 路径和组件映射，不同路径分别展示主题的什么组件
+  LAYOUT_MAPPINGS: {
+    '-1': 'LayoutBase',
+    '/': 'LayoutIndex',
+    '/archive': 'LayoutArchive',
+    '/page/[page]': 'LayoutPostList',
+    '/category/[category]': 'LayoutPostList',
+    '/category/[category]/page/[page]': 'LayoutPostList',
+    '/tag/[tag]': 'LayoutPostList',
+    '/tag/[tag]/page/[page]': 'LayoutPostList',
+    '/search': 'LayoutSearch',
+    '/search/[keyword]': 'LayoutSearch',
+    '/search/[keyword]/page/[page]': 'LayoutSearch',
+    '/404': 'Layout404',
+    '/tag': 'LayoutTagIndex',
+    '/category': 'LayoutCategoryIndex',
+    '/[prefix]': 'LayoutSlug',
+    '/[prefix]/[slug]': 'LayoutSlug',
+    '/[prefix]/[slug]/[...suffix]': 'LayoutSlug',
+    '/signin': 'LayoutSignIn',
+    '/signup': 'LayoutSignUp'
+  },
+
   CAN_COPY: process.env.NEXT_PUBLIC_CAN_COPY || true, // 是否允许复制页面内容 默认允许，如果设置为false、则全栈禁止复制内容。
   CUSTOM_RIGHT_CLICK_CONTEXT_MENU: process.env.NEXT_PUBLIC_CUSTOM_RIGHT_CLICK_CONTEXT_MENU || true, // 自定义右键菜单，覆盖系统菜单
   CUSTOM_RIGHT_CLICK_CONTEXT_MENU_THEME_SWITCH: process.env.NEXT_PUBLIC_CUSTOM_RIGHT_CLICK_CONTEXT_MENU_THEME_SWITCH || true,
@@ -154,6 +178,8 @@ const BLOG = {
   POSTS_PER_PAGE: 12, // post counts per page
   POSTS_SORT_BY: process.env.NEXT_PUBLIC_POST_SORT_BY || 'notion', // 排序方式 'date'按时间,'notion'由notion控制
 
+  POST_WAITING_TIME_FOR_404: process.env.NEXT_PUBLIC_POST_WAITING_TIME_FOR_404 || '8', // 文章加载超时时间，单位秒；超时后跳转到404页面
+
   ALGOLIA_APP_ID: process.env.NEXT_PUBLIC_ALGOLIA_APP_ID || null, // 在这里查看 https://dashboard.algolia.com/account/api-keys/
   ALGOLIA_ADMIN_APP_KEY: process.env.ALGOLIA_ADMIN_APP_KEY || null, // 管理后台的KEY，不要暴露在代码中，在这里查看 https://dashboard.algolia.com/account/api-keys/
   ALGOLIA_SEARCH_ONLY_APP_KEY: process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_ONLY_APP_KEY || null, // 客户端搜索用的KEY

components/CustomContextMenu.js

@@ -2,7 +2,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useState, useRef, useLayoutEffect } from 'react'
 import { useGlobal } from '@/lib/global'
-import { saveDarkModeToCookies, THEMES } from '@/themes/theme'
+import { saveDarkModeToLocalStorage, THEMES } from '@/themes/theme'
 import useWindowSize from '@/hooks/useWindowSize'
 import { siteConfig } from '@/lib/config'
 
@@ -122,7 +122,7 @@ export default function CustomContextMenu(props) {
 
   function handleChangeDarkMode() {
     const newStatus = !isDarkMode
-    saveDarkModeToCookies(newStatus)
+    saveDarkModeToLocalStorage(newStatus)
     updateDarkMode(newStatus)
     const htmlElement = document.getElementsByTagName('html')[0]
     htmlElement.classList?.remove(newStatus ? 'light' : 'dark')

components/ThemeSwitch.js

@@ -38,7 +38,7 @@ const ThemeSwitch = () => {
 
   return (<>
         <Draggable>
-            <div id="draggableBox" style={{ left: '0px', top: '80vh' }} className="fixed group space-y-2 overflow-hidden z-50 p-3 flex flex-col items-start dark:text-white bg-gray-50 dark:bg-black rounded-xl shadow-lg border dark:border-gray-800">
+            <div id="draggableBox" style={{ left: '0px', top: '80vh' }} className="fixed group space-y-2 overflow-hidden z-50 p-3 flex flex-col items-start dark:text-white bg-white dark:bg-black rounded-xl shadow-lg ">
                 {/* 深色按钮 */}
                 <div className="text-sm flex items-center w-0 group-hover:w-32 transition-all duration-200">
                     <DarkModeButton />

lib/global.js

@@ -1,7 +1,7 @@
-import { generateLocaleDict, initLocale, saveLangToCookies } from './lang'
+import { generateLocaleDict, initLocale, saveLangToLocalStorage } from './lang'
 import { createContext, useContext, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
-import { THEMES, initDarkMode, saveDarkModeToCookies } from '@/themes/theme'
+import { THEMES, initDarkMode, saveDarkModeToLocalStorage } from '@/themes/theme'
 import { APPEARANCE, LANG, THEME } from 'blog.config'
 const GlobalContext = createContext()
 
@@ -38,7 +38,7 @@ export function GlobalContextProvider(props) {
   // 切换深色模式
   const toggleDarkMode = () => {
     const newStatus = !isDarkMode
-    saveDarkModeToCookies(newStatus)
+    saveDarkModeToLocalStorage(newStatus)
     updateDarkMode(newStatus)
     const htmlElement = document.getElementsByTagName('html')[0]
     htmlElement.classList?.remove(newStatus ? 'light' : 'dark')
@@ -50,7 +50,7 @@ export function GlobalContextProvider(props) {
    */
   function changeLang(lang) {
     if (lang) {
-      saveLangToCookies(lang)
+      saveLangToLocalStorage(lang)
       updateLang(lang)
       updateLocale(generateLocaleDict(lang))
     }

lib/lang.js

@@ -5,7 +5,6 @@ import zhTW from './lang/zh-TW'
 import frFR from './lang/fr-FR'
 import trTR from './lang/tr-TR'
 import jaJP from './lang/ja-JP'
-import cookie from 'react-cookies'
 import { getQueryVariable, isBrowser, mergeDeep } from './utils'
 
 /**
@@ -65,14 +64,14 @@ export function generateLocaleDict(langString) {
  */
 export function initLocale(lang, locale, changeLang, changeLocale) {
   if (isBrowser) {
-    const queryLang = getQueryVariable('lang') || loadLangFromCookies()
+    const queryLang = getQueryVariable('lang') || loadLangFromLocalStorage()
     let currentLang = lang
     if (queryLang && queryLang !== 'undefined' && queryLang !== lang) {
       currentLang = queryLang
     }
 
     changeLang(currentLang)
-    saveLangToCookies(currentLang)
+    saveLangToLocalStorage(currentLang)
 
     const targetLocale = generateLocaleDict(currentLang)
     if (JSON.stringify(locale) !== JSON.stringify(currentLang)) {
@@ -84,14 +83,14 @@ export function initLocale(lang, locale, changeLang, changeLocale) {
  * 读取语言
  * @returns {*}
  */
-export const loadLangFromCookies = () => {
-  return cookie.load('lang')
+export const loadLangFromLocalStorage = () => {
+  return localStorage.getItem('lang')
 }
 
 /**
  * 保存语言
  * @param newTheme
  */
-export const saveLangToCookies = (lang) => {
-  cookie.save('lang', lang, { path: '/' })
+export const saveLangToLocalStorage = (lang) => {
+  localStorage.setItem('lang', lang)
 }

package.json

@@ -43,7 +43,6 @@
         "preact": "^10.5.15",
         "prism-themes": "1.9.0",
         "react": "^18.2.0",
-        "react-cookies": "^0.1.1",
         "react-dom": "^18.2.0",
         "react-facebook": "^8.1.4",
         "react-notion-x": "6.16.0",
@@ -75,4 +74,4 @@
         "url": "https://github.com/tangly/NotionNext/issues",
         "email": "tlyong1992@hotmail.com"
     }
-}
+}

pages/[prefix]/index.js

@@ -8,7 +8,7 @@ import { getNotion } from '@/lib/notion/getNotion'
 import { getPageTableOfContents } from '@/lib/notion/getPageTableOfContents'
 import { getLayoutByTheme } from '@/themes/theme'
 import md5 from 'js-md5'
-import { checkContainHttp, isBrowser } from '@/lib/utils'
+import { checkContainHttp } from '@/lib/utils'
 import { uploadDataToAlgolia } from '@/lib/algolia'
 import { siteConfig } from '@/lib/config'
 
@@ -20,7 +20,6 @@ import { siteConfig } from '@/lib/config'
  */
 const Slug = props => {
   const { post } = props
-  const router = useRouter()
 
   // 文章锁🔐
   const [lock, setLock] = useState(post?.password && post?.password !== '')
@@ -40,20 +39,6 @@ const Slug = props => {
 
   // 文章加载
   useEffect(() => {
-    // 404
-    if (!post) {
-      setTimeout(() => {
-        if (isBrowser) {
-          const article = document.getElementById('notion-article')
-          if (!article) {
-            router.push('/404').then(() => {
-              console.warn('找不到页面', router.asPath)
-            })
-          }
-        }
-      }, 8 * 1000) // 404时长 8秒
-    }
-
     // 文章加密
     if (post?.password && post?.password !== '') {
       setLock(true)

pages/signin.js

@@ -0,0 +1,29 @@
+import BLOG from '@/blog.config'
+import { getGlobalData } from '@/lib/notion/getNotionData'
+import { useRouter } from 'next/router'
+import { getLayoutByTheme } from '@/themes/theme'
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 登录
+ * @param {*} props
+ * @returns
+ */
+const SignIn = props => {
+  // 根据页面路径加载不同Layout文件
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
+  return <Layout {...props} />
+}
+
+export async function getStaticProps() {
+  const from = 'SignIn'
+  const props = await getGlobalData({ from })
+
+  delete props.allPages
+  return {
+    props,
+    revalidate: parseInt(BLOG.NEXT_REVALIDATE_SECOND)
+  }
+}
+
+export default SignIn

pages/signup.js

@@ -0,0 +1,29 @@
+import BLOG from '@/blog.config'
+import { getGlobalData } from '@/lib/notion/getNotionData'
+import { useRouter } from 'next/router'
+import { getLayoutByTheme } from '@/themes/theme'
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 注册
+ * @param {*} props
+ * @returns
+ */
+const SignUp = props => {
+  // 根据页面路径加载不同Layout文件
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
+  return <Layout {...props} />
+}
+
+export async function getStaticProps() {
+  const from = 'SignIn'
+  const props = await getGlobalData({ from })
+
+  delete props.allPages
+  return {
+    props,
+    revalidate: parseInt(BLOG.NEXT_REVALIDATE_SECOND)
+  }
+}
+
+export default SignUp