在我們能夠使用 Dockerfile 進行有趣的操作之前，我們需要安裝 Docker。 確切的安裝步驟取決於您的作業系統。 Docker 網站提供了詳細的安裝說明： Windows Linux macOS 我是一個 Mac 用戶，我將向您展示在 Mac 上安裝 Docker 的確切步驟。如果您使用的是 Windows 或 Linux，請參考相應的指示（我沒有 Windows 或 Linux 桌面電腦可以測試）。 Docker Desktop for Mac 是您需要安裝的軟件，您可以在這裡找到它: https://hub.docker.com/editions/community/docker-ce-desktop-mac/ 下載安裝檔後，安裝檔大小超過 400MB，運行安裝檔，並將 Docker 應用程序移動到「應用程式」資料夾中。 執行應用程序： 第一件事是要求您安裝命令行工具，並需要您的許可權（並輸入密碼）： 在您的 Mac 工具列中，您會看到鯨魚圖示，最初通知您 Docker Desktop 正在啟動： 完成後，您將看到綠燈亮起： 現在，您已經安裝了 Docker 命令行工具。 打開終端並運行 docker version 以確保一切正常運作。 Tags: macOS, Docker installation

逐步指南，使用 Homebrew 在 macOS 上安裝 MySQL 在 macOS 上，您可以使用 Homebrew 輕鬆地安裝 MySQL。 執行以下命令： brew install mysql 上述命令需要一段時間，然後將列印出類似於以下的內容： 現在，您可以通過運行以下命令來啟動 MySQL 服務器： brew services start mysql 現在，我們需要保護 MySQL 服務器。默認情況下，該服務器不帶有 root 密碼，因此我們需要確保其受到保護。 執行以下命令： mysql_secure_installation 該過程可能需要一段時間，但可以確保您獲得最佳的預設值： 由於我們使用 brew services start mysql 來啟動 MySQL，所以在您的 Mac 重新啟動時會重新啟動它。您可以運行以下命令： brew services stop mysql 來阻止這種情況發生，同時也可以立即停止 MySQL。 您還可以運行以下命令，以避免此 守護模式（這是我們稱呼始終在背景運行並在計算機重新啟動時重新啟動的程序）： mysql.server start 這將啟動 MySQL 並使其一直運行，直到計算機關機，或者直到您運行以下命令： mysql.server stop 並且在重新啟動時不會重新啟動它。 這取決於您自己決定哪一種方式更適合您。 現在，您可以使用以下命令連接到服務器： mysql -u root -p 在運行此命令之後，您需要輸入 root 用戶密碼，完成後，您應該在屏幕上看到這個畫面： 可以使用 TablePlus 這款優秀的 GUI（圖形化界面）軟件與 SQLite 數據庫進行交互。...

本篇提供在 Mac 上安裝最新版本 Python 的操作指南。 macOS 預設安裝的 Python 2 已經過時，為了兼容性而保留在 /usr/bin/python 路徑下。 如果你已經安裝了 Apple 的開發工具 Xcode，那麼 Python 3 會被安裝在 /usr/bin/python3 路徑下。你可以在終端機上運行 python3 命令檢查已安裝的 Python 版本，如果版本足夠新的話，你可能已經完成安裝。 Python 3 是我們現代 Python 開發所使用的版本。 然而對於運行的版本號，你沒有太大的控制權，因為蘋果只有在每次新的 Xcode 版本釋出時才會更新 Python。 在我的情況下，我已經安裝了 Python 3.8，但 Python 3.9 也是可用的。 其中一個選擇是使用 Homebrew 安裝最新的 Python 版本。 另一個選擇是使用官方的 Python 安裝程序，我們將使用這種方法。 前往 https://www.python.org，選擇下載菜單，懸停在 “Mac OS X” 上，出現一個連結來下載官方安裝程序： 點擊該連結，運行安裝程序： 點擊 “繼續”： 然後再次點擊 “繼續”。一個新的面板將出現，其中總結了 Python 的歷史和治理情況： Python 是由 Guido van Rossum 在 1990 年代初在荷蘭的國立數學研究所 (Stichting Mathematisch Centrum, CWI) 為了接替一種叫做 ABC 的語言而創建的。Guido 仍然是 Python 的主要作者，儘管它包含了許多他人的貢獻。...

