在將ID添加到標題上

將ID添加到標題中以進行平滑鏈接

本文解決了與網頁（尤其是針對標題的特定部分）建立易於訪問鏈接的挑戰。核心概念很簡單：具有獨特ID的標題允許通過瀏覽器行為直接鏈接（例如， https://my-website.com/https://www.php.cn/link/86317a3269e7927536b010c2615aeab5 ://my-website.com/https://www.php.cn/link/86317a3269E79927536B010C2615AEAB5）。

例如，標題：

<h3 id="步驟">步驟2</h3>

可以鏈接到使用：

<a href="https://www.php.cn/link/86317a3269e7927536b010c2615aeab5">跳到步驟2</a>

雖然手動向所有標題添加ID是乏味的，但作者最初使用jQuery在其網站上自動化此過程。該腳本不僅添加了ID（如果丟失），而且還插入了每個標題中的鏈接以方便複製鏈接。

但是，由於種族條件，這種方法被證明是不可靠的：瀏覽器試圖在jQuery腳本添加它之前找到ID。這突出了在頁面渲染開始之前，在HTML中存在ID的重要性。

作者的解決方案利用其WordPress網站，涉及一個插件（KarolínaVyskočilová的“添加錨點”），該插件優雅地將ID添加到錨點鏈接中，避免了與現有ID的衝突。

對於非媒介站點，建議使用服務器端HTML處理（在構建過程或通過服務器端過濾器），以確保ID在初始HTML中包含。另外，一個可能利用Cloudflare的HTMLwrewriter等工具的服務工作者提供了客戶端的解決方案來實現相同的結果。關鍵是要在瀏覽器啟動其鏈接行為之前確保ID可用。

以上是在將ID添加到標題上的詳細內容。更多資訊請關注PHP中文網其他相關文章！