程式開發
當我們遇到 Error message "error:0308010C:digital envelope routines::unsupported” React 錯誤要如何解決呢？ 這是因為 Node 版本的問題。我們讓 openssl 可以跑 Legacy code 即可解決！
教導如何讓 Prism.js 有 Apple MacOS 一樣的視窗風格，加入圓角、程式代碼行數、程式語言標籤與螢光主題風格：One Dark ，讓 Blog 的程式變的好看與方便使用！ 為 Prism 加入 Mac 視窗三個點 我們使用 JavaScript 在 pre 前面加入一個 class 為 ‘pre-mac’ 的 div const container = document?.getElementById('container') const codeBlocks = container?.getElementsByTagName('pre') Array.from(codeBlocks).forEach(item => { item.style.whiteSpace = 'pre-wrap' // Add pre-mac element for Mac Style UI const preMac = document.createElement('div') preMac.classList.add('pre-mac') preMac.innerHTML = '<span></span><span></span><span></span>' item.parentElement.insertBefore(preMac, item) }) 接著，我們為這些 <span> 使用 css 畫成圓圈並填入對應色彩，程式如下 .pre-mac { position: relative; margin-top: -7px; top: 21px; left: 10px; width: 100px; z-index: 99; } .pre-mac > span { float: left; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; } .pre-mac > span:nth-child(1) { background: red; } .pre-mac > span:nth-child(2) { background: sandybrown; } .pre-mac > span:nth-child(3) { background: limegreen; } 這樣就會幫我們畫出如同 Mac 視窗的紅綠燈視窗三鍵 Code 加入了 Mac 視窗三鍵 為 Prism 加入 行數 為每個 pre 加入新的 class ”line-numbers” item.classList.add('line-numbers') 讓 Prism 重新跑起來！ Prism.highlightAll() Code 多了行數顯示 為 Prism 加入 Toolbar 因為要加入 Copy 按鈕 與 程式語言顯示 ，這兩個功能都會在工具列上使用到！ 在部落格詳細頁面，我們引入 toolbar 這個 plugin! // @/themes/[your_theme]/components/ArticleDetail.js import 'prismjs/plugins/toolbar/prism-toolbar' 為 Prism 加入 Copy 按鈕 讓複製程式碼變得很輕鬆，一鍵複製！ 在部落格詳細頁面，我們引入 copy-to-clipboard 這個 plugin! // @/themes/[your_theme]/components/ArticleDetail.js import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard' 為 Prism 加入程式語言顯示 // @/themes/[your_theme]/components/ArticleDetail.js import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard' 使用漂亮的程式碼主題： One Dark 首先，我們要先裝 prism-themes 來裝額外的主題！我選擇 one-dark 這個很多人用的主題！ yarn add prism-themes 再來，我們要在 app 底層載入這個 css // @/pages/_app.js import 'prism-themes/themes/prism-one-dark.css' 最後，我對於 css 與底色做一些調整，並加入圓角，漂亮的 Mac 風格程式碼螢光器就做好啦！ Reference: 1. HTMLCollection ForEach https://stackoverflow.com/a/37042297 2. jQuery Before in Javascript https://stackoverflow.com/questions/22406859/what-is-the-equivalent-of-jquerys-before-function-in-javascript 3. Prism copy to clipboard https://prismjs.com/plugins/copy-to-clipboard/ https://owoii.com/archives/34.html
讓 YouTube Chapters 章節功能可以在我的 Blog 中，自由的跳轉播放，這樣使用者不用點擊每個時間點都跳到新的頁面，跳到 YouTube 產生體驗上的割裂感。
我們今天就來打造一個 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 😃
