From 3858ab8d1f723ac59798e41cda5a81306ad51094 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Thu, 6 Jul 2023 12:24:35 +0800 Subject: [PATCH] =?UTF-8?q?Landing=E4=B8=BB=E9=A2=98=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/landing/components/Features.js | 21 ++-- themes/landing/components/FeaturesBlocks.js | 30 +++--- themes/landing/components/Footer.js | 53 +++++----- themes/landing/components/Hero.js | 107 +++++++++++--------- themes/landing/components/ModalVideo.js | 3 +- themes/landing/components/Newsletter.js | 7 +- themes/landing/components/Testimonials.js | 14 +-- themes/landing/config.js | 55 ++++++++++ 8 files changed, 186 insertions(+), 104 deletions(-) create mode 100644 themes/landing/config.js diff --git a/themes/landing/components/Features.js b/themes/landing/components/Features.js index c6954e14..f027bd73 100644 --- a/themes/landing/components/Features.js +++ b/themes/landing/components/Features.js @@ -3,6 +3,7 @@ import { useState, useRef, useEffect } from 'react' import { Transition } from '@headlessui/react' +import CONFIG from '../config' // import FeaturesElement from '@/public/images/features-element.png' export default function Features() { @@ -30,8 +31,8 @@ export default function Features() { {/* Section header */}
-

探索解决方案

-

如何搭建自己的门户网站，塑造一个品牌展示中心？
曾经，它是系统繁重的Wordpress、是操作复杂的Hexo、是昂贵且不稳定的技术团队;
现在，您只要一个笔记软件Notion，就够了

+

{CONFIG.FEATURES_HEADER_1}

+

