Grav - การเชื่อมโยงรูปภาพ
ในบทนี้เราจะเข้าใจการเชื่อมโยงภาพใน Grav Grav ช่วยให้คุณสามารถเชื่อมโยงรูปภาพจากเพจหนึ่งไปยังอีกเพจหนึ่งและแม้แต่เพจระยะไกล หากคุณได้เชื่อมโยงไฟล์โดยใช้ HTML นั่นจะเป็นเรื่องง่ายมากที่จะเข้าใจการเชื่อมโยงรูปภาพใน Grav
เมื่อใช้โครงสร้างนี้เราจะดูวิธีแสดงไฟล์สื่อในเพจโดยใช้ลิงก์ประเภทต่างๆ ทุกโฟลเดอร์ภายใต้โครงสร้างนี้มีรูปภาพและมีไดเร็กทอรีพิเศษอยู่ภายใต้/02.green/img01 ซึ่งทำหน้าที่เป็นเพจ แต่มีไฟล์มีเดียเท่านั้น
มาดูองค์ประกอบทั่วไปบางส่วนของแท็กรูปภาพที่ใช้ Grav markdown
! - ระบุแท็กรูปภาพเมื่อคุณวางไว้ที่จุดเริ่มต้นของแท็กลิงก์มาร์กดาวน์
[] - ระบุข้อความแสดงแทนสำหรับรูปภาพ
() - วางไว้หลังวงเล็บเหลี่ยมซึ่งมีเส้นทางไฟล์
../ - บ่งบอกถึงการย้ายไดเร็กทอรี
Grav ใช้ลิงค์รูปภาพห้าประเภทตามรายการด้านล่าง -
Slug Relative
Directory Relative
Absolute
Remote
Media Actions on Images
กระสุนญาติ
ตั้งค่าลิงก์รูปภาพสัมพัทธ์ไปยังเพจปัจจุบันและลิงก์ไฟล์อื่นในไดเร็กทอรีเดียวกัน ในขณะที่ใช้ลิงก์แบบสัมพัทธ์ตำแหน่งของไฟล์ต้นทางมีความสำคัญเทียบเท่ากับปลายทาง หากคุณเปลี่ยนเส้นทางในไฟล์ขณะที่ย้ายลิงก์อาจเสียได้ ข้อดีของการใช้โครงสร้างการเชื่อมโยงรูปภาพนี้คือคุณสามารถสลับระหว่างเซิร์ฟเวอร์การพัฒนาภายในและเซิร์ฟเวอร์ที่ใช้งานจริงด้วยชื่อโดเมนอื่นได้ตราบเท่าที่โครงสร้างไฟล์ยังคงที่
ตัวอย่าง
ที่นี่ ../ แสดงว่าลิงก์ของคุณเลื่อนขึ้นหนึ่งโฟลเดอร์จากนั้นลงหนึ่งโฟลเดอร์และ img.jpg คือปลายทาง
เมื่อคุณใช้เส้นทางข้างต้นคุณจะได้รับผลลัพธ์ต่อไปนี้ -
Grav รองรับ slugs ในส่วนหัวของไฟล์ markdown หลักของเพจและ slug นี้จะใช้แทนชื่อโฟลเดอร์สำหรับเพจนั้น ๆ
ถ้า 01.sky โฟลเดอร์มีชุดกระสุนผ่านไฟล์ .md ไฟล์กล่าวคือ /pages/01.blue/01.sky/text.mdจากนั้นส่วนหัวของไฟล์จะเป็น -
---
title: Sky
slug: test-slug
taxonomy:
category: blog
---ในรหัสด้านบนเราได้ตั้งค่ากระสุน test-slugซึ่งเป็นทางเลือก เมื่อคุณตั้งค่ากระสุนแล้วคุณสามารถเชื่อมโยงไปยังไฟล์สื่อที่จะมีSlug Relative หรือ Absolute URL ที่ตั้งไว้สำหรับลิงก์
ไดเร็กทอรีญาติ
ในลิงก์ประเภทนี้คุณสามารถตั้งค่าลิงก์รูปภาพที่สัมพันธ์กับไดเร็กทอรีไปยังเพจปัจจุบันได้ แทนที่จะใช้ URL slugs คุณสามารถอ้างอิงผ่านเส้นทางแบบเต็มโดยใช้ชื่อโฟลเดอร์ในลิงก์รูปภาพที่สัมพันธ์กันของไดเร็กทอรี
ตัวอย่าง
เมื่อคุณใช้เส้นทางด้านบนจะแสดงผลลัพธ์ดังที่แสดงด้านล่าง -
แน่นอน
ลิงก์สัมบูรณ์เหมือนกับลิงก์สัมพัทธ์ แต่ข้อแตกต่างเพียงอย่างเดียวคือลิงก์เหล่านี้สัมพันธ์กับรูทของไซต์และมีอยู่ในไฟล์ /user/pages/ ไดเรกทอรี
คุณสามารถใช้ลิงก์สัมบูรณ์ได้สองวิธี:
คุณสามารถใช้ได้ Slug Relative สไตล์ที่มีชื่อ slug หรือไดเร็กทอรีในพา ธ และมักใช้ในการลิงก์แบบสัมบูรณ์
คุณสามารถใช้ได้ Absolute Link ซึ่งจะเปิดลิงก์ด้วย a/.
เมื่อคุณใช้เส้นทางข้างต้นคุณจะได้รับผลลัพธ์ต่อไปนี้ -
ระยะไกล
ลิงก์รูปภาพระยะไกลอนุญาตให้แสดงไฟล์สื่อโดยตรงผ่าน URL ลิงก์เหล่านี้ไม่รวมเนื้อหาของไซต์ของคุณเอง ตัวอย่างต่อไปนี้แสดงวิธีการแสดงภาพโดยใช้ URL ระยะไกล -
เมื่อคุณคลิกที่ลิงค์ดังที่แสดงในภาพด้านล่างจะแสดงภาพจาก URL ที่กำหนด
การดำเนินการกับสื่อในรูปภาพ
รูปภาพที่เกี่ยวข้องกับเพจทำให้เราสามารถใช้ประโยชน์จากการกระทำของกราฟสื่อได้ คุณสามารถแสดงไฟล์สื่อบางไฟล์เช่นรูปภาพวิดีโอและไฟล์อื่น ๆ เมื่อสร้างเนื้อหาใน Grav
ตัวอย่าง
คุณสามารถโหลดภาพโดยใช้รูปแบบที่ระบุด้านล่าง -
เมื่อคุณใช้เส้นทางข้างต้นคุณจะได้รับผลลัพธ์ตามที่แสดงด้านล่าง -
