Grav - Liên kết hình ảnh
Trong chương này, chúng ta sẽ hiểu liên kết hình ảnh trong Grav. Grav cho phép bạn liên kết hình ảnh từ trang này sang trang khác và thậm chí đến các trang từ xa. Nếu bạn đã liên kết các tệp bằng HTML, thì việc liên kết hình ảnh trong Grav sẽ rất dễ hiểu.
Sử dụng cấu trúc này, chúng ta sẽ thấy cách hiển thị các tệp phương tiện trong trang bằng cách sử dụng các loại liên kết khác nhau. Mọi thư mục trong cấu trúc này đều chứa hình ảnh và có một thư mục đặc biệt trong/02.green/img01 hoạt động như một trang nhưng chỉ chứa các tệp phương tiện.
Hãy xem xét một số yếu tố phổ biến của thẻ hình ảnh dựa trên đánh dấu Grav.
! - Nó chỉ ra một thẻ hình ảnh khi bạn đặt nó ở đầu thẻ liên kết đánh dấu.
[] - Nó chỉ định văn bản thay thế tùy chọn cho hình ảnh.
() - Nó được đặt ngay sau dấu ngoặc vuông chứa đường dẫn tệp.
../ - Nó chỉ ra một sự di chuyển lên một thư mục.
Grav sử dụng năm loại liên kết hình ảnh như được liệt kê bên dưới -
Slug Relative
Directory Relative
Absolute
Remote
Media Actions on Images
Slug Relative
Nó thiết lập các liên kết hình ảnh tương đối đến trang hiện tại và liên kết một tệp khác trong cùng một thư mục. Trong khi sử dụng các liên kết tương đối, vị trí của tệp nguồn cũng quan trọng như vị trí của đích. Nếu bạn thay đổi đường dẫn trong tệp khi đang di chuyển, thì liên kết có thể bị hỏng. Ưu điểm của việc sử dụng cấu trúc liên kết hình ảnh này là bạn có thể chuyển đổi giữa máy chủ phát triển cục bộ và máy chủ trực tiếp có tên miền khác, miễn là cấu trúc tệp không đổi.
Thí dụ
Đây ../ cho biết rằng liên kết của bạn di chuyển lên một thư mục rồi xuống một thư mục và img.jpg là đích.
Khi bạn sử dụng đường dẫn trên, bạn sẽ nhận được kết quả sau:
Grav hỗ trợ slugs trong tiêu đề của tệp đánh dấu chính của trang và slug này thay thế tên thư mục cho trang nhất định.
Nếu 01.sky thư mục có một slug được thiết lập thông qua nó .md tệp, tức là, /pages/01.blue/01.sky/text.md, thì tiêu đề của tệp sẽ là:
---
title: Sky
slug: test-slug
taxonomy:
category: blog
---Trong đoạn mã trên, chúng ta đã đặt slug test-slugđó là một tùy chọn. Sau khi bạn đặt slug, bạn có thể liên kết đến tệp phương tiện sẽ cóSlug Relative hoặc là Absolute URL được đặt cho liên kết.
Thư mục tương đối
Trong loại liên kết này, bạn có thể đặt các liên kết hình ảnh tương đối của thư mục đến trang hiện tại. Thay vì sử dụng các slugs URL, bạn có thể tham khảo thông qua đường dẫn đầy đủ với tên thư mục của chúng trong các liên kết hình ảnh tương đối của thư mục.
Thí dụ
Khi bạn sử dụng đường dẫn trên, nó sẽ hiển thị đầu ra như hình dưới đây -
Tuyệt đối
Các liên kết tuyệt đối giống như các liên kết tương đối nhưng sự khác biệt duy nhất là chúng liên quan đến gốc của trang web và hiện diện trong /user/pages/ danh mục.
Bạn có thể sử dụng liên kết tuyệt đối theo hai cách khác nhau -
Bạn có thể dùng Slug Relative kiểu bao gồm tên slug hoặc tên thư mục trong đường dẫn và thường được sử dụng trong liên kết tuyệt đối.
Bạn có thể dùng Absolute Link mở liên kết với a/.
Khi bạn sử dụng đường dẫn trên, bạn sẽ nhận được kết quả sau:
Xa xôi
Các liên kết hình ảnh từ xa cho phép hiển thị bất kỳ tệp phương tiện nào trực tiếp thông qua URL của nó. Các liên kết này không bao gồm nội dung trang web của riêng bạn. Ví dụ sau đây cho thấy cách hiển thị hình ảnh bằng URL từ xa:
Khi bạn nhấp vào liên kết như trong hình dưới đây, nó sẽ hiển thị hình ảnh từ URL đã cho.
Hành động phương tiện trên hình ảnh
Hình ảnh được liên kết với các trang cho phép chúng tôi sử dụng lợi thế của các hành động truyền thông của Grav . Bạn có thể hiển thị một số tệp phương tiện như hình ảnh, video và các tệp khác khi tạo nội dung trong Grav.
Thí dụ
Bạn có thể tải hình ảnh bằng cách sử dụng định dạng dưới đây:
Khi bạn sử dụng đường dẫn trên, bạn sẽ nhận được đầu ra như hình dưới đây:
