在Squarespace 7.1中將搜尋欄添加到頁首
Table of Contents
- 🛠️ 實用工具
- 🏠 建立搜尋欄
- 2.1 在頁首建立搜尋欄
- 2.2 為每個頁面添加搜尋區塊
- 2.3 移動搜尋欄至頁首
- 📱 在行動裝置上顯示搜尋欄
- 📄 頁面設定
- ⚙️ 進階程式碼注入
- 💻 CSS 客製化
- 💡 小技巧：選取搜尋區塊的唯一 ID
- 🔄 儲存並重新整理頁面
- ✨ 最後的效果
- 📧 訂閱我們的電子報
🏠 建立搜尋欄
你剛剛花時間錄製一整段影片，才發現麥克風靜音了，這真的讓你很沮喪。但沒關係，我們還是來建立搜尋欄吧！在 Squarespace 7.1 中，我們會將它放到頁首。我會快速向你展示這樣的搜尋欄在行動裝置上是否正常運作，這樣你就不會白花時間觀看這段影片了。讓我們馬上開始吧！
首先，我們需要的程式碼已經準備好了，讓我來快速為它進行設置，接著再做解說。我會點擊「複製」按鈕複製程式碼，然後前往「設定」和「進階」。在「程式碼注入」中，將程式碼貼上到最上方。如果你已經在網站上載入了 jQuery，而且你知道 jQuery 是什麼，就可以將它刪除。如果你不知道 jQuery 是什麼，或者你根本沒有載入它，那麼就讓它保留吧。
接著，我們需要將 CSS 代碼添加到我們的網站中。前往「首頁設計」，然後點擊「客製 CSS」。在 CSS 編輯器中，新增一些空白行，然後將程式碼貼上，這樣可以保持整潔。按下「儲存」按鈕，讓我們來看看會發生什麼。噢，什麼都沒發生？那是因為我們還需要添加搜尋元素。下一步，我們要在頁尾處添加一個搜尋區塊。點擊「編輯」，然後滾動到「編輯頁尾」，在這裡添加一個搜尋區塊，然後點擊「套用」，最後點擊「儲存」。但是依然沒有任何變化，這是因為我們還需要在程式碼中添加一個選取器。
在我們的程式碼中，需要抓取搜尋區塊的唯一 ID 選取器。我們來看看這個網站在新的無痕窗口中的情況。看到搜尋區塊了嗎？現在讓我們打開網頁檢查工具，退出移動裝置模擬器，以確保可以正確運行在行動裝置上。如果你不知道如何使用網頁檢查工具，只需右鍵點擊要檢查的元素，然後點擊「檢查」。接著，我們要選取搜尋區塊的唯一 ID 選取器。通常，當你右鍵點擊一個元素並選擇「檢查」時，它會自動突出顯示該元素，但周圍還可能有其他的父元素和子元素。你需要找到我們所選取的元素，並向上滾動，直到找到上方的元素被突出顯示，或直到你看到我們所需的內容。
一旦找到「搜尋區塊」所在的位置，你就可以從中複製唯一 ID 選取器。回到程式碼區塊，將剛剛複製的唯一 ID 選取器粘貼到 block ID 的位置上。記得保留 # 符號，然後按下「儲存」。這應該會重新載入網頁，讓我們看看效果。嘿，不要驚慌，我們的搜尋欄已經從頁尾移到了頁首！而且你會看到，在行動裝置上也可以正常顯示。就是我們想要的效果！
希望這篇文章對你有所幫助。如果你想獲得更多像這樣的教程，或者想在我發佈新教程時得到最新消息，或者有任何問題，可以訂閱我的電子報或與我們聯繫。不論如何，保重！
WHY YOU SHOULD CHOOSE Proseoai
