企业官网建设流程全解析

EmDash官方3大模板全清单:Blog、Marketing与Portfolio模板,快速搭建你的站点

【免费下载链接】emdashEmDash is a full-stack TypeScript CMS based on Astro; the spiritual successor to WordPress项目地址: https://gitcode.com/gh_mirrors/emdas/emdash

EmDash 是一个基于 Astro 的全栈 TypeScript CMS，被定位为 WordPress 的"精神续作"。它自带 3 大官方起步模板——Blog 博客模板、Marketing 营销落地页模板与Portfolio 作品集模板，每个模板都内置演示数据，复制即可运行，几分钟就能搭好一个带后台编辑能力的站点。

一图看懂:3 大模板各自适合谁

三大模板的完整说明见仓库内的 TEMPLATES.md。

模板怎么选?对号入座

• 写内容为主→ Blog 模板。编辑版式克制、留白规整,自带作者署名与阅读时长,内容就是产品。
• 卖产品/服务为主→ Marketing 模板。首页由 Hero、特性、评价、定价、FAQ 等模块化内容块组成,在后台就能增删、排序、编辑,无需碰代码。
• 展示作品为主→ Portfolio 模板。近单色编辑风设计,把视觉重心让给你的作品,支持按标签筛选案例。

Blog 模板:经典博客,开箱即用

Blog 模板(templates/blog/)内置精选文章 Hero、带阅读时长的文章网格、分类与标签归档、全文搜索(命中关键词会高亮)以及 RSS 订阅源,并预置了 SEO 元数据与深色/浅色模式。

文章详情采用三栏阅读视图:左侧元信息栏、正文、右侧目录与侧边栏组件,是典型的专业编辑版式。页面路由定义在 templates/blog/src/pages/ 下,包括posts、category、tag、search.astro与rss.xml.ts。

👉建议:个人写作、技术分享、独立 Newsletter,直接选它,不用改结构。

Marketing 模板:转化导向的落地页

Marketing 模板(templates/marketing/)是三大模板中视觉最"大胆"的:渐变强调色、醒目的标题字重,主打产品自信感。

它没有文章集合,全部内容都在pages集合中以营销内容块编辑,内置 5 种版本化区块:marketing_hero、marketing_features、marketing_testimonials、marketing_pricing、marketing_faq。编辑器可以拖拽排序、复制、修改,发布即生效。

定价页/pricing与首页复用同一套区块编辑器;联系页/contact则展示 CMS 撰写的 Hero 与直达邮箱的联系方式。

Portfolio 模板:让作品成为主角

Portfolio 模板(templates/portfolio/)专为创意工作设计:项目网格带悬停效果,作品页支持标签筛选(/work?tag=identity),每个项目拥有独立详情页,可挂画廊图集、客户与年份信息,并自动生成新作品的 RSS 源。

projects集合的字段包括封面图、客户、年份、摘要、Portable Text 正文与画廊(每行一张媒体库图片 + 可选图注),在 templates/portfolio/AGENTS.md 中有完整字段清单。

3 分钟上手:从模板到可编辑站点

每个模板都有两种运行变体,按需选择:

• Node.js 版(templates/blog、templates/marketing、templates/portfolio)——使用 SQLite + 本地文件存储,本地开发和 VPS 部署最省事;
• Cloudflare 版(templates/blog-cloudflare等)——使用 D1 + R2,直接部署为 Serverless 站点。

本地 Node.js 版的最快启动步骤:

# 1. 复制你想要的模板 cp -r templates/blog my-site && cd my-site # 2. 安装依赖 pnpm install # 3. 初始化数据库并导入演示内容 pnpm bootstrap # 4. 启动开发服务器 pnpm dev

打开 http://localhost:4321 即可看到站点,后台管理界面在 http://localhost:4321/_emdash/admin。演示内容来自各模板的seed/seed.json(如 templates/blog/seed/seed.json),里面同时定义了内容集合、字段、分类标签与菜单,也是你学习自定义 Schema 的最佳范例。

💡 除了手动复制,也可以用官方脚手架npm create emdash@latest,交互式选择 blog / marketing / portfolio 及运行环境,模板清单定义在 packages/create-emdash/src/index.ts 中。

深色模式与多页面预览

三大模板都完整支持深色/浅色双模式,仓库中还保存了全部页面的高倍截图,便于你在动手前确认每个页面的最终观感:

所有截图的页面清单(桌面 1440x900 / 移动 390x844,明暗双模式)维护在 templates/screenshots.json,截图脚本会逐页自动抓取并更新到assets/templates/{模板}/latest/目录。

常见问题 FAQ

Q1:模板可以二次修改吗?可以。模板就是标准的 Astro 项目,页面在src/pages/、组件在src/components/、布局在src/layouts/,数据模型在seed/seed.json中,改起来都很直观。

Q2:不用 Node,能直接部署到 Cloudflare 吗?能。选-cloudflare变体即可,它使用 D1 数据库与 R2 存储,配置见各模板的wrangler.jsonc(如 templates/blog-cloudflare/)。

Q3:想加新模板或自定义内容结构怎么办?在seed/seed.json里新增集合与字段即可,emdash-env.d.ts会在开发服务器启动时自动生成类型;新模板的完整添加步骤见 TEMPLATES.md 的 "Adding a New Template" 一节。

Q4:后台在哪里写内容?启动后访问<你的域名>/_emdash/admin,登录即可管理文章、页面、媒体与菜单——这正是 EmDash 作为 CMS 的核心体验,与 WordPress 的后台心智模型一脉相承。

总结:选对模板,站点半小时上线

三大模板共享同一套 EmDash 核心——结构化 Portable Text 内容、沙箱插件、类型安全——所以日后想换模板或加深定制,成本都很低。从 README.md 与 TEMPLATES.md 出发,选一个模板,今天就能把第一个站点跑起来。

【免费下载链接】emdashEmDash is a full-stack TypeScript CMS based on Astro; the spiritual successor to WordPress项目地址: https://gitcode.com/gh_mirrors/emdas/emdash