# 網站搜索 搜索對於大型的、內容驅動的網站尤其重要，例如： 1. 知識庫和幫助中心 2. 部落格或策展網站 3. 新聞出版物和媒體網站 自定義代碼中的內容不會被網站搜索收錄。如果需要自定義代碼內容被索引，請使用第三方的搜索工具。 本文會提到： 1. 添加和設計搜索組件的風格 2. 設計搜索結果頁面 3. 索引和控制"可搜索"的內容 4. 常見問題 ## 添加和設計搜索組件的風格 在設計器左側的添加面板上找到搜索組件。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F55crk6OrPkWyNBuKwDik%2Fimage.png?alt=media\&token=10b4a875-ff2b-4195-94cc-ee38db582403) 搜索組件有三個部分： 1. 搜索（包裝器）：包含搜索表單和提交按鈕的父元素 2. 搜索輸入：用戶在此輸入他們的搜索 3. 提交按鈕（可選）：提交搜索的按鈕--如果想用"Enter"來提交搜索，也可以隱藏它。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FDUQLFcF0Fs6lHqy8u6pR%2Fimage.png?alt=media\&token=e138f3f8-391e-4b55-a664-d0deec8d539f) 將搜索組件添加到網站上，就可以按照其他元素的方式來設計它，還可以自定義占位符文本，並將搜索欄設置為自動對焦，在頁面加載時自動將訪問者的光標放在搜索欄中。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FWPx6YsQoK6tSGZvEcrkO%2Fimage.png?alt=media\&token=bc4d0d61-d922-41ef-855e-1242ec1a631d) ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F9umBEprHCGjhIQniryIm%2Fimage.png?alt=media\&token=541c4a52-ece5-4566-b66f-15eeee57093b) ## 設計搜索結果頁 把搜索組件添加到網站後，可以看到搜索結果頁出現在頁面標簽中，在實用程序頁面部分。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FogPQvUlHL0qP9c3wo3Km%2Fimage.png?alt=media\&token=84f2814c-c6d6-40c9-967e-badc3c355ab0) ### 搜索結果頁的結構 當您第一次打開搜索結果頁面時，您會發現已經有了一些基本的結構。 在這個容器中，有可選的搜索組件（如果人們沒有看到他們要找的東西，可以嘗試新的搜索）以及結果列表，當涉及到樣式時，它的工作方式很像集合列表。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FfgeuF5Kv3NcWidDbKbzu%2Fimage.png?alt=media\&token=14b99ed5-ac6a-47bd-b48e-4cda957fcd0f) ### 搜索結果的風格化 搜索結果的樣式設計與集合列表的樣式設計很相似，應用於結果項的樣式適用於該列表中的所有其他結果項。然而，搜索結果有一個基本的起始結構，並有一些其他的新控件。 **注意**\ 未托管的網站和有基本托管的網站會在發布的網站上顯示樣本搜索結果--您可以向客戶展示，讓他們感受到他們的搜索體驗。要看到真正的搜索結果則需要在網站上添加CMS或商務主機。 ### 搜索結果結構 搜索結果有一個基本的元素結構，可以根據您的需要重新排列、重組或刪除。 1. 搜索標題（連結）:\ 該頁的頁面設置中的搜索部分所設置的搜索結果標題。這個標題在默認情況下作為該頁的鏈接。 2. 頁面URL（文本塊）：該頁的slug 3. 片斷（段落）:出現搜索詞的頁面的上下文。您可以在搜索結果設置中控制這個片段的長度，也可以選擇將這段話連接到一個自定義描述。 ### 網站搜索設置 您可以在頁面設置中控制搜索標題顯示的內容，適用於網站的所有靜態頁面和集合頁面。對於集合頁，這個內容可以從任何領域中提取，類似於您配置SEO和Open Graph設置的方式。 同樣，您可以為每個頁面設置自定義的搜索描述和搜索圖片，或者從SEO描述和OG圖片中提取這些內容。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FTsL5IoriXwYuDByUnE1w%2Fimage.png?alt=media\&token=a8055b5e-a6b1-422d-a549-0b3c2c8e9654) ### 顯示內容"類型" 您可以使用搜索描述字段來為搜索結果添加額外的訊息。例如您想透過在搜索結果旁邊顯示部落格文章的類別來向訪客展示特定搜索結果的內容類型。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FdnflzHrldXRAePLpzI5T%2Fimage.png?alt=media\&token=a20f8dac-0404-4c6b-877c-eac1d2abdce3) 只需將您的類別名稱添加到搜索描述字段中，然後將您的搜索結果布局中的一個文本字段連接到搜索描述字段中，然後按您的意願進行樣式設計。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F19AhWRvETn19nex0W1NC%2Fimage.png?alt=media\&token=ebb51d7a-eead-4ccb-9c7f-75d07ceda140) ### 添加搜索結果縮圖 您也可以在頁面設置下設定一個搜索圖像，就像設置OG圖像一樣。 添加搜索圖像後，就可以透過圖像元素連接到該搜索圖像字段來將該圖像添加到您的搜索結果中。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FYkdB398IZBTlGNoYdjrr%2Fimage.png?alt=media\&token=660b4871-4ca6-41fb-aade-9439815fc555) ### 對片段進行造型 除了像設計其他文本一樣設計片段文本外，您還可以控制片段長度（字符數），並打開或關閉高亮顯示（將在片段中對搜索詞的出現進行加粗）。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FkfhE4kcI72385K8MrNF2%2Fimage.png?alt=media\&token=eeff8fc0-622f-44a2-9a76-5186e3750f27) 要在您的片段中設置高亮樣式，請在樣式指南頁面的副文本元素中為 "所有加粗"設置基本標籤，該樣式將適用於您在搜索結果頁面上的高亮術語。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FClEh9hVDDzp4IbHSzn9m%2Fimage.png?alt=media\&token=718a25ce-0174-4b15-8117-ace49f685590) ### 設計"空"（或"無結果"）狀態 就像表單有錯誤和提交狀態，搜索結果頁面也有"無結果"狀態，您可以對其進行自定義，以減輕用戶搜索網站上沒有的東西時的影響(例如可以在這裡添加一個插圖，以及回到主頁的連結，幫助使用者重新定位）。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FnpL1wkL4VrIlYvCFG6l8%2Fimage.png?alt=media\&token=24314437-d840-4bb7-8eac-474b8319c363) 在搜索結果設置部分切換到"無結果"模式進行設計。 ### 片斷風格設計 除了像對待其他文本那樣對片段的文本進行造型外，您還可以控制片段的長度（字符數），並打開或關閉高亮顯示（將在片段中對搜索詞的出現進行加粗）。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FxTi6BuuxK7kr8VxNichy%2Fimage.png?alt=media\&token=a534f0f7-56a0-414e-9ef9-01172618ea96) 要在代碼段中設置高亮的樣式，請在樣式指南頁面的副文本元素中為 "所有凸起"設置基本標簽的樣式，這種樣式將適用於在搜索結果頁面上的高亮術語。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FwwyhHFD5o5jS3yFaS4BE%2Fimage.png?alt=media\&token=64768f51-92ed-4b50-85e8-acf705eb6bb9) ### 設置結果計數 選擇想在搜索結果中顯示多少個結果，最多60個。 目前還不支持跨多個搜索結果頁面的分頁。 ### 預覽搜索結果 在設計搜索結果時，可以透過改變搜索結果設置部分的"預覽結果"字段中的搜索詞來改變顯示的結果。這將幫助您更清楚了解搜索結果在不同的查詢中會如何出現。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FnAFZU2WOz7kjXzwdXIBn%2Fimage.png?alt=media\&token=854dda0a-37ec-4c60-9e84-e5278f966228) 在添加CMS或商務主機並發布網站之前，將會看到樣本結果而不是網站的真實結果。要預覽和樣式真實的搜索結果，請發布妳的網站以創建一個搜索索引。 ## 索引，以及控制什麽是 "可搜索的" 索引是搜索引擎中的內容和頁面，它控制使用者在網站上提交搜索時可以搜索到哪些內容。例如，如果您不希望特定的頁面通過搜索被發現，您可以從索引中刪除它。 目前，網站被限制在一個搜索引擎上。您可以在任意多的頁面上有一個搜索欄，但它們都會在相同的內容中搜索。 ### 創建索引 如果添加了CMS或商務主機，搜索索引就會在第一次發布網站後創建。 您可以在索引創建之前（或在添加主機之前）透過使用我們的樣本結果來設計妳的搜索結果。 ### 手動重新索引 手動重新索引允許您故意刷新妳的搜索引擎中的內容。這最適合在對內容推送了重要的更新，或者對搜索引擎的內容進行了廣泛的修改。 打開設計器左側的設置面板，在搜索部分點擊"立即索引"。在大型網站上，索引可能需要30分鐘。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FNqKFNtbMtrvaoB2Jldk1%2Fimage.png?alt=media\&token=a8e7fea8-f370-4cd9-b42c-6703e33738d8) 要檢查索引的狀態，請回到設置面板的搜索部分。 在CMS主機上，每24小時可進行一次手動重新索引，在商業主機上每小時可進行一次。 ### 自動重新索引 在持續的基礎上，我們將更新您的搜索索引，使您搜索引擎中的內容與您網站的最新變化保持同步。在CMS主機上，自動重新索引每72小時進行一次，而在商業主機上，自動重新索引每12小時進行一次。 ### 完善搜索索引 默認情況下，當您添加搜索時，網站上的所有內容（不包括符號、集合列表、實用程序頁和受密碼保護的內容）都被編入索引，因此用戶在搜索時可以發現這些內容。在大多數情況下，若想細化索引，以便對用戶通過搜索可以發現的內容進行更多控制--並隱藏不希望被發現的內容。 從網站搜索中排除內容並不影響Google和其他搜索引擎對您網站的索引，您可以在網站設置中要求搜索引擎不索引特定的頁面。 ### 排除靜態頁面 如果有特定的頁面不想讓用戶在搜索中找到它--例如保持隱私的內部風格指南或是主頁。在這些情況下您會想把這些靜態頁面完全從搜索中排除。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FDzwA8lRXkskEPvRQ4IpJ%2Fimage.png?alt=media\&token=d63cae46-9456-4124-9602-29962422c103) 要排除靜態頁面，請前往"頁面設置"，向下滾動到新的"搜索設置"部分，該部分位於"開放圖譜"設置下方。在這個部分的頂部，您會看到一個複選框"從網站搜索結果中排除這個頁面"。若被選中，重新索引將從您的索引中刪除這個頁面。 默認情況下，受密碼保護的頁面和實用程序頁面被排除在搜索之外。 ### 排除收藏頁 同樣，如果特定的收藏品不是網站內容的核心，您可能想把它們從搜索中排除，比如標籤、類別，或者其他沒有有趣的收藏品頁面的信息。 要從搜索中排除收藏頁，請前往該收藏頁的頁面設置，向下滾動到搜索設置部分。如果勾選了 "從網站搜索結果中排除這些頁面"，這些頁面將在網站下次被索引時從搜索引擎中刪除。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FsEUNpGOBnH6jCcc4NoQk%2Fimage.png?alt=media\&token=ccdbbac3-800d-4b58-8976-d7c00f004f77) 排除合集頁面將從搜索結果中排除所有的模板頁面，但是這個合集的內容在其他頁面的合集列表中的任何出現仍然可以被發現，因為它們將從該頁面的內容中被索引。在這種情況下，您可能想為這些集合列表應用元素級別的排除法。 目前，不可能從搜索中排除單個集合項目。 ### 排除元素 將重複出現的元素（如導航欄、頁腳、側邊欄和表格）從搜索中排除，以避免搜索結果變得混亂。 默認情況下，符號和集合列表被排除在搜索結果之外，但您可以在符號的父元素上覆蓋這一設置。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Fq9zuhvX2sxSyC0Usw0Ba%2Fimage.png?alt=media\&token=aaa56e87-b418-47df-b288-66365feb31ac) 要排除特定的元素，打開該元素的設置，在搜索設置部分，點擊"搜索結果中排除內容"。 在父元素設置的任何排除規則也將適用於子元素 ## 常見問題 ### 如果我導出我的代碼，搜索會發生什麽？ 由於搜索引擎需要由Webflow托管，因此搜索在導出的網站上將無法使用。 ### 怎樣才能看到用戶在搜索什麽？ 要想知道您的網站訪客在搜索什麽，請將您的Webflow網站搜索與Google Analytics整合。 ### 我可以擁有多個不同內容的搜索引擎嗎？ 目前網站只限於一個搜索引擎。您可以在任意多的頁面上設置搜索欄，但它們都會在相同的內容中搜索。 ### 我可以在編輯器中搜索東西嗎？ 搜索不在編輯器中工作。要測試搜索，請在隱身連結中打開您的網站，或在搜索結果設置結果預覽輸入中從設計器中測試結果。