#程式

我們今天就來打造一個 Facebook 粉絲團的小工具插件給 NotionNext 吧！ 插件 我使用 react-facebook 這個套件來使用它整合好的 Page 元件 使用 FACEBOOK_APP_ID 與 FACEBOOK_PAGE 這兩個 BLOG 內的參數來渲染小工具 美化 置中 Facebook 的 Page 小工具預設是置左的擺放，在桌面的瀏覽器觀看，小工具大多在側欄，問題並不嚴重。不過，當我拿起手機要欣賞我最新版部落格傑作的時候，發現置左實在太醜。 NotionNext 使用 tailwind 作為 CSS 美化工具，我們只要在元件外用個 div 包起來，加入 justify-center 在 className 內即可將元件置中。 加框 Facebook 小工具並非原生 react ，而是使用 iframe 的方式嵌入，這樣使得網站載入都會有時間差，同時，小工具的直角性質跟我們的主題有許多圓角搭配不上，所以我將它加了一個框，使用 tailwind 做起來很簡單！ 標題 為了避免側欄小工具突然出現有點突兀，我在小工具上方加入了 “FACEBOOK 粉絲團” 的標題，並且在標題前面加入了好看的 Facebook icon，並且為 icon 與標題加入了連結，這樣既美觀也可確保 如果小工具沒有畫出來，使用者也可ㄧ點選標題來找到我的粉絲頁！ 使用 BLOG.FACEBOOK_PAGE_TITLE && ( 的語法是確保如果有 FACEBOOK_PAGE_TITLE 這個標題參數，再去畫出標題元件。使用參數來表示標題提供使用者客製化標題的可能性，並且提供 NotionNext 專案的多國使用者可以挑選他們要的主題字，讓多國語言的使用者在 config 調整即可，不用到程式內改動！ 結論 目前，此功能已經 PR 到 GitHub 上了，作者同意後，大家就可以用啦！ 這邊順便推廣一下我客戶的新網站 https://tw.julies.pro

最近幫網頁加入 Facebook comment 的插件，不過因為 comment 留言插件不是一開始便載入。 我們在元件內使用 useEffect 當 window 有 FB 的狀況下，我們去喚醒他！ 這樣我們的 Facebook Comment 就可以被叫出來喔！

當我們打開 Facebook 的時候，我們最喜歡打開右下角的聊天氣泡，開始跟朋友聊天！ 🪴 開發點子萌芽 <aside> 😥 一個人寫 Blog 很孤單，一個人看 Blog 很乏味！ </aside>如果可以在 Blog 跟作者聊天，會不會很讚？ 📣 Introducing Facebook Customer Chat for NotionNext! 我找了好多個 Facebook Customer Chat 插件，一直放在 __document.js Next.js 便不會跑起來。 終於在 __app.js 內，插件終於跑起來了！ 🔨 功用 Facebook Messenger 懸浮氣泡聊天的功能 這個插件使得 NotionNext 有 Facebook 懸浮氣泡聊天的功能，讓使用者更方便的跟粉絲專頁的作者溝通！ 📝 使用須知 使用此插件必須要更改 next.config.js 的 CORS 設定 這個插件應該在伺服器端必須關閉，但是經過我的測試，若使用 Next.js 的 dynamic import 或是 && 來檢查參數，插件便不會執行。 📡 Future work 大家可以看一下怎麼讓 dynamic import 和 env code 檢查可以跑起來，感謝！ 🤔 結論 歡迎大家到 tw.andys.pro 跟我用 Facebook Messenger Chat 聊天！ 看看我的 GitHub PR 😃

問題描述 Missing space before function parentheses 解決方法 1. 修改專案資料夾內的 .eslintrc.js 檔案，在 rules 底下增加"space-before-function-paren": 0, 來關閉此檢查即可。 2. 重新運行：yarn dev 就可以解除格式錯誤的問題啦！

問題描述 什麼是 NotionNext? NotionNext 是一個很棒的 Next.js Blog 系統，它可以讓我使用 Notion 當作寫作的 cms，而網站只要架在 Vercel 上即可，十分方便！ 什麼是 OpenGraph? 遇到什麼問題? 不過當我們要分享我寫好的文章給 Facebook 上的朋友，我們便會遇到 NotionNext 對於 Meta ( Facebook ) OpenGraph 比較支援不足的部分，主要是 url 沒有把 slug 整合好，以及 og:image 沒有整合 Notion 的 coverPhoto 發佈到 Vercel 上，跟 Facebook Open Graph 出現了什麼衝突？ 再來，後面又遇到一個問題，NotionNext 使用 PATH 這個 .env 環境變數，不過這個變數使用 Vercel 發布的時候，Vercel 使用這個環境變數來存 linux 的路徑(👇圖)，造成 og:url 會抓到機器內部的檔案位置！ 解決方法 拆分主題與元件 Meta 參數 我在 NotionNext 2.8.1 的時候，拆分了內建的 hexo 主題，後來 @tanley1024 作者在 2.9.1 版本做了滿多的改動，主要把 meta 這個 props 從主題內的元件拆分到通用的 components，所以我先把主題內的 meta 通通清掉，再把 slug 與 url 整合進去 meta 內，即可修正好這個問題！ 處理衝突的 PATH 參數 正當我把所有問題都解掉的時候，發佈到 Vercel 上，跑出奇怪的 Linux 路徑，看來是 PATH 這個換境變數出錯了，沒關係，我們換個名稱把 PATH 換成 SUB_PATH 即可，這樣路徑就不衝突了！ 結論 把 Code 修一修，發 PR 啦！ <aside> 🤣 Vercel PATH env 會被讀出來會不會有點危險啊！ </aside> <aside> 🤩 寫 Code 寫得好開心啊！越來越順手了！ </aside>