在网站上嵌入Cloudflare AI搜索 正确代码实现方法
内容提要
文章介绍如何在网站中嵌入Cloudflare AI搜索，重点讲解使用Search Bar组件实现站内搜索功能，并提供适配PC端、隐藏移动端的HTML/CSS代码。同时提醒该服务消耗Token较多，免费版额度有限，需注意成本控制。
延伸解读
组件选择与适用场景
Cloudflare AI搜索提供四种组件：Search Bar、Search Modal、Chat Bubble和Chat Page。其中Search Bar适合嵌入导航栏或侧边栏，提供实时下拉结果；Search Modal适合文档网站，支持快捷键唤起；Chat Bubble和Chat Page则更偏向对话式交互。文章作者选择Search Bar，因为它能实现站内搜索，避免流量外流，且适合网站顶部固定展示。
响应式适配与布局技巧
作者通过CSS媒体查询，在屏幕宽度小于768px时隐藏搜索栏，仅PC端显示，避免移动端占用空间。同时使用固定定位（position: fixed）将搜索栏置于顶部，并设置z-index确保不被内容遮挡。还添加了占位元素撑开高度，防止内容被覆盖。这种适配方式适合以PC用户为主的网站，但需注意移动端用户无法使用该搜索功能。
成本与Token消耗警示
文章明确指出Cloudflare AI搜索非常消耗Token（即令牌或算力），免费版额度较低，且使用各种模型会产生额外账单。作者仅测试半天便关闭，说明实际使用成本可能较高。建议读者在集成前评估自身流量和预算，或考虑优化搜索频率、限制使用范围，以避免产生意外费用。
Q&A
如何在网站上嵌入Cloudflare AI搜索？
可以通过Cloudflare AI搜索提供的开源网页组件（如Search Bar、Search Modal、Chat Bubble、Chat Page）嵌入到网站中。其中Search Bar最适合网站站内搜索，只需引入对应的JavaScript模块并放置组件标签即可。
Cloudflare AI搜索的Search Bar组件有什么特点？
Search Bar是一个带实时结果下拉菜单的内联搜索输入框，非常适合放在导航栏或侧边栏，用于实现站内搜索。
Cloudflare AI搜索提供了哪些嵌入组件？
提供了四种组件：Search Bar（搜索栏）、Search Modal（搜索模态框）、Chat Bubble（聊天泡泡）和Chat Page（聊天页面）。
如何实现PC端显示搜索框而移动端隐藏？
使用CSS媒体查询，在屏幕宽度小于768px时隐藏搜索框及其占位元素。例如，给搜索框容器添加类名pc-only-search，在@media (max-width: 768px)中设置display: none。
嵌入Cloudflare AI搜索时需要注意什么？
需要注意Token消耗较大，免费版额度有限，且模型使用可能产生额外费用，建议控制成本。
Cloudflare AI搜索的Search Bar组件如何配置？
在HTML中引入search-snippet.es.js脚本，然后使用<search-bar-snippet>标签，并设置api-url、placeholder、show-url、show-date、hide-branding等属性。
