5 Content snipets hữu ích, tạo một lần, dùng nhiều lần cho Ghost ⚡ [Độc quyền]

Ghost không có quá nhiều block để bạn lựa chọn dẫn đến một chút khó khăn cho định dạng bài viết và thiết kế trang đơn giản.

Tuy nhiên, Ghost có HTML block và khi kết hợp với tính năng content snipet của Ghost, bạn có thể tạo thêm cho riêng mình một số block tạo sẵn để dùng đi dùng lại mỗi khi cần đến.

Cách dùng Ghost content snipet tương tự như Reusable Block trên WordPress nhưng tiện hơn về thao tác sử dụng.

Tôi sẽ chia sẻ 7 HTML content snipets phổ biến để bạn dùng Ghost thoải mái hơn. Bạn chỉ cần lưu lại và dùng ngay trên Ghost của bạn.

1. Video block

Youtube cho phép bạn chèn link và tự render Youtube player cho bạn trên Ghost, nhưng sẽ như thế nào nếu bạn muốn chèn video từ nguồn khác bên ngoài trong khi Ghost không có video block?

Có rất nhiều video hosting cho bạn lựa chọn trong trường hợp này như Bunny Edge storage (không HLS), DigitalOcean object storage, Amazon S3,...

Bạn cần một video player block để hiển thị các video này, đặc biệt là video giả ảnh động như một ảnh gif.

Bạn dùng HTML5 video, tương thích sẵn với mọi trình duyệt như code dưới đây.

<figure>
	<video style="aspect-ratio:16/9" width="100%" autoplay loop muted preload="metadata">
    	<source src="https://video-cua-ban.mp4" type="video/mp4">
	</video>
    <figcaption>Dùng video như ảnh động</figcaption>
</figure>

Thay https://video-cua-ban.mp4 thành URL video của bạn. Bạn sẽ có kết quả như sau:

2. Audio block

Giống như video block, nếu bạn chuyên Podcast thì các dịch vụ podcast luôn có sẵn Audio player để thêm vào website, nhưng không phải lúc nào cũng vậy.

Bạn có thể muốn chèn cái preview audio nghe trước khi bán sản phẩm điện tử hoặc một podcast tự host.

Bạn cũng dùng HTML5 audio player code như bên dưới.

<audio controls>
  <source src="music-cua-ban.mp3" type="audio/mp3">
</audio>

3. FAQ block

Đây là một dạng block cực phổ biến khi bạn thiết kế landing page hoặc muốn chèn thêm các thông tin quan trọng cho cuối mỗi bài viết đặc biệt nào đó.

Lưu ý, cách chèn này sẽ không tự tạo ra schema FAQ cho bạn mà chỉ đơn thuần hiển thị nội dung đẹp và chuyên nghiệp hơn.