From 32621f30658f12b464aad2f7a10586cc083bbdaa Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Mon, 19 Feb 2024 19:17:29 +0800 Subject: [PATCH] starter theme --- themes/starter/components/Features.js | 219 ++++++------------ themes/starter/components/Hero.js | 44 ++-- themes/starter/components/Logo.js | 37 +-- themes/starter/components/NavBar.js | 4 +- themes/starter/components/{ => svg}/SVG404.js | 0 themes/starter/components/svg/SVGDesign.js | 46 ++++ themes/starter/components/svg/SVGEssential.js | 26 +++ themes/starter/components/svg/SVGGifts.js | 14 ++ .../components/{ => svg}/SVGPlayAstro.js | 8 +- .../components/{ => svg}/SVGPlayBoostrap.js | 8 +- .../components/{ => svg}/SVGPlayNext.js | 8 +- .../components/{ => svg}/SVGPlayReact.js | 8 +- .../components/{ => svg}/SVGPlayTailWind.js | 8 +- themes/starter/components/svg/SVGTemplate.js | 14 ++ themes/starter/config.js | 36 ++- themes/starter/index.js | 2 +- 16 files changed, 261 insertions(+), 221 deletions(-) rename themes/starter/components/{ => svg}/SVG404.js (100%) create mode 100644 themes/starter/components/svg/SVGDesign.js create mode 100644 themes/starter/components/svg/SVGEssential.js create mode 100644 themes/starter/components/svg/SVGGifts.js rename themes/starter/components/{ => svg}/SVGPlayAstro.js (90%) rename themes/starter/components/{ => svg}/SVGPlayBoostrap.js (91%) rename themes/starter/components/{ => svg}/SVGPlayNext.js (91%) rename themes/starter/components/{ => svg}/SVGPlayReact.js (96%) rename themes/starter/components/{ => svg}/SVGPlayTailWind.js (88%) create mode 100644 themes/starter/components/svg/SVGTemplate.js diff --git a/themes/starter/components/Features.js b/themes/starter/components/Features.js index 4d40114b..c3306746 100644 --- a/themes/starter/components/Features.js +++ b/themes/starter/components/Features.js @@ -1,208 +1,129 @@ +import CONFIG from '../config' +import { siteConfig } from '@/lib/config'; +import { SVGGifts } from './svg/SVGGifts'; +import { SVGTemplate } from './svg/SVGTemplate'; +import { SVGDesign } from './svg/SVGDesign'; +import { SVGEssential } from './svg/SVGEssential'; +/** + * 产品特性相关，将显示在首页中 + * @returns + */ export const Features = () => { return <> {/* */} -
-
-
-
-
- - Features +
+
+
+
+
+ + {siteConfig('STARTER_FEATURE_TITLE', null, CONFIG)}

- Main Features Of Play + {siteConfig('STARTER_FEATURE_TEXT_1', null, CONFIG)}

-

- There are many variations of passages of Lorem Ipsum available - but the majority have suffered alteration in some form. +

+ {siteConfig('STARTER_FEATURE_TEXT_2', null, CONFIG)}

-
-
-
+
+
+
- - - +
-

- Free and Open-Source +

+ {siteConfig('STARTER_FEATURE_1_TITLE_1', null, CONFIG)}

-

- Lorem Ipsum is simply dummy text of the printing and industry. +

+ {siteConfig('STARTER_FEATURE_1_TEXT_1', null, CONFIG)}

- Learn More + {siteConfig('STARTER_FEATURE_1_BUTTON_TEXT', null, CONFIG)}
-
-
+
+
- - - +
-

- Multipurpose Template +

+ {siteConfig('STARTER_FEATURE_2_TITLE_1', null, CONFIG)}

-

- Lorem Ipsum is simply dummy text of the printing and industry. +

+ {siteConfig('STARTER_FEATURE_2_TEXT_1', null, CONFIG)}

- Learn More + {siteConfig('STARTER_FEATURE_2_BUTTON_TEXT', null, CONFIG)}
-
-
+
+
- - - - - - - - - - - +
-

- High-quality Design +

+ {siteConfig('STARTER_FEATURE_3_TITLE_1', null, CONFIG)}

-

- Lorem Ipsum is simply dummy text of the printing and industry. +

+ {siteConfig('STARTER_FEATURE_3_TEXT_1', null, CONFIG)}

- Learn More + {siteConfig('STARTER_FEATURE_3_BUTTON_TEXT', null, CONFIG)}
-
-
+
+
- - - - - - +
-

- All Essential Elements +

+ {siteConfig('STARTER_FEATURE_4_TITLE_1', null, CONFIG)}

-

- Lorem Ipsum is simply dummy text of the printing and industry. +

+ {siteConfig('STARTER_FEATURE_4_TEXT_1', null, CONFIG)}

- Learn More + {siteConfig('STARTER_FEATURE_3_BUTTON_TEXT', null, CONFIG)}
diff --git a/themes/starter/components/Hero.js b/themes/starter/components/Hero.js index a4889f54..ad49776e 100644 --- a/themes/starter/components/Hero.js +++ b/themes/starter/components/Hero.js @@ -1,10 +1,10 @@ import { siteConfig } from '@/lib/config' import CONFIG from '../config' -import SVGPlayBootstrap from './SVGPlayBoostrap' -import SVGPlayTailwind from './SVGPlayTailWind' -import SVGPlayReact from './SVGPlayReact' -import SVGPlayAstro from './SVGPlayAstro' -import SVGPlayNext from './SVGPlayNext' +import SVGPlayBootstrap from './svg/SVGPlayBoostrap' +import SVGPlayTailwind from './svg/SVGPlayTailWind' +import SVGPlayReact from './svg/SVGPlayReact' +import SVGPlayAstro from './svg/SVGPlayAstro' +import SVGPlayNext from './svg/SVGPlayNext' export const Hero = () => { return <> @@ -77,20 +77,34 @@ export const Hero = () => { {/* 技术栈说明 */}

- {siteConfig('STARTER_HERO_BUTTON_3_TEXT', null, CONFIG)} + {siteConfig('STARTER_HERO_TITLE_3', null, CONFIG)}

{/* 产品技术栈图标 */} -
+
+ {/* 图标放这里 */} - - - - - + + + + + + + + + + + + + + + +
diff --git a/themes/starter/components/Logo.js b/themes/starter/components/Logo.js index 5e34d8cf..ca6065a9 100644 --- a/themes/starter/components/Logo.js +++ b/themes/starter/components/Logo.js @@ -3,7 +3,7 @@ import { useGlobal } from '@/lib/global'; import throttle from 'lodash.throttle'; import Link from 'next/link' import { useRouter } from 'next/router'; -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import CONFIG from '../config'; /** @@ -13,6 +13,10 @@ import CONFIG from '../config'; export const Logo = () => { const router = useRouter() const { isDarkMode } = useGlobal() + const logoWhite = siteConfig('STARTER_LOGO_WHITE', null, CONFIG) + const [logo, setLogo] = useState(logoWhite) + const [logoTextColor, setLogoTextColor] = useState('text-white') + useEffect(() => { navBarScrollListener() window.addEventListener('scroll', navBarScrollListener) @@ -24,26 +28,31 @@ export const Logo = () => { // 滚动监听 const throttleMs = 200 const navBarScrollListener = throttle(() => { - const logo = document.querySelector('.header-logo'); const scrollY = window.scrollY; // 何时显示浅色或白底的logo if (isDarkMode || (!isDarkMode && router.route === '/' && scrollY < 1)) { - logo.src = siteConfig('STARTER_LOGO_WHITE', null, CONFIG); + setLogo(siteConfig('STARTER_LOGO_WHITE', null, CONFIG)) + setLogoTextColor('text-white') } else { - logo.src = siteConfig('STARTER_LOGO', null, CONFIG); + setLogo(siteConfig('STARTER_LOGO', null, CONFIG)) + setLogoTextColor('text-black') } }, throttleMs) return <>
- - {/* eslint-disable-next-line @next/next/no-img-element */} - logo - -
- + + <> + {/* eslint-disable-next-line @next/next/no-img-element */} + {logo && logo} + {/* logo文字 */} + {siteConfig('TITLE')} + + +
+ } diff --git a/themes/starter/components/NavBar.js b/themes/starter/components/NavBar.js index 8875ec03..3d5ee672 100644 --- a/themes/starter/components/NavBar.js +++ b/themes/starter/components/NavBar.js @@ -30,9 +30,9 @@ export const NavBar = (props) => { const scrollY = window.scrollY; // 控制台输出当前滚动位置和 sticky 值 if (scrollY > 0) { - ud_header.classList.add('sticky'); + ud_header?.classList?.add('sticky'); } else { - ud_header.classList.remove('sticky'); + ud_header?.classList?.remove('sticky'); } }, throttleMs) ) diff --git a/themes/starter/components/SVG404.js b/themes/starter/components/svg/SVG404.js similarity index 100% rename from themes/starter/components/SVG404.js rename to themes/starter/components/svg/SVG404.js diff --git a/themes/starter/components/svg/SVGDesign.js b/themes/starter/components/svg/SVGDesign.js new file mode 100644 index 00000000..414e8fbe --- /dev/null +++ b/themes/starter/components/svg/SVGDesign.js @@ -0,0 +1,46 @@ +export const SVGDesign = () => { + return + + + + + + + + + + +} diff --git a/themes/starter/components/svg/SVGEssential.js b/themes/starter/components/svg/SVGEssential.js new file mode 100644 index 00000000..bf8527c1 --- /dev/null +++ b/themes/starter/components/svg/SVGEssential.js @@ -0,0 +1,26 @@ +export const SVGEssential = () => { + return + + + + + +} diff --git a/themes/starter/components/svg/SVGGifts.js b/themes/starter/components/svg/SVGGifts.js new file mode 100644 index 00000000..6c0d78bd --- /dev/null +++ b/themes/starter/components/svg/SVGGifts.js @@ -0,0 +1,14 @@ +export const SVGGifts = () => { + return + + +} diff --git a/themes/starter/components/SVGPlayAstro.js b/themes/starter/components/svg/SVGPlayAstro.js similarity index 90% rename from themes/starter/components/SVGPlayAstro.js rename to themes/starter/components/svg/SVGPlayAstro.js index 3d9c8459..0af28259 100644 --- a/themes/starter/components/SVGPlayAstro.js +++ b/themes/starter/components/svg/SVGPlayAstro.js @@ -1,10 +1,5 @@ export default function SVGPlayAstro() { - return - - } diff --git a/themes/starter/components/SVGPlayBoostrap.js b/themes/starter/components/svg/SVGPlayBoostrap.js similarity index 91% rename from themes/starter/components/SVGPlayBoostrap.js rename to themes/starter/components/svg/SVGPlayBoostrap.js index b42ee92c..0f3aeca1 100644 --- a/themes/starter/components/SVGPlayBoostrap.js +++ b/themes/starter/components/svg/SVGPlayBoostrap.js @@ -1,10 +1,5 @@ export default function SVGPlayBootstrap() { - return - - } diff --git a/themes/starter/components/SVGPlayNext.js b/themes/starter/components/svg/SVGPlayNext.js similarity index 91% rename from themes/starter/components/SVGPlayNext.js rename to themes/starter/components/svg/SVGPlayNext.js index 88ba1513..91a0a537 100644 --- a/themes/starter/components/SVGPlayNext.js +++ b/themes/starter/components/svg/SVGPlayNext.js @@ -1,10 +1,5 @@ export default function SVGPlayNext() { - return - - } diff --git a/themes/starter/components/SVGPlayReact.js b/themes/starter/components/svg/SVGPlayReact.js similarity index 96% rename from themes/starter/components/SVGPlayReact.js rename to themes/starter/components/svg/SVGPlayReact.js index 2ad566cb..2556599b 100644 --- a/themes/starter/components/SVGPlayReact.js +++ b/themes/starter/components/svg/SVGPlayReact.js @@ -1,10 +1,5 @@ export default function SVGPlayReact() { - return - - } diff --git a/themes/starter/components/SVGPlayTailWind.js b/themes/starter/components/svg/SVGPlayTailWind.js similarity index 88% rename from themes/starter/components/SVGPlayTailWind.js rename to themes/starter/components/svg/SVGPlayTailWind.js index d0b4d397..c95fd149 100644 --- a/themes/starter/components/SVGPlayTailWind.js +++ b/themes/starter/components/svg/SVGPlayTailWind.js @@ -1,10 +1,5 @@ export default function SVGPlayTailwind() { - return - - } diff --git a/themes/starter/components/svg/SVGTemplate.js b/themes/starter/components/svg/SVGTemplate.js new file mode 100644 index 00000000..a618d0ba --- /dev/null +++ b/themes/starter/components/svg/SVGTemplate.js @@ -0,0 +1,14 @@ +export const SVGTemplate = () => { + return + + +} diff --git a/themes/starter/config.js b/themes/starter/config.js index b4abf700..245cf828 100644 --- a/themes/starter/config.js +++ b/themes/starter/config.js @@ -3,12 +3,13 @@ */ const CONFIG = { - STARTER_LOGO: '/images/starter/logo/logo.svg', // 普通logo - STARTER_LOGO_WHITE: '/images/starter/logo/logo-white.svg', // 透明底浅色logo + // 默认只展示Logo文字，如果设置了logo图片，会在文字左侧显示图标 + STARTER_LOGO: '', // 普通logo图片 示例：/images/starter/logo/logo.svg + STARTER_LOGO_WHITE: '', // 透明底浅色logo 示例： /images/starter/logo/logo-white.svg - STARTER_HERO_TITLE_1: 'Open-Source Web Template for SaaS, Startup, Apps, and More ', // 英雄区文字 - STARTER_HERO_TITLE_2: 'Multidisciplinary Web Template Built with Your Favourite Technology - HTML Bootstrap, Tailwind and React NextJS.', // 英雄区文字 - STARTER_HERO_TITLE_3: 'Built with latest technology ', // 英雄区文字 + STARTER_HERO_TITLE_1: '开源且免费的基于 Notion 笔记的网站构建工具。', // 英雄区文字 + STARTER_HERO_TITLE_2: '使用您喜爱的技术（Tailwind 和 React NextJS）构建各种网站主题模板。 ', // 英雄区文字 + STARTER_HERO_TITLE_3: '使用最新技术构建', // 英雄区文字 STARTER_HERO_BUTTON_1_TEXT: 'Start Now', // 英雄区按钮 STARTER_HERO_BUTTON_1_URL: 'https://docs.tangly1024.com/article/vercel-deploy-notion-next', // 英雄区按钮 STARTER_HERO_BUTTON_2_TEXT: 'Star on Github', // 英雄区按钮 @@ -21,6 +22,31 @@ const CONFIG = { STARTER_NAV_BUTTON_2_TEXT: 'Sign Up', STARTER_NAV_BUTTON_2_URL: '/signup', + // 特性相关 + STARTER_FEATURE_TITLE: '特性', // 特性 + STARTER_FEATURE_TEXT_1: 'NotionNext的主要特性', // 特性 + STARTER_FEATURE_TEXT_2: 'NotionNext的愿景是帮助非技术人员的小白，最低成本、最快速地搭建自己的网站。 ', // 特性 + + STARTER_FEATURE_1_TITLE_1: '免费且开源', // 特性1 + STARTER_FEATURE_1_TEXT_1: '项目源码在Github上完全开放共享，遵循MIT协议', // 特性1 + STARTER_FEATURE_1_BUTTON_TEXT: '了解更多', // 特性1 + STARTER_FEATURE_1_BUTTON_URL: 'https://github.com/tangly1024/NotionNext', // 特性1 + + STARTER_FEATURE_2_TITLE_1: '多种主题定制', // 特性2 + STARTER_FEATURE_2_TEXT_1: '数十种主题,适用于不同场景，总有一款适合你', // 特性2 + STARTER_FEATURE_2_BUTTON_TEXT: '了解更多', // 特性2 + STARTER_FEATURE_2_BUTTON_URL: 'https://docs.tangly1024.com/article/notion-next-themes', // 特性2 + + STARTER_FEATURE_3_TITLE_1: '优秀的性能', // 特性3 + STARTER_FEATURE_3_TEXT_1: '基于NextJS开发，更快的相应速度，更好的SEO', // 特性3 + STARTER_FEATURE_3_BUTTON_TEXT: '了解更多', // 特性3 + STARTER_FEATURE_3_BUTTON_URL: 'https://docs.tangly1024.com/article/next-js', // 特性3 + + STARTER_FEATURE_4_TITLE_1: '便捷的写作体验', // 特性4 + STARTER_FEATURE_4_TEXT_1: '只需在Notion笔记中编修，自动同步到网站', // 特性4 + STARTER_FEATURE_4_BUTTON_TEXT: '了解更多', // 特性4 + STARTER_FEATURE_4_BUTTON_URL: 'https://docs.tangly1024.com/about', // 特性4 + STARTER_NEWSLETTER: process.env.NEXT_PUBLIC_THEME_STARTER_NEWSLETTER || false // 是否开启邮件订阅 请先配置mailchimp功能 https://docs.tangly1024.com/article/notion-next-mailchimp } export default CONFIG diff --git a/themes/starter/index.js b/themes/starter/index.js index ac8d8626..251b9f48 100644 --- a/themes/starter/index.js +++ b/themes/starter/index.js @@ -32,7 +32,7 @@ import { Footer } from './components/Footer' import { BackToTopButton } from './components/BackToTopButton' import { MadeWithButton } from './components/MadeWithButton' import { LAYOUT_MAPPINGS } from '@/blog.config' -import { SVG404 } from './components/SVG404' +import { SVG404 } from './components/svg/SVG404' /** * 一些外部js