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 官方网站。

目次の自動番号を無効にする例

Sat, 06 Jan 2024 16:00:00 GMT

この投稿では、目次の自動番号を無効にする方法を紹介します。

目次番号機能

デフォルトでは、astro-koharu は CSS カウンターを使って目次に階層的な番号を自動付与します：

1. 第一章
- 1.1. セクション 1
- 1.2. セクション 2
1. 第二章

番号を無効にする

特定の投稿で番号を無効にするには、tocNumbering: false を設定します：

---
title: 私の投稿
tocNumbering: false
---

比較

番号あり（デフォルト）

目次の項目に 1.、1.1.、1.1.1. のような番号が表示されます。

番号なし

目次の項目は見出しテキストのみで、番号プレフィックスはありません。

この投稿の効果

この投稿では tocNumbering: false が設定されています。サイドバーの目次（デスクトップ）を確認するか、目次を展開（モバイル）して結果をご覧ください。

技術的な実装

番号付けは純粋な CSS カウンターで実装されており、ランタイムオーバーヘッドはゼロです：

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

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

無効にするタイミング

以下のような場合に番号を無効にすることを検討してください：

エッセイ風の投稿
すでに番号がある見出し
構造がゆるい投稿
個人的な好み

まとめ

目次の番号付けはオプション機能です — コンテンツの種類に合わせて柔軟に使い分けましょう。

Hello World

Thu, 04 Jan 2024 16:00:00 GMT

こんにちは、世界！これは初めてのエッセイです。

この投稿について

この投稿では意図的に description フィールドを設定していません。以下の機能をテストするためです：

自動説明抽出 - システムが自動的に最初の 150 文字を説明として抽出します
AI 要約 - pnpm generate:summaries を実行済みの場合、AI が生成した要約が使用されます

エッセイカテゴリー

エッセイカテゴリーは以下のような投稿に最適です：

日常の振り返り
年末まとめ
ふとした考え
自己成長の記録

書くためのヒント

ブログを書くのは楽しい活動です。いくつかのヒントを紹介します：

継続すること

定期的な更新がブログを生き生きとさせます。短い記事でも、沈黙よりはるかに良いです。

素直であること

素直な記録は、磨き上げた文章よりも価値があります。すべての投稿で完璧を目指す必要はありません。

プロセスを楽しむこと

書くこと自体が考えを整理するプロセスです — それを楽しみましょう。

まとめ

これはシンプルなエッセイのサンプルです。あなたもここで自分の物語を記録してみてくださいね。

楽しいブログライフを！

月刊ダイジェスト Vol.1

Wed, 03 Jan 2024 16:00:00 GMT

これは月刊/シリーズ機能の動作を紹介するサンプルです。

月刊機能について

月刊機能は astro-koharu の特色ある機能のひとつで、定期的に更新される連載コンテンツの公開に最適です：

テックニュースレター
読書ノートシリーズ
学習ジャーナル
プロジェクトの進捗報告

月刊の設定

config/site.yaml で設定：

featuredSeries:
  categoryName: 月刊       # カテゴリー名
  label: 月刊ダイジェスト    # 表示ラベル
  fullName: テック月刊ダイジェスト
  description: 月刊の説明...
  cover: /img/weekly_header.webp
  enabled: true            # false で無効化

月刊の特徴

専用ページ - 各シリーズは /weekly に専用ページがあります
ホームページ表示 - 最新号がホームページにピン留めされます
分離されたリスト - 月刊投稿は通常の投稿リストには表示されません
シリーズナビゲーション - 前号/次号のナビゲーション

今月のコンテンツ

ツール紹介

ツール	用途	リンク
Biome	コードリンティング	biome.dev
Motion	アニメーション	motion.dev

今月の学び

今月学んだこと：

Astro Content Collections
Tailwind テーマ設定
Motion の高度なアニメーション

次号の予告

次号ではさらに高度な機能を取り上げます — お楽しみに！

今月のニュースレターをお読みいただきありがとうございました！

示例月刊 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。

astro-koharu へようこそ

Sun, 31 Dec 2023 16:00:00 GMT

astro-koharu ブログテーマへようこそ！

このテーマについて

astro-koharu は Astro 5.x をベースにしたモダンなブログシステムで、Hexo の Shoka テーマにインスピレーションを受けています。主な特徴：

高パフォーマンス - Astro による静的サイト生成で、超高速な読み込みを実現
エレガントなデザイン - アニメ風の美学とピンク＆ブルーの配色
豊富な機能 - マルチレベルカテゴリー、タグ、目次、検索など
レスポンシブ - デスクトップとモバイルに完璧に対応

クイックスタート

1. ブログを設定

config/site.yaml ファイルを編集：

site:
  title: あなたのブログ名
  author: あなたの名前
  description: ブログの説明
  # ...その他のオプション

2. 最初の投稿を書く

src/content/blog/ ディレクトリに Markdown ファイルを作成：

---
title: 初めての投稿
date: 2024-01-01
tags:
  - タグ1
categories:
  - カテゴリー名
---

投稿の内容...

3. デプロイ

Vercel で簡単にデプロイ：

さらに詳しく

Markdown 機能デモですべての Markdown 拡張機能をチェック
使い方ガイドで詳細な設定方法を確認

ブログをお楽しみください！