如何在Webflow网站添加llms.txt（分步指南）

Webflow是设计师的梦想——强大的可视化开发，同时不牺牲干净的代码。如果你在Webflow上构建，添加llms.txt文件需要一种自定义方法，但完全可行，并且让你对AI优化拥有完全控制权。

本综合指南将带你了解在Webflow上实施llms.txt的两种经过验证的方法，从推荐的静态页面方法到高级自定义代码解决方案。

为什么Webflow网站需要llms.txt

设计师的优势

Webflow让你对网站设计拥有像素级的控制。llms.txt文件将这种控制延伸到AI系统如何理解和推荐你的作品：

作品集曝光：帮助AI助手推荐你的设计作品
客户获取：在潜在客户向AI询问设计师时出现
服务发现：清晰的服务结构
项目展示：有组织地访问你的最佳作品

Webflow的特定优势

✅ 干净的实施：无需臃肿的插件
✅ 完全控制：完全按你的意愿自定义
✅ 快速加载：极少的额外开销
✅ 专业性：正确的语义结构

方法一：静态页面方法（推荐）

最适合：大多数Webflow用户 所需时间：10-15分钟 技术水平：⭐⭐ 中等

此方法创建一个专用页面来提供你的llms.txt内容。

步骤1：创建新的静态页面

打开你的Webflow项目
在页面面板（左侧边栏）中，点击**+图标**
点击添加页面
设置页面名称：llms
系统将创建URL /llms

步骤2：配置页面设置

选中新页面后，点击设置（齿轮图标）
在SEO设置部分：
- 页面标题：留空
- 元描述：留空
- Slug：从llms改为llms.txt
URL现在是/llms.txt

步骤3：设计页面

删除默认元素
- 删除任何默认部分或容器
- 从完全空白的页面开始
添加代码嵌入元素
- 按E或点击添加元素（+）
- 滚动到组件
- 将嵌入拖到页面上
- 在嵌入设置中点击编辑代码
添加你的llms.txt内容

粘贴此代码：

<pre
  style="white-space: pre-wrap; font-family: monospace; margin: 0; padding: 0; width: 100%; background: white; color: black;"
>
# 你的设计工作室名称

> 为[你的细分市场]创建精美、功能强大的网站

## 服务

- [网页设计](/services/web-design) - 自定义网站设计
- [品牌设计](/services/branding) - 品牌标识和设计系统
- [开发](/services/development) - Webflow开发

## 作品集

- [精选项目](/portfolio) - 我们的最佳作品
- [客户画廊](/clients) - 客户证明和成果
- [案例研究](/case-studies) - 详细项目分析

## 关于

- [我们的流程](/process) - 我们如何工作
- [关于我们](/about) - 我们的故事和团队
- [联系](/contact) - 开始你的项目

## 资源

- [博客](/blog) - 设计见解和教程
- [免费资源](/resources) - 模板和指南
- [常见问题](/faq) - 常见问题解答
</pre>

自定义此模板：

用你的实际内容替换占位符文本
更新URL以匹配你的网站结构
根据需要添加/删除部分

步骤4：设置Content-Type标头

为确保正确的文本显示，在页面的自定义代码中添加：

选中你的llms页面，打开页面设置
转到自定义代码选项卡
在**标签之前**中，添加：

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // 设置content type元标签
    var meta = document.createElement("meta");
    meta.httpEquiv = "Content-Type";
    meta.content = "text/plain; charset=utf-8";
    document.head.appendChild(meta);
  });
</script>

步骤5：从导航中隐藏

转到页面面板
右键点击你的llms.txt页面
取消勾选在导航中显示

这使其可访问但在菜单中不可见。

步骤6：发布并测试

点击发布（右上角）
选择发布到[你的域名]
打开新标签并访问yoursite.com/llms.txt
验证内容显示为纯文本

方法二：自定义代码实施（高级）

最适合：有Webflow托管访问权限的开发者 所需时间：20-30分钟 技术水平：⭐⭐⭐ 高级

此方法涉及导出你的网站并添加一个真正的.txt文件。

步骤1：导出你的Webflow网站

转到项目设置 > 导出
点击准备ZIP
下载网站文件
解压ZIP文件

步骤2：创建llms.txt文件

打开文本编辑器（VS Code、Sublime等）
创建名为llms.txt的新文件
以Markdown格式添加内容：

# 你的Webflow网站名称

> 一句话描述你做什么

## 服务

- [服务1](/service-1) - 描述
- [服务2](/service-2) - 描述

## 作品

- [作品集](/portfolio) - 查看我们的项目
- [案例研究](/case-studies) - 详细分析

## 联系

