如果你需要在 DOM 中使用原生 JavaScript 為 HTML 元素添加屬性，該怎麼辦呢？ 假設你已經使用 querySelector() 選中了一個元素： const button = document.querySelector('#mybutton') 你可以按照以下步驟為它附加屬性： 創建屬性 設置屬性的值 將屬性附加到元素上 例如： const attribute = document.createAttribute('id') attribute.value = `remove-${item.name}` button.setAttributeNode(attribute) 如果該元素尚不存在，則你需要先創建元素，然後創建屬性，再將屬性添加到元素上，最後再將元素添加到 DOM 中： const button = document.createElement('button') const attribute = document.createAttribute('id') attribute.value = `some-value` button.setAttributeNode(attribute) button.textContent = 'Click me' document.querySelector('.container').appendChild(button)

了解如何使用純 JavaScript 隱藏和重新顯示元素。 要如何使用純 JavaScript 隱藏 DOM 元素？ 每個元素都有一個 style 屬性，可以使用它來修改 CSS 的樣式屬性。 你可以將 display 屬性設置為 ’none’（就像在 CSS 中使用 display: none; 一樣）： element.style.display = 'none'; 若要再顯示它，將其設回 block 或 inline： element.style.display = 'block';

一個非常有趣的 Cookie 用例是基於 Cookie 的會話。 PHP 提供了一種非常簡單的方法來創建基於 Cookie 的會話，即使用 session_start()。 嘗試在 PHP 文件中添加以下代碼： <?php session_start(); ?> 然後在瀏覽器中加載該文件。 您將看到一個名為 PHPSESSID 的新 Cookie，並且已分配了一個值。 這就是會話 ID。它將在每次新請求中被發送，並且 PHP 將使用它來識別會話。 與我們使用 Cookie 的方式類似，現在我們可以使用 $_SESSION 來存儲用戶發送的信息，但這次不是在客戶端存儲。 只有會話 ID 存儲在客戶端。 數據由 PHP 在服務器端存儲。 <?php session_start(); if (isset($_POST['name'])) { $_SESSION['name'] = $_POST['name']; } if (isset($_POST['name'])) { echo '<p>Hello ' . $_POST['name']; } else { if (isset($_SESSION['name'])) { echo '<p>Hello ' . $_SESSION['name']; } } ?> <form method="POST"> <input type="text" name="name" /> <input type="submit" /> </form> 這只適用於簡單的用例，對於大量數據，您將需要使用數據庫。...

我需要從伺服器上轉移一個文件。 我通過 SSH 連接，不想設置 SFTP 連接（而且也不確定是否允許 SFTP 連接），因此我打開另一個終端窗口並使用了 scp 命令。 這是語法： scp -i /.ssh/yourkey [[email protected]](/cdn-cgi/l/email-protection):/path-to-file/on/server.txt ./ 將 USER 和 SERVER 替換為您的伺服器詳情，/path-to-file/on/server.txt 替換為文件的路徑。同時使用您的 SSH 金鑰路徑。 這將下載文件到與您所在的相同文件夾中，因為我指定為 ./。您可以將其更改為計算機上的任何文件夾。

這是我用來讓自己輕鬆一點的其中一個「技巧」。 有時候我會寫一些未來日期的文章，以便預定發佈。在像 WordPress 等平台上，這是內建功能。 但在靜態網站上，我們需要有些創意。 那些文章在發佈日期之前，是不會被發佈的，而這個日期是在文章元資料中設定的。 每個平台都允許你建立部署勾子。當達到該網址時，網站將會重新部署。 但它們都只接受 POST 請求。 所以我在我的網站上建立了一個隱藏頁面，其 URL 看起來十分奇怪。 當這個頁面在瀏覽器中載入時，一個腳本會向我的部署勾子發送 POST 請求，就像這樣： const deploy_hook_url = 'https://YOUR_DEPLOY_HOOK'; fetch(deploy_hook_url, { method: 'post', headers: { 'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8', }, })

