moのblog

Infographic 信息图指南

Sat, 03 Jan 2026 04:00:00 GMT

本文将详细介绍如何在 Markdown 中使用 @antv/infographic 创建各种精美的信息图表。

什么是 Infographic

Infographic（信息图）是一种将数据、信息和知识以视觉化方式呈现的图表形式。相比传统的文字描述，信息图能够更直观、更有吸引力地传达信息。

在本博客中，你可以直接在 Markdown 代码块中使用 infographic 标记来创建各种类型的信息图，支持：

列表展示
流程说明
数据对比
层级结构
统计图表
象限分析
关系展示

基本语法

在代码块中使用 infographic 标记，第一行指定模板名称，然后使用类似 YAML 的语法定义数据：

```infographic
infographic <template-name>
data
  title 标题
  desc 描述
  items
    - label 条目名称
      desc 条目描述
      icon mdi/icon-name
```

列表类模板 (list-*)

适合展示信息列表、特性清单、技术栈等。

网格卡片布局

使用 list-grid-badge-card 模板展示卡片式列表：

infographic list-grid-badge-card
data
  title 前端技术栈
  desc 现代化前端开发常用技术
  items
    - label TypeScript
      desc 类型安全的 JavaScript 超集
      icon mdi/language-typescript
    - label React
      desc 用于构建用户界面的 JavaScript 库
      icon mdi/react
    - label Astro
      desc 现代化静态站点生成器
      icon mdi/rocket-launch
    - label Tailwind CSS
      desc 实用优先的 CSS 框架
      icon mdi/tailwind
    - label Vite
      desc 下一代前端构建工具
      icon mdi/lightning-bolt
    - label Biome
      desc 一体化的 Web 工具链
      icon mdi/cog

糖果风格卡片

使用 list-grid-candy-card-lite 创建更有趣的卡片样式：

infographic list-grid-candy-card-lite
data
  title 博客特色功能
  items
    - label 深色模式
      desc 优雅的主题切换
      icon mdi/theme-light-dark
    - label 全站搜索
      desc 基于 Pagefind 的无后端搜索
      icon mdi/magnify
    - label Markdown 增强
      desc 支持 GFM、Mermaid、Infographic
      icon mdi/markdown
    - label 智能推荐
      desc 基于语义相似度的文章推荐
      icon mdi/brain

水平箭头列表

使用 list-row-horizontal-icon-arrow 展示线性列表：

infographic list-row-horizontal-icon-arrow
data
  title 开发流程
  items
    - label 需求分析
      icon mdi/clipboard-text
    - label 设计方案
      icon mdi/palette
    - label 编码实现
      icon mdi/code-tags
    - label 测试部署
      icon mdi/rocket-launch

流程/顺序类模板 (sequence-*)

适合展示步骤、流程、时间线等有顺序关系的信息。

之字形步骤

使用 sequence-zigzag-steps-underline-text 展示流程步骤：

infographic sequence-zigzag-steps-underline-text
data
  title 博客搭建流程
  items
    - label 选择框架
      desc 选择 Astro 作为静态站点生成器
    - label 设计主题
      desc 参考 Shoka 主题进行设计
    - label 开发功能
      desc 实现文章系统、搜索、评论等功能
    - label 部署上线
      desc 使用 Vercel 进行自动化部署

圆形流程

使用 sequence-circular-simple 展示循环流程：

infographic sequence-circular-simple
data
  title PDCA 循环
  items
    - label Plan
      desc 制定计划
    - label Do
      desc 执行实施
    - label Check
      desc 检查验证
    - label Act
      desc 改进优化

垂直路线图

使用 sequence-roadmap-vertical-simple 展示时间线或路线图：

infographic sequence-roadmap-vertical-simple
data
  title 项目里程碑
  items
    - label 2024 Q1
      desc 项目启动，完成基础架构
    - label 2024 Q2
      desc 实现核心功能，开始内容迁移
    - label 2024 Q3
      desc 优化性能，添加高级功能
    - label 2024 Q4
      desc 正式发布，持续优化

金字塔结构

使用 sequence-pyramid-simple 展示层级递进关系：

