Merge pull request #184 from txs/feature_facebook_fanpage

Add Facebook fanpage sidebar

blog.config.js

@@ -12,7 +12,11 @@ const BLOG = {
 
   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_PAGE: process.env.NEXT_PUBLIC_FACEBOOK_PAGE || 'https://www.facebook.com/tw.andys.pro', // Facebook Page 的連結
+  FACEBOOK_PAGE_TITLE:
+    process.env.NEXT_PUBLIC_FACEBOOK_PAGE_TITLE || 'FACEBOOK 粉絲團', // 邊欄 Facebook Page widget 的標題欄，填''則無標題欄
+  FACEBOOK_PAGE:
+    process.env.NEXT_PUBLIC_FACEBOOK_PAGE ||
+    'https://www.facebook.com/tw.andys.pro', // Facebook Page 的連結
 
   THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题， 支持 ['next','hexo',"fukasawa','medium']
   THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || false, // 是否显示切换主题按钮

components/FacebookPage.js

@@ -0,0 +1,27 @@
+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 && (
+      <div className="flex  items-center pb-2">
+        <a
+          href={BLOG.FACEBOOK_PAGE}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="p-1 pr-2 pt-0"
+        >
+          <FacebookIcon size={28} round />
+        </a>
+        <a href={BLOG.FACEBOOK_PAGE} rel="noopener noreferrer" target="_blank">
+          {BLOG.FACEBOOK_PAGE_TITLE}
+        </a>
+      </div>
+    )}
+    <FacebookProvider appId={BLOG.FACEBOOK_APP_ID}>
+      <Page href={BLOG.FACEBOOK_PAGE} tabs="timeline" />
+    </FacebookProvider>
+  </div>
+)
+export default FacebookPage

package.json

@@ -40,8 +40,10 @@
     "react-cookies": "^0.1.1",
     "react-cusdis": "^2.1.3",
     "react-dom": "17.0.2",
+    "react-facebook": "^8.1.4",
     "react-messenger-customer-chat": "^0.8.0",
     "react-notion-x": "6.6.2",
+    "react-share": "^4.4.0",
     "smoothscroll-polyfill": "^0.4.4",
     "typed.js": "^2.0.12",
     "use-ackee": "^3.0.0"

themes/hexo/LayoutBase.js

@@ -11,26 +11,32 @@ import Live2D from '@/components/Live2D'
 import LoadingCover from './components/LoadingCover'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
+import FacebookPage from '@/components/FacebookPage'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
  * @param props
  * @returns {JSX.Element}
  * @constructor
  */
-const LayoutBase = (props) => {
+const LayoutBase = props => {
   const { children, headerSlot, floatSlot, meta, siteInfo } = props
   const [show, switchShow] = useState(false)
   // const [percent, changePercent] = useState(0) // 页面阅读百分比
-  const rightAreaSlot = <Live2D />
+  const rightAreaSlot = (
+    <>
+      <FacebookPage />
+      <Live2D />
+    </>
+  )
   const { onLoading } = useGlobal()
 
   const scrollListener = () => {
     const targetRef = document.getElementById('wrapper')
     const clientHeight = targetRef?.clientHeight
     const scrollY = window.pageYOffset
     const fullHeight = clientHeight - window.outerHeight
-    let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
+    let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
     if (per > 100) per = 100
     const shouldShow = scrollY > 100 && per > 0
 
@@ -45,37 +51,44 @@ const LayoutBase = (props) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
 
-  return (<div className='bg-hexo-background-gray dark:bg-black'>
-    <CommonHead meta={meta} />
+  return (
+    <div className="bg-hexo-background-gray dark:bg-black">
+      <CommonHead meta={meta} />
 
-    <TopNav {...props} />
+      <TopNav {...props} />
 
-    {headerSlot}
+      {headerSlot}
 
-    <main id='wrapper' className='w-full py-8 min-h-screen'>
+      <main id="wrapper" className="w-full py-8 min-h-screen">
+        <div
+          id="container-inner"
+          className="pt-14 w-full mx-auto lg:flex justify-center lg:space-x-4"
+        >
+          <div className="flex-grow w-full lg:max-w-4xl">
+            {onLoading ? <LoadingCover /> : children}
+          </div>
 
-      <div id='container-inner' className='pt-14 w-full mx-auto lg:flex justify-center lg:space-x-4'>
-        <div className='flex-grow w-full lg:max-w-4xl'>
-          {onLoading ? <LoadingCover /> : children}
+          <SideRight {...props} slot={rightAreaSlot} />
         </div>
+      </main>
 
-        <SideRight {...props} slot={rightAreaSlot} />
+      {/* 右下角悬浮 */}
+      <div className="bottom-12 right-1 fixed justify-end z-20 font-sans text-white bg-indigo-500 dark:bg-hexo-black-gray rounded-sm">
+        <div
+          className={
+            (show ? 'animate__animated ' : 'hidden') +
+            ' animate__fadeInUp justify-center duration-300  animate__faster flex flex-col items-center cursor-pointer '
+          }
+        >
+          <FloatDarkModeButton />
+          {floatSlot}
+          <JumpToTopButton />
+        </div>
       </div>
 
-    </main>
-
-    {/* 右下角悬浮 */}
-    <div className='bottom-12 right-1 fixed justify-end z-20 font-sans text-white bg-indigo-500 dark:bg-hexo-black-gray rounded-sm'>
-      <div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp justify-center duration-300  animate__faster flex flex-col items-center cursor-pointer '}>
-        <FloatDarkModeButton />
-        {floatSlot}
-        <JumpToTopButton />
-      </div>
+      <Footer title={siteInfo?.title || BLOG.TITLE} />
     </div>
-
-    <Footer title={siteInfo?.title || BLOG.TITLE} />
-
-  </div>)
+  )
 }
 
 export default LayoutBase