Câu hỏi thường gặp

Xử lý assets

Bạn có thể sử dụng các static assets như hình ảnh và video trong các slide của mình. Vì Slidev dựa trên Vite, bạn có thể import chúng trực tiếp vào các file markdown.

Các URL có thể được phân tích static như assets có thể sử dụng đường dẫn tương đối:

![alt](./image.png)
<img src="./image.png" />

Trong trường hợp trên, các URL sẽ được resolve thành /BASE_URL/assets/image.png sau khi build.

Tuy nhiên, các đường dẫn tương đối trong frontmatter và các component khác sẽ bị hỏng sau khi build:

---
background: ./image.png  # Broken after build
---

<Comp src="./image.png" />

Trong trường hợp trên, các URL không thể phân tích static và sẽ được giữ nguyên như vậy, dẫn đến lỗi 404 sau khi build.

Để giải quyết điều này, bạn có thể đặt các assets này vào thư mục public và sử dụng đường dẫn tuyệt đối để nhập chúng:

---
background: /image.png
---

<Comp src="/image.png" />

Để biết thêm chi tiết, tham khảo tài liệu của Vite.

Định vị

Vì Slidev là ứng dụng web, CSS là cách chính để định vị các element. Dưới đây là một số mẹo hữu ích để định vị các element:

Grid và Flexbox

Bạn có thể sử dụng CSS Grids để tạo các layout phức tạp:

Two columns

<div class="grid grid-cols-2 gap-4">
  <div>
    Cột đầu tiên
  </div>
  <div>
    Cột thứ hai
  </div>
</div>

Complex case

<div class="grid grid-cols-[200px_1fr_10%] gap-4">
  <div>
    Cột đầu tiên (200px)
  </div>
  <div>
    Cột thứ hai (auto fit)
  </div>
  <div>
    Cột thứ ba (Chiều rộng 10% phần tử cha)
  </div>
</div>

Sử dụng Flexbox để tạo layout responsive tốt hơn:

Horizontal

<div class="flex items-center">
  <div>
    Khối đầu tiên
  </div>
  <div>
    Khối thứ hai
  </div>
</div>

Vertical

<div class="flex flex-col items-center">
  <div>
    Nội dung được căn giữa
  </div>
</div>

Tìm hiểu thêm: CSS Grids, flexboxes, hoặc thậm chí Masonry.

Vị trí tuyệt đối

Bạn có thể sử dụng UnoCSS để định vị các element theo vị trí tuyệt đối:

<div class="absolute left-30px bottom-30px">
  Đây là một footer căn ở góc dưới bên trái
</div>

Hoặc sử dụng tính năng kéo thả các element:

✨ Draggable Elements

Điều chỉnh kích thước

• Điều chỉnh kích thước của tất cả slide:

✨ Slide Canvas Size

• Điều chỉnh kích thước của nhiều slide:

✨ Zoom Slides

• Điều chỉnh kích thước của một số element:

✨ The `Transform` Component