插件功能展示

这个页面展示了博客中新添加的各种有趣的 VitePress 插件和组件功能。

可折叠代码块

使用可折叠代码块可以减少长代码占用的空间，让页面更整洁。

Vue 组件示例代码

展开

<template>
  <div class="counter">
    <h1>{{ count }}</h1>
    <button @click="increment">点击增加</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<style scoped>
.counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2rem 0;
}

button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 4px;
  background-color: var(--vp-c-brand);
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

button:hover {
  background-color: var(--vp-c-brand-dark);
}
</style>

React 组件示例代码

折叠

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div className="counter">
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>
        点击增加
      </button>
    </div>
  );
}

export default Counter;

时间线组件

时间线组件可以用于展示项目历程、更新日志或个人履历等内容。

2023-06-10

VitePress 1.0 发布

VitePress 正式发布 1.0 版本，带来了许多新功能和改进。

2023-08-15

增加更多主题功能

新增了多种主题和个性化设置，使网站更加美观和易用。

2023-10-05

改进搜索功能

优化了站内搜索功能，支持更精准的内容查找和高亮显示。

2024-01-20

引入新插件系统

推出了全新的插件系统，便于扩展更多功能和集成第三方服务。

2024-03-30

移动端适配升级

全面优化了移动端的用户体验，响应更快、显示更佳。

增强型图像查看器

增强型图像查看器支持拖拽、缩放和调整大小，提供更好的图片浏览体验。

VitePress 官方图片 - 可拖拽和调整大小

Mermaid 流程图

Mermaid 可以直接在 Markdown 中绘制各种图表，包括流程图、时序图、甘特图等。

流程图示例

加载图表中...

程序使用流程图

时序图示例

加载图表中...

Web 应用请求流程时序图

ECharts 数据图表

使用 ECharts 可以创建各种交互式数据可视化图表。

柱状图示例

饼图示例

功能盒子组件

功能盒子组件可以用于在文档中突出显示重要信息、提示或警告。

信息提示

这是一个信息提示框，用于展示一般性的说明信息。

小技巧

这是一个小技巧提示框，用于分享有用的技巧和建议。

注意事项

这是一个警告提示框，用于提醒用户需要注意的事项或潜在问题。

危险操作

这是一个危险提示框，用于警告用户危险或破坏性的操作。

成功信息

这是一个成功提示框，用于通知用户操作已成功完成。

笔记

这是一个笔记提示框，适合用于记录额外的信息或个人见解。

展示页面仅供参考。