- [联系我们](/contact) - 开始一个项目
- [关于](/about) - 了解我们

步骤3：添加到根目录

将llms.txt放在提取的网站文件夹的根目录中
文件应与index.html处于同一级别

步骤4：重新上传到托管服务

对于Webflow托管：不幸的是，Webflow托管不允许直接上传文件。你需要：

使用方法一（静态页面），或
使用自定义托管（见下文）

对于自定义托管（AWS、Netlify、Vercel等）：

上传修改后的网站文件
配置你的主机将llms.txt作为text/plain提供
部署

步骤5：配置服务器标头

为正确的内容类型添加这些标头：

Netlify（_headers文件）：

/llms.txt
  Content-Type: text/plain; charset=utf-8

Vercel（vercel.json）：

{
  "headers": [
    {
      "source": "/llms.txt",
      "headers": [
        {
          "key": "Content-Type",
          "value": "text/plain; charset=utf-8"
        }
      ]
    }
  ]
}

AWS S3：上传时设置元数据：Content-Type: text/plain

Webflow专用模板

适用于设计代理机构

# [代理机构名称] - 数字设计工作室

> 为有抱负的品牌提供屡获殊荣的网页设计和开发

## 服务

- [网页设计](/services/web-design) - 自定义响应式网站
- [UX/UI设计](/services/ux-ui) - 以用户为中心的设计
- [Webflow开发](/services/webflow) - 无代码开发
- [品牌设计](/services/branding) - 视觉标识系统

## 作品

- [作品集](/work) - 精选项目
- [案例研究](/case-studies) - 详细项目故事
- [客户](/clients) - 我们合作的品牌
- [行业](/industries) - 我们服务的领域

## 关于

- [我们的故事](/about) - 我们是谁
- [流程](/process) - 我们如何工作
- [团队](/team) - 认识创作者
- [招聘](/careers) - 加入我们的团队

## 资源

- [博客](/blog) - 设计见解
- [Webflow技巧](/webflow-tips) - 教程
- [免费模板](/templates) - 下载资源

## 联系

- [开始项目](/contact) - 联系我们
- [获取报价](/quote) - 申请定价
- [预约通话](/book) - 安排咨询

适用于自由职业设计师

# [你的名字] - 自由网页设计师

> 帮助初创企业和小企业创建令人惊叹的Webflow网站

## 服务

- [网站设计](/services/design) - 自定义设计
- [Webflow开发](/services/development) - 用Webflow构建
- [网站维护](/services/maintenance) - 持续支持

## 作品集

- [近期项目](/portfolio) - 最新作品
- [客户证明](/testimonials) - 客户反馈

## 关于

- [关于我](/about) - 我的背景
- [我的流程](/process) - 我如何工作
- [可用性](/availability) - 当前容量

## 资源

- [博客](/blog) - 设计文章
- [免费资源](/freebies) - 模板和指南

## 雇用我

- [联系](/contact) - 取得联系
- [定价](/pricing) - 投资水平

适用于SaaS产品

# [产品名称] - [类别]软件

> [一句话价值主张]

## 产品

- [功能](/features) - 我们提供什么
- [定价](/pricing) - 套餐和定价
- [演示](/demo) - 免费试用
- [使用场景](/use-cases) - 人们如何使用它

## 资源

- [文档](/docs) - 完整指南
- [API参考](/api) - 开发者文档
- [教程](/tutorials) - 操作指南
- [博客](/blog) - 产品更新

## 公司

- [关于](/about) - 我们的使命
- [客户](/customers) - 成功故事
- [招聘](/careers) - 加入我们

## 支持

- [帮助中心](/help) - 找到答案
- [联系支持](/support) - 获得帮助
- [状态](/status) - 系统状态

适用于电商

# [商店名称] - [产品类别]

> [你所销售商品的描述]

## 商店

- [新品](/shop/new) - 最新产品
- [热销](/shop/bestsellers) - 热门商品
- [系列](/collections) - 按类别浏览
- [特卖](/shop/sale) - 当前优惠

## 类别

- [类别1](/shop/category-1) - 描述
- [类别2](/shop/category-2) - 描述

## 信息

- [关于](/about) - 我们的故事
- [配送](/shipping) - 配送信息
- [退换货](/returns) - 退换货政策
- [尺码指南](/sizing) - 找到你的尺寸

## 支持

- [常见问题](/faq) - 常见问题
- [联系](/contact) - 取得联系
- [追踪订单](/track) - 订单状态

优化你的Webflow llms.txt

1. 保持结构简洁

Webflow的干净代码理念延伸到你的llms.txt：

# 清晰的层次结构

## 二级部分

### 必要时的三级