infographic sequence-pyramid-simple
data
  title 马斯洛需求层次
  items
    - label 自我实现
    - label 尊重需求
    - label 社交需求
    - label 安全需求
    - label 生理需求
theme
  palette
    - #8b5cf6
    - #3b82f6
    - #06b6d4
    - #10b981
    - #f59e0b

对比类模板 (compare-*)

适合展示二元对比、优缺点分析等。

水平二元对比

使用 compare-binary-horizontal-simple-fold 进行对比：

infographic compare-binary-horizontal-simple-fold
data
  title SSR vs SSG
  items
    - label 服务端渲染 (SSR)
      children
        - label 实时生成
          desc 每次请求时渲染页面
        - label 动态内容
          desc 适合频繁更新的内容
        - label 服务器负载
          desc 需要服务器资源
    - label 静态生成 (SSG)
      children
        - label 构建时生成
          desc 提前生成所有页面
        - label 静态内容
          desc 适合内容相对稳定的场景
        - label CDN 友好
          desc 可以部署到 CDN 边缘节点

SWOT 分析

使用 compare-swot 进行 SWOT 分析：

infographic compare-swot
data
  title 技术博客 SWOT 分析
  items
    - label 优势 (Strengths)
      children
        - label 技术积累
        - label 个人品牌
        - label 知识沉淀
    - label 劣势 (Weaknesses)
      children
        - label 时间投入
        - label 持续更新压力
        - label 初期流量低
    - label 机会 (Opportunities)
      children
        - label 技术社区活跃
        - label 开源生态发展
        - label 个人成长空间
    - label 威胁 (Threats)
      children
        - label 内容同质化
        - label 平台竞争
        - label 技术快速迭代

层级类模板 (hierarchy-*)

适合展示组织结构、分类体系等树形关系。

系统分层结构

使用 hierarchy-structure 展示多层架构，非常适合展示系统架构、模块分层：

infographic hierarchy-structure
data
  title 系统分层结构
  desc 展示不同层级的模块与功能分组
  items
    - label 展现层
      children
        - label 小程序
        - label APP
        - label PAD
        - label 客户端
        - label WEB
    - label 应用层
      children
        - label 核心模块
          children
            - label 功能1
            - label 功能2
            - label 功能3
            - label 功能4
            - label 功能5
            - label 功能6
        - label 基础模块
          children
            - label 功能1
            - label 功能2
            - label 功能3
            - label 功能4
            - label 功能5
            - label 功能6
        - label 其他模块
          children
            - label 功能1
            - label 功能2
            - label 功能3
            - label 功能4
            - label 功能5
            - label 功能6
    - label 平台层
      children
        - label 模块1
          children
            - label 功能1
            - label 功能2
            - label 功能3
            - label 功能4
        - label 模块2
          children
            - label 功能1
            - label 功能2
            - label 功能3
            - label 功能4
        - label 模块3
          children
            - label 功能1
            - label 功能2
            - label 功能3
            - label 功能4

科技风格树形图

使用 hierarchy-tree-tech-style-capsule-item 展示层级结构：

infographic hierarchy-tree-tech-style-capsule-item
data
  title 前端技术体系
  items
    - label 前端开发
      children
        - label 基础技术
          children
            - label HTML
            - label CSS
            - label JavaScript
        - label 框架/库
          children
            - label React
            - label Vue
            - label Astro
        - label 工程化
          children
            - label Vite
            - label Webpack
            - label Rollup

圆角矩形树形图

使用 hierarchy-tree-curved-line-rounded-rect-node 展示层级：

infographic hierarchy-tree-curved-line-rounded-rect-node
data
  title 博客内容分类
  items
    - label 技术文章
      children
        - label 前端
          children
            - label React
            - label TypeScript
        - label 后端
          children
            - label Node.js
            - label 数据库
    - label 生活随笔
      children
        - label 年度总结
        - label 读书笔记

图表类模板 (chart-*)

适合展示统计数据、数值对比等。

柱状图

使用 chart-column-simple 展示数据对比：