本教程是 Laravel 手冊的一部分。您可以從 https://flaviocopes.com/access/ 下載。 遷移非常適合處理資料庫的變更，這樣您就可以應用這些變更，並在需要恢復到先前狀態時回滾數據。 從終端機中停止 Laravel 伺服器，然後運行以下命令來創建一個新的遷移，我們將使用它來創建我們需要使用的資料庫表： php artisan make:migration initial_table_creation 此命令在 database/migrations 資料夾中創建了 2023_05_11_080724_initial_table_creation.php 文件（日期和時間對於您而言會有所變化）。 注意，還有其他由 Laravel 框架自身添加的遷移，用於驗證系統。 但是，我們專注於創建一個新的表，讓我們將其稱為 dogs。 進入我們剛剛建立的遷移的 up() 函數。 讓我們創建一個 dogs 表，包含 3 列，一個 id、一個 name 字符串，以及時間戳工具列（created_at 和 updated_at），我們將在後面看到。 Schema::create('dogs', function (Blueprint $table) { $table->id(); $table->string('name'); $table->timestamps(); }); 現在從終端機運行以下命令： php artisan migrate Laravel 將應用尚未應用的遷移，這在此時指的是您在 migrations 資料夾中看到的所有遷移： 如果您使用類似 TablePlus（免費版本，支持所有操作系統）的數據庫可視化工具打開 database/database.sqlite 文件，您將看到新創建的表，包括我們定義的表： 如果您在遷移中犯了錯誤，您可以使用以下命令回滾遷移中的任何更改： php artisan migrate:rollback 這將回滾您對數據庫做出的最新更改。 有關遷移的更多信息，請參閱官方遷移指南。

