diff --git a/lib/lang/en-US.js b/lib/lang/en-US.js index 98c102bd..063da7f8 100644 --- a/lib/lang/en-US.js +++ b/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' } } diff --git a/lib/lang/zh-CN.js b/lib/lang/zh-CN.js index acd87919..2f4af10f 100644 --- a/lib/lang/zh-CN.js +++ b/lib/lang/zh-CN.js @@ -69,5 +69,10 @@ export default { POST: { BACK: '返回上页', TOP: '回到顶部' + }, + MAILCHIMP: { + SUBSCRIBE: '邮件订阅', + MSG: '订阅以获取每月更新的新闻和文章,直接发送至您的邮箱。', + EMAIL: '邮箱' } } diff --git a/themes/fukasawa/components/AsideLeft.js b/themes/fukasawa/components/AsideLeft.js index 991b9ce4..955cc628 100644 --- a/themes/fukasawa/components/AsideLeft.js +++ b/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) { - + + + + + {router.asPath !== '/tag' && diff --git a/themes/fukasawa/components/MailChimpForm.js b/themes/fukasawa/components/MailChimpForm.js new file mode 100644 index 00000000..f2e990e5 --- /dev/null +++ b/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) && + {locale.MAILCHIMP.SUBSCRIBE} + {locale.MAILCHIMP.MSG} + + + + {locale.MAILCHIMP.EMAIL} + + + + + + + + + + {/* Success message */} + {success && Thanks for subscribing!} + + + + + } + > +} diff --git a/themes/fukasawa/config.js b/themes/fukasawa/config.js index 86e641bd..7145ec1d 100644 --- a/themes/fukasawa/config.js +++ b/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, // 即使没有封面也将站点背景图设置为封面
{locale.MAILCHIMP.MSG}
Thanks for subscribing!