NotionNext 加入側欄 Facebook Fan Page 小工具

我們今天就來打造一個 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

NotionNext 加入側欄 Facebook Fan Page 小工具
如何喚起 Facebook comment plugin?

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

如何喚起 Facebook comment plugin?
NotionNext Facebook Customer Chat Bubble

當我們打開 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 😃

NotionNext Facebook Customer Chat Bubble
Next.js Eslint 報錯: Missing space before function parentheses in VS Code

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

Next.js Eslint 報錯: Missing space before function parentheses in VS Code
NotionNext Facebook Open Graph url, image 優化, Vercel 衝突解決!

問題描述 什麼是 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>

NotionNext Facebook Open Graph url, image 優化, Vercel 衝突解決!
No More 😰