vuepress-starter/docs/.vuepress/theme/layouts/Layout.vue

<template>
  <div class="theme-container">
    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603118729589&di=d9acb40dc12f61b2a65c0ae973a9ee2f&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201303%2F13%2F174429b5wzavjztjr9tntt.jpg" class="d-block w-100" alt="">
          <div class="carousel-caption d-none d-md-block">
            <h5>First slide label</h5>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            <a class="btn btn-primary btn-lg" href="#" role="button" target="_blank">Some text</a>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603118783426&di=c827609dd419a2213563dba665111229&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_120617%2F1206171640deaafc4222e7bc51.jpg" class="d-block w-100" alt="">
          <div class="carousel-caption d-none d-md-block">
            <h5>Second slide label</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603118729589&di=d9acb40dc12f61b2a65c0ae973a9ee2f&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201303%2F13%2F174429b5wzavjztjr9tntt.jpg" class="d-block w-100" alt="">
          <div class="carousel-caption d-none d-md-block">
            <h5>Third slide label</h5>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

    <div class="container">
      <Content/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Layout'
}
</script>