starter 完善

2026-05-13 23:16:47 +00:00 · 2024-02-23 11:18:46 +08:00
parent 8e835f86ee
commit 4753beb125
10 changed files with 213 additions and 109 deletions
--- a/themes/starter/components/Banner.js
+++ b/themes/starter/components/Banner.js
@@ -35,7 +35,7 @@ export const Banner = ({ title, description }) => {
                </li>
                <li>
                  <a
-                    href="javascript:void(0)"
+                    href="#"
                    className="flex items-center gap-[10px] text-base font-medium text-body-color"
                  >
                    <span className="text-body-color dark:text-dark-6"> / </span>
--- a/themes/starter/components/Blog.js
+++ b/themes/starter/components/Blog.js
@@ -2,11 +2,12 @@
 import { siteConfig } from '@/lib/config'
 import CONFIG from '../config'

-export const Blog = (props) => {
-  const count = siteConfig('STARTER_BLOG_COUNT', 3, CONFIG)
-  const posts = props?.allNavPages
-    ? props.allNavPages.slice(0, count)
-    : []
+/**
+ * 博文列表
+ * @param {*} param0
+ * @returns
+ */
+export const Blog = ({ posts }) => {
  return <>
        {/* <!-- ====== Blog Section Start --> */}
        <section className="bg-white pb-10 pt-20 dark:bg-dark lg:pb-20 lg:pt-[120px]">
--- a/themes/starter/components/Contact.js
+++ b/themes/starter/components/Contact.js
@@ -73,73 +73,11 @@ export const Contact = () => {
              className="wow fadeInUp rounded-lg bg-white px-8 py-10 shadow-testimonial dark:bg-dark-2 dark:shadow-none sm:px-10 sm:py-12 md:p-[60px] lg:p-10 lg:px-10 lg:py-12 2xl:p-[60px]"
              data-wow-delay=".2s"
            >
-              <h3
-                className="mb-8 text-2xl font-semibold text-dark dark:text-white md:text-[28px] md:leading-[1.42]"
-              >
-                {siteConfig('STARTER_CONTACT_MSG_TITLE', null, CONFIG)}
-              </h3>
-              <form>
-                <div className="mb-[22px]">
-                  <label
-                    // for="fullName"
-                    className="mb-4 block text-sm text-body-color dark:text-dark-6">
-                    {siteConfig('STARTER_CONTACT_MSG_NAME', null, CONFIG)}*
-                  </label>
-                  <input
-                    type="text"
-                    name="fullName"
-                    placeholder="Adam Gelius"
-                    className="w-full border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6"
-                  />
-                </div>
-                <div className="mb-[22px]">
-                  <label
-                    // for="email"
-                    className="mb-4 block text-sm text-body-color dark:text-dark-6">
-                    {siteConfig('STARTER_CONTACT_MSG_EMAIL', null, CONFIG)}*
-                  </label >
-                  <input
-                    type="email"
-                    name="email"
-                    placeholder="example@yourmail.com"
-                    className="w-full border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6"
-                  />
-                </div>
-                <div className="mb-[22px]">
-                    <label
-                    // for="phone"
-                    className="mb-4 block text-sm text-body-color dark:text-dark-6">
-                    {siteConfig('STARTER_CONTACT_MSG_PHONE', null, CONFIG)}*
-                    </label >
-                  <input
-                    type="text"
-                    name="phone"
-                    placeholder="+885 1254 5211 552"
-                    className="w-full border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6"
-                  />
-                </div>
-                <div className="mb-[30px]">
-                  <label
-                    // for="message"
-                    className="mb-4 block text-sm text-body-color dark:text-dark-6">
-                    {siteConfig('STARTER_CONTACT_MSG_TEXT', null, CONFIG)}*
-                    </label >
-                  <textarea
-                    name="message"
-                    rows="1"
-                    placeholder="type your message here"
-                    className="w-full resize-none border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6"
-                  ></textarea>
-                </div>
-                <div className="mb-0">
-                  <button
-                    type="submit"
-                    className="inline-flex items-center justify-center rounded-md bg-primary px-10 py-3 text-base font-medium text-white transition duration-300 ease-in-out hover:bg-blue-dark"
-                  >
-                    {siteConfig('STARTER_CONTACT_MSG_SEND', null, CONFIG)}
-                  </button>
-                </div>
-              </form>
+              {/* 自定义的留言表单 、 需要对接接口 */}
+              {/* <MessageForm/> */}
+              {/* 嵌入外部表单 */}
+              <iframe src="https://noteforms.com/forms/yfctc7" width="100%" height="500px" frameborder="0"></iframe>
+
            </div>
          </div>

--- a/themes/starter/components/Logo.js
+++ b/themes/starter/components/Logo.js
@@ -23,7 +23,9 @@ export const Logo = ({ white }) => {
    const navBarScrollListener = throttle(() => {
      const scrollY = window.scrollY;
      // 何时显示浅色或白底的logo
-      if (white || isDarkMode || (!isDarkMode && router.route === '/' && scrollY < 1)) {
+      const homePageNavBar = router.route === '/' && scrollY < 10 // 在首页并且视窗在页面顶部
+      console.log('白色', homePageNavBar, router.route, scrollY < 10)
+      if (white || isDarkMode || homePageNavBar) {
        setLogo(siteConfig('STARTER_LOGO_WHITE', null, CONFIG))
        setLogoTextColor('text-white')
      } else {
@@ -37,7 +39,7 @@ export const Logo = ({ white }) => {
    return () => {
      window.removeEventListener('scroll', navBarScrollListener)
    }
-  }, [])
+  }, [isDarkMode, router])

  return <div className="w-60 max-w-full px-4">
        <div className="navbar-logo flex items-center w-full py-5 cursor-pointer">
--- a/themes/starter/components/MessageForm.js
+++ b/themes/starter/components/MessageForm.js
@@ -0,0 +1,132 @@
+import { siteConfig } from '@/lib/config'
+import CONFIG from '../config'
+import { useRef, useState } from 'react'
+
+/**
+ * 留言表单
+ * @returns
+ */
+export const MessageForm = () => {
+  const formRef = useRef()
+  const [success] = useState(false)
+  const [formData, setFormData] = useState({
+    fullName: '',
+    email: '',
+    phone: '',
+    message: ''
+  })
+
+  const handleChange = (e) => {
+    const { name, value } = e.target
+    setFormData(prevState => ({
+      ...prevState,
+      [name]: value
+    }))
+  }
+
+  //   useEffect(() => {
+  //     const form = formRef.current
+  //     const handleSubmit = (e) => {
+  //       e.preventDefault()
+  //       submitComments(formData).then(response => {
+  //         console.log('Subscription succeeded:', response)
+  //         // 在此处添加成功订阅后的操作
+  //         setSuccess(true)
+  //       })
+  //         .catch(error => {
+  //           console.error('Subscription failed:', error)
+  //           // 在此处添加订阅失败后的操作
+  //         })
+  //     }
+  //     form?.addEventListener('submit', handleSubmit)
+  //     return () => {
+  //       form?.removeEventListener('submit', handleSubmit)
+  //     }
+  //   }, [submitComments])
+
+  return <>
+                <h3
+                className="mb-8 text-2xl font-semibold text-dark dark:text-white md:text-[28px] md:leading-[1.42]"
+              >
+                {siteConfig('STARTER_CONTACT_MSG_TITLE', null, CONFIG)}
+              </h3>
+              <form ref={formRef}>
+    <div className="mb-[22px]">
+      <label
+        // for="fullName"
+        className="mb-4 block text-sm text-body-color dark:text-dark-6">
+        {siteConfig('STARTER_CONTACT_MSG_NAME', null, CONFIG)}*
+      </label>
+      <input
+        disabled={success}
+        type="text"
+        name="fullName"
+        value={formData.fullName}
+        onChange={handleChange}
+        placeholder="Adam Gelius"
+        className="w-full border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6"
+      />
+    </div>
+    <div className="mb-[22px]">
+      <label
+        // for="email"
+        className="mb-4 block text-sm text-body-color dark:text-dark-6">
+        {siteConfig('STARTER_CONTACT_MSG_EMAIL', null, CONFIG)}*
+      </label >
+      <input
+        disabled={success}
+        type="email"
+        name="email"
+        value={formData.email}
+        onChange={handleChange}
+        placeholder="example@yourmail.com"
+        className="w-full border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6"
+      />
+    </div>
+    <div className="mb-[22px]">
+        <label
+        // for="phone"
+        className="mb-4 block text-sm text-body-color dark:text-dark-6">
+        {siteConfig('STARTER_CONTACT_MSG_PHONE', null, CONFIG)}*
+        </label >
+      <input
+        disabled={success}
+        type="text"
+        name="phone"
+        value={formData.phone}
+        onChange={handleChange}
+        placeholder="+885 1254 5211 552"
+        className="w-full border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6"
+      />
+    </div>
+    <div className="mb-[30px]">
+      <label
+        // for="message"
+        className="mb-4 block text-sm text-body-color dark:text-dark-6">
+        {siteConfig('STARTER_CONTACT_MSG_TEXT', null, CONFIG)}*
+        </label >
+      <textarea
+        disabled={success}
+        name="message"
+        value={formData.message}
+        onChange={handleChange}
+        rows="1"
+        placeholder="type your message here"
+        className="w-full resize-none border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6"
+      ></textarea>
+    </div>
+    <div className="mb-0">
+      <button
+        disabled={success}
+        type="submit"
+        className="inline-flex items-center justify-center rounded-md bg-primary px-10 py-3 text-base font-medium text-white transition duration-300 ease-in-out hover:bg-blue-dark"
+      >
+        {siteConfig('STARTER_CONTACT_MSG_SEND', null, CONFIG)}
+      </button>
+        {/* Success message */}
+        {success && <p className="mt-2 text-green-600 text-sm">{siteConfig('STARTER_CONTACT_MSG_THANKS', null, CONFIG)}</p>}
+
+    </div>
+  </form>
+              </>
+}
--- a/themes/starter/components/NavBar.js
+++ b/themes/starter/components/NavBar.js
@@ -17,17 +17,17 @@ export const NavBar = (props) => {
  const { isDarkMode } = useGlobal()
  const [buttonTextColor, setColor] = useState(router.route === '/' ? 'text-white' : '')
  useEffect(() => {
-    if (isDarkMode) {
+    if (isDarkMode || router.route === '/') {
      setColor('text-white')
    } else {
-      setColor(router.route === '/' ? 'text-white' : '')
+      setColor('')
    }
    // ======= Sticky
    window.addEventListener('scroll', navBarScollListener)
    return () => {
      window.removeEventListener('scroll', navBarScollListener)
    }
-  }, [isDarkMode])
+  }, [[isDarkMode]])

  // 滚动监听
  const throttleMs = 200
--- a/themes/starter/components/SignInForm.js
+++ b/themes/starter/components/SignInForm.js
@@ -22,7 +22,7 @@ export const SignInForm = () => {
            className="wow fadeInUp relative mx-auto max-w-[525px] overflow-hidden rounded-lg bg-white dark:bg-dark-2 py-14 px-8 text-center sm:px-12 md:px-[60px]"
            data-wow-delay=".15s">
            <div className="mb-10 text-center">
-              <div href="javascript:void(0)" className="mx-auto inline-block max-w-[160px]">
+              <div href="#" className="mx-auto inline-block max-w-[160px]">
                <Logo/>
              </div>
            </div>
@@ -51,25 +51,25 @@ export const SignInForm = () => {
            {/* 社交平台 */}
            <ul className="flex justify-between -mx-2 mb-9">
              <li className="w-full px-2">
-                <a href="javascript:void(0)"
+                <a href="#"
                  className="flex h-11 items-center justify-center rounded-md bg-[#4064AC] transition hover:bg-opacity-90">
                 <SVGFacebook className='fill-white'/>
                </a>
              </li>
              <li className="w-full px-2">
-                <a href="javascript:void(0)"
+                <a href="#"
                  className="flex h-11 items-center justify-center rounded-md bg-[#1C9CEA] transition hover:bg-opacity-90">
                  <SVGTwitter className='fill-white'/>
                </a>
              </li>
              <li className="w-full px-2">
-                <a href="javascript:void(0)"
+                <a href="#"
                  className="flex h-11 items-center justify-center rounded-md bg-[#D64937] transition hover:bg-opacity-90">
                  <SVGGoogle className='fill-white'/>
                </a>
              </li>
            </ul>
-            <a href="javascript:void(0)" className="inline-block mb-2 text-base text-dark dark:text-white hover:text-primary dark:hover:text-primary">
+            <a href="#" className="inline-block mb-2 text-base text-dark dark:text-white hover:text-primary dark:hover:text-primary">
              Forget Password?
            </a>
            <p className="text-base text-body-secondary">
--- a/themes/starter/components/SignUpForm.js
+++ b/themes/starter/components/SignUpForm.js
@@ -15,7 +15,7 @@ export const SignUpForm = () => {
            className="wow fadeInUp relative mx-auto max-w-[525px] overflow-hidden rounded-xl shadow-form bg-white dark:bg-dark-2 py-14 px-8 text-center sm:px-12 md:px-[60px]"
            data-wow-delay=".15s">
            <div className="mb-10 text-center">
-              <a href="javascript:void(0)" className="mx-auto inline-block max-w-[160px]">
+              <a href="#" className="mx-auto inline-block max-w-[160px]">
               <Logo/>
              </a>
            </div>
@@ -43,7 +43,7 @@ export const SignUpForm = () => {
            </span>
            <ul className="flex justify-between -mx-2 mb-9">
              <li className="w-full px-2">
-                <a href="javascript:void(0)"
+                <a href="#"
                  className="flex h-11 items-center justify-center rounded-md bg-[#4064AC] transition hover:bg-opacity-90">
                  <svg width="10" height="20" viewBox="0 0 10 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
@@ -53,7 +53,7 @@ export const SignUpForm = () => {
                </a>
              </li>
              <li className="w-full px-2">
-                <a href="javascript:void(0)"
+                <a href="#"
                  className="flex h-11 items-center justify-center rounded-md bg-[#1C9CEA] transition hover:bg-opacity-90">
                  <svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
@@ -63,7 +63,7 @@ export const SignUpForm = () => {
                </a>
              </li>
              <li className="w-full px-2">
-                <a href="javascript:void(0)"
+                <a href="#"
                  className="flex h-11 items-center justify-center rounded-md bg-[#D64937] transition hover:bg-opacity-90">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
@@ -76,11 +76,11 @@ export const SignUpForm = () => {

            <p className="mb-4 text-base text-body-secondary">
              By creating an account you are agree with our
-              <a href="javascript:void(0)" className="text-primary hover:underline">
+              <a href="#" className="text-primary hover:underline">
                Privacy
              </a>
              and
-              <a href="javascript:void(0)" className="text-primary hover:underline">
+              <a href="#" className="text-primary hover:underline">
                Policy
              </a>
            </p>
--- a/themes/starter/config.js
+++ b/themes/starter/config.js
@@ -10,8 +10,8 @@ const CONFIG = {
  // MENU ， 菜单部分不在此处配置，请在Notion数据库中添加MENU

  // 英雄区块导航
-  STARTER_HERO_TITLE_1: '开源且免费的基于 Notion 笔记的网站构建工具。', // 英雄区文字
-  STARTER_HERO_TITLE_2: '使用您喜爱的技术（Tailwind 和 React NextJS）构建各种网站主题模板。  ', // 英雄区文字
+  STARTER_HERO_TITLE_1: '开源且免费的基于 Notion 笔记的网站构建工具', // 英雄区文字
+  STARTER_HERO_TITLE_2: '通过笔记无感知地建站、成倍放大您的价值', // 英雄区文字
  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', // 英雄区按钮
@@ -29,7 +29,7 @@ const CONFIG = {
  // 特性区块
  STARTER_FEATURE_TITLE: '特性', // 特性
  STARTER_FEATURE_TEXT_1: 'NotionNext的主要特性', // 特性
-  STARTER_FEATURE_TEXT_2: 'NotionNext的愿景是帮助非技术人员的小白，最低成本、最快速地搭建自己的网站。  ', // 特性
+  STARTER_FEATURE_TEXT_2: 'NotionNext的愿景是帮助您简单、无感知地稳定地搭建自己的网站，放大品牌的价值。 ', // 特性

  STARTER_FEATURE_1_TITLE_1: '免费且开源', // 特性1
  STARTER_FEATURE_1_TEXT_1: '项目源码在Github上完全开放共享，遵循MIT协议', // 特性1
@@ -65,7 +65,7 @@ const CONFIG = {
  // 首页价格区块
  STARTER_PRICING_TITLE: '价格表',
  STARTER_PRICING_TEXT_1: '很棒的定价计划',
-  STARTER_PRICING_TEXT_2: '我们制定了灵活的付费模式，您可以按需选择。（NotionNext完全免费，这里仅做主题功能演示。请勿下单！请勿购买！）',
+  STARTER_PRICING_TEXT_2: '我们制定了灵活的付费模式，您可以按需选择。（NotionNext免费开源，这里仅演示产品订阅付费功能，请勿下单购买！）',

  STARTER_PRICING_1_TITLE: '入门版',
  STARTER_PRICING_1_PRICE: '19.9',
@@ -96,8 +96,8 @@ const CONFIG = {
  STARTER_PRICING_3_BUTTON_URL: 'https://tangly1024.lemonsqueezy.com/checkout/buy/df924d66-09dc-42a4-a632-a6b0c5cc4f28',

  STARTER_TESTIMONIALS_TITLE: '用户反馈',
-  STARTER_TESTIMONIALS_TEXT_1: '我们的站长怎么说',
-  STARTER_TESTIMONIALS_TEXT_2: '有数千位站长使用NotionNext搭建他们的网站,通过帮助手册、交流社群以及技术咨询，站友们成功上线了自己的网站并且持续运行',
+  STARTER_TESTIMONIALS_TEXT_1: '我们的用户怎么说',
+  STARTER_TESTIMONIALS_TEXT_2: '数千位站长选择用NotionNext搭建他们的网站,通过帮助手册、交流社群以及技术咨询，大家成功上线了自己的网站',
  STARTER_TESTIMONIALS_STAR_ICON: '/images/starter/testimonials/icon-star.svg', // 评分图标

  // 这里不支持CONFIG和环境变量，需要一一修改此处代码。
@@ -205,12 +205,16 @@ const CONFIG = {
  STARTER_CONTACT_EMAIL_TITLE: '我们如何帮助您？',
  STARTER_CONTACT_EMAIL_TEXT: 'mail@tangly1024.com',

-  STARTER_CONTACT_MSG_TITLE: '向我们留言',
-  STARTER_CONTACT_MSG_NAME: '姓名',
-  STARTER_CONTACT_MSG_EMAIL: '邮箱地址',
-  STARTER_CONTACT_MSG_PHONE: '联系电话',
-  STARTER_CONTACT_MSG_TEXT: '消息内容',
-  STARTER_CONTACT_MSG_SEND: '发送消息',
+  // 嵌入外部表单
+  STARTER_CONTACT_MSG_EXTERNAL_URL: 'https://noteforms.com/forms/yfctc7', // 基于NoteForm创建，将留言数据存在Notion中
+  //   自定义留言表单
+  //   STARTER_CONTACT_MSG_TITLE: '向我们留言',
+  //   STARTER_CONTACT_MSG_NAME: '姓名',
+  //   STARTER_CONTACT_MSG_EMAIL: '邮箱地址',
+  //   STARTER_CONTACT_MSG_PHONE: '联系电话',
+  //   STARTER_CONTACT_MSG_TEXT: '消息内容',
+  //   STARTER_CONTACT_MSG_SEND: '发送消息',
+  //   STARTER_CONTACT_MSG_THANKS: '感谢您的留言',

  // 合作伙伴的图标
  STARTER_BRANDS: [
@@ -288,6 +292,11 @@ const CONFIG = {
  STARTER_FOOTER_PRIVACY_TERMS_OF_SERVICE_TEXT: '服务协议',
  STARTER_FOOTER_PRIVACY_TERMS_OF_SERVICE_URL: '/terms-of-use',

+  // 404页面的提示语
+  STARTER_404_TITLE: '我们似乎找不到您要找的页面。',
+  STARTER_404_TEXT: '抱歉！您要查找的页面不存在。可能已经移动或删除。',
+  STARTER_404_BACK: '回到主页',
+
  STARTER_NEWSLETTER: process.env.NEXT_PUBLIC_THEME_STARTER_NEWSLETTER || false // 是否开启邮件订阅 请先配置mailchimp功能 https://docs.tangly1024.com/article/notion-next-mailchimp
 }
 export default CONFIG
--- a/themes/starter/index.js
+++ b/themes/starter/index.js
@@ -35,6 +35,7 @@ import { SVG404 } from './components/svg/SVG404'
 import { Banner } from './components/Banner'
 import { SignInForm } from './components/SignInForm'
 import { SignUpForm } from './components/SignUpForm'
+import Link from 'next/link'

 /**
 * 一些外部js
@@ -84,6 +85,10 @@ const LayoutBase = (props) => {
 * @returns
 */
 const LayoutIndex = (props) => {
+  const count = siteConfig('STARTER_BLOG_COUNT', 3, CONFIG)
+  const posts = props?.allNavPages
+    ? props.allNavPages.slice(0, count)
+    : []
  return (
        <>
        {/* 英雄区 */}
@@ -101,7 +106,7 @@ const LayoutIndex = (props) => {
        {/* 团队介绍 */}
        <Team/>
        {/* 博文列表 */}
-        <Blog {...props}/>
+        <Blog posts={posts}/>
        {/* 联系方式 */}
        <Contact/>
        {/* 合作伙伴 */}
@@ -140,7 +145,22 @@ const LayoutSlug = (props) => {
 }

 const LayoutSearch = (props) => <></>
-const LayoutArchive = (props) => <></>
+
+/**
+ * 文章归档
+ * @param {*} props
+ * @returns
+ */
+const LayoutArchive = (props) => <>
+        {/* 博文列表 */}
+        <Blog {...props}/>
+</>
+
+/**
+ * 404页面
+ * @param {*} props
+ * @returns
+ */
 const Layout404 = (props) => {
  return <>
     {/* <!-- ====== 404 Section Start --> */}
@@ -162,17 +182,17 @@ const Layout404 = (props) => {
                    <SVG404/>
                  </div>
                  <h3 className="mb-5 text-2xl font-semibold text-dark dark:text-white">
-                    We Can't Seem to Find The Page You're Looking For.
+                    {siteConfig('STARTER_404_TITLE', null, CONFIG)}
                  </h3>
                  <p className="mb-8 text-base text-body-color dark:text-dark-6">
-                    Oops! The page you are looking for does not exist. It might have
-                    been moved or deleted.
+                  {siteConfig('STARTER_404_TEXT', null, CONFIG)}
+
                  </p>
-                  <a
+                  <Link href='/'
                    className="py-3 text-base font-medium text-white transition rounded-md bg-dark px-7 hover:bg-primary"
                  >
-                    Go To Home
-                  </a>
+                    {siteConfig('STARTER_404_BACK', null, CONFIG)}
+                  </Link>
                </div>
              </div>
            </div>
@@ -195,6 +215,7 @@ const LayoutTagIndex = (props) => <></>
 const LayoutSignIn = (props) => {
  return <>
        <div className='grow mt-20'>
+            <Banner title='登录' description='这里是演示页面，NotionNext目前不提供会员登录功能'/>
            <SignInForm/>
        </div>
    </>
@@ -207,6 +228,7 @@ const LayoutSignIn = (props) => {
 */
 const LayoutSignUp = (props) => <>
        <div className='grow mt-20'>
+            <Banner title='注册' description='这里是演示页面，NotionNext目前不提供会员注册功能'/>
            <SignUpForm/>
        </div>
 </>