Fukasawa 主题新增MailChimp表单

lib/lang/en-US.js

@@ -67,5 +67,10 @@ export default {
   POST: {
     BACK: 'Back',
     TOP: 'Top'
+  },
+  MAILCHIMP: {
+    SUBSCRIBE: 'Subscribe',
+    MSG: 'Get the latest news and articles to your inbox every month.',
+    EMAIL: 'Email'
   }
 }

lib/lang/zh-CN.js

@@ -69,5 +69,10 @@ export default {
   POST: {
     BACK: '返回上页',
     TOP: '回到顶部'
+  },
+  MAILCHIMP: {
+    SUBSCRIBE: '邮件订阅',
+    MSG: '订阅以获取每月更新的新闻和文章，直接发送至您的邮箱。',
+    EMAIL: '邮箱'
   }
 }

themes/fukasawa/components/AsideLeft.js

@@ -13,6 +13,7 @@ import { useFukasawaGlobal } from '..'
 import CONFIG from '@/themes/fukasawa/config'
 import { AdSlot } from '@/components/GoogleAdsense'
 import { siteConfig } from '@/lib/config'
+import MailChimpForm from './MailChimpForm'
 
 /**
  * 侧边栏
@@ -82,7 +83,11 @@ function AsideLeft(props) {
             </section>
 
             <section>
-                 <AdSlot type='in-article'/>
+                <MailChimpForm />
+            </section>
+
+            <section>
+                <AdSlot type='in-article' />
             </section>
 
             {router.asPath !== '/tag' && <section className='flex flex-col'>

themes/fukasawa/components/MailChimpForm.js

@@ -0,0 +1,62 @@
+import { useEffect, useRef, useState } from 'react'
+import { subscribeToNewsletter } from '@/lib/mailchimp'
+import { siteConfig } from '@/lib/config'
+import CONFIG from '../config'
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 邮件订阅表单
+ * @returns
+ */
+export default function MailChimpForm() {
+  const formRef = useRef()
+  const [success, setSuccess] = useState(false)
+  const { locale } = useGlobal()
+
+  useEffect(() => {
+    const form = formRef.current
+    const handleSubmit = (e) => {
+      e.preventDefault()
+      const email = document.querySelector('#newsletter').value
+      subscribeToNewsletter(email).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)
+    }
+  }, [subscribeToNewsletter])
+
+  return <>
+        {siteConfig('FUKASAWA_MAILCHIMP_FORM', null, CONFIG) && <div className="sm:col-span-6 md:col-span-3 lg:col-span-3">
+            <h6 className="text-gray-800 font-medium mb-2">{locale.MAILCHIMP.SUBSCRIBE}</h6>
+            <p className="text-sm text-gray-600 mb-4">{locale.MAILCHIMP.MSG}</p>
+            <form ref={formRef}>
+                <div className="flex flex-wrap mb-4">
+                    <div className="w-full">
+                        <label className="block text-sm sr-only" htmlFor="newsletter">{locale.MAILCHIMP.EMAIL}</label>
+                        <div className="relative flex items-center max-w-xs">
+                            <input disabled={success} id="newsletter" type="email" className="form-input w-full text-gray-800 px-3 py-2 pr-12 text-sm" placeholder={locale.MAILCHIMP.EMAIL} required />
+                            <button disabled={success} type="submit" className="absolute inset-0 left-auto" aria-label="Subscribe">
+                                <span className="absolute inset-0 right-auto w-px -ml-px my-2 bg-gray-300" aria-hidden="true"></span>
+                                <svg className="w-3 h-3 fill-current text-blue-600 mx-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M11.707 5.293L7 .586 5.586 2l3 3H0v2h8.586l-3 3L7 11.414l4.707-4.707a1 1 0 000-1.414z" fillRule="nonzero" />
+                                </svg>
+                            </button>
+                        </div>
+                        {/* Success message */}
+                        {success && <p className="mt-2 text-green-600 text-sm">Thanks for subscribing!</p>}
+                    </div>
+                </div>
+            </form>
+        </div>
+        }
+    </>
+}

themes/fukasawa/config.js

@@ -1,4 +1,5 @@
 const CONFIG = {
+  FUKASAWA_MAILCHIMP_FORM: true, // 邮件订阅表单
 
   FUKASAWA_POST_LIST_COVER: true, // 文章列表显示图片封面
   FUKASAWA_POST_LIST_COVER_FORCE: false, // 即使没有封面也将站点背景图设置为封面