广告轮播组件使用指南

本文档介绍如何在VitePress文档中使用内置的广告轮播组件。

基本用法

您可以直接在Markdown文件中使用<AdCarousel />组件，它将使用默认的广告配置：

<AdCarousel />

广告位招租！

自定义广告内容

您可以通过ads属性自定义广告内容，支持图片、文本和HTML三种类型：

<AdCarousel 
  :ads="[
    {
      type: 'image',
      content: 'https://picsum.photos/id/26/800/400',
      alt: '广告图片1'
    },
    {
      type: 'text',
      content: '这是一段广告文本内容',
      buttonText: '点击了解更多'
    },
    {
      type: 'image',
      content: 'https://picsum.photos/id/27/800/400',
      alt: '广告图片2'
    }
  ]"
/>

配置轮播参数

您可以通过以下属性配置轮播行为：

• interval: 轮播间隔时间（毫秒），默认为5000
• autoplay: 是否自动播放，默认为true
• height: 轮播高度，默认为'200px'

示例：

<AdCarousel 
  :interval="3000"
  :autoplay="true"
  height="300px"
  :ads="[
    {
      type: 'image',
      content: 'https://picsum.photos/id/10/800/400',
      alt: '自定义广告1'
    },
    {
      type: 'text',
      content: '限时优惠活动进行中！',
      buttonText: '立即抢购'
    }
  ]"
/>

广告类型说明

组件支持三种广告类型：

1. 图片广告 (image)

{
  type: 'image',
  content: '图片URL',
  alt: '图片描述文本'
}

2. 文本广告 (text)

{
  type: 'text',
  content: '广告文本内容',
  buttonText: '按钮文本（可选）'
}

3. HTML广告 (html)

{
  type: 'html',
  content: '<div style="text-align:center;"><h3>自定义HTML广告</h3><p>支持任意HTML内容</p></div>'
}

响应式设计

广告轮播组件支持响应式设计，在移动设备上会自动调整大小和控制按钮样式。

最佳实践

• 建议广告数量控制在3-5个之间，避免过多导致用户等待时间过长
• 图片广告建议使用高质量但经过优化的图片，确保加载速度
• 文本广告应简洁明了，突出重点信息
• 可根据页面内容风格调整轮播高度，保持视觉一致性

示例：完整自定义配置

<AdCarousel 
  :interval="4000"
  :autoplay="true"
  height="250px"
  :ads="[
    {
      type: 'image',
      content: 'https://picsum.photos/id/1/800/400',
      alt: '产品展示'
    },
    {
      type: 'html',
      content: '<div style="padding:20px;"><h3 style="color:#007bff;">限时优惠</h3><p>全场商品8折起，<br>活动截止到本周五</p><button style="background:#007bff;color:white;border:none;padding:8px 16px;border-radius:4px;">立即查看</button></div>'
    },
    {
      type: 'text',
      content: '订阅我们的邮件获取最新资讯',
      buttonText: '立即订阅'
    }
  ]"
/>