Tilda Publishing

Tilda Publishing 是做什么的？

概述

Tilda 是一个基于区块的网站构建器——将区块拖拽到页面上，可视化自定义，然后发布。无需管理后端，无需配置托管。对于开发者来说：可以向任意区块注入自定义 HTML/CSS/JS，使用 Tilda API 以编程方式管理内容，将表单连接到任何后端，并构建自定义集成。非常适合营销站点、落地页和小型电商商店，非技术人员可以独立更新内容。

使用场景

• 快速构建营销站点和落地页
• 需要一个非技术人员可以轻松更新的 CMS
• 中小型电商（Tilda 内置商店）
• 需要高级动画的自定义落地页
• 同时需要视觉编辑和自定义代码的站点

操作指南

站点结构

Tilda 站点组织如下：

• 项目 → 包含页面
• 页面 → 包含区块（章节）
• 区块 → 预设计章节（头图、功能特性、定价、画廊等）
• Zero Block — 自定义区块，拥有完全的设计自由度

区块中的自定义 HTML/CSS/JS

<!-- 通过以下路径添加自定义代码：设置 → 更多 → <head> 中的 HTML 代码 或 </body> 前的 HTML 代码 -->

<!-- 自定义 CSS（head） -->
<style>
  /* 覆盖 Tilda 默认样式 */
  .t-title {
    font-family: 'Inter', sans-serif !important;
  }

  /* 自定义动画 */
  .t-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
  }
  .t-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* 响应式覆盖 */
  @media (max-width: 640px) {
    .t-cover__wrapper {
      min-height: 60vh !important;
    }
  }
</style>

<!-- 自定义 JavaScript（</body> 前） -->
<script>
  // 用于滚动动画的 Intersection Observer
  document.addEventListener('DOMContentLoaded', () => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-visible');
        }
      });
    }, { threshold: 0.1 });

    document.querySelectorAll('.t-animate').forEach((el) => observer.observe(el));
  });

  // 自定义表单处理 — 发送到您自己的 API
  document.querySelector('.t-form')?.addEventListener('submit', async (e) => {
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);

    // 与 Tilda 内置处理并行发送到您的后端
    await fetch('https://api.myapp.com/leads', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
  });
</script>

Zero Block（自定义设计）

Zero Block 提供完全类似画布的控制——通过自定义定位、动画和响应式断点精确放置元素。

<!-- 带自定义交互元素的 Zero Block -->
<div class="custom-calculator" id="price-calc">
  <h3>价格计算器</h3>
  <div class="calc-row">
    <label>用户数</label>
    <input type="range" id="users" min="1" max="1000" value="10">
    <span id="users-count">10</span>
  </div>
  <div class="calc-row">
    <label>套餐</label>
    <select id="plan">
      <option value="starter">Starter — $5/用户</option>
      <option value="pro">Pro — $12/用户</option>
      <option value="enterprise">Enterprise — $25/用户</option>
    </select>
  </div>
  <div class="calc-result">
    总计：<span id="total">$50</span>/月
  </div>
</div>

<script>
  const prices = { starter: 5, pro: 12, enterprise: 25 };
  const usersInput = document.getElementById('users');
  const planSelect = document.getElementById('plan');

  function updatePrice() {
    const users = parseInt(usersInput.value);
    const price = prices[planSelect.value];
    document.getElementById('users-count').textContent = users;
    document.getElementById('total').textContent = '$' + (users * price).toLocaleString();
  }

  usersInput.addEventListener('input', updatePrice);
  planSelect.addEventListener('change', updatePrice);
</script>

Tilda API

// api/tilda.ts — 以编程方式管理 Tilda 内容
const TILDA_PUBLIC_KEY = process.env.TILDA_PUBLIC_KEY;
const TILDA_SECRET_KEY = process.env.TILDA_SECRET_KEY;
const BASE_URL = "https://api.tildacdn.info/v1";

// 获取所有项目
async function getProjects() {
  const res = await fetch(
    `${BASE_URL}/getprojectslist/?publickey=${TILDA_PUBLIC_KEY}&secretkey=${TILDA_SECRET_KEY}`
  );
  return res.json(); // { status: "FOUND", result: [{ id, title, ... }] }
}

// 获取项目中的所有页面
async function getPages(projectId: number) {
  const res = await fetch(
    `${BASE_URL}/getpageslist/?publickey=${TILDA_PUBLIC_KEY}&secretkey=${TILDA_SECRET_KEY}&projectid=${projectId}`
  );
  return res.json();
}

// 获取完整页面内容（HTML + CSS + JS）
async function getPageFull(pageId: number) {
  const res = await fetch(
    `${BASE_URL}/getpagefull/?publickey=${TILDA_PUBLIC_KEY}&secretkey=${TILDA_SECRET_KEY}&pageid=${pageId}`
  );
  return res.json();
  // 返回：{ html, css, js, images[], title, descr, ... }
}