- 带描述的列表项

2. 匹配你的设计系统

组织你的llms.txt以反映网站的导航：

主要服务/产品放在前面
作品集/工作样本
关于/公司信息
资源和支持

3. 使用描述性链接

❌ - [点击这里](/services)
✅ - [网页设计服务](/services/web-design) - 为初创企业提供的自定义网站

4. 利用Webflow CMS

如果使用Webflow CMS：

创建专用的CMS模板
提取动态内容
自动更新llms.txt页面
无需手动更新即可保持内容新鲜

动态CMS示例（需要自定义代码）：

<pre>
# {{ site-name }}

> {{ site-description }}

## 博客文章

{% for post in blog-posts %}
- [{{ post.title }}]({{ post.url }}) - {{ post.summary }}
{% endfor %}
</pre>

5. 跨断点测试

由于你使用的是Webflow的响应式设计：

在桌面、平板、移动设备上测试llms.txt
确保<pre>标签正确显示
检查空白处理
验证无水平滚动

Webflow特定最佳实践

1. 使用Webflow的SEO设置

优化出现在llms.txt中的页面：

转到每个页面的页面设置
添加清晰的页面标题
编写简洁的元描述
使用适当的OpenGraph标签

2. 组织集合

如果使用Webflow CMS集合：

创建逻辑集合结构
使用清晰的集合名称
为集合项添加描述
在llms.txt中链接到主要集合页面

3. 谨慎使用交互

保持llms.txt页面简单：

❌ 不要有动画或交互
❌ 不要有复杂布局
✅ 简单、可读的文本
✅ 快速加载

4. 版本控制

由于Webflow没有内置版本控制：

在外部保存llms.txt内容的副本
在电子表格中记录更改
记录你更新的内容和时间
追踪性能变化

5. 客户网站

如果为客户构建：

在你的提案中解释llms.txt的优势
在你的交付物中包含设置
向客户展示如何更新内容
添加到你的网站维护套餐

常见Webflow问题和解决方案

问题：页面显示Webflow品牌

问题：出现默认Webflow页脚

解决方案：

从页面中删除所有部分
仅使用嵌入元素
将页面内边距设为0
隐藏该页面的网站导航/页脚

问题：内容不是纯文本

问题：可见样式文本或Webflow格式

解决方案：

使用带内联样式的<pre>标签
设置background: white和color: black
删除所有Webflow类
使用嵌入组件，不使用文本块

问题：无法更改URL扩展名

问题：Webflow添加尾部斜杠

解决方案：

将页面slug精确设置为llms.txt
Webflow将在/llms.txt提供它
有无尾部斜杠都测试
两者都应该有效

问题：自定义域名上出现404

问题：在webflow.io上可以工作但在自定义域名上不行

解决方案：

完全重新发布网站
清除Webflow缓存
检查DNS设置
等待10-15分钟让DNS传播

问题：移动端显示问题

问题：在移动设备上文本太小或格式奇怪

解决方案：

<pre
  style="
  white-space: pre-wrap;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  padding: 20px;
  width: 100%;
  overflow-x: auto;
"
>
你的内容在这里
</pre>

性能优化

保持轻量

你的llms.txt应该即时加载：

目标文件大小：< 10KB
无图片或外部资源
最简HTML结构
直接内容传递

缓存策略

配置缓存标头（如果在自定义托管上）：

Cache-Control: public, max-age=3600

这缓存1小时——在新鲜度和性能之间取得平衡。

CDN注意事项

如果使用Cloudflare或其他CDN：

确保llms.txt通过CDN传递
设置适当的缓存规则
配置为text/plain内容类型
更新后清除缓存

测试你的Webflow实施

综合测试清单

直接访问
- ✅ yoursite.com/llms.txt可以加载
- ✅ 内容显示为纯文本
- ✅ 没有Webflow UI元素可见
内容验证
- ✅ 所有链接是绝对或相对的
- ✅ 链接指向正确的页面
- ✅ 没有失效链接
- ✅ Markdown格式正确
跨浏览器测试
- ✅ Chrome
- ✅ Firefox
- ✅ Safari
- ✅ Edge
设备测试
- ✅ 桌面
- ✅ 平板
- ✅ 移动端
性能
- ✅ 在1秒内加载
- ✅ 没有控制台错误
- ✅ 正确的content-type标头

维护和更新

定期更新计划

每月：

检查新页面/项目
更新描述
检查失效链接

每季度：

完整内容审核
必要时重新结构
测试所有功能

重大更新后：

新产品/服务发布
网站重新设计
新作品集内容

更新流程

