Hostinger AI Builder 手动模式添加搜索元素教程
为你的 Hostinger AI Builder 手动模式网站添加搜索元素，让访问者可以通过可自定义的搜索栏直接搜索你的产品、博客文章和其他内容。你可以将搜索元素添加到大多数页面，在博客板块中启用专用搜索功能，并让访问者在专用的搜索结果页面上查看完整结果。
为你的网站添加搜索元素
- 在网站构建器中，展开左侧的 Elements（元素） 标签页。
- 找到 Search（搜索） 元素，并将其拖动到页面上的理想位置。
- 点击该元素可查看更多选项，例如编辑、复制、更改可见性或删除。
- 点击 Edit search（编辑搜索），打开搜索设置弹窗。
注意
- 搜索元素无法添加到以下板块：Header（页眉）、Product list（产品列表）、Single product（单个产品）、Blog post header（博客文章页眉）。
配置常规搜索设置
在 General（常规） 标签页下，你可以设置：
- Placeholder text（占位符文本）：默认为 Search。
- “No results” text（“无结果”文本）：默认为 No results found。
- Search within（搜索范围）：选择该元素搜索的内容类型。根据你希望访问者找到的内容，勾选或取消勾选 Products（产品）、Blog posts（博客文章） 或 Other website content（其他网站内容）。
配置搜索样式和动画
在 Style（样式） 标签页下，你可以设置：
- 填充颜色（常态和悬停）
- 文本和图标颜色（常态和悬停）
- 文本字体
- 边框颜色（常态和悬停）
- 圆角半径
在 Animation（动画） 标签页下，为该元素设置你喜欢的动画效果。
在博客板块中启用搜索
Blog list（博客列表） 板块包含自己的专用搜索功能，与常规的 Search 元素相互独立。
- 点击你要编辑的 Blog list（博客列表） 板块，然后点击 Edit blog list（编辑博客列表）。
- 点击 Search（搜索） 标签页。
- 打开 Enable blog post search（启用博客文章搜索） 开关。
- 选择 Position（位置）：Left（左）、Center（中）或 Right（右）。
- 设置 Style options（样式选项），包括填充颜色、文本和图标颜色、边框颜色、圆角半径和宽度。
- 为此搜索栏设置 Placeholder（占位符） 文本和“无结果”文本。
注意
- 此博客搜索仅搜索该板块内的博客文章，它与常规 Search 元素的 Search within（搜索范围） 设置相互独立。
查看搜索结果
当访问者在搜索栏中输入查询时，会出现匹配结果的预览，并按 Products（产品）、Blog posts（博客文章） 和 Other（其他） 分组显示。点击 See all results（查看所有结果） 或按 Enter 键，会打开专用的搜索结果页面，结果按标签页组织——Products（产品）、Blog posts（博客文章） 和 Other（其他）——每个标签页都会显示结果数量，并高亮匹配的关键词。
通过这些更新，访问者可以搜索整个 AI Builder 网站，而不仅仅是产品目录，从而更轻松地找到博客文章、页面和其他内容。