// 将页面导出到您自己的托管
async function exportPage(pageId: number) {
  const page = await getPageFull(pageId);
  const { html, css, js } = page.result;

  // 构建自包含的 HTML
  return `
    <!DOCTYPE html>
    <html>
    <head>
      <style>${css}</style>
    </head>
    <body>
      ${html}
      <script>${js}</script>
    </body>
    </html>
  `;
}

表单处理与 Webhook

// webhook/tilda-form.ts — 接收 Tilda 表单提交
/**
 * 在 Tilda 中配置：区块设置 → 表单 → Webhook URL
 * 每次提交时，Tilda 会发送 POST 请求，包含表单数据。
 */
export async function handleTildaForm(req: Request) {
  const formData = await req.formData();
  const data = Object.fromEntries(formData);

  // data: { Name: "Kai", Email: "[email protected]", Phone: "+1234567890", ... }

  // 保存到 CRM
  await fetch("https://api.mycrm.com/leads", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      name: data.Name,
      email: data.Email,
      phone: data.Phone,
      source: "tilda-landing",
    }),
  });

  // 发送到 Telegram
  await fetch(`https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      chat_id: CHAT_ID,
      text: `🔔 新线索！\n姓名：${data.Name}\n邮箱：${data.Email}\n电话：${data.Phone}`,
    }),
  });

  return new Response("OK");
}

电商（Tilda 商店）

<!-- 自定义产品页增强 -->
<script>
  // 自定义处理添加到购物车
  document.addEventListener('DOMContentLoaded', () => {
    // 跟踪添加到购物车事件
    document.querySelectorAll('.js-store-buttons-buy-btn').forEach((btn) => {
      btn.addEventListener('click', () => {
        const productName = btn.closest('.js-product')
          ?.querySelector('.js-product-name')?.textContent;

        // 发送到分析平台
        if (window.dataLayer) {
          window.dataLayer.push({
            event: 'add_to_cart',
            product_name: productName,
          });
        }
      });
    });
  });
</script>

SEO 与数据分析设置

<!-- 添加到设置 → 更多 → <head> 中的 HTML 代码 -->

<!-- Google Analytics 4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

<!-- Facebook Pixel -->
<script>
  !function(f,b,e,v,n,t,s){/* ... Facebook Pixel 代码 ... */}();
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
</script>

<!-- 自定义结构化数据 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "我的公司",
  "url": "https://mycompany.com",
  "logo": "https://mycompany.com/logo.png",
  "contactPoint": { "@type": "ContactPoint", "telephone": "+1-234-567-8900" }
}
</script>

示例

示例 1：构建一个营销落地页

用户提示： “为一个 SaaS 产品创建一个包含头图、功能特性、定价、常见问题解答和联系表单的落地页——工作人员应该能够更新文本和图片。”

智能体将使用 Tilda 区块设计页面，配置表单 Webhook，添加自定义 CSS 以保持品牌一致性，并设置数据分析跟踪。

示例 2：在 Tilda 中添加自定义交互元素

用户提示： “在我们的 Tilda 站点中添加一个价格计算器和交互式产品对比表。”

智能体将创建 Zero Block 布局，其中包含用于计算器和对比表的自定义 HTML/JS，并按 Tilda 主题进行样式化。

示例 3：将 Tilda 表单连接到 CRM

用户提示： “将每个表单提交发送到我们的 CRM，并通过 Telegram 通知销售团队。”

智能体将配置 Tilda Webhook，创建一个无服务器函数来接收提交，并将数据转发到 CRM 和 Telegram。

指南

• 区块用于结构，Zero Block 用于自定义 — 使用预建区块加快速度，使用 Zero Block 获得完全控制
• 自定义代码放在设置中 — CSS/元数据放在 <head>，JS 放在 </body> 之前
• 表单内置 Webhook — 将提交发送到任何 URL
• Tilda API 是只读的 — 可以导出内容，但无法通过 API 创建页面
• 每个页面的 SEO 设置 — 标题、描述、OG 标签在页面设置中
• 自定义域名 — 将 DNS 指向 Tilda，SSL 自动配置
• 电商内置 — 产品目录、购物车、结账、支付
• 默认响应式 — 区块自适配，但需测试并调整断点
• 工作人员可以编辑任何内容 — 通过可视化编辑器编辑文字、图片、区块、页面顺序
• 导出用于自托管 — API 返回完整的 HTML/CSS/JS，可用于自行部署
• 不要覆盖关键的 Tilda 类 — 用您的命名空间为自定义 CSS 添加前缀
• Google Tag Manager — 对于复杂的跟踪设置，使用 GTM 而不是内联脚本