facebook-page 作为可选配置

This commit is contained in:
tangly1024
2022-04-19 15:48:02 +08:00
parent 7ef433ca8f
commit cd16275b0a
2 changed files with 14 additions and 11 deletions

View File

@@ -10,13 +10,13 @@ const BLOG = {
NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
DEBUG: process.env.NEXT_PUBLIC_DEBUG || false, // 是否显示调试按钮
FACEBOOK_PAGE_ID: process.env.NEXT_PUBLIC_FACEBOOK_PAGE_ID || '', // Facebook Page ID 來啟用 messenger 聊天功能
FACEBOOK_APP_ID: process.env.NEXT_PUBLIC_FACEBOOK_APP_ID || '', // Facebook App ID 來啟用 messenger 聊天功能
// 一个小插件展示你的facebook fan page~ @see https://tw.andys.pro/article/add-facebook-fanpage-notionnext
FACEBOOK_PAGE_TITLE:
process.env.NEXT_PUBLIC_FACEBOOK_PAGE_TITLE || 'FACEBOOK 粉絲團', // 邊欄 Facebook Page widget 的標題欄,填''則無標題欄
process.env.NEXT_PUBLIC_FACEBOOK_PAGE_TITLE || null, // 邊欄 Facebook Page widget 的標題欄,填''則無標題欄 e.g FACEBOOK 粉絲團'
FACEBOOK_PAGE:
process.env.NEXT_PUBLIC_FACEBOOK_PAGE ||
'https://www.facebook.com/tw.andys.pro', // Facebook Page 的連結
process.env.NEXT_PUBLIC_FACEBOOK_PAGE || null, // Facebook Page 的連結 e.g https://www.facebook.com/tw.andys.pro
FACEBOOK_PAGE_ID: process.env.NEXT_PUBLIC_FACEBOOK_PAGE_ID || '', // Facebook Page ID 來啟用 messenger 聊天功能
FACEBOOK_APP_ID: process.env.NEXT_PUBLIC_FACEBOOK_APP_ID || '', // Facebook App ID 來啟用 messenger 聊天功能 获取: https://developers.facebook.com/
THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题, 支持 ['next','hexo',"fukasawa','medium']
THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || false, // 是否显示切换主题按钮

View File

@@ -2,9 +2,12 @@ import BLOG from '@/blog.config'
import { FacebookProvider, Page } from 'react-facebook'
import { FacebookIcon } from 'react-share'
const FacebookPage = () => (
<div className="shadow-md hover:shadow-xl dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray lg:duration-100 justify-center">
{BLOG.FACEBOOK_PAGE_TITLE && (
const FacebookPage = () => {
if (!BLOG.FACEBOOK_APP_ID && !BLOG.FACEBOOK_PAGE) {
return <></>
}
return <div className="shadow-md hover:shadow-xl dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray lg:duration-100 justify-center">
{BLOG.FACEBOOK_PAGE && (
<div className="flex items-center pb-2">
<a
href={BLOG.FACEBOOK_PAGE}
@@ -19,9 +22,9 @@ const FacebookPage = () => (
</a>
</div>
)}
<FacebookProvider appId={BLOG.FACEBOOK_APP_ID}>
{BLOG.FACEBOOK_APP_ID && <FacebookProvider appId={BLOG.FACEBOOK_APP_ID}>
<Page href={BLOG.FACEBOOK_PAGE} tabs="timeline" />
</FacebookProvider>
</FacebookProvider>}
</div>
)
}
export default FacebookPage