使用JavaScript來檢測暗模式及檢測模式變更 使用CSS，我們可以使用prefers-color-scheme媒體查詢檢測暗模式。 但是… 如果我們必須使用JavaScript呢？最近我遇到了這個問題，因為我有一些JavaScript代碼，該代碼會將圖像添加到頁面上，但我想根據亮/暗模式顯示不同的圖像。 以下是我們可以實現的方法。 首先，檢測matchMedia對象是否存在（否則瀏覽器不支持暗模式，您可以回退到亮模式）。 然後，使用以下代碼檢查是否為暗模式： window.matchMedia('(prefers-color-scheme: dark)').matches 如果啟用了暗模式，它將返回true。 以下是一個完整的示例，如果為暗模式則反轉圖像的顏色： const img = document.querySelector('#myimage') if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { img.style.filter="invert(100%)"; } 然而，還存在一個問題：如果使用者在使用我們的網站時更改了模式該怎麼辦？ 我們可以使用事件監聽器來檢測模式的變更，像這樣： window.matchMedia('(prefers-color-scheme: dark)') .addEventListener('change', event => { if (event.matches) { //暗模式 } else { //亮模式 } })

在項目開發中，我需要獲取一個路徑的最後一個片段。 這個路徑可以是檔案系統路徑，也可以是URL。 以下是我使用的JavaScript程式碼： const lastItem = thePath.substring(thePath.lastIndexOf('/') + 1) 這段程式碼的原理是什麼？ thePath 字串包含一個路徑，例如 /Users/Flavio/Desktop。 我們使用 lastIndexOf('/') 在 thePath 字串上找到最後一個 / 的索引。 然後，我們將這個索引傳遞給 substring() 方法，同樣作用在 thePath 字串上。 這將返回一個新字串，從最後一個 / 的位置開始，再加上 1 (否則我們也會得到 /)。 最後，我們將這個字串賦值給 lastItem。 你也可以將它封裝成一個簡單的函數： const getLastItem = thePath => thePath.substring(thePath.lastIndexOf('/') + 1) getLastItem('/Users') getLastItem('/Users/Flavio') getLastItem('/Users/Flavio/test.jpg') getLastItem('https://flavicopes.com/test') 在上述例子中，​getLastItem 函數分別應用在幾個不同的路徑上。

使用Rapbian透過VNC進行連接Raspberry Pi的步驟指南 最近我入手了一個Raspberry Pi來進行測試並實現一些項目點子。 我安裝了Raspbian，這是專為Raspberry Pi打造的Linux版本。 然後，我使用HDMI線將Raspberry Pi連接到電視上，並使用USB鼠標和USB鍵盤進行操作，以安裝作業系統並進行基本設置。 接著，我在Pi上設置了VNC服務器，以便能夠從Mac上進行連接。我並不想一直將它連接到電視上。 所以我點擊菜單，轉到Preferences -> Raspberry Pi Configuration： 然後我選擇了Interfaces標籤： 並啟用了VNC選項： 完成後，我點擊了確定，這樣“VNC”圖標就會出現在工具欄中。 上面的截圖已經有這個圖標了，但這是因為我在啟用VNC之後才截取的。 點擊該圖標會顯示VNC服務器面板，其中顯示了Pi的IP地址。 在Mac上，我從https://www.realvnc.com/download/viewer/下載了VNC Viewer，並輸入了Pi的IP地址。 我輸入了用戶名（pi）和該用戶名的密碼，然後就可以了，會彈出一個很好的窗口，顯示Pi桌面的內容！ 唯一的問題是聲音。VNC不支持聲音，所以我將立體聲連接到Pi的音頻插孔，以確認是否有聲音輸出。

Netcat是一個非常有用的Unix指令，我們可以使用它來執行各種網路任務，同時它也非常有用於除錯和學習事物的運作方式。 我們可以透過nc指令來使用Netcat。 使用以下語法連接到任何網路伺服器： nc DOMAIN PORT 例如： nc localhost 8000 一旦連接到伺服器，您可以輸入任何訊息，並且您將看到伺服器發送回的任何回覆。就像是一對一的簡單聊天，您可以在協定的應用層功能上進行工作（如HTTP、FTP、SMTP等）。 使用Netcat，您可以模擬所有這些驅動互聯網上應用程式層協定的協定。 您可以連接到Web伺服器並向其發送HTTP協定指令。例如，我可以使用nc flaviocopes.com 80連接到我的網站，並向其發送以下內容： GET / HTTP/1.1 Host: flaviocopes.com （第三行是一個空行） 伺服器將回覆，回覆中包含HTTP/1.1 301 Moved Permanently到https://flaviocopes.com/的重新定向回應，因為我強制使用HTTPS。 這裡是一個簡單的示例，用於與我單獨構建的“回显”伺服器進行交互，該服務器會將我們發送給它的內容返回： Netcat可以使用TCP（默認協議）或UDP進行操作。 要使用UDP，請添加-u選項： nc -u localhost 8000 您也可以創建一個伺服器。使用-l（listen）選項來聽取特定的埠口： nc -l PORT 然後Netcat將列印出接收到的每個命令。 嘗試在一個終端窗口上運行伺服器命令nc -l 8001，並在另一個終端窗口上運行客戶端命令nc localhost 8001，然後通過在客戶端終端窗口中輸入消息來向伺服器發送消息。 Netcat還可用於網路檢測。您可以在特定範圍內掃描伺服器的開放埠口： nc -v -z localhost 1-10000 提示：搭配使用grep過濾干擾訊息：nc -v -z localhost 1-10000 2>&1 | grep succeeded （如果您想知道使用特定埠口的進程，執行lsof -i :PORT） 您可以告訴nc伺服器將檔案的內容發送給連接的客戶端： nc -l PORT < FILENAME 使用nc DOMAIN PORT連接的客戶端將打印該檔案的內容，但它也可以使用nc DOMAIN PORT > FILENAME將內容保存到一個檔案中，從而實現基本的檔案傳輸。...

Netlify Edge功能是Netlify提供的一個非常有趣的功能，Netlify是一個流行的托管平台。 這個功能非常有趣，因為雖然Netlify以靜態托管聞名，但Edge功能允許您進行一些不太靜態的操作。 讓我們可以做到以下這些事情： 地理定位 本地化 A/B測試 重定向 …等等 它們與Netlify Serverless功能類似，只不過它們運行在Netlify邊緣（Edge）上，這意味著它們更接近用戶並在多個CDN位置運行，計算方式也不同（每月3百萬次呼叫，而不是每個站點每月12.5萬呼叫）。 要啟用Edge功能，請在您的網站存儲庫中創建一個netlify.toml文件（如果您尚未擁有），並添加以下內容： [[edge_functions]] function = "hello" path = "/hello" 其中function是netlify/edge-functions/下的文件名，不包括.js擴展名。 path是此功能將可用於的URL路徑。 然後，您可以在文件netlify/edge-functions/hello.js中編寫一個功能： export default () => new Response("Hello world"); Response是可用於將回應發送回客戶端的對象。 一旦您部署了存儲庫，就可以使用以下URL訪問其結果： https://<您的網站域名>/hello 試試看吧！ 在部署期間，您將在日誌中看到以下信息： 一旦部署完成，您將看到動態生成的帶有內容Hello, World!的頁面。 但是我建議您預先使用Netlify CLI的netlify dev在本地測試它們。請確保使用npm i -g netlify-cli將其更新到最新版本，否則它可能沒有啟用此功能。 您可以設置回應標頭，例如內容類型，通過將第二個參數傳遞給new Response()： export default () => new Response('Hello world', { headers: { 'content-type': 'text/html' }, }); Edge功能接收兩個參數：request和context： export default (request, context) => { //... }; 這兩個對象提供了一些有用的功能。 request允許您訪問所有request數據，它與使用Fetch API時獲得的請求對象相同。...

了解如何設置Netlify定時函數 Netlify定時函數使我們能夠進行一些有趣的事情。 以下是如何設置它們的方法。 在您的存儲庫中的netlify/functions目錄中創建一個無伺服器函數，例如test.js： netlify/functions/test.js exports.handler = (event, context) => { //做一些操作 return { statusCode: 200 } } 然後在netlify.toml中（如果還沒有創建此文件，請創建它），設置您希望此Netlify定時函數運行的頻率： [functions."test"] schedule = "@hourly" 或者您可以在函數本身中設置此頻率，而無需此條目： const handler = (event, context) => { //做一些操作 return { statusCode: 200 } } exports.handler = schedule('@hourly', handler) @hourly 每小時在0分鐘運行 @daily 每天在00:00運行 @weekly 每週日在00:00運行 @monthly 和 @yearly 也是可用的。 您還可以使用cron表達式，比如 5 4 * * * 或任何其他表達式（crontab guru 是您的好朋友） 您還可以使用 netlify functions:invoke test 手動調用函數，其中 test 是函數的名稱。 您可以根據不同的用例使用Netlify定時函數。 我設置了一個Netlify定時函數，每天自動部署存儲庫以發布一篇預先設定好的日程博客文章。...

REPL代表Read-Evaluate-Print-Loop，這是一個快速探索Node功能的好方法。 我們使用node命令來運行Node.js腳本： node script.js 如果省略文件名，則使用REPL模式： node 如果你現在在終端中嘗試這樣做，會得到以下結果： ❯ node > 命令進入閒置模式，等待我們輸入內容。 提示：如果你不確定如何打開終端，請搜索“如何在…上打開終端”。 REPL等待我們輸入一些JavaScript代碼。 先從簡單的開始，輸入以下內容： > console.log('test') test undefined > 第一個值test是我們要求控制台打印的輸出，然後得到的是undefined，這是運行console.log()的返回值。 現在我們可以輸入新的JavaScript代碼。 使用Tab鍵來自動補全 REPL的一個很酷的功能是它的互動性。 在編寫代碼時，如果按下Tab鍵，REPL會嘗試自動補全你已經定義的變量或預定義的變量。 探索JavaScript對象 嘗試輸入JavaScript類的名稱，例如Number，然後加上一個點並按下Tab鍵。 REPL將打印出你可以訪問該類的所有屬性和方法： 探索全局對象 你可以通過輸入global.並按下Tab鍵來檢查你可以訪問的全局對象： 特殊變量 _ 如果在某些代碼之後輸入_，它將打印出上一個操作的結果。 點命令 REPL有一些特殊命令，都以點.開頭。它們包括： .help：顯示點命令的幫助信息 .editor：啟用編輯器模式，便於編寫多行JavaScript代碼。進入此模式後，輸入Ctrl-D運行編寫的代碼。 .break：在輸入多行表達式時，輸入.break命令將中止進一步的輸入，相當於按下Ctrl-C。 .clear：重置REPL上下文為空對象，並清除當前正在輸入的多行表達式。 .load：加載一個JavaScript文件，相對於當前工作目錄 .save：將REPL會話中的所有內容保存到文件中（指定文件名） .exit：退出REPL（相當於按兩次Ctrl-C） REPL知道何時你正在輸入多行語句，而不需要調用.editor命令。 例如，如果你開始輸入迭代器，像這樣： [1, 2, 3].forEach(num => { 然後按下enter鍵，REPL將移到一個以3個句點開頭的新行，表示你現在可以繼續編寫該塊的代碼。 ... console.log(num) ... }) 如果你在一行的末尾輸入.break，多行模式將停止，該語句將不被執行。

我曾經需要從互聯網上下載文件，而且還想使用await以簡單的方式在完成後做其他事情。 您可以使用Axios達到這個目的。 import axios from 'axios' 然後寫一個像這樣的download()函數： async function download(url, filepath) { const response = await axios({ url, method: 'GET', responseType: 'stream', }) return new Promise((resolve, reject) => { response.data .pipe(fs.createWriteStream(filepath)) .on('error', reject) .once('close', () => resolve(filepath)) }) } 然後使用以下方式調用： const remote_url = 'https://...' const local_path = './images/test.png' await download(remote_url, local_path)

了解如何使用Node.js從文件系統中刪除文件。 你可以使用Node提供的內置模塊fs，它提供了同步和異步兩種方法。 異步方法是fs.unlink()。 同步方法是fs.unlinkSync()。 它們的區別很簡單：同步調用會導致代碼阻塞並等待文件被刪除，異步方法則不會阻塞代碼，並且在文件被刪除後調用回調函數。 以下是如何使用這兩個函數： fs.unlinkSync(): const fs = require('fs'); const path = './file.txt'; try { fs.unlinkSync(path); // 文件刪除成功 } catch(err) { console.error(err); } fs.unlink(): const fs = require('fs'); const path = './file.txt'; fs.unlink(path, (err) => { if (err) { console.error(err); return; } // 文件刪除成功 });

我有一個需求，需要將我的資料夾結構從這樣的樣式轉換為這樣的樣式： posts/test/index.md posts/hey-cool-post/index.md 變成： posts/test.md posts/hey-cool-post.md 刪除包含 index.md 文件的資料夾，而是將檔案本身設置為文章標籤（也就是用於文章網址）。 我使用了一個Node.js腳本來實現這個目的。 腳本如下： const fs = require('fs') const glob = require('glob') const root_folder = '.' //在當前資料夾中搜索 glob(root_folder + '/**/index.md', (err, files) => { if (err) { console.log('錯誤', err) } else { for (const file_path of files) { const match = file_path.match(/\/(.*?)\//) const folder_name = match[1] fs.copyFile(file_path, './' + folder_name + '.md', (err) => { if (err) { console.log('出現錯誤:', err) } else { console....