在Webflow设计器中编辑
- 打开你的llms页面
- 编辑嵌入代码
- 保存更改
在预览中测试
- 使用Webflow预览模式
- 检查格式
- 验证链接
发布
- 发布到你的网站
- 清除缓存
- 测试线上版本

版本追踪

保留更改日志：

## llms.txt更新日志

### 2025-10-05

- 添加新服务：电商开发
- 更新作品集部分
- 修复关于页面的失效链接

### 2025-09-15

- 初始实施
- 添加所有主要服务
- 创建作品集部分

与Webflow功能集成

Webflow CMS

使用CMS创建动态部分：

为”重要页面”创建CMS集合
添加你想要在llms.txt中的项目
使用自定义代码提取和显示
随CMS更改自动更新

Webflow电商

对于Webflow商店：

## 商店

- [所有产品](/shop) - 浏览全部
- [新品](/shop?sort=newest) - 最新商品
- [热销](/shop?sort=popular) - 最受欢迎

## 系列

- [系列1](/shop/collection-1)
- [系列2](/shop/collection-2)

Webflow会员资格

对于会员网站：

## 公开内容

- [关于](/about)
- [定价](/pricing)
- [加入](/join)

## 会员资源

- [会员仪表板](/dashboard)
- [资源](/resources)
- [社区](/community)

高级技术

使用JavaScript的动态内容

<pre id="llms-content">加载中...</pre>

<script>
  fetch("/api/llms-data")
    .then(response => response.text())
    .then(data => {
      document.getElementById("llms-content").textContent = data;
    });
</script>

多语言网站

对于有多种语言的网站：

# 你的公司名称

> 描述

## English

- [Home](/en)
- [About](/en/about)

## 中文

- [首页](/zh)
- [关于](/zh/about)

结论：Webflow + llms.txt = 设计师的选择

Webflow的灵活性使llms.txt实施简单直接，同时给予你完全的设计控制。无论你选择静态页面方法还是自定义托管方法，你都在为AI发现定位你的网站。

快速行动计划

今天（15分钟）：

✅ 在Webflow中创建llms.txt页面
✅ 使用嵌入方法添加你的内容
✅ 配置页面设置
✅ 发布并测试

本周（30分钟）：

✅ 优化页面描述
✅ 测试所有链接
✅ 检查移动端显示
✅ 添加到robots.txt

持续进行：

✅ 每月更新新内容
✅ 监控分析数据
✅ 根据结果优化

关键要点

✅ Webflow使llms.txt无需插件即可实现
✅ 静态页面方法适合大多数用户
✅ 保持结构简洁
✅ 在各设备上全面测试
✅ 定期更新新内容

你的Webflow网站值得被AI助手发现。通过这些方法，你今天就可以实施llms.txt，向下一代搜索者展示你的作品。

在其他平台上构建？查看我们的Wix、WordPress和Shopify指南。

需要自动生成？试用LLMGenerator，在几分钟内为你的Webflow网站创建优化的llms.txt文件。

如何在Webflow网站添加llms.txt（分步指南）

如何在Webflow网站添加llms.txt（分步指南）

目录

为什么Webflow网站需要llms.txt

设计师的优势

Webflow的特定优势

方法一：静态页面方法（推荐）

步骤1：创建新的静态页面

步骤2：配置页面设置

步骤3：设计页面

步骤4：设置Content-Type标头

步骤5：从导航中隐藏

步骤6：发布并测试

方法二：自定义代码实施（高级）

步骤1：导出你的Webflow网站

步骤2：创建llms.txt文件

步骤3：添加到根目录

步骤4：重新上传到托管服务

步骤5：配置服务器标头

Webflow专用模板

适用于设计代理机构

适用于自由职业设计师

适用于SaaS产品

适用于电商

优化你的Webflow llms.txt

1. 保持结构简洁

2. 匹配你的设计系统

3. 使用描述性链接

4. 利用Webflow CMS

5. 跨断点测试

Webflow特定最佳实践

1. 使用Webflow的SEO设置

2. 组织集合

3. 谨慎使用交互

4. 版本控制

5. 客户网站

常见Webflow问题和解决方案

问题：页面显示Webflow品牌

问题：内容不是纯文本

问题：无法更改URL扩展名

问题：自定义域名上出现404

问题：移动端显示问题

性能优化

保持轻量

缓存策略

CDN注意事项

测试你的Webflow实施

综合测试清单

维护和更新

定期更新计划

更新流程

版本追踪

与Webflow功能集成

Webflow CMS

Webflow电商

Webflow会员资格

高级技术

使用JavaScript的动态内容

多语言网站

结论：Webflow + llms.txt = 设计师的选择

快速行动计划

关键要点

其他资源