前言

突然好奇，要如何在 Hugo 中使用外部資源。本文就先以最簡單的方式，使用 CDN 引入 Bootstrap。

主要內容

在文中貼上 Bootstrap 官網的 CDN 即可。

1 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
2 
3<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

接著就可以開始使用了。

下列以幻燈片作為範例:

 1<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
 2	<div class="carousel-indicators">
 3    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
 4    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
 5    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
 6  </div>
 7  <div class="carousel-inner">
 8    <div class="carousel-item active">
 9      <img src="https://picsum.photos/1024/800?random=1" class="d-block w-100" alt="demo image 1">
10    </div>
11    <div class="carousel-item">
12      <img src="https://picsum.photos/1024/800?random=2" class="d-block w-100" alt="demo image 2">
13    </div>
14    <div class="carousel-item">
15      <img src="https://picsum.photos/1024/800?random=3" class="d-block w-100" alt="demo image 3">
16    </div>
17  </div>
18  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
19    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
20    <span class="visually-hidden">Previous</span>
21  </button>
22  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
23    <span class="carousel-control-next-icon" aria-hidden="true"></span>
24    <span class="visually-hidden">Next</span>
25  </button>
26</div>

小結

使用 CDN 就是如此的樸實無華好上手呀~

參考連結