Automark 是一套面向营销自动化产品、代理服务与 SaaS 团队的 Astro 多页网站模板，采用 React 19 和 Tailwind CSS 4。页面围绕“介绍产品、展示案例、比较套餐、收集线索”组织，除了官网前台，还附有 GoHighLevel 联系人接口与 Stripe 订阅结账代码，适合准备继续开发获客与订阅流程的团队。
首页使用深色背景、紫色光晕与大字号标题，首屏的试用和预约演示按钮分别引向定价页与联系页，下方接入产品视频。这样的信息顺序适合需要解释产品价值、再引导访客咨询的软件服务；示例中的增长数字、推荐语和试用承诺仍需要按自己的业务替换。
内容与定价结构
源码包含功能、定价、集成展示、案例、博客、招聘、关于和联系等页面。本次静态构建生成 26 个 HTML，其中有 7 篇博客、2 个案例详情、4 个岗位详情，另有隐私政策、条款、元素示例与 404 页面。案例和博客可以用来解释服务如何落地，招聘内容则适合需要展示团队规模与岗位的企业，暂时不用的入口可以从导航中移除。
定价页的套餐金额、月付与年付数据集中在 src/content/pricing/-index.md，React 组件 src/layouts/components/PricingCheckout.tsx 负责打开姓名和邮箱弹窗，并读取套餐切换状态。集成页展示第三方工具和连接场景，这些图标与说明不代表所有工具都已经完成接入。
线索与支付接口
线索收集
src/pages/api/lead.ts 把姓名、邮箱等线索整理后提交到 GoHighLevel，依赖 GHL_API_KEY 与 GHL_LOCATION_ID。联系页使用 /api/contact，招聘申请表另有可配置的提交地址。正式使用前，需要配置自己的服务端环境变量、收件或工作流，并加入输入校验、频率限制与隐私告知；源码中存在接口，不等于已经建立了可运行的营销系统。
订阅结账
订阅流程由 /api/checkout 和 /api/webhooks/stripe 衔接：前者创建 Stripe 订阅结账会话，后者验证回调签名，在支付完成事件中尝试更新 GoHighLevel 联系人的标签。运行时还需要 Stripe 密钥、Webhook 签名密钥及相应平台配置。本次只检查代码并构建静态演示，没有执行真实付款、线索投递或账户开通。
收款前的价格校验
支付部分有一处需要先改：当前服务端直接使用浏览器传来的金额创建结账会话。 正式收款应改为由服务端根据套餐标识匹配可信价格或 Stripe Price ID，再校验计费周期。回调中的 CRM 自定义字段也需要替换成自己账号的字段定义，不能只填密钥就当成完整的收费流程。
品牌与内容配置
src/config/config.json：站点名称、Logo、导航按钮、联系信息与表单地址。src/config/theme.json：主题色、文字颜色和字体；当前以紫色为主，使用 Inter Tight 与 Urbanist。src/config/menu.json：主导航及页脚菜单。src/content/：按首页、功能、套餐、案例、博客、招聘和公共区块分别维护 Markdown 内容。src/layouts/Base.astro：公共页头、页脚、字体和元信息；通用区块集中在src/layouts/components/。
- 改站时可以先调整公共配置与菜单，再替换套餐、案例、文章和图片。
- 内容字段由
src/content.config.ts校验，新增文件要沿用对应集合的结构。 - 主题样式由
scripts/themeGenerator.js从配置生成，改颜色和字体后应重新执行开发或构建命令，避免只改了配置却仍使用旧样式。
构建与正式部署
包内项目版本为 1.0.1，依赖 Astro 7.0.3，并默认配置 Vercel 适配器。npm run dev 启动主题生成监听与开发服务，npm run build 先生成主题样式，再生成站点。此次 npm 安装遇到 Markdown 相关依赖的 peer 版本冲突，在临时副本采用 npm install --legacy-peer-deps 后完成静态构建；这属于构建记录，不代表接口业务已经验证。
- 如果只需要预览外观，可以移除演示副本的服务端 API 和适配器，生成静态文件，同时阻止表单与支付提交。
- 真正接入 CRM 和 Stripe 时，则需要支持这些接口的服务端运行环境，并重新处理密钥、回调域名、异常反馈与价格校验。
- 部署到子目录时，还要同步处理导航、图片、脚本和接口地址，不能仅修改一个站点地址。
Automark 适合需要持续维护案例、套餐和获客入口的营销产品官网。选用时，除了页面改造，也要把服务端校验、平台配置与业务测试计入开发工作。
暂无评论内容