LogoLogo
資源社群課程服務About
  • Welcome!
  • Webflow 101
    • 1 HTML 和 CSS 簡介
      • 掌握 Webflow 的關鍵概念: 網站如何構成 - HTML
      • 掌握 Webflow 的關鍵概念: 網站如何構成 - CSS
      • 掌握 Webflow 的關鍵概念: 網站如何構成 - Javascript
    • 2 Box 盒子模組介紹
    • 3 Designer 介面總覽
      • Webflow 中的樣式設定
      • States 狀態
      • Display settings 顯示設置
      • Position 位置
      • Size 尺寸
      • Background 背景
      • Effects 效果
      • Transitions 過渡
    • 4 元素的類型
      • 布局類型 Section
      • 布局類型 Div Block
      • 布局類型 Grid
      • 基本類型 Link Block
      • 基本類型 List
      • 基本類型 Button
      • 文字類型
      • 媒體類型 Image
      • 媒體類型 Video
      • 表單 Form
      • 組件類型
      • 網站搜索
      • lottie Animation
    • 5 元素的層級
    • 6 CMS
      • Webflow CMS介绍
      • CMS集合
      • 導入集合項目
      • 集合列表
      • 集合頁面
      • 過濾收集列表
      • 有條件的可見性
      • CMS編輯器介紹
    • 7 動畫
      • 嵌入After Effects和Lottie動畫
      • 網頁加載動畫
      • 3D介绍
      • 創建懸停(鼠標移動)時旋轉的動畫
      • 在滾動中顯示和隱藏導航欄
      • 在滾動中顯示元素
      • 建立滾動的進度指示器
      • 懸停時顯示元素
      • 點擊時顯示和隱藏元素
    • 8 項目設定
      • 在Made in Webflow上展示您的網站
      • 複製、轉移或刪除網站
      • 發布Webflow項目
      • 發布您的Webflow網站
      • 保存和恢復備份
      • 分享您的項目並邀請合作者
      • 分享您的網站並邀請合作者
      • 網頁圖標和觸摸圖標
      • Webflow品牌建設
      • 編輯品牌
      • 自定義代碼嵌入
      • 上傳自定義字體
      • 用密碼保護網站或網頁
    • 9 托管和代碼輸出
      • 網域 = 代表你的品牌
      • Webflow 網站計劃
      • 管理網站計劃
      • 透過客戶計費將托管費轉給客戶
      • 連接自定義域名
      • 設置一個默認的域名
      • 透過Webflow購買自定義域名
      • SSL托管
      • 排除網站性能問題的故障
    • 10 SEO
      • 付費搜索與自然搜索簡介
      • Google網站驗證
      • 設置Google Analytics
      • 設置301重定向以保持SEO排名
    • 11. DevLink
      • DevLink 使用指南
    • 模板
      • Webflow模板概述
      • 兌換購買的ThemeForest模板
      • 兌換購買的創意市場模板
    • 帳戶和計劃
      • 管理您的Webflow帳戶
      • 團隊帳戶
      • 帳戶計費
      • 團隊計費概述
      • 項目計費
    • 工作空間計畫
      • 工作區角色和權限
      • 將您的帳戶過渡到工作空間
      • 管理您的工作空間
    • 更新
      • 2024
        • Webflow 表單功能增強 (10-15-2024)
        • 擴充功能: .well-known 檔案支援 (12-16-2024)
        • CMS 草稿和發布工作流程的改進 (12-12-2024)
        • 優化企業數據集成 (12-12-2024)
        • 儀表板排序增強功能 (12-12-2024)
        • 定價和產品更新 (12-11-2024)
        • 棄用邏輯和用戶帳戶 (12-11-2024)
        • 在 CMS 上下文中建立 Component (12-09-2024)
        • 使用Webflow的AI助理快速產生或修改任何文字內容 (12-04-2024)
        • 文字裝飾風格 (11-26-2024)
        • 設計審核增強功能 (11-21-2024)
        • 新變數類型:數字和百分比 (11-20-2024)
        • Component style variants 現已可用 (11-19-2024)
        • 新的產品內導航 (11-18-2024)
        • 斜線指令 (11-18-2024)
        • 直接在畫布上顯示和編輯空的 CMS 綁定元素 (11-12-2024)
        • 通過支持組件插槽使頁面構建更加靈活 (11-12-2024)
        • Webflow Analyze 現已推出 (10-31-2024)
        • Webflow Analyze 現正推出 (10-28-2024)
        • Dashboard 列表視圖 (10-24-2024)
        • 增強功能以改善您的表單體驗 (10-15-2024)
        • CMS API 現在支援批量操作 (10-15-2024)
        • 為所有客戶解鎖本地化樣式,還有更多 (10-15-2024)
        • 介紹 Webflow Analyze (10-15-2024)
        • 使用 Webflow Optimize 最大化轉換 (10-15-2024)
        • 為設計審批帶來更多可見性和微調 (10-15-2024)
        • 拖放式頁面建立使行銷人員能夠更快地啟動行銷活動 (10-15-2024)
        • 使用 Webflow AI Assistant 加快建置速度 (10-15-2024)
        • 推出新的幫助中心以增強支持 (10-15-2024)
        • 簡化 Figma 到 Webflow 同步 (10-03-2024)
        • Webflow 支援 Rive
        • 調整外觀設定
        • 透過機器翻譯支援使編輯模式更加強大
        • 陰影和變數支援的 X 和 Y 偏移
        • 將組件屬性進行分組
        • 自訂暫存域支持
        • 新頁面作為分支並編輯分支中的元件
        • 透過 API 存取您的站點登入紀錄
        • 自訂 CSS 屬性和值
        • Figma 到 Webflow 應用程式
        • 新樣式面板佈局部分和控件
        • 在您的網站上顯示程式碼,無需編寫程式碼和更新有序列表
        • 改進的 API 令牌管理
        • 無需編寫程式碼即可將自訂圖像新增至區域設定切換器
        • 本地化頁面分支
        • 控制您的隊友、訪客和客戶可以訪問哪些站點
        • 使用持久 CMS ID 等自信地恢復網站備份
        • 從“應用程式”面板尋找並安裝 Webflow 應用程式
        • 查看合併摘要以安全地合併頁面分支
        • 將類別作為自訂屬性新增至元素
        • 可用於企業在地化的機器翻譯術語表
        • Lightbox的單一多圖像字段綁定
        • 支援 Figma 中的 Rem 和 Em 單位到 Webflow 同步
        • Webflow 中的 Apple 知名文件
        • 固定標尺和十字準線
        • 額外的尺寸和佈局控制
        • CMS 資源的 WebP 轉換工具
        • 增加了自訂程式碼字元限制
        • 擴充元素轉換
        • 為 Webflow 上的開發人員擴充了 CMS API 功能
        • !Webflow 自訂屬性中的重要標誌
        • 使用頁面模板更快建立品牌一致的頁面,並更新頁面建立模式
        • Webflow Enterprise 上的自動化 JIT 配置和 SCIM 取消配置
        • 用於帳戶復原的輔助電子郵件
        • CMS CSV 匯入/匯出現在支援 HTML 程式碼嵌入
        • 畫布上的 CMS 編輯功能現已推出
        • 學習助手
        • 快速複製組件
        • 使用情況儀表板
        • 站點訪問預設設定
        • 透過 CSV 支援簡化您的 301 重定向管理
        • Webflow 應用程式的最新更新
      • 2023
        • 引入程式碼區塊元素
        • 單一 CMS 專案的批次欄位翻譯
        • Rich Text 中的 Markdown 支持
        • 重新排序您的元件屬性
        • 防止與指標事件發生不必要的點擊和觸控交互
        • 引入自訂元素
        • 在地化現已向所有客戶推出
        • 透過分支暫存更快、更安全地在分支上測試設計
        • Webflow 服務條款的更新
        • Rich Text 編輯器的改善
        • Webflow 多語系在地化功能現可供企業使用
        • 將 Spline 3D 場景新增至您的站點
        • 控制設計元素的縱橫比
        • 為 Webflow 引入新的外觀和感覺
        • 用變數編寫您的設計系統
        • 透過對各個頁面進行 noindex 控制來提高您的 SEO
        • 導航器面板現在支援右鍵單擊
        • 透過組件可用性讓你更快的建構專案
        • Webflow API: 元件、變數和多語系
        • Webflow 留言系統
        • 透過新的切換簡化了發布權限
        • 內容編輯者的站點登入紀錄
        • 使用新的 Quick Stack 功能加快構建頁面的速度
        • 解鎖對頁面分支上的自訂動畫的支持
        • 透過增加頁面來解鎖更大的規模
        • 靜態頁面的限制從 100 頁提升至 150 頁
        • 透過改進的發布工作流程保護您的網站
        • 更好地了解 Webflow 發佈時的進度
        • 在 robots.txt 文件中自定義 sitemap.xml 地址
        • 展示客戶工作區的項目
        • 元件現在可以在集合清單中使用
        • 大型站點的編輯器性能改進
        • Library 測試版的更新
        • Webflow 的 Google Analytics 整合更新
        • 為頁面分支帶來更多控制和可見性
        • 設置默認工作區以將儀表板打開到正確的位置
        • 可變字體更新
        • 選擇您的 Workspace 配置文件 URL
        • 在自定義屬性中使用 CMS 數據
        • 更新我們的開發者平台
        • dotLottie 動畫文件支持
        • 使用過濾器在站點活動日誌中更快地找到您要查找的內容
        • 在 div 或鏈接塊中包裝元素的快捷方式
        • 支持新的 CSS 動態視口單元
        • 不受銷售限制地擴展您的業務
        • webflow.io 網站上分析 cookie 行為的變化
        • 引入文本筆劃樣式
        • 組件的可用性更新
        • SSO 功能更新 (Webflow 企業版用戶)
        • 在文件夾中嵌套集合頁面以進行更多 URL 控制
        • 引入用於移動元素的新鍵盤快捷鍵
        • 用於展開元素和包裹 H Flex 或 V Flex 元素的新快捷方式
        • DevLink 公開測試版
        • Figma 外掛程式改進了響應式設計支援
        • Designer 中大型網站的性能改進
        • 複製或刪除最後一個類別的捷徑
        • 存檔工作區以將其從儀表板中刪除
        • 現在可以在設計器中使用 Webflow 應用程式的強大功能
        • Webflow 中管理自訂網域的改進
        • 透過新的內容編輯和評論者角色不斷發展團隊合作
        • 將站點計劃從一個站點傳輸到另一個站點
        • 現在支援文字換行和斷字
        • 改進了 Figma 插件的複製貼上的功能
        • 在樣式面板中快速搜索色板
        • 透過設計器中的評論集中回饋
        • Private Staging (私人測試站)
        • Figma 到 Webflow 插件的 Combo Class 支援
        • 在資料夾中歸類 CMS 頁面,以實現更多的URL控制
      • 2022
        • 更新了託管配置以支持更安全的 TLS 1.3
        • Webflow 定價和計劃的更新
        • 新創作者頁面
        • Webflow Marketplace
        • 開發者資源
        • 會員資格測試版
        • “Symbols”進化為“Components”
        • 增加電子商務網站的商品規模
        • 頁面分支
        • 以訪客身份免費加入客戶的工作區
        • 更新了 Hosting 選項以支持更安全的 SSL TLS 1.3 協定
        • 一次發布和取消發布多個 CMS 項目
        • Webflow 新功能 Logic (Beta)
        • Webflow 會員功能 (Beta)
        • 直接預覽不同文字大小的佈局
        • 檢測網站元素中的重複 ID
        • 刪除 CMS 內容而不發布您的整個網站
        • Made in Webflow 展示區
        • 在 Designer 中準確查看您的隊友正在處理的頁面
        • 簡化團隊合作:工作區就在這裡
  • MasterClass (大師班)
    • Intro
    • Webflow Pricing
    • Webflow 服務條款
  • 資源
    • 官方 Youtube 課程
    • Webflow 學習資源
    • Webflow 官方資源
