[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fWDl8XhSLb1J8FbavtAEBokotprgzcdWJicnXs7sjkkI":3,"$f5xWJCSqG54Yuq0NoA9DKG0rie0p7VFr6TR7TFl-j-eQ":39},[4],{"id":5,"type":6,"title":7,"slug":8,"summary":9,"body":10,"coverUrl":11,"productScreenshots":12,"productLinks":13,"authorName":14,"authorUrl":15,"authorSubject":16,"category":17,"tags":22,"sourceLabel":31,"sourceName":31,"sourceUrl":31,"status":32,"seoTitle":31,"seoDescription":31,"canonicalUrl":31,"isFeatured":33,"sno":34,"sortOrder":35,"publishedAt":36,"updatedAt":37,"createdAt":38},"9d05543d-fd56-45ac-932c-c8f7afab5e5e","article","用一杯奶茶钱搭建网站","build-your-own-website","现如今，即使没有专业开发经验，也可以用极低成本建立一个真正属于自己的网站","过去，建设一个网站通常需要掌握编程、购买服务器、配置数据库，还要处理域名解析和网站部署。如今，借助AI、GitLab和Cloudflare，即使没有专业开发经验，也可以用极低成本建立一个真正属于自己的网站。\n\n整套方案的固定支出只有域名费用：在宝塔官网购买一个价格较低的`.cn`域名，代码托管、网站部署、HTTPS证书和基础访问加速都可以使用免费服务完成。\n\n如果你不介意，甚至可以使用免费域名，真正实现零成本搭建。\n\n在开始前，请确保已开通 [宝塔](https:\u002F\u002Fwww.bt.cn\u002Flogin.html?ReturnUrl=https:\u002F\u002Fwww.bt.cn\u002Fadmin\u002Fprofe_ee)、[GitLab](https:\u002F\u002Fgitlab.com\u002F)、[Cloudflare](https:\u002F\u002Fdash.cloudflare.com\u002F) 账号。\n\n## 第一步：购买域名\n\n域名是网站在互联网上的地址，例如`srces.cn`。\n\n有了自己的域名，就等于在浩大的互联网世界中拥有了一席之地，任何人都可以通过`https:\u002F\u002F你的域名`来访问你的内容。\n\n域名结构如下，以`www.example.com`为例：\n\n```mermaid\nflowchart LR\n    TLD[\"顶级域名 TLD\u003Cbr\u002F> .com \u002F .org \u002F .net 等\"]\n    TLD --> Domain[\"主域名（二级域名）\u003Cbr\u002F> example\"]\n    Domain --> Sub1[\"子域名（三级域名）\u003Cbr\u002F> www\"]\n    Domain --> Sub2[\"子域名\u003Cbr\u002F> mail\"]\n    Domain --> Sub3[\"子域名\u003Cbr\u002F> blog\"]\n```\n\n在域名注册实践中，宝塔的域名注册服务性价比较高（无赞助），首年与续费价格低于腾讯云、阿里云等平台。\n\n\u003Cimg src=\"https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-18\u002Fd868db20-3768-4546-b6c3-ad41bb76b4c8.jpg\" alt=\"d2d81f4a-4fa0-4df9-96c3-c7091bf653ca\">\n\nhttps:\u002F\u002Fwww.bt.cn\u002Fnew\u002Fdomain-register.html\n\n顶级域名首选`.cn`，首年价格较低，适合面向国内的个人主页、博客、作品集和产品网站。\n\n购买前应注意检查续费价格，并完成域名实名认证。若网站部署在Cloudflare等境外基础设施上，通常不需要购买国内服务器；但访问稳定性、备案要求和具体业务合规性仍应根据实际情况判断。\n\n如果暂时不想购买域名，可以前往[DigitalPlat Domains](https:\u002F\u002Fdomain.digitalplat.org\u002F\n)等平台注册免费域名。\n\n> 托管在境外服务器（例如使用Cloudflare）且无收费功能的网站无需备案。\n\n## 第二步：使用IDE和AI编写网站\n\n购买域名后，可以在VS Code、Cursor、Trae、Windsurf等IDE中创建项目，并使用AI辅助编程。\n\n只需向AI描述网站需求，例如：\n\n```\n设计一个极简的个人知识分享网站，包含首页、文章列表、文章详情和关于页面，支持手机端访问。\n```\n\nAI可以帮助生成页面、组件、样式和配置文件，也可以分析报错、修改代码和优化设计。对于简单网站，可以直接使用HTML、CSS和JavaScript；需要更完整的页面管理和路由能力时，可以选择Nuxt、Astro或Next.js。\n\n可参考：\n\nhttps:\u002F\u002Ffoundit.cn\u002Farticle\u002Fvibe-coding-intro\n\nhttps:\u002F\u002Ffoundit.cn\u002Farticle\u002Fvibe-coding-reminds\n\nAI降低了编程门槛，但不能完全替代检查。至少应理解项目如何启动、如何构建，以及环境变量和密钥应该放在哪里。\n\n## 第三步：将代码上传到GitLab\n\n网站完成后，在GitLab创建一个代码仓库，并把本地代码上传。\n\n> 为什么不用GitHub？因为代码提交后的推送效率低，国内使用体验较差。\n\nGitLab相当于网站代码的云端保险箱。它可以保存每一次修改记录，当AI误删代码或新版本出现问题时，可以快速恢复到之前的状态。\n\n日常开发流程非常简单：\n\n1. 在IDE中修改网站；\n2. 将修改提交到GitLab；\n3. Cloudflare检测到更新；\n4. 自动重新构建并发布网站。\n\n通过这种方式，不需要手动上传压缩包，也不需要登录服务器替换文件。\n\n## 第四步：使用Cloudflare关联GitLab\n\n\u003Cimg src=\"https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-18\u002F0db0b6a7-45ce-4cbb-acae-964a1d22f0ac.jpg\" alt=\"bb9cc6e9-d6dd-4894-8253-d10c1baa6f6c\">\n\n在Cloudflare中创建Pages或Workers项目，授权访问GitLab，并选择对应的网站仓库。\n\n随后配置项目的构建命令和输出目录。例如，Nuxt项目通常需要执行构建命令，纯HTML网站则可以直接发布整个目录。\n\nCloudflare会自动完成网站构建、文件托管、全球内容分发和HTTPS证书配置。每次向GitLab提交代码后，Cloudflare都会自动部署新版本。\n\nCloudflare还会为每次提交生成独立预览地址。正式发布前，可以先通过预览页面检查修改结果，确认没有问题后再合并到主分支。\n\n## 第五步：在Cloudflare配置域名\n\n网站成功部署后，需要把宝塔购买的域名接入Cloudflare。\n\n先在Cloudflare添加域名，再按照提示，将域名的DNS服务器修改为Cloudflare提供的地址。修改通常需要在宝塔的域名管理后台完成。\n\n\u003Cimg src=\"https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-18\u002F05b0c821-d183-4f8d-b6df-7fac339aee00.jpg\" alt=\"dc09904f-db46-441b-a959-ef999a870086\">\n\nDNS生效后，在Cloudflare项目中绑定自定义域名，例如：\n\n- `example.cn`\n- `www.example.cn`\n\n\u003Cimg src=\"https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-18\u002Fbfd33a37-17b6-4e6a-b00d-5ad8d21724a3.jpg\" alt=\"22879676-728a-4855-b8c5-58bc4a863997\">\n\nCloudflare会自动申请和续期HTTPS证书，不需要单独购买SSL证书。\n\n## 需要数据库怎么办？\n\n个人主页、博客、文档站和作品集通常可以直接使用静态文件，不需要数据库。\n\n当网站需要用户注册、文章后台、评论、收藏、文件上传或动态数据时，可以接入Supabase。它提供PostgreSQL数据库、用户认证、对象存储和自动API，免费额度通常足以支持个人项目早期使用。\n\nhttps:\u002F\u002Ffoundit.cn\u002Farticle\u002Fai-supabase\n\n此时整体架构为：\n\n**宝塔购买域名 → IDE和AI开发 → GitLab托管代码 → Cloudflare自动部署 → Supabase提供可选数据服务。**\n\n## 最终成本\n\n对于访问量不高的个人网站，GitLab、Cloudflare和Supabase都可以从免费方案开始使用。因此，整个项目的固定成本通常只有域名注册与续费费用。\n\nAI负责降低开发难度，GitLab负责保存代码，Cloudflare负责部署和访问，Supabase负责可选的后台数据。过去需要服务器和专业运维才能完成的事情，如今个人也能在较短时间内独立完成。","https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-18\u002Fab2a17f9-ce6a-414f-bbb5-28ea00ca5d94.jpg",[],[],"龙家轩","https:\u002F\u002Fweatheraintbad.com","f39339b1-aaa6-4e86-b0c2-a6e6a21113b5",{"id":18,"name":19,"slug":20,"description":21},"d6750616-07d9-4350-8485-1834c77be3d2","指南","guide","指导建议，仅供参考",[23,27],{"id":24,"name":25,"slug":26},"4ab4d31d-2daf-4bd3-9d99-c7210c4943bf","网页制作","web-making",{"id":28,"name":29,"slug":30},"a202d639-99a6-488a-a712-4d4c6ffd7e15","开发","dev",null,"published",false,50,0,"2026-07-18T00:00:00.000Z","2026-07-20T10:26:11.523Z","2026-07-18T08:15:04.450Z",[40,70,94],{"id":41,"type":6,"title":42,"slug":43,"summary":44,"body":45,"coverUrl":46,"productScreenshots":47,"productLinks":48,"authorName":49,"authorUrl":50,"authorSubject":16,"category":51,"tags":56,"sourceLabel":31,"sourceName":31,"sourceUrl":31,"status":32,"seoTitle":31,"seoDescription":31,"canonicalUrl":31,"isFeatured":33,"sno":66,"sortOrder":35,"publishedAt":67,"updatedAt":68,"createdAt":69},"544fc658-c911-4de6-93b0-d2520087119a","MCP：AI 的「USB-C」时刻","mcp-ai-usb-c-moment","以前每个 AI 应用都要为 GitHub、数据库、日历各写一套私有连接器，这是 M×N 的集成噩梦，直到 MCP 的出现","如果你用过笔记本电脑，一定熟悉那种「每个设备一根专属线」的烦躁：鼠标一个接口、打印机另一个、硬盘又一个。2025 年之前的 AI 应用，几乎就是这种状态——想让一个助手同时读你的代码仓库、查数据库、发日历邀请，开发团队得为每一个系统写一套私有「连接器」，又脆又难维护。\n\n## 背景：每个 Agent 都曾是孤岛\n\n大模型本身只会「说话」，它要真正干活，得去调工具、读数据。在 MCP（Model Context Protocol，模型上下文协议）出现之前，这套对接是组合爆炸：假设市面上有 M 个 AI 客户端、N 个工具，开发者就要写 M×N 套集成。一个代码助手要读 Git、查 Jira、搜文档，就得维护三条互不相通的管线。\n\n更糟的是，这些连接器大多只服务某一个产品，换个助手就得重写。结果就是：每个 Agent 都困在自己的小岛上，能力被锁死在少数几个硬编码的集成里。\n\n## MCP 是什么：AI 世界的「USB-C」\n\n2024 年底，Anthropic 发布了 MCP。它的目标很朴素：给「AI 连工具」定义一个统一接口，就像 USB-C 给「设备连外设」定义统一接口一样。\n\n打个比方——如果大模型是大脑，那 MCP 就是手。大脑再聪明，没有手也打不开文件、点不了按钮、查不了数据库。MCP 让任意符合规范的「大脑」（Claude、ChatGPT、Gemini、Cursor、VS Code Copilot）都能使用任意符合规范的「手」（一个封装好的工具服务），而且不用为每个组合单独适配。\n\n2025 年 12 月，Anthropic 把 MCP 捐给了 Linux 基金会，OpenAI、Google、Microsoft 作为联合发起人。到 2026 年，它的 SDK 月下载量超过 9700 万次，ChatGPT、Claude、Gemini 都支持同一个协议——某种意义上，这场标准之战已经赢了。\n\n## 它是怎么运作的：三层结构\n\nMCP 把「连工具」拆成三个角色，理解这三层就理解了全部：\n\n- **Host（宿主）**：你直接使用的应用，比如 Claude 桌面端、VS Code、一个自定义聊天机器人。\n- **Client（客户端）**：住在 Host 内部、专门负责管理 MCP 连接的小组件。\n- **Server（服务端）**：一个轻量程序，把某个能力「暴露」出来，比如一个 GitHub 服务、一个数据库查询服务。\n\n每个 Server 通过三种「原语」提供能力：`Tools`（AI 可以调用的可执行函数，如 `create_issue`）、`Resources`（AI 可以读取的数据，如文件内容、数据库表结构）、`Prompts`（可复用的提示词模板）。它们底层用 **JSON-RPC**（一种简单的远程调用格式）通信，远程服务走 HTTP 传输，本地服务走标准输入输出。\n\n整个调用流程是这样的：\n\n```mermaid\nflowchart LR\n    U[用户] --> H[Host 应用\u003Cbr\u002F>Claude \u002F Cursor \u002F VS Code]\n    H --> C[MCP Client\u003Cbr\u002F>连接管理器]\n    C -->|JSON-RPC| S1[MCP Server: GitHub]\n    C -->|JSON-RPC| S2[MCP Server: 数据库]\n    C -->|JSON-RPC| S3[MCP Server: 天气 API]\n    S1 --> D1[(代码仓库)]\n    S2 --> D2[(业务数据)]\n    S3 --> D3[(外部 API)]\n```\n\n关键点在于：Host 只要实现一次 Client 协议，Server 只要实现一次 Server 协议，从此任意 Host 能连任意 Server。集成成本从 M×N 降到了 M+N。\n\n## 一个最小可运行的例子\n\n下面用官方 Python SDK 写一个「天气查询」MCP 服务，只暴露一个工具：\n\n```python\nfrom mcp.server.fastmcp import FastMCP\n\nmcp = FastMCP(\"weather\")  # 服务名叫 weather\n\n@mcp.tool()\ndef get_weather(city: str) -> str:\n    \"\"\"查询某城市的天气（示例返回静态数据）\"\"\"\n    return f\"{city} 今天晴，25°C。\"\n\nif __name__ == \"__main__\":\n    mcp.run()  # 默认以 stdio 方式启动，等待 Host 来连\n```\n\n运行前只需 `pip install mcp`，然后用任意支持 MCP 的客户端（Claude 桌面端、Cursor 等）配置这个服务路径即可。AI 在对话里说「查下北京天气」，客户端就会通过 MCP 调用 `get_weather(\"北京\")`，拿到结果再组织成自然语言回答你。注意：这只是最小骨架，真实服务里要把静态返回值换成真正的天气 API 调用。\n\n## 取舍与边界：它解决了什么，没解决什么\n\nMCP 解决的是「连接标准」问题，但它不是银弹：\n\n- **它让集成变简单，但不保证工具安全。** 一个 MCP Server 可以是任何人所写，工具描述会直接喂给模型。如果 Server 既能读私有数据、又能访问不可信内容、还能对外发消息，就构成了安全风险（业界称之为「致命三件套」）。企业通常会加一层 **Gateway（网关）** 来做鉴权和审计——Uber、Amazon 都用了这种「网关 + 注册表」的控制平面。\n- **上下文膨胀是个真问题。** 接的 Server 一多，工具定义会塞满模型的上下文窗口。2026 年的常见解法是「按需加载」：只把当前 Agent 真正需要的工具暴露出来，而不是一次全塞进去。\n- **它定义「怎么连」，不定义「连上去说什么」。** 多 Agent 之间的协作语义，由另一套协议 A2A（Agent-to-Agent）负责——MCP 接工具，A2A 连同伴。\n\n## Tips\n\n- 下次看到「AI 连不上我的系统」，先问：有没有现成的 MCP Server？多数数据库、SaaS、开发工具都已有官方或社区实现。\n- 想自己动手：用官方 SDK（Python\u002FTypeScript 等）把内部的一个 API 包成 MCP Server，比写一套专属集成快得多。\n- 评估风险时记住三件事：私有数据、不可信输入、对外通信，三者叠加要格外小心，尽量放进网关管控。\n- 分清两层协议：接工具看 MCP，多 Agent 协作看 A2A，别混为一谈。\n- 把 MCP 当「基础设施」而非「功能」：它赢是因为无聊、通用、可复用，这正是它值得长期投入的原因。","https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-19\u002Fc3c06d99-a0ac-40ac-a283-7e77aabb4c4c.jpg",[],[],"Foundit AI","https:\u002F\u002Ffoundit.cn\u002Fabout",{"id":52,"name":53,"slug":54,"description":55},"6179d3b6-dc34-4483-9ded-3cd9f1b37a47","科普","abbreviation","介绍各领域新兴概念",[57,58,62],{"id":28,"name":29,"slug":30},{"id":59,"name":60,"slug":61},"7c76bfc2-f80f-4ee0-a95d-27bd8708b434","技术","slug",{"id":63,"name":64,"slug":65},"4c2bbea6-eab7-40a8-8447-1de478ff7749","分析","analyse",46,"2026-07-20T00:00:00.000Z","2026-07-19T17:39:20.060Z","2026-07-19T16:13:40.316Z",{"id":71,"type":6,"title":72,"slug":73,"summary":74,"body":75,"coverUrl":76,"productScreenshots":77,"productLinks":78,"authorName":14,"authorUrl":15,"authorSubject":16,"category":79,"tags":80,"sourceLabel":31,"sourceName":31,"sourceUrl":31,"status":32,"seoTitle":31,"seoDescription":31,"canonicalUrl":31,"isFeatured":33,"sno":90,"sortOrder":35,"publishedAt":91,"updatedAt":92,"createdAt":93},"b53e8d96-5ee6-448e-b249-5573d6adf6d4","氛围编程入门","vibe-coding-intro","以网页制作为例，介绍氛围编程涉及到的核心概念，帮助新手入门","这是一篇写给完全零基础新手的指南，内容包括：\n\n1. 什么是网页背后的“积木块”（HTML、CSS、JS 到底在干什么）\n2. 什么是 Vibe Coding\n3. 如何用 Vibe Coding 亲手做出你的第一个网页\n\n## 第一步：认识网页的三个“演员”\n\n一个网页，无论它看上去多复杂，都只是三种东西在合作演戏：\n\n- HTML —— 这是网页的“骨头和肉”\n\n它负责把内容放在网页上。比如：标题文字、按钮、图片、输入框。你可以把它想象成盖房子的结构：先有墙，才有地方挂画。\n\n- CSS —— 这是网页的“衣服和化妆”\n\n它负责让骨头和肉变得好看。颜色、大小、间距、位置，全归它管。还是那个房子：墙是 HTML，但墙刷成粉色还是蓝色，沙发摆左边还是右边，就是 CSS 说了算。\n\n- JavaScript (简称 JS) —— 这是网页的“大脑和动作”\n\n它负责让网页动起来。你点击按钮弹出“你好”，或者网页自动刷新天气，都是 JS 在干活。房子里的电灯开关：你按下开关（动作），灯亮了（结果）——这个“动”就是 JS。\n\n- 举个例子\n\n你在网页上看到一个红色的“购买”按钮。\u003Cbr>\n“按钮”两个字本身 = HTML\u003Cbr>\n红色、圆角、大尺寸 = CSS\u003Cbr>\n点击按钮后弹出“已加入购物车” = JavaScript\n\n这三个演员，平时就住在一个叫 文件 的“剧本”里。最常见的剧本，就是后缀是 .html 的普通文件。\n\n## 第二步：HTML文件是什么？怎么打开它？\n\n你不需要安装任何特殊的软件。一个 .html 文件其实就是一本用“网页语言”写好的剧本，一本只有电脑能看懂的剧本。\n\n- 怎么创建一个 .html 文件？\n\n在电脑上新建一个文本文档（Windows 的记事本，或 Mac 的文本编辑都可以），然后把它的名字从新建文本文档.txt 改成 我的网页.html。系统可能会问“改变后缀名可能导致文件不可用”，点是就行。现在，这个文件就变成了一个网页剧本。\n\n- 怎么打开看效果？\n\n直接双击这个 .html 文件，它就会自动用你正在用的浏览器（比如 Chrome、Edge）打开。浏览器就是“演员”，它负责把剧本演出来给你看。\n\n## 第三步：什么是 Vibe Coding？\n\n传统的写网页，是你自己一行一行去写 HTML、CSS、JS 的剧本。你得记住很多“咒语”，漏一个符号整个页面就白屏了。\n\nVibe Coding（氛围编程） 换了一种完全不同的思路：\n\n你不需要写代码，你只需要用日常说话的方式，告诉一个 AI（比如 ChatGPT、Claude、DeepSeek 等），你想要什么。然后 AI 直接把完整的 .html 文件剧本写好给你。\n你的工作变成了：说想法 → 看效果 → 再提修改意见，就像和一个懂技术的美工朋友聊天。\n\n“Vibe”这个词很贴切，你靠的是感觉和描述：“我要那种深夜小酒馆风格的页面，带一个暗色背景，中间有一句会慢慢浮现的欢迎语”，而不是去想代码。\n\n这就好比你盖房子，以前得自己当木工、泥瓦匠；现在你成了设计师+房主，只管说：“我要一扇落地窗，采光要特别好”，AI 泥瓦匠去帮你实现。\n\n## 第四步：开始你的第一个 Vibe Coding 项目（全程 5 分钟）\n\n下面跟着做，什么都不用懂。\n\n1. 打开你喜欢的任何一个 AI 对话工具\n\nChatGPT、Claude、Kimi、DeepSeek……哪个顺手用哪个。\n\n2. 用最直白的话告诉它你的想法\n\n复制下面这段话，或者自己改一改，发给 AI：\n\n```\n请帮我写一个完整的网页，要求：\n\n· 背景是柔和的深蓝色，像夜空\n· 网页正中间用白色大字写着“欢迎来到我的小站”\n· 字的下面有一个粉色的按钮，写着“点我一下”\n· 点击按钮后，按钮会变成绿色，并且文字变成“你成功啦！”\n· 把所有的 HTML、CSS、JS 都写在一个 .html 文件里，代码要完整，能直接保存运行\n· 最后告诉我这个文件怎么保存和使用\n```\n\n3. AI 会给出一大段代码\n\n它通常会给你一个代码块，类似这样（你不用看懂）：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>...\u003C\u002Fhead>\n\u003Cbody>...\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n直接全选，然后按 Ctrl+C（Mac 按 Cmd+C）复制，或点击下载按钮保存到电脑中。\n\n4. 把它保存成网页文件（若无法直接下载）\n\n- 在桌面上新建一个文本文档（记事本\u002F文本编辑）。\n- 把复制的代码粘贴进去。\n- 点“文件” → “另存为”。\n- 在文件名那里输入：my-first-page.html。重点：一定要把保存类型选为“所有文件”，编码选 UTF-8，然后保存。\n- 文件图标会变成浏览器的样子。\n\n5. 双击打开，见证奇迹\n\n浏览器打开，你会看到一个深蓝色星空的页面，正中间有你写的字和按钮。点击按钮，颜色变了，文字也变了。\n你刚刚做出了一个带交互功能的网页。\n\n## 第五步：用“Vibe”继续改，越玩越熟\n\n这才是 Vibe Coding 最有趣的地方。页面做出来了，但你可能觉得：“按钮不够圆”“字太小了”“背景要是能有点点星光就更好了”。\n\n你完全不用自己碰代码。继续跟 AI 聊天就行：\n\n“按钮再大一点，圆角一些，鼠标放上去要变小手”\n“给背景加上一些缓慢移动的星星”\n“再添一个能输入名字的框，点击按钮后下面显示‘xxx，你好’”\n\n每一次提要求，AI 都会再给你一版完整的代码。你只需：\n全选复制 → 粘贴进原来的 .html 文件覆盖全部旧内容 → 保存 → 刷新浏览器\n\n修改、看效果，再修改、再看。这就形成了一个纯粹的 “描述-观看” 循环，完全不需要学编程语法。\n\n## 你已经学会了\n\n总结一下，你要记住的其实就是这三层关系：\n\n- 网页 = HTML（内容）+ CSS（美化）+ JS（动作）\n- 做网页的老方法 = 自己学每一种语言，一行行敲\n- Vibe Coding 新方法 = 把你想要的样子说给 AI → AI 写好一个 .html 文件 → 你双击看戏\n\n从今天开始，你已经不是网页的局外人了。去试着做一张给朋友的生日卡片、一张自己的作品展示页、一个小倒计时器……不会的，就问 AI。\n\n你只负责想象，剩下的，都交给 Vibe。","https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-17\u002F538e5262-96da-46df-8e42-8f5156fe675e.jpg",[],[],{"id":18,"name":19,"slug":20,"description":21},[81,85,86],{"id":82,"name":83,"slug":84},"0848beb4-db26-4fb8-b391-f852a11be192","AI编程","ai-coding",{"id":24,"name":25,"slug":26},{"id":87,"name":88,"slug":89},"144abe77-0dc6-4f66-a176-20bddb1c0bfa","编程","coding",53,"2026-07-17T00:00:00.000Z","2026-07-18T14:04:32.156Z","2026-07-17T05:12:58.995Z",{"id":95,"type":6,"title":96,"slug":97,"summary":98,"body":99,"coverUrl":100,"productScreenshots":101,"productLinks":102,"authorName":49,"authorUrl":103,"authorSubject":16,"category":104,"tags":105,"sourceLabel":109,"sourceName":31,"sourceUrl":31,"status":32,"seoTitle":31,"seoDescription":31,"canonicalUrl":31,"isFeatured":33,"sno":110,"sortOrder":35,"publishedAt":111,"updatedAt":112,"createdAt":113},"74dedc2e-6a66-4481-aef2-5cffc3ba338d","嵌入模型（Embeddings）：向量数据库能搜「意思」，全靠它","embedding-models-vector-search","向量库怎么懂「意思相近」？靠嵌入模型把文字变成向量。本文讲清它的工作原理、余弦相似度检索，给出 sentence-transformers 最小示例，以及模型选型、维度统一、中英差异等取舍。","你让向量库「找意思相近的句子」，它怎么懂「意思」？靠嵌入模型（Embeddings）：把文字变成一串数字（向量），意思越近，数字越近。它是语义搜索和 RAG 真正的地基——没有它，模型只能靠关键词硬匹配。\n\n## 为什么需要嵌入\n\n传统搜索靠关键词匹配，搜「怎么给猫降温」找不到「猫咪中暑怎么办」。嵌入把文本映射到向量空间，把相近语义聚在一起，才能按「意思」而不是「字面」检索。\n\n## 它是怎么工作的\n\n嵌入模型（如 BGE、OpenAI text-embedding）是个神经网络，把变长文本压成定长向量（常见 768 或 1536 维）。训练目标是「语义相近的文本，向量距离小」。检索时把 query 也编码，算余弦相似度，找最近的那些。\n\n```mermaid\nflowchart LR\n    A[文本] --> B[嵌入模型]\n    B --> C[向量]\n    C --> D[存入向量库]\n    E[查询] --> B\n    D --> F[相似度检索]\n    B --> F\n    F --> G[返回相近文本]\n```\n\n## 取舍与边界\n\n- **模型要选对**：通用嵌入未必适合你的领域（法律、医疗），必要时用领域数据微调。\n- **维度与成本权衡**：维度越高通常越准，但存储、检索都更贵更慢，按场景取舍。\n- **中英文差异**：混用中英文语料要选多语言模型，否则跨语言检索会崩。\n- **维度必须统一**：检索和入库一定要用同一个模型、同一维度，否则向量不可比，检索全乱。\n\n## Tips\n\n- 任何「按意思搜」的需求，第一步就是选好嵌入模型。\n- 中文场景优先试 BGE、m3e 等多语言\u002F中文模型，别直接套英文默认。\n- 入库和检索用同一模型同一维度，这是铁律。\n- 领域强相关的语料，用该领域样本微调嵌入，召回率提升明显。\n- 嵌入质量直接决定 RAG 上限，值得在它上面多花时间。","https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-22\u002Facd40af8-276a-48bc-8d62-dcd52c124590.jpg",[],[],"https:\u002F\u002Ffoundit.cn",{"id":52,"name":53,"slug":54,"description":55},[106,107,108],{"id":63,"name":64,"slug":65},{"id":59,"name":60,"slug":61},{"id":28,"name":29,"slug":30},"资料来源",68,"2026-07-22T00:00:00.000Z","2026-07-23T01:16:32.032Z","2026-07-20T10:23:37.966Z"]