我有一個需要從 1 到 30 建立 30 個資料夾的需求。在建立了前 4 個資料夾後，我開始覺得手動建立太煩了。 所以我上了 Google，找到了這個 Bash 的一行指令： mkdir {1..30} 這個指令在 Zsh 上也可以運行，但在我使用的 Fish shell 上則不行。

在本文中，我們將探討多種使用 CSS 去設計 Vue.js 元件的方式。 注意: 本教程使用 Vue.js 的單文件元件 最簡單的方式是在 Vue.js 元件中使用 style 標籤，就像在 HTML 中一樣： <template> <p style="text-decoration: underline">Hi!</p> </template> <script> export default { data() { return { decoration: 'underline' } } } </script> 這是最靜態的方式。如果你希望 underline 在元件的資料中被定義，你可以這樣做： <template> <p :style="{'text-decoration': decoration}">Hi!</p> </template> <script> export default { data() { return { decoration: 'underline' } } } </script> :style 是 v-bind:style 的縮寫。在本教程中，我將使用這個縮寫。 注意到我們必須將 text-decoration 用引號包起來。這是因為其中有連字符，而連字符不是有效的 JavaScript 識別符號。 你可以避免使用引號，使用 Vue.js 提供的特殊 camelCase 語法，並將其改寫為 textDecoration：...

如何在 Next.js 中對 React 組件進行樣式化？ 我們有很多自由度，因為可以使用任何我們喜歡的庫。 但是 Next.js 內建了 styled-jsx，這是由 Next.js 的開發團隊開發的庫。 這是一個非常酷的庫，提供了範圍限定的 CSS，這對於可維護性非常有幫助，因為 CSS 只會影響應用到的組件。 我認為這是一種很好的撰寫 CSS 的方式，而不需要應用其他增加複雜度的庫或預處理器。 在 Next.js 中為 React 組件添加 CSS，我們將它插入到 JSX 中一個片段中，該片段以以下開始： <style jsx>{` 並以以下結束： `}</style> 在這個奇怪的區塊中，我們可以像在 .css 文件中一樣編寫普通的 CSS： <style jsx>{` h1 { font-size: 3rem; } `}</style> 你可以像這樣在 JSX 內寫入它： const Index = () => ( <div> <h1>首頁</h1> <style jsx>{` h1 { font-size: 3rem; } `} </style> </div> ) export default Index 在這個區塊內，我們可以使用插值來動態改變值。例如，這裡假設父組件傳遞了一個 size 屬性，我們在 styled-jsx 區塊中使用它：...

使用 create-react-app 建立 Electron Node.js 桌面應用程式的方法 2021 更新: 我強烈建議使用 electron-react-boilerplate 取代本文所述的方法 如果尚未安裝 Node.js，請先安裝 轉到開發資料夾 建立 React 應用程式 加入 Electron 安裝 foreman 以允許從命令列執行應用程式 安裝 create-react-app 的相依性 配置 eslint 配置完成！ 啟動 感謝 當我在 2015 年首次使用 Electron 時，它還不清楚它在現代應用程式中如此普及，而且我對其所導致的應用程式大小感到震驚。 但是，我們可以清楚地知道 Electron 已經成為必不可少的工具，並且你的應用程式不需要讓人感到遲鈍和消耗大量記憶體，就像VS Code每天向我展示的那樣（在一部不是非常快的機器上）。 所以，這裡有一個快速入門指南，使用 create-react-app 創建一個React應用程式，並預先整合了 ESlint。 如果尚未安裝 Node.js, 請先安裝 在 macOS 上： brew install node 轉到開發資料夾 cd ~/dev 建立 React 應用程式 npx create-react-app app cd app 加入 Electron npm install electron npm install --save-dev electron-builder 安裝 foreman 以允許從命令列執行應用程式 npm install foreman -g 安裝 create-react-app 的相依性 npm install 配置 eslint ....