Powered by GitBook
On this page
  • 添加和設計搜索組件的風格
  • 設計搜索結果頁
  • 搜索結果頁的結構
  • 搜索結果的風格化
  • 搜索結果結構
  • 網站搜索設置
  • 顯示內容"類型"
  • 添加搜索結果縮圖
  • 對片段進行造型
  • 設計"空"(或"無結果")狀態
  • 片斷風格設計
  • 設置結果計數
  • 預覽搜索結果
  • 索引,以及控制什麽是 "可搜索的"
  • 創建索引
  • 手動重新索引
  • 自動重新索引
  • 完善搜索索引
  • 排除靜態頁面
  • 排除收藏頁
  • 排除元素
  • 常見問題
  • 如果我導出我的代碼,搜索會發生什麽?
  • 怎樣才能看到用戶在搜索什麽?
  • 我可以擁有多個不同內容的搜索引擎嗎?
  • 我可以在編輯器中搜索東西嗎?

Was this helpful?

Edit on GitHub
Export as PDF
  1. Webflow 101
  2. 4 元素的類型

網站搜索

添加搜索字段,自定義搜索結果頁面的設計,並控制搜索結果中的內容。

Previous組件類型Nextlottie Animation

Last updated 2 years ago

Was this helpful?

搜索對於大型的、內容驅動的網站尤其重要,例如:

  1. 知識庫和幫助中心

  2. 部落格或策展網站

  3. 新聞出版物和媒體網站

