Chú thích#

Thêm chữ nghiêng vào dòng tiếp theo của hình ảnh, nó sẽ trở thành chú thích và xuất hiện ở cuối hình ảnh:

1
![img-description](/path/to/image)
2
_Chú thích Hình ảnh_

{: .nolineno}

Kích thước#

Để ngăn bố cục nội dung trang bị dịch chuyển khi hình ảnh được tải, chúng ta nên đặt chiều rộng và chiều cao cho mỗi hình ảnh.

1
![Desktop View](/assets/img/sample/mockup.png){: width="700" height="400" }

{: .nolineno}

Đối với SVG, bạn phải chỉ định ít nhất chiều rộng của nó, nếu không nó sẽ không được hiển thị. {: .prompt-info }

Bắt đầu từ Chirpy v5.0.0, height và width hỗ trợ viết tắt (height → h, width → w). Ví dụ sau có cùng hiệu quả như trên:

1
![Desktop View](/assets/img/sample/mockup.png){: w="700" h="400" }

{: .nolineno}

Vị trí#

Theo mặc định, hình ảnh được căn giữa, nhưng bạn có thể chỉ định vị trí bằng cách sử dụng một trong các lớp normal, left và right.

Khi vị trí được chỉ định, không nên thêm chú thích hình ảnh. {: .prompt-warning }

• Vị trí bình thường

  Hình ảnh sẽ được căn trái trong ví dụ dưới đây:

  1
  ![Desktop View](/assets/img/sample/mockup.png){: .normal }
  

  {: .nolineno}

• Nổi về bên trái

  1
  ![Desktop View](/assets/img/sample/mockup.png){: .left }
  

  {: .nolineno}

• Nổi về bên phải

  1
  ![Desktop View](/assets/img/sample/mockup.png){: .right }
  

  {: .nolineno}

Chế độ Tối/Sáng#

Bạn có thể làm cho hình ảnh tuân theo tùy chọn giao diện ở chế độ tối/sáng. Điều này yêu cầu bạn chuẩn bị hai hình ảnh, một cho chế độ tối và một cho chế độ sáng, sau đó gán cho chúng một lớp cụ thể (dark hoặc light):

1
![Light mode only](/path/to/light-mode.png){: .light }
2
![Dark mode only](/path/to/dark-mode.png){: .dark }

Đổ bóng#

Ảnh chụp màn hình cửa sổ chương trình có thể được xem xét để hiển thị hiệu ứng đổ bóng:

1
![Desktop View](/assets/img/sample/mockup.png){: .shadow }

{: .nolineno}

Hình ảnh Xem trước#

Nếu bạn muốn thêm hình ảnh ở đầu bài viết, hãy cung cấp hình ảnh với độ phân giải 1200 x 630. Xin lưu ý rằng nếu tỷ lệ khung hình của hình ảnh không đáp ứng 1.91 : 1, hình ảnh sẽ được thay đổi tỷ lệ và cắt xén.

Biết được các điều kiện tiên quyết này, bạn có thể bắt đầu đặt thuộc tính của hình ảnh:

1
---
2
image:
3
  path: /path/to/image
4
  alt: văn bản thay thế hình ảnh
5
---

Lưu ý rằng media_subpath cũng có thể được truyền cho hình ảnh xem trước, nghĩa là khi nó đã được đặt, thuộc tính path chỉ cần tên file hình ảnh.

Để sử dụng đơn giản, bạn cũng có thể chỉ sử dụng image để xác định đường dẫn.

1
---
2
image: /path/to/image
3
---

LQIP#

Cho hình ảnh xem trước:

1
---
2
image:
3
  lqip: /path/to/lqip-file # hoặc base64 URI
4
---

Bạn có thể quan sát LQIP trong hình ảnh xem trước của bài viết “Text and Typography”.

Cho hình ảnh thông thường:

1
![Image description](/path/to/image){: lqip="/path/to/lqip-file" }

{: .nolineno }

Nền tảng Mạng xã hội#

Bạn có thể nhúng video từ các nền tảng mạng xã hội với cú pháp sau:

1
{% include embed/{Platform}.html id='{ID}' %}

Trong đó Platform là tên viết thường của nền tảng và ID là ID của video.

Bảng sau đây cho thấy cách lấy hai tham số chúng ta cần từ một URL video cụ thể và bạn cũng có thể biết các nền tảng video hiện được hỗ trợ.

File Video#

Nếu bạn muốn nhúng trực tiếp một file video, hãy sử dụng cú pháp sau:

1
{% include embed/video.html src='{URL}' %}

Trong đó URL là URL đến file video, ví dụ: /path/to/sample/video.mp4.

Bạn cũng có thể chỉ định các thuộc tính bổ sung cho file video được nhúng. Đây là danh sách đầy đủ các thuộc tính được phép.

• poster='/path/to/poster.png' — hình ảnh áp phích cho video hiển thị khi video đang tải
• title='Text' — tiêu đề cho video xuất hiện bên dưới video và trông giống như cho hình ảnh
• autoplay=true — video tự động bắt đầu phát lại ngay khi có thể
• loop=true — tự động quay lại đầu khi kết thúc video
• muted=true — âm thanh sẽ bị tắt ban đầu
• types — chỉ định phần mở rộng của các định dạng video bổ sung được phân tách bằng |. Đảm bảo các file này tồn tại trong cùng thư mục với file video chính của bạn.

Xem xét một ví dụ sử dụng tất cả những điều trên:

1
{%
2
  include embed/video.html
3
  src='/path/to/video.mp4'
4
  types='ogg|mov'
5
  poster='poster.png'
6
  title='Video demo'
7
  autoplay=true
8
  loop=true
9
  muted=true
10
%}

Chỉ định Ngôn ngữ#

Sử dụng ```{ngôn_ngữ} bạn sẽ nhận được khối mã có tô sáng cú pháp:

1
```yaml
2
key: value
3
```

Thẻ Jekyll {% highlight %} không tương thích với theme này. {: .prompt-danger }

Số dòng#

Theo mặc định, tất cả ngôn ngữ ngoại trừ plaintext, console và terminal sẽ hiển thị số dòng. Khi bạn muốn ẩn số dòng của khối mã, hãy thêm lớp nolineno vào nó:

1
```shell
2
echo 'Không còn số dòng nữa!'
3
```
4
{: .nolineno }

Chỉ định Tên File#

Bạn có thể nhận thấy rằng ngôn ngữ mã sẽ được hiển thị ở đầu khối mã. Nếu bạn muốn thay thế nó bằng tên file, bạn có thể thêm thuộc tính file để đạt được điều này:

1
```shell
2
# nội dung
3
```
4
{: file="path/to/file" }

Mã Liquid#

Nếu bạn muốn hiển thị đoạn mã Liquid, hãy bao quanh mã liquid bằng {% raw %} và {% endraw %}:

1
{% raw %}
2
```liquid
3
{% if product.title contains 'Pack' %}
4
  Tiêu đề sản phẩm này chứa từ Pack.
5
{% endif %}
6
```
7
{% endraw %}

Hoặc thêm render_with_liquid: false (Yêu cầu Jekyll 4.0 trở lên) vào khối YAML của bài viết.