infographic chart-column-simple
data
  title 月度文章发布统计
  items
    - label 1月
      value 5
    - label 2月
      value 8
    - label 3月
      value 12
    - label 4月
      value 6
    - label 5月
      value 10
    - label 6月
      value 15

条形图

使用 chart-bar-plain-text 展示横向对比：

infographic chart-bar-plain-text
data
  title 编程语言使用占比
  items
    - label TypeScript
      value 45
    - label JavaScript
      value 25
    - label Python
      value 15
    - label Go
      value 10
    - label Others
      value 5

饼图

使用 chart-pie-plain-text 展示占比分布：

infographic chart-pie-plain-text
data
  title 访问来源分布
  items
    - label 搜索引擎
      value 45
    - label 社交媒体
      value 30
    - label 直接访问
      value 15
    - label 外部链接
      value 10

环形图

使用 chart-pie-donut-pill-badge 创建环形图：

infographic chart-pie-donut-pill-badge
data
  title 技术栈占比
  items
    - label 前端
      value 50
    - label 后端
      value 30
    - label DevOps
      value 20

折线图

使用 chart-line-plain-text 展示趋势：

infographic chart-line-plain-text
data
  title 博客访问量趋势
  items
    - label 第1周
      value 100
    - label 第2周
      value 150
    - label 第3周
      value 200
    - label 第4周
      value 280
    - label 第5周
      value 350
    - label 第6周
      value 420

象限分析 (quadrant-*)

适合展示四象限分析、优先级矩阵等。

简单卡片象限

使用 quadrant-quarter-simple-card 进行象限分析：

infographic quadrant-quarter-simple-card
data
  title 四象限分析
  items
    - label 重要且紧急
      desc 直接规避风险
      illus notify
    - label 重要不紧急
      desc 采取风险控制措施
      illus coffee
    - label 不重要但紧急
      desc 通过保险转移风险
      illus diary
    - label 不重要不紧急
      desc 选择接受风险
      illus invest

关系图 (relation-*)

适合展示元素间的关联关系。

圆形图标关系

使用 relation-circle-icon-badge 展示关系网络：

infographic relation-circle-circular-progress
data
  title 子公司盈利分析
  desc 各子公司财务表现，盈利同比增长
  items
    - label 云计算子公司
      value 25
      desc 年度净利润率达25%，成为集团核心增长引擎
      icon mingcute/cardano-ada-fill
    - label 人工智能子公司
      value 40
      desc AI业务快速扩张，盈利同比增长40%
      icon mingcute/openai-fill
    - label 物联网子公司
      value 1000
      desc IoT设备出货量突破千万，盈利稳步提升
      icon mingcute/medium-fill
    - label 金融科技子公司
      value 18
      desc 数字支付业务增长迅猛，净利润率18%
      icon mingcute/paypal-fill
    - label 新能源子公司
      value 50
      desc 绿色能源项目实现规模化盈利，增长潜力巨大
      icon mingcute/drone-fill

主题定制

可以通过 theme 块自定义颜色方案：

infographic list-grid-badge-card
data
  title 自定义配色示例
  items
    - label 主色调
      desc 品牌主色
    - label 辅助色
      desc 强调色彩
    - label 中性色
      desc 背景文字
theme
  palette
    - #3b82f6
    - #8b5cf6
    - #f97316
    - #06b6d4
    - #10b981

实用技巧

1. 选择合适的模板

根据要展示的信息类型选择对应的模板：

列表信息 → list-*
流程步骤 → sequence-*
数据对比 → compare-* 或 chart-*
层级关系 → hierarchy-*
优先级分析 → quadrant-*
关联关系 → relation-*

2. 合理使用图标

使用 Material Design Icons 让信息图更生动：

icon mdi/rocket-launch
icon mdi/heart
icon mdi/lightbulb
icon mdi/chart-line

3. 控制信息密度

每个信息图不要包含过多条目（建议 3-8 个）
使用简洁的标签和描述
复杂信息可以拆分成多个信息图

4. 注意主题适配

信息图会自动跟随博客的深色/浅色主题切换，无需额外配置。

总结