我試圖安裝Rails，但一直遇到錯誤：“Rails is not currently installed on this system”。 直到我執行了以下步驟後，我才弄明白： 安裝 rvm brew install gpg2 gpg --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB 然後運行 curl -sSL https://get.rvm.io | bash -s stable --rails 這將安裝最新穩定版本的Ruby和Rails 然後運行（Bash / Zsh） source /Users/flavio/.rvm/scripts/rvm 這樣，rails 命令就可以正常運行。 對於 Fish，我需要執行以下命令，而不是上面的命令： curl -L --create-dirs -o ~/.config/fish/functions/rvm.fish https://raw.github.com/lunks/fish-nuggets/master/functions/rvm.fish 然後運行 echo "rvm default" >> ~/.config/fish/config.fish

我在我的 Mac 上使用 “cmd-shift-4” 的組合鍵進行大量的截圖。在從我不是視網膜的 Apple Cinema Display 轉換到全新的 Studio Display 5K 後，我注意到某些截圖的大小非常巨大。 macOS 默認使用 PNG 格式保存截圖，取決於截圖中的內容，你很容易得到像 10MB 的截圖。 在終端中執行以下命令： defaults write com.apple.screencapture type jpg 接著執行 killall SystemUIServer 這將使截圖使用 JPG 格式，這將大大減小截圖的文件大小。

在開發我的新網站時，我有一個簡單的需求。 我將數據存儲在 SQLite 數據庫中，並且我希望在開發期間的本地工作中每天備份一次。 SQLite非常好，因為它只是一個文件。它不是“在你的計算機的某個地方”或“在一個服務器的某個地方”，但你並不確定具體位置。 要進行備份，你只需要將文件複製到“備份”文件夾中，就完成了。 我手動做了一段時間，但我也想使它自動化，以免費空我的大腦，而且我想避免使用cron任務和shell腳本（然後容易忘記），毕竟這只是暫時性的，只需要幾周時間。 不值得設置cron和bash腳本自動化。 所以我首先想到的是 Automator。可能是Mac上最被低估的應用程序。 我經常使用它來做一些小事，比如更改圖像格式和尺寸。 我在 Automator 中創建了一個應用程序： 然後，我按照下面的方式設置它，以獲取我要備份的文件，將其複製到“備份”文件夾中，並添加日期和時間： 我將其保存為backup.app。 然後，我打開日曆，在“提醒”中設置它打開此文件： 並設置它每天重複一次。 我將其添加到自動化日曆中，這樣我就知道我所有的自動化都在哪裡，我也知道在哪裡可以禁用它們。 然後，我將整個日曆設置為隱藏，以避免在正常的日曆視圖中混雜： 唯一的問題是現在Mac會通知我這些事件。 在特定日曆上設置“忽略提醒”並不起作用，因為備份的文件並沒有被調用（這是合理的，因為它是設置為提醒）。 我不太清楚，這是一種解決方法，但並不是長期解決方案。我只是描述了我的做法。 現在在 macOS Monterey 上，使用快捷方式可能會更容易，但我沒有試過，所以不太確定。

怎樣解決在 Next.js 中使用 router.push() 後出現空白頁面的問題？ 在使用 Next.js 開發時，你是否在使用 router.push() 後面臨空白頁面的問題？ 我也曾經遇到這個問題，以下是解決方法。 在調用 router.push() 後不要使用 return 並且也不要將 router.push() 作為返回值。 永遠不要在使用 router.push() 時使用 return。 例如，不要這樣做： router.push('/') return 也不要這樣做： return router.push('/') 應該這樣做： router.push('/')