我如何在現代設備上瀏覽時逐步增強網站的能力 第一個方法：首先緩存 引入服務工作器 使用歷史API修復URL、標題和返回按鈕 修復Google Analytics 第二個方法：以網路為先，丟棄應用殼 簡化：無部分加載 本案例研究說明了如何通過引入一組被稱為漸進式Web應用程序（特別是Service Workers和Cache API）的技術來向基於Grav的網站（一款非常適合開發人員的PHP-based CMS）添加離線工作功能。 當我們完成時，我們將能夠在移動設備或桌面上使用我們的網站，即使離線，如下圖所示（注意網絡緩存設置中的“離線”選項） 第一个方法：首先緩存 我首先采用了一种首先緩存的方法。簡單來說，當我們在服務工作器中攔截一個fetch請求時，我們首先檢查我們是否已經將其緩存。如果没有，则從網絡獲取。 這樣做的好處是，當加載已緩存的頁面時，網站變得非常快速，即使在線（尤其是在網絡緩慢和降低連接質量的情況下），但當我發送新內容時，也引入了一些複雜性。 這不會是我採用的最終解決方案，但是出於演示目的，值得一試。 我將過程分為幾個階段： 我引入了一個服務工作器並將其作為網站JS腳本的一部分加載。 當安裝服務工作器時，我緩存網站的骨架 我攔截指向其他鏈接的請求，將其緩存 引入服務工作器 我在站點根目錄下的sw.js文件中添加了服務工作器。這使它可以在所有站點子文件夾和站點主目錄上運行。該服務工作器目前非常基本，只是記錄任何網絡請求： self.addEventListener('fetch', (event) => { console.log(event.request) }) 我需要註冊服務工作器，我從一個包含在每個頁面中的腳本中進行註冊： window.addEventListener('load', () => { if (!navigator.serviceWorker) { return } navigator.serviceWorker.register('/sw.js', { scope: '/' }).then(() => { //...ok }).catch((err) => { console.log('registration failed', err) }) }) 如果服務工作器可用，我們就註冊sw.js文件，並且在下一次刷新頁面時應該可以正常工作： 現在，我需要在網站上進行一些重活。首先，我需要找到一種方法來只提供應用殼：一組基本的HTML + CSS和JS，即使離線，它也將始終可用並顯示給用戶。 這基本上是網站的精簡版本，其中包含一個<div class="wrapper row" id="content-wrapper"></div>空元素，稍後我們將填充內容，這些內容在/shell路由下可用： 所以當用戶首次加載網站時，將顯示正常版本（完整HTML版本），並安裝服務工作器。 現在單擊的任何其他頁面都會被我們的服務工作器攔截。每次加載頁面時，我們首先加載殼層，然後加載頁面的簡化版本，不包括殼層，僅包含內容。 如何實現呢？ 我們聽取install事件，該事件在安裝或更新服務工作器時觸發。當這發生時，我們使用shell的內容初始化緩存：基本的HTML布局，加上一些CSS、JS和一些外部資源。 const cacheName = 'writesoftware-v1' self....

在 Netlify 上部署基於 GitHub Pull Request 的網站版本的逐步教程 我當時正在準備推出一門課程，我需要在「發布日期」上完成登陸頁面，但同時又不更改我當時對外公開的版本。 我使用的是 Netlify，它可以從 Git 分支自動部署網站，我的情況是在 GitHub 上進行託管。我將記錄這個過程。其他基於 Git 存儲庫進行 CI/CD 的託管提供商可能也有類似的工具。 Netlify 會自動為 Pull Requests 創建部署預覽。 所以，我創建了一個新的分支，我稱之為 launch，然後在該分支上進行工作，添加了一些提交，然後我創建了一個 Pull Request，GitHub Desktop 讓這個過程變得非常簡單： 在我發送 PR 後，Netlify 開始進行持續集成/持續交付流程： 轉到 Netlify 網站後，我可以看到它自動選取了 Pull Request 分支並開始了部署預覽： 幾分鐘後，我得到了一個新的網站 URL，我利用它進一步準備課程上線，而主域名仍然指向 master 分支的代碼。

TL;DR: 使用element.classList上的add()方法 當你有一個DOM元素的引用時，你可以使用add方法向其添加一個新的類別： element.classList.add('myclass') 你可以使用remove方法來刪除一個類別： element.classList.remove('myclass') 實現細節：classList不是一個陣列，而是一個DoucmentFragment的集合。 你無法直接編輯classList，因為它是一個只讀屬性。不過，你可以使用其方法來修改元素的類別。

逐步指導，讓您的網站有日夜兩種模式，讓它適用於不同時間的使用。 更新：我現在使用媒體查詢第5級：prefers-color-scheme Media Queries Level 5 规範包含了一個新的 prefers-color-scheme 媒體功能。 目前，在所有主要的瀏覽器中都支持這個功能。自 Chrome/Edge 76 版本、Firefox 67 版本和 Safari 12.1 版本之後，甚至包括 iOS Safari。 我們可以利用它來判斷用戶使用的是深色模式還是淺色模式： @media (prefers-color-scheme: dark) { body { background-color: black; color: white; } } @media (prefers-color-scheme: light) { body { background-color: white; color: black; } } 我現在使用它來預設顯示明亮模式的網站，如果系統處於深色模式，則顯示黑暗模式。 如果系統沒有內建黑暗模式（舊版 Windows/macOS 或 Linux）, 我建議使用像 Night Eye 這樣的擴展程式。 在 prefers-color-scheme 可用之前如何實現黑暗模式 我最近重新設計了我的網站。這裡有兩張照片供參考： 我在幾乎一年前設計了這個網站，並在設計過程中進行了許多改變，就像我們對待任何一個網站一樣。 最終，我對設計感到厭倦：標題太大，浪費了太多空間，而不是直接顯示內容，等等。 昨晚，我坐下來重新設計了這個網站，並在今天早上完成了重設計： 好多了！內容，最重要的東西，更突出了。 我使用等寬字體（Inconsolata），因為作為一個編程博客，這是一個不錯的字體，儘管由於字體的使用導致可讀性降低和頁面大小增加，但我仍然想在我的網站上使用它。我更喜歡它，因為我的網站是我日常活動的重要組成部分，我希望它是我想要的樣子。 我只錯過了一件事：黑暗模式。當我重新設計時，我考慮了黑暗模式選項。 我是如何做到的？首先，我在側邊欄中添加了一個月亮 Emoji 🌓，作為讓人們從明亮模式切換到黑暗模式的方式。 然後，我添加了一個當其被點擊時運行的 JavaScript 片段。我只是將它直接添加到 HTML 中的 onclick 事件處理程序中，而不做太花哨的處理：...