Infographic 为 Markdown 文档提供了强大的可视化能力，能够让技术博客、文档、笔记更加生动易读。合理使用各种模板，可以显著提升内容的表现力和可读性。

更多模板和详细文档，请访问 Infographic 官方网站。

Disabling TOC Numbering Example

Sat, 06 Jan 2024 16:00:00 GMT

This post demonstrates how to disable automatic TOC numbering.

TOC Numbering Feature

By default, astro-koharu uses CSS counters to automatically add hierarchical numbering to the table of contents:

1. Chapter One
- 1.1. Section One
- 1.2. Section Two
1. Chapter Two

Disabling Numbering

Set tocNumbering: false to disable numbering for a specific post:

---
title: My Post
tocNumbering: false
---

Comparison

With Numbering (Default)

TOC items display numbers like 1., 1.1., 1.1.1.

Without Numbering

TOC items show only heading text, no number prefix.

This Post's Effect

This post has tocNumbering: false set. Check the sidebar TOC (desktop) or expand the TOC (mobile) to see the result.

Technical Implementation

Numbering is implemented with pure CSS counters — zero runtime overhead:

.toc-numbering {
  counter-reset: h2;
}

.toc-numbering h2::before {
  counter-increment: h2;
  content: counter(h2) ". ";
}

When to Disable

Consider disabling numbering for:

Essay-style posts
Headings that already have numbers
Posts with loose structure
Personal preference

Summary

TOC numbering is an optional feature — use it flexibly based on the type of content.

Hello World

Thu, 04 Jan 2024 16:00:00 GMT

Hello, World! This is my first essay.

About This Post

This post intentionally does not set a description field, to test the following features:

Auto Description Extraction - The system automatically extracts the first 150 characters as the description
AI Summary - If pnpm generate:summaries has been run, an AI-generated summary will be used

The Essay Category

The essay category is great for:

Life reflections
Year-end reviews
Random thoughts
Personal growth

Writing Tips

Blogging is a fun activity. Here are some tips:

Stay Consistent

Regular updates keep your blog alive. Even short entries are better than long silences.

Be Authentic

Authentic records are more valuable than polished writing. Don't aim for perfection in every post.

Enjoy the Process

Writing itself is a process of thinking and organizing — enjoy it.

Conclusion

This is a simple essay example. Hope you'll record your own stories here too.

Happy writing!

Example Monthly Vol.1

Wed, 03 Jan 2024 16:00:00 GMT

This is an example monthly issue, demonstrating how the monthly/series feature works.

About the Monthly Feature

The monthly feature is one of astro-koharu’s signature capabilities, ideal for publishing regularly updated serial content such as:

Tech newsletters
Reading notes series
Learning journals
Project progress updates

Monthly Configuration

Configure in config/site.yaml:

featuredSeries:
  categoryName: 月刊       # Category name
  label: My Monthly         # Display label
  fullName: My Tech Monthly
  description: Monthly description...
  cover: /img/weekly_header.webp
  enabled: true            # Set false to disable

Monthly Features

Dedicated Page - Each series has its own page at /weekly
Homepage Display - The latest issue is pinned on the homepage
Separate Listing - Monthly posts don’t appear in the regular post list
Series Navigation - Previous/next navigation between issues

This Month’s Content

Tool Recommendations

Tool	Purpose	Link
Biome	Code linting	biome.dev
Motion	Animation lib	motion.dev

Monthly Learning

What I learned this month:

Astro Content Collections
Tailwind Theme Configuration
Advanced Motion Animations

Next Issue Preview

The next issue will cover more advanced features — stay tuned!

Thanks for reading this month’s newsletter!

示例月刊 Vol.1

Wed, 03 Jan 2024 16:00:00 GMT

这是一期示例月刊，展示月刊/系列文章功能的使用方式。

关于月刊功能

月刊是 astro-koharu 的特色功能之一，适合发布定期更新的系列内容，如：

技术月刊
读书笔记系列
学习记录
项目进度更新

月刊配置

在 config/site.yaml 中配置：

featuredSeries:
  categoryName: 月刊       # 分类名称
  label: 我的月刊          # 显示标签
  fullName: 我的技术月刊
  description: 月刊描述...
  cover: /img/monthly_header.webp
  enabled: true            # 设为 false 可关闭