{/* Section content */} @@ -40,8 +41,8 @@ export default function Features() { {/* Content */}
-

Notion+NextJs组合方案

-

Notion作为CMS管理您的站点配置和网页数据，NextJs作为渲染博客的脚本，借助第三方的Vercel等托管平台提供网络服务。

+

{CONFIG.FEATURES_HEADER_2}

+

{CONFIG.FEATURES_HEADER_2_P}

{/* Tabs buttons */}
@@ -51,8 +52,8 @@ export default function Features() { onClick={(e) => { e.preventDefault(); setTab(1) }} >
-
简单快速的系统
-
在Notion中写下一篇文章，内容立刻在您的网站首页中呈现给互联网
+
{CONFIG.FEATURES_CARD_1_TITLE}
+
{CONFIG.FEATURES_CARD_1_P}
@@ -66,8 +67,8 @@ export default function Features() { onClick={(e) => { e.preventDefault(); setTab(2) }} >
-
高效传播的媒介
-
优质的SEO、快速的响应速度，让您的产品和宣传触达到更多的受众
+
{CONFIG.FEATURES_CARD_2_TITLE}
+
{CONFIG.FEATURES_CARD_2_P}
@@ -81,8 +82,8 @@ export default function Features() { onClick={(e) => { e.preventDefault(); setTab(3) }} >
-
人性化的定制工具
-
多款主题供您挑选，可以搭建各种不同风格和作用的网站，更多的主题正在陆续加入中。
+
{CONFIG.FEATURES_CARD_3_TITLE}
+
{CONFIG.FEATURES_CARD_3_P}
diff --git a/themes/landing/components/FeaturesBlocks.js b/themes/landing/components/FeaturesBlocks.js index eb1228d2..1c0a3e2f 100644 --- a/themes/landing/components/FeaturesBlocks.js +++ b/themes/landing/components/FeaturesBlocks.js @@ -1,3 +1,5 @@ +import CONFIG from '../config' + export default function FeaturesBlocks() { return (
@@ -11,8 +13,8 @@ export default function FeaturesBlocks() { {/* Section header */}
-

解决方案

-

人人自媒体的时代，一个网站将帮您链接更多的人，带给你无限的机会和客户。
您还在等什么呢？

+

{CONFIG.FEATURES_BLOCK_HEADER}

+

{/* Items */} @@ -31,8 +33,8 @@ export default function FeaturesBlocks() { -

用网站来展示品牌

-

比起线下渠道、一个域名和网站更有说服力

+

{CONFIG.FEATURES_BLOCK_1_TITLE}

+

{CONFIG.FEATURES_BLOCK_1_P}

{/* 2nd item */} @@ -47,8 +49,8 @@ export default function FeaturesBlocks() { -

SEO带来更多流量

-

通过搜索引擎，精准定位您的受众

+

{CONFIG.FEATURES_BLOCK_2_TITLE}

+

{CONFIG.FEATURES_BLOCK_2_P}

{/* 3rd item */} @@ -64,8 +66,8 @@ export default function FeaturesBlocks() { -

网站的性能很重要

-

更快的响应，更好的用户体验

+

{CONFIG.FEATURES_BLOCK_3_TITLE}

+

{CONFIG.FEATURES_BLOCK_3_P}

{/* 4th item */} @@ -81,8 +83,8 @@ export default function FeaturesBlocks() { -

打造您的个人品牌

-

继马斯克、乔布斯之后，您将是下一个传奇

+

{CONFIG.FEATURES_BLOCK_4_TITLE}

+

{CONFIG.FEATURES_BLOCK_4_P}

{/* 5th item */} @@ -97,8 +99,8 @@ export default function FeaturesBlocks() { -

写作能力是核心技能

-

比起只输入知识，更重要的是反思和输出

+

{CONFIG.FEATURES_BLOCK_5_TITLE}

+

{CONFIG.FEATURES_BLOCK_5_P}

{/* 6th item */} @@ -112,8 +114,8 @@ export default function FeaturesBlocks() { -

开始写博客吧

-

NotionNext，助您轻松开始写作

+

{CONFIG.FEATURES_BLOCK_6_TITLE}

+

{CONFIG.FEATURES_BLOCK_6_P}

diff --git a/themes/landing/components/Footer.js b/themes/landing/components/Footer.js index 78facbd9..4e2d7026 100644 --- a/themes/landing/components/Footer.js +++ b/themes/landing/components/Footer.js @@ -1,7 +1,11 @@ import { subscribeToNewsletter } from '@/lib/mailchimp' import { useEffect, useRef, useState } from 'react' +import CONFIG from '../config' import Logo from './Logo' +/** + * 页脚 + */ export default function Footer() { const formRef = useRef() const [success, setSuccess] = useState(false) @@ -20,9 +24,9 @@ export default function Footer() { // 在此处添加订阅失败后的操作 }) } - form.addEventListener('submit', handleSubmit) + form?.addEventListener('submit', handleSubmit) return () => { - form.removeEventListener('submit', handleSubmit) + form?.removeEventListener('submit', handleSubmit) } }, [subscribeToNewsletter]) @@ -109,30 +113,33 @@ export default function Footer() { - {/* 5th block */} -
-
Subscribe
-

Get the latest news and articles to your inbox every month.

-
-
-
- -
- - + {/* 开启邮件收集 */} + {CONFIG.NEWSLETTER && <> + {/* 5th block */} +
+
Subscribe
+

Get the latest news and articles to your inbox every month.

+ +
+
+ +
+ + +
+ {/* Success message */} + {success &&

Thanks for subscribing!

}
- {/* Success message */} - {success &&

Thanks for subscribing!

}
-
- -
+ +
+ }
{/* Bottom area */} diff --git a/themes/landing/components/Hero.js b/themes/landing/components/Hero.js index dfa7ba45..5bc65cee 100644 --- a/themes/landing/components/Hero.js +++ b/themes/landing/components/Hero.js @@ -1,60 +1,69 @@ +import CONFIG from '../config' import ModalVideo from './ModalVideo' export default function Hero() { return ( -
+
- {/* Illustration behind hero content */} - - -
- - {/* Hero content */} -
- - {/* Section header */} -
-

NotionNext

-
-

只需一个Notion笔记，建站竟然如此简单！

-
- - -
+ {/* Illustration behind hero content */} + -
- {/* Hero image */} - +
-
+ {/* Hero content */} +
-
-
+ {/* Section header */} +
+

+ {CONFIG.HERO_HEADER_1} +

+
+

{CONFIG.HERO_P_1}

+ +
+
+ + {/* Hero image */} + + +
+ + + ) } diff --git a/themes/landing/components/ModalVideo.js b/themes/landing/components/ModalVideo.js index c106aa95..43b14d73 100644 --- a/themes/landing/components/ModalVideo.js +++ b/themes/landing/components/ModalVideo.js @@ -2,6 +2,7 @@ import { useState, useRef, Fragment } from 'react' import { Dialog, Transition } from '@headlessui/react' +import CONFIG from '../config' export default function ModalVideo({ thumb, @@ -58,7 +59,7 @@ export default function ModalVideo({ - Watch the full video (2 min) + {CONFIG.HERO_VIDEO_TIPS} diff --git a/themes/landing/components/Newsletter.js b/themes/landing/components/Newsletter.js index 1e788a4b..6b3fa0d4 100644 --- a/themes/landing/components/Newsletter.js +++ b/themes/landing/components/Newsletter.js @@ -1,5 +1,6 @@ import { subscribeToNewsletter } from '@/lib/mailchimp' import { useEffect, useRef, useState } from 'react' +import CONFIG from '../config' export default function Newsletter() { const formRef = useRef() @@ -19,12 +20,16 @@ export default function Newsletter() { // 在此处添加订阅失败后的操作 }) } - form.addEventListener('submit', handleSubmit) + form?.addEventListener('submit', handleSubmit) return () => { form.removeEventListener('submit', handleSubmit) } }, [subscribeToNewsletter]) + if (!CONFIG.NEWSLETTER) { + return <> + } + return (
diff --git a/themes/landing/components/Testimonials.js b/themes/landing/components/Testimonials.js index 49bfb927..bb38c176 100644 --- a/themes/landing/components/Testimonials.js +++ b/themes/landing/components/Testimonials.js @@ -2,6 +2,8 @@ // import Image from 'next/image' // import TestimonialImage from '@/public/images/testimonial.jpg' +import CONFIG from '../config' + export default function Testimonials() { return (
@@ -28,8 +30,8 @@ export default function Testimonials() { {/* Section header */}
-

近4000个网站的支持、浏览量突破 100,000,000+

-

网站内容涵盖地产、教育、建筑、医学、机械、IT、电子、软件、自媒体、数位游民、短视频、电商、学生、摄影爱好者、旅行爱好者等等各行各业

+

{CONFIG.TESTIMONIALS_HEADER}

+

{CONFIG.TESTIMONIALS_P}

{/* Testimonials */} @@ -42,14 +44,14 @@ export default function Testimonials() { - Testimonial 01 + Testimonial 01
- “ 感谢大佬的方法。之前尝试过Super、Potion等国外的第三方平台，实现效果一般，个性化成都远不如这个方法，已经用起来了！ “ + {CONFIG.TESTIMONIALS_WORD}
- Ryan_G + {CONFIG.TESTIMONIALS_NICKNAME}
- Master of Ryan`Log @Gaoran + {CONFIG.TESTIMONIALS_ID} {CONFIG.TESTIMONIALS_SOCIAL_NAME}
diff --git a/themes/landing/config.js b/themes/landing/config.js new file mode 100644 index 00000000..02a74e6a --- /dev/null +++ b/themes/landing/config.js @@ -0,0 +1,55 @@ +const CONFIG = { + + // 首页大图英雄板块 + HERO_HEADER_1: 'NotionNext', + HERO_P_1: '只需一个Notion笔记，建站竟然如此简单！', + HERO_BUTTON_1_TEXT: '开始体验', + HERO_BUTTON_1_LINK: 'https://docs.tangly1024.com/article/vercel-deploy-notion-next', + HERO_BUTTON_2_TEXT: '了解更多', + HERO_BUTTON_2_LINK: 'https://docs.tangly1024.com/about', + HERO_VIDEO_IMAGE: '/images/home.png', + HERO_VIDEO_URL: '/videos/video.mp4', + HERO_VIDEO_TIPS: 'Watch the full video (2 min)', + + // 特性介绍 + FEATURES_HEADER_1: '探索的过程', + FEATURES_HEADER_1_P: "如何搭建自己的门户网站，塑造一个品牌展示中心？
曾经，它是系统繁重的Wordpress、是操作复杂的Hexo、是昂贵且不稳定的技术团队;
现在，您只要一个笔记软件Notion，就够了", + FEATURES_HEADER_2: 'Notion+NextJs组合方案', + FEATURES_HEADER_2_P: 'Notion作为CMS管理您的站点配置和网页数据，NextJs作为渲染博客的脚本，借助第三方的Vercel等托管平台提供网络服务。', + FEATURES_CARD_1_TITLE: '简单快速的系统', + FEATURES_CARD_1_P: '在Notion中写下一篇文章，内容立刻在您的网站首页中呈现给互联网', + FEATURES_CARD_2_TITLE: '高效传播的媒介', + FEATURES_CARD_2_P: '优秀的SEO、快速的响应速度，让您的产品和宣传触达到更多的受众', + FEATURES_CARD_3_TITLE: '人性化的定制工具', + FEATURES_CARD_3_P: '多款主题供您挑选，可以搭建各种不同风格和作用的网站，更多的主题正在陆续加入中。', + + // 特性介绍2 + FEATURES_BLOCK_HEADER: '解决方案', + FEATURES_BLOCK_P: '人人自媒体的时代，一个网站将帮您链接更多的人，带给你无限的机会和客户。
您还在等什么呢？', + FEATURES_BLOCK_1_TITLE: '用网站来展示品牌', + FEATURES_BLOCK_1_P: '比起线下渠道、一个公开域名和网站更有说服力', + FEATURES_BLOCK_2_TITLE: 'SEO带来更多流量', + FEATURES_BLOCK_2_P: '借助搜索引擎，精准定位您的受众', + FEATURES_BLOCK_3_TITLE: '网站的性能很重要', + FEATURES_BLOCK_3_P: '更快的响应，更好的用户体验', + FEATURES_BLOCK_4_TITLE: '打造您的个人品牌', + FEATURES_BLOCK_4_P: '继马斯克、乔布斯之后，您将是下一个传奇', + FEATURES_BLOCK_5_TITLE: '写作表达是核心技能', + FEATURES_BLOCK_5_P: '比起只阅读输入，更重要的是反思和输出', + FEATURES_BLOCK_6_TITLE: '开始写博客吧', + FEATURES_BLOCK_6_P: 'NotionNext，助您轻松开始写作', + + // 感言 + TESTIMONIALS_HEADER: '近4000个网站的搭建、浏览量突破 100,000,000+', + TESTIMONIALS_P: '网站内容涵盖地产、教育、建筑、医学、机械、IT、电子、软件、自媒体、数位游民、短视频、电商、学生、摄影爱好者、旅行爱好者等等各行各业', + + TESTIMONIALS_AVATAR: 'https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F22de3fcb-d90d-4271-bc01-f815f476122b%2F4FE0A0C0-E487-4C74-BF8E-6F01A27461B8-14186-000008094BC289A6.jpg?table=collection&id=a320a2cc-6ebe-4a8d-95cc-ea94e63bced9&width=200', + TESTIMONIALS_NICKNAME: 'Ryan_G', + TESTIMONIALS_ID: 'Ryan`Log 站长', + TESTIMONIALS_SOCIAL_NAME: '@Gaoran', + TESTIMONIALS_SOCIAL_URL: 'https://blog.gaoran.xyz/', + TESTIMONIALS_WORD: '“ 感谢大佬的方法。之前尝试过Super、Potion等国外的第三方平台，实现效果一般，个性化成都远不如这个方法，已经用起来了！ “', + + NEWSLETTER: false // 是否开启邮件订阅 请先配置mailchimp功能 https://docs.tangly1024.com/article/notion-next-mailchimp +} +export default CONFIG