如何在伺服器端重新導向到其他頁面 重新導向在網頁開發中很常見。你可以使用 Response.redirect() 方法來創建重新導向： res.redirect('/go-there') 這將創建一個 302 重新導向。 使用以下方法來進行 301 重新導向： res.redirect(301, '/go-there') 你可以指定絕對路徑 (/go-there)、絕對 URL (https://anothersite.com)、相對路徑 (go-there) 或使用 .. 回到上一層： res.redirect('../go-there') res.redirect('..') 你還可以使用以下方式重新導向回 Referer 的 HTTP 標頭值（如果沒有設定則預設為 /）： res.redirect('back')

如何使用 Node.js 的 Express 函式庫來提供 JSON 資料 當在 Express 上監聽連線時，每個網路呼叫都會呼叫回呼函式並傳入一個 Request 物件實例與一個 Response 物件實例。 範例： app.get('/', (req, res) => res.send('Hello World!')) 在這個例子中，我們使用了 Response.send() 方法，該方法接受任何字串。 你可以使用 Response.json() 方法將 JSON 資料傳送給客戶端，這是一個非常有用的方法。 它接受一個物件或陣列，並在傳送之前將其轉換為 JSON 格式： res.json({ username: 'Flavio' })

查詢字串是指位於 URL 路徑之後並以問號（’?’）開頭的部分。讓我們看看如何獲取這些屬性及其值。 例如： ?name=flavio 可以使用 & 添加多個查詢參數： ?name=flavio&age=35 要如何在 Express 中獲取這些查詢字串值？ Express 讓我們輕鬆完成，它會為我們填充 Request.query 物件： const express = require('express') const app = express() app.get('/', (req, res) => { console.log(req.query) }) app.listen(8080) 該物件中的每個查詢參數都填入一個屬性。 如果沒有查詢參數，則該物件為空。 這使得可以使用 for...in 迴圈來進行迭代： for (const key in req.query) { console.log(key, req.query[key]) } 這將輸出查詢屬性的鍵和值。 也可以單獨存取屬性： req.query.name //flavio req.query.age //35

在本篇文章中，我們將介紹如何使用 Express 擷取 POST 查詢參數。 POST 查詢參數通常是由 HTTP 客戶端傳送的，例如表單提交或是進行 POST 請求時傳送的資料。 如何存取這些資料呢？ 如果資料是以 JSON 格式傳送，使用 Content-Type: application/json，你需要使用 express.json() 中介軟體： const express = require('express') const app = express() app.use(express.json()) 如果資料是以 Content-Type: application/x-www-form-urlencoded 格式傳送，你需要使用 express.urlencoded() 中介軟體： const express = require('express') const app = express() app.use(express.urlencoded({ extended: true })) 在兩種情況下，你可以透過 Request.body 來存取資料： app.post('/form', (req, res) => { const name = req.body.name }) 需要注意的是，舊版的 Express 需要使用 body-parser 模組來處理 POST 資料，但從 Express 4.16 版本（於2017年9月發佈）開始，已經不再需要使用該模組。

在現代 JavaScript 網頁開發工作流中，通常會使用 npm 套件來安裝 JavaScript。然而，有時我們需要包含一個外部的 JavaScript 檔案，而現代的工具可能會讓這件事變得有些困難。 特別是在我的網站中需要包含來自 Wistia 的視頻時，經過快速查看後，一切看起來比我想像的要複雜得多。Wistia 給了我這個 HTML 片段來嵌入視頻： <script src="https://fast.wistia.com/embed/medias/VIDEOURL.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia\_responsive\_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia\_responsive\_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia\_embed wistia\_async\_VIDEOURL seo=false videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia\_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/VIDEOURL/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div> 在一個「正常」的 HTML 網站中，比如我通常使用 Hugo 構建的網站，這是非常簡單的。我只需要將這段程式碼添加到我的頁面中即可。 但是在一個 Gatsby 頁面中，這是一個 React 組件，該怎麼做呢？ 我查看了一些插件，但沒有一個真正符合我的需求。解決方案可能有些「hacky」，但效果非常好，而且我仍然覺得對發生的事情有掌控權。 我將 HTML 片段轉換成了 JSX，並正確地轉換了所有的 HTML 屬性：class -> className，aria-hidden -> ariaHidden，以及樣式 - 可以使用像 htmltojsx 這樣的工具來快速轉換。 然後，我將這段程式碼添加到 gatsby-browser.js 檔案中，在頁面加載時加入我需要的腳本： const addScript = url => { const script = document....

最近，我在 Netlify 上創建了一個新的網站，希望將其中一部分公開在 GitHub 上，以便任何人都可以提交錯別字等問題的拉取請求。 我在 Hugo 倉庫中有一個名為 content 的文件夾，我想公開的部分是一個名為 handbook 的文件夾。 因此，我為此創建了一個新的倉庫，名為 handbook。 我刪除了父倉庫中的 content/handbook 文件夾（如果您從頭開始創建，則不需要此步驟，但我希望移動現有內容）： rm -rf content/handbook 然後我提交了更改，然後添加了子模組： git submodule add https://github.com/flaviocopes/handbook 我在 Netlify 上部署了網站，它自動捕獲了子模組。 但在本地上遇到了一個問題，因為並不是像子模組存儲庫文件夾上有著符號鏈接這樣。 我刪除了 content/handbook 文件夾，並從子模組的本地存儲庫添加了一個符號鏈接： ln -s ../../../dev/handbook/ 然後，我告訴 Git 停止跟踪 content/handbook 文件夾，使用以下命令： git update-index --skip-worktree content/handbook （要恢復跟踪，請使用 --no-skip-worktree） 這樣，我既有子模組，也在本地上有指向子模組的符號鏈接，兩者兼得。