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?
MacOS Parallels Desktop Windows 螢幕黑畫面如何解決?

MacOS 好用的多系統工作環境 MacBook 的一大優點就是可以使用 Parallels Desktop 來安裝 VM 虛擬機,而我們在虛擬機中,可以裝入 Windows、Linux 等作業系統,達到一台 MacBook 跑雙系統、多系統 ( 一機多用 )的功能,這對於辦公與開發都是十分實用的!再來,MacOS 蘋果的 Unix 作業系統**穩定好用,**可以長久不關機而不當機。 許多的 MacBook 使用者日常並沒有在關機的習慣,我們只要將 MacBook 的螢幕闔上,MacOS 便會自動地進入休眠待機,而當我們要開始工作時,打開螢幕即可開始工作! 遭遇問題 當我們正要開始工作的時候,打開 MacBook,使用 Parallels Desktop 發現 Windows 黑畫面了! 但是,我們的滑鼠還是可以移動,但 Windows 系統就是叫不醒! 對於要立即處理工作的我們來說,十分崩潰!到底該如何排除問題呢? 問題原因 經過檢測與測試問題後發現,MacOS 在進入休眠的時候,因為 Parallels Desktop 尚在運作而沒有停止,記憶體因為要進入待命,會將所以的 Ram 回存到 SSD 內。待命喚醒後,MacOS 系統會將記憶體恢復,但不幸的是 Parallels Desktop 內的 Windows 產生了記憶體錯誤,Windows 系統便會在虛擬機內產生黑畫面! 問題解法 要解決這個問題並不難,原理是重新將 Windows 如同強制重開一樣重新開機即可。在虛擬機中,我們要使用以下的步驟。 <aside> 💡 小提示:待命前的資料還是有可能因為 Windows 上的軟體沒有自動儲存功能而有不見得風險,移動前請確保有妥善的存擋再進入待命。或者,使用會自動存擋的軟體,確保資料安全! </aside> 步驟 在 Parallels Desktop 軟體內, 1. ✋ ❌ 停止軟體 2. 🔌 💻 重開虛擬機 問題排除! 我們現在可以重新進入 Windows 10 啦!🎉✌️ 結論 希望這篇文章有協助到你解決 Parallels Desktop 偶爾出錯的問題!這樣應該不需要多跑一趟 Apple 直營店還不一定會解決第三方軟體的問題。祝福大家工作順利,虛擬機工作效率高!😂

MacOS Parallels Desktop Windows 螢幕黑畫面如何解決?
No More 😰