如何在Hugo中實現圖片的懶加載
當我在我的電子書網站The Valley of Code上推出新的主頁時，我並沒有考慮到我的託管費用以及為客戶加載大量圖片的影響。 由於每個頁面非常長（沒有導航，這就是它們作為書籍而不是文章的目的），一個頁面的大小甚至可能達到10MB。 因此，我決定通過使用懶加載來解決這個問題，也就是說，當用戶滾動到該圖片時，瀏覽器只加載該圖片。 這是一個權衡，但我相信99%的人打開一個頁面後甚至根本不會立即滾動到該圖片。 問題是…我無法控制標記！所有的內容都在Markdown中。 但是我發現Hugo允許我們覆蓋圖片的呈現方式。 在您的主題中創建文件layouts/_default/_markup/render-image.html，內容如下： <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" loading="lazy" /> 這將使生成的HTML具有loading="lazy"屬性，從而實現圖片的懶加載。