自定義代碼中的內容不會被網站搜索收錄。如果需要自定義代碼內容被索引,請使用第三方的搜索工具。

本文會提到:

  1. 添加和設計搜索組件的風格

  2. 設計搜索結果頁面

  3. 索引和控制"可搜索"的內容

  4. 常見問題

添加和設計搜索組件的風格

在設計器左側的添加面板上找到搜索組件。

搜索組件有三個部分:

  1. 搜索(包裝器):包含搜索表單和提交按鈕的父元素

  2. 搜索輸入:用戶在此輸入他們的搜索

  3. 提交按鈕(可選):提交搜索的按鈕--如果想用"Enter"來提交搜索,也可以隱藏它。

將搜索組件添加到網站上,就可以按照其他元素的方式來設計它,還可以自定義占位符文本,並將搜索欄設置為自動對焦,在頁面加載時自動將訪問者的光標放在搜索欄中。

設計搜索結果頁

把搜索組件添加到網站後,可以看到搜索結果頁出現在頁面標簽中,在實用程序頁面部分。

搜索結果頁的結構

當您第一次打開搜索結果頁面時,您會發現已經有了一些基本的結構。

在這個容器中,有可選的搜索組件(如果人們沒有看到他們要找的東西,可以嘗試新的搜索)以及結果列表,當涉及到樣式時,它的工作方式很像集合列表。

