Cloudflare从入门到精通 12. 1分钟给网站嵌入推文

📜 前言

如果你想给你的网站嵌入推特的推文（例如添加 Testimonials 的情况），使用 Zaraz embed 1 分钟给任何类型网站嵌入推文，直接看效果图

上面的效果无需开发任何组件，且用任何开发框架都可以集成，下面我用 Hexo 框架演示给大家如何集成 Zaraz embed。

Hexo 是一个基于 Node.js 的静态博客框架，主要用于快速搭建个人博客或技术文档网站。它的核心作用是将 Markdown（或其他格式）的源文件，生成静态 HTML 文件，最终部署到服务器或静态托管平台

🧾 教程

创建 Hexo 基础项目

首先安装 hexo-cli 命令工具（要先提前安装 nodejs 环境）

1	npm install -g hexo-cli

安装完后我们创建 hexo 基础项目

1	hexo init hexo-demo

创建成功后我们用 vscode 打开文件夹，可以看到以下的目录结构，打开hello-hexo.md文件

然后将下面的内容全部复制到hello-hexo.md里，这里的关键是文件中要包含 <twitter-post tweet-id=""></twitter-post> 这对标签，tweet-id 可以选择任何你喜欢的推特，tweet-id 是可以从网页中获取

---

title: hexo integrates zaraz embed
date: 2025-03-24 16:35:44

---

This is a demonstration site for Hexo, showcasing how to embed tweets from X using Zaraz.

## Tweets

### Text

<twitter-post tweet-id="1822202930919039208"></twitter-post>

<twitter-post tweet-id="1904391137307099409"></twitter-post>

### Video&Pic

<twitter-post tweet-id="1907091215243428044"></twitter-post>

### NSFW

<twitter-post tweet-id="1899769294633967961"></twitter-post>

部署项目

执行npm run build 生成网站待部署的静态文件到public目录下

我们选择 Cloudflare Pages 来一键部署，登录 Cloudflare 后台

选择最上方的Pages 选项，选择最下面的直接上传文件部署

设置一个项目名称然后将刚刚打包好的public文件夹上传后点击部署等待几分钟就可

设置并开启 Zaraz

使用 Cloudflare 提供的默认域名是无法开启 Zaraz 的，需要我们绑定自己托管在 Cloudflare 上的域名，进入到部署好的 Pages 项目，选择Custom domains

给这个项目分配一个子域名，等待 DNS 生效，注意！ 不要在 DNS 里手动设置，一定要在项目的 Custom domain 中设置

接下来我们设置 Zaraz Embed，对 Zaraz 完全不了解的小伙伴可以参考 Cloudflare从入门到精通 11. Zaraz 第三方脚本管理助手。进入到设置页面后，选择 Embeds中的 Twitter Pixel, 一直点 next 就行，注意不要设置错域名

回到 zaraz 设置入口处，看到这个工具打开以后，说明就大功告成了

查看效果

访问网站，效果拔群，very good！

❗ 注意事项

Zaraz embed 对展示的推文内容是有限制，可以访问(https://hexo-test.debill.cc 查看)

只能展示文字类型推文
无法展示图片和视频内容
对色情和暴力的内容不予以展示

📝 总结

使用 Zaraz embed 非常简单，只需要网站的 html 中包含 <twitter-post tweet-id="twitter id"> 标签然后在后台在 Cloudflare 后台进行简单的设置就可以实现，无论使用 React、Vue 等任何框架开发网站，只要让最后生成的 html 包含<twitter-post tweet-id="twitter id">就可以很快集成该组件，不用自己重复造轮子，配合代码逻辑甚至可以实现：

动态展示/关闭推文展示
推特轮播图
定制化组件
….

感兴趣的朋友可以自己尝试一下