Nén HTML của bạn trong Jekyll

Cũng giống như CSS và JavaScript, kết quả HTML có thể được nén và giảm thiểu bằng cách loại bỏ khoảng trắng, dòng mới, comment và thậm chí loại bỏ một số thẻ đóng tùy chọn nhất định, làm cho kích thước file nhỏ hơn. Hãy xem nguồn của trang này chẳng hạn để xem kết quả của việc nén như vậy. Với Jekyll, một plugin có tên jekyll-Compression-html sẽ giúp bạn thực hiện điều đó. Plugin sử dụng cú pháp Liquid thuần túy để thực hiện nén HTML, vì vậy nó không phụ thuộc vào bất kỳ thứ gì.

Cài đặt

Bắt đầu với plugin trong hai bước đơn giản:

Download và giải nén file nén.html của plugin và đặt nó vào folder _layout của cài đặt Jekyll của bạn.
Trong plugin trên cùng của bạn, thường là default.html , hãy thêm Front Matter sau:

---
layout: compress
---

Sử dụng

Bây giờ plugin đã được cài đặt và cài đặt , bạn có thể cấu hình hành vi chính xác của nó trong file _config.yml của bạn . Ví dụ:

compress_html:
  clippings: all
  comments: [""]
  endings: [html, head, body, li, dt, dd, rt, rp, optgroup, option, colgroup, caption, thead, tbody, tfoot, tr, td, th]
  profile: false
  blanklines: false
  ignore:
    envs: []

Và đây là bảng phân tích nhanh về các tùy chọn cấu hình:

clippings : Một mảng các phần tử xung quanh khoảng trắng sẽ bị xóa. Sử dụng từ khóa all để bao gồm tất cả các phần tử an toàn để thao tác. pre sẽ bị bỏ qua để bảo toàn khoảng trắng.
comment : Một mảng có thẻ bắt đầu và thẻ kết thúc cho comment bị xóa. Chú ý các khoảng trắng thừa để các comment không có khoảng trắng đó sẽ được giữ lại.
endings : Một mảng các thẻ kết thúc tùy chọn, sẽ bị xóa. Sử dụng từ khóa all để xóa tất cả chúng. Trong ví dụ trên, tôi chỉ định tất cả các thẻ kết thúc tùy chọn ngoại trừ p .
hồ sơ : Chuyển cờ này thành true trong chế độ phát triển để xem một bảng được thêm vào cuối trang web hiển thị bảng phân tích cho các phần tử trên trang.
dòng trống : Chuyển cờ này thành true nếu bạn chỉ muốn thu gọn các dòng trống và giữ nguyên ngắt dòng các dòng không trống.
ignore.envs : Một mảng tên môi trường Jekyll nơi bố trí nén nên được tắt. Điều này có thể hữu ích nếu bạn muốn tắt tính năng nén trong chế độ phát triển.
startings : Một mảng các thẻ bắt đầu tùy chọn, sẽ bị xóa. Ví dụ: startings: [html, head, body]

Tags:

Các tin liên quan

Sử dụng DOMParser để phân tích cú pháp các chuỗi HTML
2016-10-21
Tham chiếu thuộc tính mục tiêu cho thẻ neo trong HTML
2016-09-12
HTML AMP, Tổng quan
2016-06-29
Cách bảo vệ trang web WordPress của bạn khỏi Genericons Example.html Lỗ hổng XSS
2015-05-07