搜索結果的風格化

搜索結果的樣式設計與集合列表的樣式設計很相似,應用於結果項的樣式適用於該列表中的所有其他結果項。然而,搜索結果有一個基本的起始結構,並有一些其他的新控件。

注意 未托管的網站和有基本托管的網站會在發布的網站上顯示樣本搜索結果--您可以向客戶展示,讓他們感受到他們的搜索體驗。要看到真正的搜索結果則需要在網站上添加CMS或商務主機。

搜索結果結構

搜索結果有一個基本的元素結構,可以根據您的需要重新排列、重組或刪除。

  1. 搜索標題(連結): 該頁的頁面設置中的搜索部分所設置的搜索結果標題。這個標題在默認情況下作為該頁的鏈接。

  2. 頁面URL(文本塊):該頁的slug

  3. 片斷(段落):出現搜索詞的頁面的上下文。您可以在搜索結果設置中控制這個片段的長度,也可以選擇將這段話連接到一個自定義描述。

網站搜索設置

您可以在頁面設置中控制搜索標題顯示的內容,適用於網站的所有靜態頁面和集合頁面。對於集合頁,這個內容可以從任何領域中提取,類似於您配置SEO和Open Graph設置的方式。

同樣,您可以為每個頁面設置自定義的搜索描述和搜索圖片,或者從SEO描述和OG圖片中提取這些內容。

顯示內容"類型"

您可以使用搜索描述字段來為搜索結果添加額外的訊息。例如您想透過在搜索結果旁邊顯示部落格文章的類別來向訪客展示特定搜索結果的內容類型。

只需將您的類別名稱添加到搜索描述字段中,然後將您的搜索結果布局中的一個文本字段連接到搜索描述字段中,然後按您的意願進行樣式設計。

添加搜索結果縮圖

您也可以在頁面設置下設定一個搜索圖像,就像設置OG圖像一樣。

添加搜索圖像後,就可以透過圖像元素連接到該搜索圖像字段來將該圖像添加到您的搜索結果中。

對片段進行造型

除了像設計其他文本一樣設計片段文本外,您還可以控制片段長度(字符數),並打開或關閉高亮顯示(將在片段中對搜索詞的出現進行加粗)。

要在您的片段中設置高亮樣式,請在樣式指南頁面的副文本元素中為 "所有加粗"設置基本標籤,該樣式將適用於您在搜索結果頁面上的高亮術語。

設計"空"(或"無結果")狀態

就像表單有錯誤和提交狀態,搜索結果頁面也有"無結果"狀態,您可以對其進行自定義,以減輕用戶搜索網站上沒有的東西時的影響(例如可以在這裡添加一個插圖,以及回到主頁的連結,幫助使用者重新定位)。

在搜索結果設置部分切換到"無結果"模式進行設計。

片斷風格設計

除了像對待其他文本那樣對片段的文本進行造型外,您還可以控制片段的長度(字符數),並打開或關閉高亮顯示(將在片段中對搜索詞的出現進行加粗)。

要在代碼段中設置高亮的樣式,請在樣式指南頁面的副文本元素中為 "所有凸起"設置基本標簽的樣式,這種樣式將適用於在搜索結果頁面上的高亮術語。

設置結果計數

選擇想在搜索結果中顯示多少個結果,最多60個。

目前還不支持跨多個搜索結果頁面的分頁。

預覽搜索結果

在設計搜索結果時,可以透過改變搜索結果設置部分的"預覽結果"字段中的搜索詞來改變顯示的結果。這將幫助您更清楚了解搜索結果在不同的查詢中會如何出現。

