博客组件样式指南

简介

本文展示了博客内容中所有可用的富文本组件。在撰写文章时可以参考本指南。

引用块

使用引用块来突出显示重要的引语或来源：

预测未来的最好方法就是创造未来。创新是区分领导者和追随者的关键。 彼得·德鲁克

带说明的图片

使用 figure 元素添加带描述性说明的图片：

提示词块

在样式化容器中显示 AI 提示词或代码片段：

高亮块

使用高亮块显示重要通知、警告、提示和成功消息：

功能对比

使用此组件比较不同的计划或产品：

统计网格

使用统计网格展示关键指标：

步骤列表

通过编号步骤引导用户完成流程：

1. 使用您的邮箱或社交账号在我们的网站上注册免费账户
2. 通过我们安全的 OAuth 集成连接您的社交媒体账号
3. 使用我们的 AI 驱动写作助手创建您的第一篇帖子
4. 安排您的内容发布，见证您的互动增长

醒目提示框

吸引注意力的重要公告：

键盘快捷键

使用样式化按键显示键盘组合：

高级用户常用快捷键：

• 保存草稿：Ctrl + S
• 发布帖子：Ctrl + Enter
• 新建帖子：Ctrl + N
• 搜索：Ctrl + K

有序列表

用于顺序项目的编号列表：

1. 首先，连接您的社交媒体账号
2. 然后，创建您的内容日历
3. 在最佳时间安排帖子发布
4. 监控互动和数据分析
5. 根据结果调整策略

表格

在表格中显示结构化数据：

功能	免费版	专业版	企业版
每日帖子数	5	无限	无限
数据分析	基础	高级	定制
技术支持	邮件	优先	专属

代码块

显示带语法高亮的代码片段：

// 示例：使用 API
const response = await fetch("/api/posts", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ content: "你好，世界！" })
});

const data = await response.json();
console.log(data);

视频嵌入

从 YouTube 或其他平台嵌入视频：

内联链接

普通链接会自动应用样式。查看我们的功能页面了解更多，或访问我们的定价页面找到最适合您的计划。

总结

这些组件可以帮助创建引人入胜、结构清晰的博客内容。混合搭配使用它们，创作既有信息量又具视觉吸引力的文章。