diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
index 88626eb837..3047267caa 100644
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@@ -12,8 +12,8 @@ const DOMAIN_NAME = 'xugaoyi.com' // 域名 (不带https)
 const WEB_SITE = `https://${DOMAIN_NAME}` // 网址
 
 export default defineConfig4CustomTheme<VdoingThemeConfig>({
-  theme: 'vdoing', // 使用npm主题包
-  // theme: resolve(__dirname, '../../vdoing'), // 使用本地主题包
+  // theme: 'vdoing', // 使用npm主题包
+  theme: resolve(__dirname, '../../vdoing'), // 使用本地主题包
 
   locales: {
     '/': {
@@ -114,6 +114,7 @@ export default defineConfig4CustomTheme<VdoingThemeConfig>({
           { text: '分类', link: '/categories/' },
           { text: '标签', link: '/tags/' },
           { text: '归档', link: '/archives/' },
+          { text: '统计', link: '/statistics/' },
         ],
       },
     ],
diff --git a/docs/.vuepress/public/data/statistics.json b/docs/.vuepress/public/data/statistics.json
new file mode 100644
index 0000000000..25f35e163f
--- /dev/null
+++ b/docs/.vuepress/public/data/statistics.json
@@ -0,0 +1,457 @@
+{
+  "dailyVisits": [
+    {
+      "date": "2026-04-20",
+      "count": 1256
+    },
+    {
+      "date": "2026-04-19",
+      "count": 1892
+    },
+    {
+      "date": "2026-04-18",
+      "count": 2134
+    },
+    {
+      "date": "2026-04-17",
+      "count": 1567
+    },
+    {
+      "date": "2026-04-16",
+      "count": 2045
+    },
+    {
+      "date": "2026-04-15",
+      "count": 1789
+    },
+    {
+      "date": "2026-04-14",
+      "count": 2345
+    },
+    {
+      "date": "2026-04-13",
+      "count": 1987
+    },
+    {
+      "date": "2026-04-12",
+      "count": 1654
+    },
+    {
+      "date": "2026-04-11",
+      "count": 2234
+    },
+    {
+      "date": "2026-04-10",
+      "count": 1876
+    },
+    {
+      "date": "2026-04-09",
+      "count": 1543
+    },
+    {
+      "date": "2026-04-08",
+      "count": 2198
+    },
+    {
+      "date": "2026-04-07",
+      "count": 1765
+    },
+    {
+      "date": "2026-04-06",
+      "count": 2087
+    },
+    {
+      "date": "2026-04-05",
+      "count": 1432
+    },
+    {
+      "date": "2026-04-04",
+      "count": 1987
+    },
+    {
+      "date": "2026-04-03",
+      "count": 2321
+    },
+    {
+      "date": "2026-04-02",
+      "count": 1876
+    },
+    {
+      "date": "2026-04-01",
+      "count": 1543
+    },
+    {
+      "date": "2026-03-31",
+      "count": 2198
+    },
+    {
+      "date": "2026-03-30",
+      "count": 1765
+    },
+    {
+      "date": "2026-03-29",
+      "count": 2087
+    },
+    {
+      "date": "2026-03-28",
+      "count": 1432
+    },
+    {
+      "date": "2026-03-27",
+      "count": 1987
+    },
+    {
+      "date": "2026-03-26",
+      "count": 2321
+    },
+    {
+      "date": "2026-03-25",
+      "count": 1876
+    },
+    {
+      "date": "2026-03-24",
+      "count": 1543
+    },
+    {
+      "date": "2026-03-23",
+      "count": 2198
+    },
+    {
+      "date": "2026-03-22",
+      "count": 1765
+    },
+    {
+      "date": "2026-03-21",
+      "count": 2087
+    },
+    {
+      "date": "2026-03-20",
+      "count": 1432
+    },
+    {
+      "date": "2026-03-19",
+      "count": 1987
+    },
+    {
+      "date": "2026-03-18",
+      "count": 2321
+    },
+    {
+      "date": "2026-03-17",
+      "count": 1876
+    },
+    {
+      "date": "2026-03-16",
+      "count": 1543
+    },
+    {
+      "date": "2026-03-15",
+      "count": 2198
+    },
+    {
+      "date": "2026-03-14",
+      "count": 1765
+    },
+    {
+      "date": "2026-03-13",
+      "count": 2087
+    },
+    {
+      "date": "2026-03-12",
+      "count": 1432
+    },
+    {
+      "date": "2026-03-11",
+      "count": 1987
+    },
+    {
+      "date": "2026-03-10",
+      "count": 2321
+    },
+    {
+      "date": "2026-03-09",
+      "count": 1876
+    },
+    {
+      "date": "2026-03-08",
+      "count": 1543
+    },
+    {
+      "date": "2026-03-07",
+      "count": 2198
+    },
+    {
+      "date": "2026-03-06",
+      "count": 1765
+    },
+    {
+      "date": "2026-03-05",
+      "count": 2087
+    },
+    {
+      "date": "2026-03-04",
+      "count": 1432
+    },
+    {
+      "date": "2026-03-03",
+      "count": 1987
+    },
+    {
+      "date": "2026-03-02",
+      "count": 2321
+    },
+    {
+      "date": "2026-03-01",
+      "count": 1876
+    },
+    {
+      "date": "2026-02-28",
+      "count": 1543
+    },
+    {
+      "date": "2026-02-27",
+      "count": 2198
+    },
+    {
+      "date": "2026-02-26",
+      "count": 1765
+    },
+    {
+      "date": "2026-02-25",
+      "count": 2087
+    },
+    {
+      "date": "2026-02-24",
+      "count": 1432
+    },
+    {
+      "date": "2026-02-23",
+      "count": 1987
+    },
+    {
+      "date": "2026-02-22",
+      "count": 2321
+    },
+    {
+      "date": "2026-02-21",
+      "count": 1876
+    },
+    {
+      "date": "2026-02-20",
+      "count": 1543
+    },
+    {
+      "date": "2026-02-19",
+      "count": 2198
+    },
+    {
+      "date": "2026-02-18",
+      "count": 1765
+    },
+    {
+      "date": "2026-02-17",
+      "count": 2087
+    },
+    {
+      "date": "2026-02-16",
+      "count": 1432
+    },
+    {
+      "date": "2026-02-15",
+      "count": 1987
+    },
+    {
+      "date": "2026-02-14",
+      "count": 2321
+    },
+    {
+      "date": "2026-02-13",
+      "count": 1876
+    },
+    {
+      "date": "2026-02-12",
+      "count": 1543
+    },
+    {
+      "date": "2026-02-11",
+      "count": 2198
+    },
+    {
+      "date": "2026-02-10",
+      "count": 1765
+    },
+    {
+      "date": "2026-02-09",
+      "count": 2087
+    },
+    {
+      "date": "2026-02-08",
+      "count": 1432
+    },
+    {
+      "date": "2026-02-07",
+      "count": 1987
+    },
+    {
+      "date": "2026-02-06",
+      "count": 2321
+    },
+    {
+      "date": "2026-02-05",
+      "count": 1876
+    },
+    {
+      "date": "2026-02-04",
+      "count": 1543
+    },
+    {
+      "date": "2026-02-03",
+      "count": 2198
+    },
+    {
+      "date": "2026-02-02",
+      "count": 1765
+    },
+    {
+      "date": "2026-02-01",
+      "count": 2087
+    },
+    {
+      "date": "2026-01-31",
+      "count": 1432
+    },
+    {
+      "date": "2026-01-30",
+      "count": 1987
+    },
+    {
+      "date": "2026-01-29",
+      "count": 2321
+    },
+    {
+      "date": "2026-01-28",
+      "count": 1876
+    },
+    {
+      "date": "2026-01-27",
+      "count": 1543
+    },
+    {
+      "date": "2026-01-26",
+      "count": 2198
+    },
+    {
+      "date": "2026-01-25",
+      "count": 1765
+    },
+    {
+      "date": "2026-01-24",
+      "count": 2087
+    },
+    {
+      "date": "2026-01-23",
+      "count": 1432
+    },
+    {
+      "date": "2026-01-22",
+      "count": 1987
+    },
+    {
+      "date": "2026-01-21",
+      "count": 2321
+    },
+    {
+      "date": "2026-01-20",
+      "count": 1876
+    },
+    {
+      "date": "2026-01-19",
+      "count": 1543
+    },
+    {
+      "date": "2026-01-18",
+      "count": 2198
+    },
+    {
+      "date": "2026-01-17",
+      "count": 1765
+    },
+    {
+      "date": "2026-01-16",
+      "count": 2087
+    },
+    {
+      "date": "2026-01-15",
+      "count": 1432
+    },
+    {
+      "date": "2026-01-14",
+      "count": 1987
+    },
+    {
+      "date": "2026-01-13",
+      "count": 2321
+    },
+    {
+      "date": "2026-01-12",
+      "count": 1876
+    },
+    {
+      "date": "2026-01-11",
+      "count": 1543
+    },
+    {
+      "date": "2026-01-10",
+      "count": 2198
+    },
+    {
+      "date": "2026-01-09",
+      "count": 1765
+    },
+    {
+      "date": "2026-01-08",
+      "count": 2087
+    },
+    {
+      "date": "2026-01-07",
+      "count": 1432
+    }
+  ],
+  "popularArticles": [
+    {
+      "title": "33个非常实用的JavaScript一行代码",
+      "path": "/pages/8143cc480faf9a11/",
+      "views": 56890
+    },
+    {
+      "title": "《ES6 教程》笔记",
+      "path": "/note/es6/",
+      "views": 45230
+    },
+    {
+      "title": "CSS3之transition过渡",
+      "path": "/pages/0a83b083bdf257cb/",
+      "views": 38760
+    },
+    {
+      "title": "《Vue》笔记",
+      "path": "/note/vue/",
+      "views": 32450
+    },
+    {
+      "title": "Git分支-新建与合并",
+      "path": "/note/git/",
+      "views": 28970
+    }
+  ],
+  "trafficSources": {
+    "direct": 35,
+    "searchEngine": 45,
+    "externalLink": 20
+  },
+  "summary": {
+    "totalViews": 125680,
+    "totalArticles": 86,
+    "todayVisits": 1256
+  }
+}
diff --git a/docs/@pages/statisticsPage.md b/docs/@pages/statisticsPage.md
new file mode 100644
index 0000000000..1fc7b14891
--- /dev/null
+++ b/docs/@pages/statisticsPage.md
@@ -0,0 +1,7 @@
+---
+statisticsPage: true
+title: 统计
+permalink: /statistics/
+article: false
+sidebar: false
+---
diff --git a/package.json b/package.json
index 1c88b1aff0..0db05fbb6b 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "chart.js": "^2.9.4",
     "dayjs": "^1.9.7",
     "inquirer": "^7.1.0",
     "json2yaml": "^1.1.0",
diff --git a/vdoing/components/StatisticsPage.vue b/vdoing/components/StatisticsPage.vue
new file mode 100644
index 0000000000..da03a01b37
--- /dev/null
+++ b/vdoing/components/StatisticsPage.vue
@@ -0,0 +1,549 @@
+<template>
+  <div class="custom-page statistics-page">
+    <div class="theme-vdoing-wrapper">
+      <h1>
+        <img
+          :src="currentBadge"
+          v-if="$themeConfig.titleBadge === false ? false : true"
+        />
+        {{ $page.title }}
+      </h1>
+
+      <div class="time-range-selector">
+        <span class="label">时间范围：</span>
+        <button
+          v-for="range in timeRanges"
+          :key="range.value"
+          :class="{ active: selectedRange === range.value }"
+          @click="selectRange(range.value)"
+        >
+          {{ range.label }}
+        </button>
+      </div>
+
+      <div class="summary-cards">
+        <div class="summary-card">
+          <div class="card-icon">👁️</div>
+          <div class="card-content">
+            <div class="card-value">{{ formattedSummary.totalViews }}</div>
+            <div class="card-label">总访问量</div>
+          </div>
+        </div>
+        <div class="summary-card">
+          <div class="card-icon">📄</div>
+          <div class="card-content">
+            <div class="card-value">{{ summary.totalArticles }}</div>
+            <div class="card-label">文章总数</div>
+          </div>
+        </div>
+        <div class="summary-card">
+          <div class="card-icon">📈</div>
+          <div class="card-content">
+            <div class="card-value">{{ summary.todayVisits }}</div>
+            <div class="card-label">今日访问</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="charts-container">
+        <div class="chart-section">
+          <h2>每日访问量趋势</h2>
+          <div class="chart-wrapper">
+            <canvas ref="visitsChart"></canvas>
+          </div>
+        </div>
+
+        <div class="chart-row">
+          <div class="chart-section half">
+            <h2>热门文章 TOP5</h2>
+            <div class="popular-articles">
+              <div
+                v-for="(article, index) in popularArticles"
+                :key="index"
+                class="article-item"
+              >
+                <div class="article-rank" :class="'rank-' + (index + 1)">
+                  {{ index + 1 }}
+                </div>
+                <div class="article-info">
+                  <router-link :to="article.path" class="article-title">
+                    {{ article.title }}
+                  </router-link>
+                  <div class="article-views">{{ article.views }} 访问</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="chart-section half">
+            <h2>访问来源分布</h2>
+            <div class="chart-wrapper pie-wrapper">
+              <canvas ref="sourceChart"></canvas>
+            </div>
+            <div class="source-legend">
+              <div class="legend-item">
+                <span class="legend-color direct"></span>
+                <span class="legend-text">直接访问: {{ trafficSources.direct }}%</span>
+              </div>
+              <div class="legend-item">
+                <span class="legend-color search-engine"></span>
+                <span class="legend-text">搜索引擎: {{ trafficSources.searchEngine }}%</span>
+              </div>
+              <div class="legend-item">
+                <span class="legend-color external-link"></span>
+                <span class="legend-text">外部链接: {{ trafficSources.externalLink }}%</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TitleBadgeMixin from '../mixins/titleBadge'
+import Chart from 'chart.js'
+
+export default {
+  mixins: [TitleBadgeMixin],
+  data() {
+    return {
+      timeRanges: [
+        { label: '最近7天', value: 7 },
+        { label: '最近30天', value: 30 },
+        { label: '最近90天', value: 90 }
+      ],
+      selectedRange: 7,
+      dailyVisits: [],
+      popularArticles: [],
+      trafficSources: {
+        direct: 0,
+        searchEngine: 0,
+        externalLink: 0
+      },
+      summary: {
+        totalViews: 0,
+        totalArticles: 0,
+        todayVisits: 0
+      },
+      visitsChartInstance: null,
+      sourceChartInstance: null
+    }
+  },
+  computed: {
+    formattedSummary() {
+      return {
+        totalViews: this.formatNumber(this.summary.totalViews)
+      }
+    }
+  },
+  async created() {
+    await this.loadStatisticsData()
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initCharts()
+    })
+  },
+  beforeDestroy() {
+    if (this.visitsChartInstance) {
+      this.visitsChartInstance.destroy()
+    }
+    if (this.sourceChartInstance) {
+      this.sourceChartInstance.destroy()
+    }
+  },
+  methods: {
+    async loadStatisticsData() {
+      try {
+        const response = await fetch('/data/statistics.json')
+        const data = await response.json()
+        
+        this.dailyVisits = data.dailyVisits || []
+        this.popularArticles = data.popularArticles || []
+        this.trafficSources = data.trafficSources || {
+          direct: 0,
+          searchEngine: 0,
+          externalLink: 0
+        }
+        this.summary = data.summary || {
+          totalViews: 0,
+          totalArticles: 0,
+          todayVisits: 0
+        }
+      } catch (error) {
+        console.error('Failed to load statistics data:', error)
+        this.useMockData()
+      }
+    },
+    useMockData() {
+      const now = new Date()
+      const mockVisits = []
+      
+      for (let i = 0; i < 90; i++) {
+        const date = new Date(now)
+        date.setDate(date.getDate() - i)
+        mockVisits.push({
+          date: this.formatDate(date),
+          count: Math.floor(Math.random() * 2000) + 500
+        })
+      }
+      
+      this.dailyVisits = mockVisits.reverse()
+      this.popularArticles = [
+        { title: '示例文章1', path: '/', views: 56890 },
+        { title: '示例文章2', path: '/', views: 45230 },
+        { title: '示例文章3', path: '/', views: 38760 },
+        { title: '示例文章4', path: '/', views: 32450 },
+        { title: '示例文章5', path: '/', views: 28970 }
+      ]
+      this.trafficSources = {
+        direct: 35,
+        searchEngine: 45,
+        externalLink: 20
+      }
+      this.summary = {
+        totalViews: 125680,
+        totalArticles: 86,
+        todayVisits: 1256
+      }
+    },
+    formatDate(date) {
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      return `${year}-${month}-${day}`
+    },
+    formatNumber(num) {
+      if (num >= 10000) {
+        return (num / 10000).toFixed(1) + '万'
+      }
+      return num.toLocaleString()
+    },
+    selectRange(days) {
+      this.selectedRange = days
+      this.updateCharts()
+    },
+    getFilteredVisits() {
+      return this.dailyVisits.slice(-this.selectedRange)
+    },
+    initCharts() {
+      this.initVisitsChart()
+      this.initSourceChart()
+    },
+    initVisitsChart() {
+      const ctx = this.$refs.visitsChart
+      if (!ctx) return
+
+      const filteredData = this.getFilteredVisits()
+      const labels = filteredData.map(item => item.date.slice(5))
+      const data = filteredData.map(item => item.count)
+
+      this.visitsChartInstance = new Chart(ctx, {
+        type: 'bar',
+        data: {
+          labels: labels,
+          datasets: [{
+            label: '访问量',
+            data: data,
+            backgroundColor: 'rgba(17, 168, 205, 0.7)',
+            borderColor: '#11a8cd',
+            borderWidth: 1
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: true,
+          legend: {
+            display: false
+          },
+          scales: {
+            yAxes: [{
+              ticks: {
+                beginAtZero: true
+              },
+              gridLines: {
+                color: 'rgba(0, 0, 0, 0.05)'
+              }
+            }],
+            xAxes: [{
+              gridLines: {
+                display: false
+              }
+            }]
+          }
+        }
+      })
+    },
+    initSourceChart() {
+      const ctx = this.$refs.sourceChart
+      if (!ctx) return
+
+      this.sourceChartInstance = new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+          labels: ['直接访问', '搜索引擎', '外部链接'],
+          datasets: [{
+            data: [
+              this.trafficSources.direct,
+              this.trafficSources.searchEngine,
+              this.trafficSources.externalLink
+            ],
+            backgroundColor: [
+              '#11a8cd',
+              '#36a2eb',
+              '#ffce56'
+            ],
+            borderWidth: 0
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: true,
+          legend: {
+            display: false
+          },
+          tooltips: {
+            callbacks: {
+              label: function(tooltipItem, data) {
+                var label = data.labels[tooltipItem.index] || ''
+                var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]
+                return label + ': ' + value + '%'
+              }
+            }
+          },
+          cutoutPercentage: 65
+        }
+      })
+    },
+    updateCharts() {
+      this.updateVisitsChart()
+    },
+    updateVisitsChart() {
+      if (!this.visitsChartInstance) return
+
+      const filteredData = this.getFilteredVisits()
+      const labels = filteredData.map(item => item.date.slice(5))
+      const data = filteredData.map(item => item.count)
+
+      this.visitsChartInstance.data.labels = labels
+      this.visitsChartInstance.data.datasets[0].data = data
+      this.visitsChartInstance.update()
+    }
+  }
+}
+</script>
+
+<style lang='stylus'>
+@require '../styles/wrapper.styl'
+
+.theme-style-line
+  .statistics-page .theme-vdoing-wrapper
+    box-shadow 0 0
+
+.statistics-page
+  .theme-vdoing-wrapper
+    @extend $vdoing-wrapper
+    position relative
+    @media (min-width $contentWidth + 80)
+      margin-top 1.5rem !important
+
+  .time-range-selector
+    margin 1.5rem 0
+    display flex
+    align-items center
+    gap 0.5rem
+
+    .label
+      font-size 0.9rem
+      color var(--textColor)
+
+    button
+      padding 0.5rem 1rem
+      border 1px solid var(--borderColor)
+      background var(--mainBg)
+      color var(--textColor)
+      border-radius 4px
+      cursor pointer
+      transition all 0.2s ease
+      font-size 0.85rem
+
+      &:hover
+        border-color $accentColor
+        color $accentColor
+
+      &.active
+        background $accentColor
+        color #fff
+        border-color $accentColor
+
+  .summary-cards
+    display grid
+    grid-template-columns repeat(3, 1fr)
+    gap 1rem
+    margin-bottom 2rem
+
+    .summary-card
+      display flex
+      align-items center
+      padding 1.2rem
+      background var(--customBlockBg)
+      border-radius 8px
+      border 1px solid var(--borderColor)
+      transition transform 0.2s ease, box-shadow 0.2s ease
+
+      &:hover
+        transform translateY(-2px)
+        box-shadow 0 4px 12px rgba(0, 0, 0, 0.08)
+
+      .card-icon
+        font-size 2.5rem
+        margin-right 1rem
+
+      .card-content
+        display flex
+        flex-direction column
+
+      .card-value
+        font-size 1.6rem
+        font-weight 600
+        color $accentColor
+        line-height 1.2
+
+      .card-label
+        font-size 0.85rem
+        color var(--textColor)
+        opacity 0.7
+        margin-top 0.25rem
+
+  .charts-container
+    display flex
+    flex-direction column
+    gap 2rem
+
+  .chart-section
+    background var(--customBlockBg)
+    border-radius 8px
+    padding 1.5rem
+    border 1px solid var(--borderColor)
+
+    h2
+      margin 0 0 1rem 0
+      font-size 1.1rem
+      font-weight 500
+      color var(--textColor)
+      border-left 3px solid $accentColor
+      padding-left 0.75rem
+
+  .chart-row
+    display grid
+    grid-template-columns repeat(2, 1fr)
+    gap 1rem
+
+    @media (max-width 768px)
+      grid-template-columns 1fr
+
+  .chart-wrapper
+    position relative
+    height 300px
+    width 100%
+
+  .pie-wrapper
+    height 250px
+
+  .popular-articles
+    display flex
+    flex-direction column
+    gap 0.75rem
+
+    .article-item
+      display flex
+      align-items center
+      padding 0.75rem
+      background var(--mainBg)
+      border-radius 6px
+      transition background 0.2s ease
+
+      &:hover
+        background var(--customBlockBg)
+
+    .article-rank
+      width 28px
+      height 28px
+      display flex
+      align-items center
+      justify-content center
+      border-radius 50%
+      font-weight 600
+      font-size 0.85rem
+      margin-right 1rem
+      color #fff
+
+      &.rank-1
+        background #ff6b6b
+      &.rank-2
+        background #ffa94d
+      &.rank-3
+        background #51cf66
+      &.rank-4
+        background #339af0
+      &.rank-5
+        background #845ef7
+
+    .article-info
+      flex 1
+      min-width 0
+
+    .article-title
+      color var(--textColor)
+      font-size 0.9rem
+      display block
+      white-space nowrap
+      overflow hidden
+      text-overflow ellipsis
+      transition color 0.2s ease
+
+      &:hover
+        color $accentColor
+
+    .article-views
+      font-size 0.75rem
+      color var(--textColor)
+      opacity 0.6
+      margin-top 0.25rem
+
+  .source-legend
+    display flex
+    flex-direction column
+    gap 0.5rem
+    margin-top 1rem
+
+    .legend-item
+      display flex
+      align-items center
+      font-size 0.85rem
+
+    .legend-color
+      width 12px
+      height 12px
+      border-radius 2px
+      margin-right 0.5rem
+
+      &.direct
+        background #11a8cd
+      &.search-engine
+        background #36a2eb
+      &.external-link
+        background #ffce56
+
+    .legend-text
+      color var(--textColor)
+
+  @media (max-width 768px)
+    .summary-cards
+      grid-template-columns 1fr
+
+    .chart-row
+      grid-template-columns 1fr
+</style>
diff --git a/vdoing/index.js b/vdoing/index.js
index d40b863654..1184ff7bc8 100644
--- a/vdoing/index.js
+++ b/vdoing/index.js
@@ -59,6 +59,13 @@ module.exports = (options, ctx) => {
     deletePage(sourceDir, 'archivesPage')
   }
 
+  // 统计页
+  if (themeConfig.statistics !== false) {
+    createPage(sourceDir, 'statisticsPage')
+  } else {
+    deletePage(sourceDir, 'statisticsPage')
+  }
+
   // resolve algolia
   const isAlgoliaSearch = (
     themeConfig.algolia
diff --git a/vdoing/layouts/Layout.vue b/vdoing/layouts/Layout.vue
index 62dda707ea..f201d6180b 100644
--- a/vdoing/layouts/Layout.vue
+++ b/vdoing/layouts/Layout.vue
@@ -47,6 +47,9 @@
     <!-- 归档页 -->
     <ArchivesPage v-else-if="$page.frontmatter.archivesPage" />
 
+    <!-- 统计页 -->
+    <StatisticsPage v-else-if="$page.frontmatter.statisticsPage" />
+
     <!-- 文章页或其他页 -->
     <Page v-else :sidebar-items="sidebarItems">
       <template #top v-if="pageSlotTop">
@@ -102,6 +105,7 @@ import Page from '@theme/components/Page.vue'
 import CategoriesPage from '@theme/components/CategoriesPage.vue'
 import TagsPage from '@theme/components/TagsPage.vue'
 import ArchivesPage from '@theme/components/ArchivesPage.vue'
+import StatisticsPage from '@theme/components/StatisticsPage.vue'
 import Sidebar from '@theme/components/Sidebar.vue'
 import Buttons from '@theme/components/Buttons.vue'
 import Footer from '@theme/components/Footer'
@@ -114,7 +118,7 @@ const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
 const NAVBAR_HEIGHT = 58 // 导航栏高度
 
 export default {
-  components: { Home, Navbar, Page, CategoriesPage, TagsPage, ArchivesPage, Sidebar, Footer, Buttons, BodyBgImg },
+  components: { Home, Navbar, Page, CategoriesPage, TagsPage, ArchivesPage, StatisticsPage, Sidebar, Footer, Buttons, BodyBgImg },
 
   data() {
     return {
diff --git a/vdoing/node_utils/handlePage.js b/vdoing/node_utils/handlePage.js
index 5268653572..169e0bcb59 100644
--- a/vdoing/node_utils/handlePage.js
+++ b/vdoing/node_utils/handlePage.js
@@ -43,6 +43,14 @@ archivesPage: true
 title: 归档
 permalink: /archives/
 article: false
+---`
+  } else if (page.indexOf('statistics') > -1) {
+    content = `---
+statisticsPage: true
+title: 统计
+permalink: /statistics/
+article: false
+sidebar: false
 ---`
   }