在添加CMS或商務主機並發布網站之前,將會看到樣本結果而不是網站的真實結果。要預覽和樣式真實的搜索結果,請發布妳的網站以創建一個搜索索引。

索引,以及控制什麽是 "可搜索的"

索引是搜索引擎中的內容和頁面,它控制使用者在網站上提交搜索時可以搜索到哪些內容。例如,如果您不希望特定的頁面通過搜索被發現,您可以從索引中刪除它。

目前,網站被限制在一個搜索引擎上。您可以在任意多的頁面上有一個搜索欄,但它們都會在相同的內容中搜索。

創建索引

如果添加了CMS或商務主機,搜索索引就會在第一次發布網站後創建。

您可以在索引創建之前(或在添加主機之前)透過使用我們的樣本結果來設計妳的搜索結果。

手動重新索引

手動重新索引允許您故意刷新妳的搜索引擎中的內容。這最適合在對內容推送了重要的更新,或者對搜索引擎的內容進行了廣泛的修改。

打開設計器左側的設置面板,在搜索部分點擊"立即索引"。在大型網站上,索引可能需要30分鐘。

要檢查索引的狀態,請回到設置面板的搜索部分。

在CMS主機上,每24小時可進行一次手動重新索引,在商業主機上每小時可進行一次。

自動重新索引

在持續的基礎上,我們將更新您的搜索索引,使您搜索引擎中的內容與您網站的最新變化保持同步。在CMS主機上,自動重新索引每72小時進行一次,而在商業主機上,自動重新索引每12小時進行一次。

完善搜索索引

默認情況下,當您添加搜索時,網站上的所有內容(不包括符號、集合列表、實用程序頁和受密碼保護的內容)都被編入索引,因此用戶在搜索時可以發現這些內容。在大多數情況下,若想細化索引,以便對用戶通過搜索可以發現的內容進行更多控制--並隱藏不希望被發現的內容。

從網站搜索中排除內容並不影響Google和其他搜索引擎對您網站的索引,您可以在網站設置中要求搜索引擎不索引特定的頁面。

排除靜態頁面

如果有特定的頁面不想讓用戶在搜索中找到它--例如保持隱私的內部風格指南或是主頁。在這些情況下您會想把這些靜態頁面完全從搜索中排除。

要排除靜態頁面,請前往"頁面設置",向下滾動到新的"搜索設置"部分,該部分位於"開放圖譜"設置下方。在這個部分的頂部,您會看到一個複選框"從網站搜索結果中排除這個頁面"。若被選中,重新索引將從您的索引中刪除這個頁面。

默認情況下,受密碼保護的頁面和實用程序頁面被排除在搜索之外。

排除收藏頁

同樣,如果特定的收藏品不是網站內容的核心,您可能想把它們從搜索中排除,比如標籤、類別,或者其他沒有有趣的收藏品頁面的信息。

要從搜索中排除收藏頁,請前往該收藏頁的頁面設置,向下滾動到搜索設置部分。如果勾選了 "從網站搜索結果中排除這些頁面",這些頁面將在網站下次被索引時從搜索引擎中刪除。

排除合集頁面將從搜索結果中排除所有的模板頁面,但是這個合集的內容在其他頁面的合集列表中的任何出現仍然可以被發現,因為它們將從該頁面的內容中被索引。在這種情況下,您可能想為這些集合列表應用元素級別的排除法。

目前,不可能從搜索中排除單個集合項目。

排除元素

將重複出現的元素(如導航欄、頁腳、側邊欄和表格)從搜索中排除,以避免搜索結果變得混亂。

默認情況下,符號和集合列表被排除在搜索結果之外,但您可以在符號的父元素上覆蓋這一設置。

要排除特定的元素,打開該元素的設置,在搜索設置部分,點擊"搜索結果中排除內容"。

在父元素設置的任何排除規則也將適用於子元素

常見問題

如果我導出我的代碼,搜索會發生什麽?

由於搜索引擎需要由Webflow托管,因此搜索在導出的網站上將無法使用。

怎樣才能看到用戶在搜索什麽?

要想知道您的網站訪客在搜索什麽,請將您的Webflow網站搜索與Google Analytics整合。

我可以擁有多個不同內容的搜索引擎嗎?

目前網站只限於一個搜索引擎。您可以在任意多的頁面上設置搜索欄,但它們都會在相同的內容中搜索。

我可以在編輯器中搜索東西嗎?

搜索不在編輯器中工作。要測試搜索,請在隱身連結中打開您的網站,或在搜索結果設置結果預覽輸入中從設計器中測試結果。