如何在 Next.js 網站中設置動態內容？ 在使用 Link 在 Next.js 中連接兩個頁面文章中，我們看到了如何將主頁連接到博客頁面。 博客是 Next.js 的一個很好的用例，我們將在本章中繼續探索，並添加博客文章。 博客文章有動態的 URL，例如標題為“Hello World”的文章可能具有 URL /blog/hello-world，標題為“我的第二篇文章”的文章可能具有 URL /blog/my-second-post。 這些內容是動態的，可能來自數據庫、markdown 文件或其他來源。 Next.js 可以根據動態 URL 提供動態內容。 我們可以通過使用 [] 語法創建動態 URL。 如何做到這一點呢？我們添加一個 pages/blog/[id].js 文件。此文件將處理所有 /blog/ 路由下的動態 URL，例如上面提到的 /blog/hello-world、/blog/my-second-post 等。 在文件名中，方括號中的[id]表示任何動態的內容將放在路由器的查詢屬性的id參數中。 好的，一次介紹了這麼多東西。 什麼是路由器（router）？ 路由器是 Next.js 提供的一個庫。 我們從 next/router 導入它： import { useRouter } from "next/router"; 一旦我們有了 useRouter，我們可以使用以下代碼來實例化路由器對象： const router = useRouter(); 一旦我們有了這個路由器對象，我們可以從中提取信息。 特別是我們可以通過訪問 [id].js 文件中的 router.query.id 來獲取 URL 的動態部分。 讓我們繼續實踐這些事情。 創建文件 pages/blog/[id].js： import { useRouter } from "next/router"; export default () => { const router = useRouter(); return ( <> <h1>博客文章</h1> <p>文章 ID: {router....

如何在您的 Next.js 應用程式中實現懶加載模組 能夠視覺化分析捆包很棒，因為我們可以輕鬆優化我們的應用程式。 假設我們需要在我們的部落格文章中加載 Moment 庫。運行： npm install moment 以將其包含在專案中。 現在讓我們模擬在/blog和/blog/[id]這兩個不同路由中需要使用Moment的情況。 我們在pages/blog/[id].js中導入它： import moment from 'moment' ... const Post = props => { return ( <div> <h1>{props.post.title}</h1> <p>發布於 {moment().format('dddd D MMMM YYYY')}</p> <p>{props.post.content}</p> </div> ) } 這只是作為示例添加了今天的日期。 這將導致 Moment.js 包含在部落格文章頁面的捆包中，您可以通過運行npm run analyze來看到： 看到現在在/blog/[id]中有一個紅色條目，這是我們添加Moment.js後的路由！ 這導致檔案從1kB變為350kB，十分驚人。原因是Moment.js本身的大小為349kB。 客戶端束縛視覺化現在顯示的是更大的捆包是內容頁面，以前只是非常小。且它的99％是Moment.js。 每次載入部落格文章時，我們都需要將所有這些程式碼傳輸到客戶端，這並不理想。 修復的一種方法是尋找一個尺寸較小的庫，因為Moment.js因並不以輕量級聞名（尤其是在默認情況下包含了所有的locales），但為了範例的完整性，讓我們假設我們必須使用它。 相反，我們可以將所有Moment庫程式碼分離到單獨的捆包中。 如何實現呢？我們不再在組件層級上導入Moment，而是在getInitialProps中執行一個異步導入操作，然後計算要發送給組件的值。 請記住，我們無法在 getInitialProps() 回傳的對象中返回複雜對象，所以我們在其中計算了日期： import posts from '../../posts.json' const Post = props => { return ( <div> <h1>{props.post.title}</h1> <p>發布於 {props.date}</p> <p>{props.post.content}</p> </div> ) } Post....

如何使用包裝組件並向其中添加常用的側邊欄或頂部欄 您網站上的所有頁面幾乎都是相同的，都有外觀元件和共同基礎層，您只需要更改其中的內容。 有導覽列、側邊欄和實際內容。 在 Next.js 中要如何建立這樣的系統？ 有兩種方法。一種是使用高階元件，通過創建components/Layout.js組件： export default Page => { return () => ( <div> <nav> <ul>....</ul> </nav> <main> <Page /> </main> </div> ) } 我們可以在其中匯入獨立的頁首和/或側邊欄組件，還可以添加所需的所有 CSS。 然後像這樣在每個頁面中使用它： import withLayout from '../components/Layout.js' const Page = () => <p>這是一個頁面!</p> export default withLayout(Page) 但是我發現這只適用於簡單的情況，不需要在頁面上調用getInitialProps()。 為什麼這樣做會有問題呢？ 因為getInitialProps()只在頁面組件上被呼叫。但如果我們從頁面中導出高階元件withLayout()，則不會調用Page.getInitialProps()，而會調用withLayout.getInitialProps()。 為了避免過於複雜化程式碼庫，另一種方法是使用 props： export default props => ( <div> <nav> <ul>....</ul> </nav> <main> {props.content} </main> </div> ) 現在我們在頁面中像這樣使用它： import Layout from '../components/Layout.js' const Page = () => ( <Layout content={( <p>這是一個頁面!...