From aac5eac0fc91a939761a9481ad67626e3554f1d7 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Fri, 30 Jun 2023 23:24:55 +0800 Subject: [PATCH] blank-theme-with-daisy --- components/DebugPanel.js | 4 +- components/ThemeSwitch.js | 4 +- lib/global.js | 8 +-- next.config.js | 28 +++++++++- package.json | 1 + tailwind.config.js | 2 +- themes/blank/components/Carousel.js | 28 ++++++++++ themes/blank/components/ChatBubble.js | 28 ++++++++++ themes/blank/components/Divider.js | 7 +++ themes/blank/components/DropdownMenu.js | 10 ++++ themes/blank/components/Footer.js | 38 ++++++++++++++ themes/blank/components/Hero.js | 13 +++++ themes/blank/components/HeroWithFigure.js | 15 ++++++ themes/blank/components/HeroWithForm.js | 34 ++++++++++++ themes/blank/components/HeroWithImage.js | 19 +++++++ themes/blank/components/NavBar.js | 31 +++++++++++ themes/blank/index.js | 64 +++++++++++++++++++++++ themes/theme.js | 11 ++-- 18 files changed, 326 insertions(+), 19 deletions(-) create mode 100644 themes/blank/components/Carousel.js create mode 100644 themes/blank/components/ChatBubble.js create mode 100644 themes/blank/components/Divider.js create mode 100644 themes/blank/components/DropdownMenu.js create mode 100644 themes/blank/components/Footer.js create mode 100644 themes/blank/components/Hero.js create mode 100644 themes/blank/components/HeroWithFigure.js create mode 100644 themes/blank/components/HeroWithForm.js create mode 100644 themes/blank/components/HeroWithImage.js create mode 100644 themes/blank/components/NavBar.js create mode 100644 themes/blank/index.js diff --git a/components/DebugPanel.js b/components/DebugPanel.js index 4bbdbab9..c1c28ca5 100644 --- a/components/DebugPanel.js +++ b/components/DebugPanel.js @@ -2,7 +2,7 @@ import BLOG from '@/blog.config' import { useEffect, useState } from 'react' import Select from './Select' import { useGlobal } from '@/lib/global' -import { ALL_THEME } from '@/themes/theme' +import { THEMES } from '@/themes/theme' import { useRouter } from 'next/router' /** @@ -16,7 +16,7 @@ const DebugPanel = () => { const [siteConfig, updateSiteConfig] = useState({}) // 主题下拉框 - const themeOptions = ALL_THEME.map(t => ({ value: t, text: t })) + const themeOptions = THEMES.map(t => ({ value: t, text: t })) useEffect(() => { updateSiteConfig(Object.assign({}, BLOG)) diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js index 8fba9304..c7505d0b 100644 --- a/components/ThemeSwitch.js +++ b/components/ThemeSwitch.js @@ -1,7 +1,7 @@ import { useGlobal } from '@/lib/global' import React from 'react' import { Draggable } from './Draggable' -import { ALL_THEME } from '@/themes/theme' +import { THEMES } from '@/themes/theme' import { useRouter } from 'next/router' /** * @@ -27,7 +27,7 @@ const ThemeSwitch = () => { {/*
{theme}
*/} diff --git a/lib/global.js b/lib/global.js index a6e45b3f..21e215da 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 { useRouter } from 'next/router' import BLOG from '@/blog.config' -import { ALL_THEME, initDarkMode } from '@/themes/theme' +import { THEMES, initDarkMode } from '@/themes/theme' import NProgress from 'nprogress' import { getQueryVariable, isBrowser } from './utils' @@ -69,9 +69,9 @@ export function GlobalContextProvider({ children }) { // 切换主题 function switchTheme() { - const currentIndex = ALL_THEME.indexOf(theme) - const newIndex = currentIndex < ALL_THEME.length - 1 ? currentIndex + 1 : 0 - const newTheme = ALL_THEME[newIndex] + const currentIndex = THEMES.indexOf(theme) + const newIndex = currentIndex < THEMES.length - 1 ? currentIndex + 1 : 0 + const newTheme = THEMES[newIndex] const query = { ...router.query, theme: newTheme } router.push({ pathname: router.pathname, query }) return newTheme diff --git a/next.config.js b/next.config.js index a2618bf4..68cf8109 100644 --- a/next.config.js +++ b/next.config.js @@ -3,8 +3,30 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({ }) const { THEME } = require('./blog.config') +const fs = require('fs') const path = require('path') +/** + * 扫描指定目录下的文件夹名，用于获取当前有几个主题 + * @param {*} directory + * @returns + */ +function scanSubdirectories(directory) { + const subdirectories = [] + + fs.readdirSync(directory).forEach(file => { + const fullPath = path.join(directory, file) + const stats = fs.statSync(fullPath) + + if (stats.isDirectory()) { + subdirectories.push(file) + } + }) + + return subdirectories +} +// 扫描项目 /themes下的目录名 +const themes = scanSubdirectories(path.resolve(__dirname, 'themes')) module.exports = withBundleAnalyzer({ images: { // 图片压缩 @@ -68,10 +90,12 @@ module.exports = withBundleAnalyzer({ // }) // } - // console.log(path.resolve(__dirname, 'themes', THEME)) // 动态主题：添加 resolve.alias 配置，将动态路径映射到实际路径 config.resolve.alias['@theme-components'] = path.resolve(__dirname, 'themes', THEME) - return config + }, + publicRuntimeConfig: { // 这里的配置既可以服务端获取到，也可以在浏览器端获取到 + NODE_ENV_API: process.env.NODE_ENV_API || 'prod', + THEMES: themes } }) diff --git a/package.json b/package.json index 18527c97..ac8b2736 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "aos": "^3.0.0-beta.6", "axios": ">=0.21.1", "copy-to-clipboard": "^3.3.1", + "daisyui": "^3.1.7", "eslint-plugin-react-hooks": "^4.6.0", "feed": "^4.2.2", "js-md5": "^0.7.3", diff --git a/tailwind.config.js b/tailwind.config.js index 76f8e710..dab650db 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -29,5 +29,5 @@ module.exports = { variants: { extend: {} }, - plugins: [] + plugins: [require('daisyui')] } diff --git a/themes/blank/components/Carousel.js b/themes/blank/components/Carousel.js new file mode 100644 index 00000000..2241155c --- /dev/null +++ b/themes/blank/components/Carousel.js @@ -0,0 +1,28 @@ +/* eslint-disable @next/next/no-img-element */ +const Carousel = () => { + return
+
+ Pizza +
+
+ Pizza +
+
+ Pizza +
+
+ Pizza +
+
+ Pizza +
+
+ Pizza +
+
+ Pizza +
+
+} + +export default Carousel diff --git a/themes/blank/components/ChatBubble.js b/themes/blank/components/ChatBubble.js new file mode 100644 index 00000000..7636fb89 --- /dev/null +++ b/themes/blank/components/ChatBubble.js @@ -0,0 +1,28 @@ +/* eslint-disable react/no-unescaped-entities */ +const ChatBubble = () => { + return <> +
+
What kind of nonsense is this
+
+
+
Put me on the Council and not make me a Master!??
+
+
+
That's never been done in the history of the Jedi. It's insulting!
+
+
+
Calm down, Anakin.
+
+
+
You have been given a great honor.
+
+
+
To be on the Council at your age.
+
+
+
It's never happened before.
+
+ +} + +export default ChatBubble diff --git a/themes/blank/components/Divider.js b/themes/blank/components/Divider.js new file mode 100644 index 00000000..c0722a6b --- /dev/null +++ b/themes/blank/components/Divider.js @@ -0,0 +1,7 @@ +const Divider = () => { + return
+
+
+} + +export default Divider diff --git a/themes/blank/components/DropdownMenu.js b/themes/blank/components/DropdownMenu.js new file mode 100644 index 00000000..62bde71e --- /dev/null +++ b/themes/blank/components/DropdownMenu.js @@ -0,0 +1,10 @@ +const DropDownMenu = () => { + return
+ open or close + +
+} +export default DropDownMenu diff --git a/themes/blank/components/Footer.js b/themes/blank/components/Footer.js new file mode 100644 index 00000000..6081b231 --- /dev/null +++ b/themes/blank/components/Footer.js @@ -0,0 +1,38 @@ +const Footer = () => { + return +} + +export default Footer diff --git a/themes/blank/components/Hero.js b/themes/blank/components/Hero.js new file mode 100644 index 00000000..43c4bdc9 --- /dev/null +++ b/themes/blank/components/Hero.js @@ -0,0 +1,13 @@ +const Hero = () => { + return
+
+
+

Hello there

+

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

+ +
+
+
+} + +export default Hero diff --git a/themes/blank/components/HeroWithFigure.js b/themes/blank/components/HeroWithFigure.js new file mode 100644 index 00000000..daddcb44 --- /dev/null +++ b/themes/blank/components/HeroWithFigure.js @@ -0,0 +1,15 @@ +const HeroWithFigure = () => { + return
+
+ {/* eslint-disable-next-line @next/next/no-img-element */} + +
+

Box Office News!

+

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

+ +
+
+
+} + +export default HeroWithFigure diff --git a/themes/blank/components/HeroWithForm.js b/themes/blank/components/HeroWithForm.js new file mode 100644 index 00000000..160f8328 --- /dev/null +++ b/themes/blank/components/HeroWithForm.js @@ -0,0 +1,34 @@ +const HeroWithForm = () => { + return
+
+
+

Login now!

+

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

+
+
+
+
+ + +
+
+ + + +
+
+ +
+
+
+
+
+} + +export default HeroWithForm diff --git a/themes/blank/components/HeroWithImage.js b/themes/blank/components/HeroWithImage.js new file mode 100644 index 00000000..26a04da0 --- /dev/null +++ b/themes/blank/components/HeroWithImage.js @@ -0,0 +1,19 @@ +const HeroWithImage = () => { + return
+
+
+
+

Hello there

+

+ Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi. +

+ +
+
+
+} + +export default HeroWithImage diff --git a/themes/blank/components/NavBar.js b/themes/blank/components/NavBar.js new file mode 100644 index 00000000..8148b14c --- /dev/null +++ b/themes/blank/components/NavBar.js @@ -0,0 +1,31 @@ +const NavBar = () =>
+ +
+ {/* Navbar */} +
+
+ +
+
Navbar Title
+
+ +
+
+
+
+ + +
+
+ +export default NavBar diff --git a/themes/blank/index.js b/themes/blank/index.js new file mode 100644 index 00000000..6b817692 --- /dev/null +++ b/themes/blank/index.js @@ -0,0 +1,64 @@ +import NavBar from './components/NavBar' +import Hero from './components/Hero' +import Footer from './components/Footer' +import Divider from './components/Divider' +import HeroWithFigure from './components/HeroWithFigure' +import HeroWithForm from './components/HeroWithForm' +import HeroWithImage from './components/HeroWithImage' +import Carousel from './components/Carousel' +import ChatBubble from './components/ChatBubble' + +/** + * 这是一个空白主题的示例 + */ +const THEME_CONFIG = { THEME: 'blank' } +/** + * 主题框架 + * @param {*} props + * @returns + */ +const LayoutBase = (props) => { + const { children } = props + console.log('children', children) + return
+ + {children} +
+
+} + +const LayoutIndex = (props) => { + console.log('首页') + return + + + + + + + + +} +const LayoutSearch = () => <> +const LayoutArchive = () => <> +const LayoutSlug = () => <> +const Layout404 = () => <> +const LayoutCategory = () => <> +const LayoutCategoryIndex = () => <> +const LayoutPage = () => <> +const LayoutTag = () => <> +const LayoutTagIndex = () => <> + +export { + THEME_CONFIG, + LayoutIndex, + LayoutSearch, + LayoutArchive, + LayoutSlug, + Layout404, + LayoutCategory, + LayoutCategoryIndex, + LayoutPage, + LayoutTag, + LayoutTagIndex +} diff --git a/themes/theme.js b/themes/theme.js index 0214c1bc..89e8239f 100644 --- a/themes/theme.js +++ b/themes/theme.js @@ -2,15 +2,10 @@ import cookie from 'react-cookies' import BLOG from '@/blog.config' import { getQueryParam, getQueryVariable } from '../lib/utils' import dynamic from 'next/dynamic' -// 使用 __THEME__ 变量来动态导入主题组件 +import getConfig from 'next/config' import * as ThemeComponents from '@theme-components' -/** - * 所有主题枚举 - */ -export const ALL_THEME = [ - 'hexo', 'matery', 'next', 'medium', 'fukasawa', 'nobelium', 'example', 'simple', 'gitbook' -] - +// 所有主题在next.config.js中扫描 +export const { THEMES = [] } = getConfig().publicRuntimeConfig /** * 加载主题文件 * 如果是