月刊特点

专属页面 - 月刊有独立的 /weekly 页面
首页展示 - 最新一期会在首页置顶展示
独立列表 - 月刊不会出现在普通文章列表中
系列导航 - 月刊之间有上下篇导航

本期内容示例

工具推荐

工具	用途	链接
Biome	代码检查	biome.dev
Motion	动画库	motion.dev

本月学习

这个月学习了以下内容：

Astro 内容集合
Tailwind 主题配置
Motion 动画进阶

下期预告

下期将介绍更多进阶功能，敬请期待！

感谢阅读本期月刊！

主题定制指南

Tue, 02 Jan 2024 16:00:00 GMT

本文介绍如何定制 astro-koharu 的外观和样式。

嵌套分类说明

本文使用了嵌套分类 [笔记, 前端]，这会创建层级关系：

URL: /categories/note/front-end
面包屑: 笔记 → 前端

在 frontmatter 中这样配置：

categories:
  - [笔记, 前端]

配色定制

CSS 变量

主题颜色通过 CSS 变量定义，位于 src/styles/index.css：

:root {
  --primary-color: #ff6b9d;
  --secondary-color: #7dd3fc;
  /* ...更多变量 */
}

.dark {
  --primary-color: #f472b6;
  --secondary-color: #38bdf8;
}

Tailwind 配置

编辑 tailwind.config.ts 自定义主题：

export default {
  theme: {
    extend: {
      colors: {
        primary: 'var(--primary-color)',
        secondary: 'var(--secondary-color)',
      },
    },
  },
};

布局调整

内容宽度

在 src/constants/layout.ts 中调整布局常量：

export const LAYOUT = {
  maxWidth: '1200px',
  sidebarWidth: '300px',
  contentPadding: '1.5rem',
};

响应式断点

主题使用 Tailwind 的默认断点：

断点	宽度	用途
sm	640px	小型手机
md	768px	平板
lg	1024px	桌面
xl	1280px	大屏幕

动画效果

Motion 配置

动画使用 Motion 库，配置位于 src/constants/anim/：

// spring.ts - 弹簧动画
export const springConfig = {
  stiffness: 100,
  damping: 10,
};

// variants.ts - 动画变体
export const fadeIn = {
  hidden: { opacity: 0 },
  visible: { opacity: 1 },
};

禁用动画

对于偏好减少动画的用户，主题会自动响应 prefers-reduced-motion 媒体查询。

圣诞特效

主题内置可选的圣诞特效，在 site-config.ts 中配置：

export const christmasConfig = {
  enabled: false,  // 设为 true 启用
  features: {
    snowfall: true,        // 雪花飘落
    christmasColorScheme: true,  // 圣诞配色
    christmasHat: true,    // 圣诞帽
  },
};

总结

通过修改以上配置，你可以轻松打造属于自己风格的博客。如有问题，欢迎在 GitHub 提 Issue。

Welcome to astro-koharu

Sun, 31 Dec 2023 16:00:00 GMT

Welcome to the astro-koharu blog theme!

About This Theme

astro-koharu is a modern blog system built on Astro 5.x, inspired by the Hexo Shoka theme. Key features include:

High Performance - Static site generation with Astro, lightning-fast loading
Elegant Design - Anime-inspired aesthetic with pink and blue color scheme
Feature Rich - Multi-level categories, tags, table of contents, search, and more
Responsive - Perfect adaptation for desktop and mobile devices

Quick Start

1. Configure Your Blog

Edit the config/site.yaml file:

site:
  title: Your Blog Name
  author: Your Name
  description: Your blog description
  # ...more options

2. Write Your First Post

Create a Markdown file in the src/content/blog/ directory:

---
title: My First Post
date: 2024-01-01
tags:
  - Tag1
categories:
  - CategoryName
---

Post content...

3. Deploy

Deploy easily with Vercel:

Learn More

Check out the Markdown Features Demo for all Markdown enhancements
Check out the Usage Guide for detailed configuration

Enjoy blogging!