Hãy thử điều gì đó khác biệt trên nettuts+ ngay hôm nay. Bất kỳ nhà thiết kế nào đã từng làm việc với các tệp CSS lớn sẽ đồng ý rằng điểm yếu chính của nó là không có khả năng sử dụng các biến. Trong bài viết này, chúng ta sẽ tìm hiểu cách triển khai các biến bằng cách sử dụng mod viết lại URL của PHP và Apache
lời nói đầu
Kỹ thuật này hơi đơn giản. Chúng tôi sẽ yêu cầu Apache chuyển hướng bất kỳ biểu định kiểu nào sang một tập lệnh PHP cụ thể. Tập lệnh này sẽ mở biểu định kiểu và đọc từng dòng một để tìm và thay thế bất kỳ biến nào do người dùng xác định. Cuối cùng, nội dung được phân tích cú pháp sẽ được hiển thị dưới dạng CSS thuần túy; . Để kết thúc hướng dẫn này, chúng ta cũng sẽ xem cách lưu kết quả đã xử lý vào bộ nhớ cache để tránh sử dụng CPU không cần thiết
Xin lưu ý rằng cần có một số kiến thức cơ bản về PHP [OOP], Apache và HTTP
Yêu cầu
- Apache với chế độ Viết lại được bật
- PHP5
Bước 1 - Xây dựng dự án
Trước tiên hãy tạo cấu trúc dự án đơn giản của chúng ta. Thêm một chỉ mục. html vào thư mục gốc của dự án của bạn
Variables in CSS Files.. It's possible!Variables in Stylesheets
It's possible!
With PHP and Apache URL Rewrite Mod
Bây giờ, hãy tạo một tệp CSS với các biến sau và đặt nó vào thư mục "css"
$font: arial, sans-serif; $main-color: #3D7169; $secondary-color: #000; h1 { font: 200% $font; color: $main-color; } p { background: $secondary-color; color: $main-color; font-family: $font; padding: 10px; }
Cuối cùng, tạo một tệp PHP trống có tên là
RewriteEngine on RewriteRule ^[.*\.css]$ enhanced_css.php?css=$06 và một tệp
RewriteEngine on RewriteRule ^[.*\.css]$ enhanced_css.php?css=$07 trống. Tệp sau này sẽ ghi đè cấu hình mặc định của máy chủ và được áp dụng cho thư mục và các thư mục con của nó
Bây giờ dự án của chúng ta sẽ trông như thế này
Bước 2 - Chuyển hướng tệp CSS sang PHP Script
Chúng tôi muốn chuyển hướng bất kỳ URL nào có phần mở rộng CSS sang tập lệnh PHP của chúng tôi. Máy chủ Apache cho phép chúng tôi thực hiện việc này bằng cách sử dụng chế độ Viết lại URL.
Trước tiên, hãy đảm bảo rằng các mô-đun "rewrite_module" đang hoạt động trên máy chủ của bạn. Đi và tìm tệp
RewriteEngine on RewriteRule ^[.*\.css]$ enhanced_css.php?css=$08 trong thư mục Apache của bạn. Chỉnh sửa nó và tìm kiếm dòng này.
LoadModule rewrite_module modules/mod_rewrite.so
Nếu cần, hãy bỏ ghi chú bằng cách xóa dấu “#” được thêm vào trước và khởi động lại Apache để đảm bảo rằng cài đặt cấu hình của bạn đang hoạt động
Bây giờ, hãy chỉnh sửa tệp
RewriteEngine on RewriteRule ^[.*\.css]$ enhanced_css.php?css=$07 của bạn và thêm các dòng sau
RewriteEngine on RewriteRule ^[.*\.css]$ enhanced_css.php?css=$0
Lưu nó. Như đã đề cập trước đó, các dòng trên yêu cầu Apache bắt tất cả các URL bằng. css và chuyển hướng chúng đến "enhanced_css. php". Đường dẫn tệp CSS ban đầu được chuyển vào dưới dạng tham số 'css'
Ví dụ
________số 8Sẽ được chuyển hướng đến
enhanced_css.php?css=/css/styles.css
Ghi chú
Một số giải pháp lưu trữ không cho phép cài đặt của chúng bị ghi đè bởi cài đặt của người dùng. Nếu vậy, các liên kết đến biểu định kiểu trong mã HTML phải được thay thế thủ công
Trong những trường hợp như vậy, bạn sẽ phải thay thế
$font: arial, sans-serif; $main-color: #3D7169; $secondary-color: #000; h1 { font: 200% $font; color: $main-color; } p { background: $secondary-color; color: $main-color; font-family: $font; padding: 10px; }0
với
$font: arial, sans-serif; $main-color: #3D7169; $secondary-color: #000; h1 { font: 200% $font; color: $main-color; } p { background: $secondary-color; color: $main-color; font-family: $font; padding: 10px; }1
Bước 3 - Phân tích tệp CSS bằng PHP
Vì các tệp CSS được chuyển hướng tập lệnh PHP của chúng tôi, hãy tạo một lớp có tên "Enhancedcss" để đọc chúng, tìm và thay thế các biến, sau đó hiển thị nội dung dưới dạng CSS thuần túy. Lớp của chúng ta sẽ được khởi tạo bằng cách chuyển
/css/styles.css0 cho hàm tạo. Ghi nhớ chuyển hướng
RewriteEngine on RewriteRule ^[.*\.css]$ enhanced_css.php?css=$07.
/css/styles.css2 chứa đường dẫn đến biểu định kiểu hiện tại
$font: arial, sans-serif; $main-color: #3D7169; $secondary-color: #000; h1 { font: 200% $font; color: $main-color; } p { background: $secondary-color; color: $main-color; font-family: $font; padding: 10px; }5
Việc triển khai cơ bản của lớp bao gồm bốn phương thức. Sau này, chúng tôi sẽ thêm một phương thức lưu vào bộ nhớ đệm
$font: arial, sans-serif; $main-color: #3D7169; $secondary-color: #000; h1 { font: 200% $font; color: $main-color; } p { background: $secondary-color; color: $main-color; font-family: $font; padding: 10px; }6
Người xây dựng
Không có gì gợi cảm ở đây. Chúng tôi kiểm tra xem tệp CSS được yêu cầu có tồn tại không. Nếu không, tập lệnh trả về lỗi 404 http. Đường dẫn của tệp CSS được giữ trong thuộc tính
/css/styles.css3 để tính tên của tệp bộ đệm sau này
$font: arial, sans-serif; $main-color: #3D7169; $secondary-color: #000; h1 { font: 200% $font; color: $main-color; } p { background: $secondary-color; color: $main-color; font-family: $font; padding: 10px; }0
Phương pháp phân tích cú pháp
Phương pháp này mở tệp CSS và đọc từng dòng một
$font: arial, sans-serif; $main-color: #3D7169; $secondary-color: #000; h1 { font: 200% $font; color: $main-color; } p { background: $secondary-color; color: $main-color; font-family: $font; padding: 10px; }1
Chức năng tập tin được sử dụng ở đây. Nó có thể hữu ích vì nó mở một tệp và trả về nội dung dưới dạng một mảng các dòng. Mỗi dòng được ném tới
/css/styles.css4 để xử lý các biến. Nội dung được phân tích cú pháp sau đó được trả lại
Phương thức FindAndReplace
Phương pháp này là đặc điểm chính của lớp chúng ta. Nó tìm các định nghĩa biến, lưu trữ các giá trị của chúng trong một mảng. Khi một biến được tìm thấy và nếu giá trị của nó tồn tại, nó sẽ được thay thế bằng giá trị
$font: arial, sans-serif; $main-color: #3D7169; $secondary-color: #000; h1 { font: 200% $font; color: $main-color; } p { background: $secondary-color; color: $main-color; font-family: $font; padding: 10px; }2
Rất nhiều mã ở đây. Hãy xem xét nó một cách chi tiết
$font: arial, sans-serif; $main-color: #3D7169; $secondary-color: #000; h1 { font: 200% $font; color: $main-color; } p { background: $secondary-color; color: $main-color; font-family: $font; padding: 10px; }3
Ở đây, chúng tôi áp dụng một biểu thức chính quy cho dòng hiện tại. Biểu thức này khớp và trích xuất các mẫu như
/css/styles.css5 [và một số biến thể] hoặc
/css/styles.css6 trong dòng hiện tại. Tôi sẽ không đi xa hơn ở đây. Cụm từ thông dụng là một chủ đề phức tạp xứng đáng được hướng dẫn riêng. Hàm Preg_match_all trả về tất cả các kết quả phù hợp
Ví dụ: dòng thứ ba trong tệp CSS của dự án của chúng tôi -
$font: arial, sans-serif; $main-color: #3D7169; $secondary-color: #000; h1 { font: 200% $font; color: $main-color; } p { background: $secondary-color; color: $main-color; font-family: $font; padding: 10px; }4
- sẽ trả về mảng này
$font: arial, sans-serif; $main-color: #3D7169; $secondary-color: #000; h1 { font: 200% $font; color: $main-color; } p { background: $secondary-color; color: $main-color; font-family: $font; padding: 10px; }5
Chúng tôi giả sử rằng
/css/styles.css7 chứa kết quả khớp hoàn chỉnh,
/css/styles.css8 chứa tên của các biến và
/css/styles.css9 chứa các giá trị. Hãy tổ chức mảng để giữ cho nó rõ ràng hơn
$font: arial, sans-serif; $main-color: #3D7169; $secondary-color: #000; h1 { font: 200% $font; color: $main-color; } p { background: $secondary-color; color: $main-color; font-family: $font; padding: 10px; }6
Bây giờ nó là pha lê
$font: arial, sans-serif; $main-color: #3D7169; $secondary-color: #000; h1 { font: 200% $font; color: $main-color; } p { background: $secondary-color; color: $main-color; font-family: $font; padding: 10px; }7
Chúng tôi đếm có bao nhiêu biến đã được tìm thấy trong dòng hiện tại
$font: arial, sans-serif; $main-color: #3D7169; $secondary-color: #000; h1 { font: 200% $font; color: $main-color; } p { background: $secondary-color; color: $main-color; font-family: $font; padding: 10px; }8
Bằng cách này, chúng ta có thể duyệt qua từng mục nhập của mảng biến. Để làm cho mọi thứ rõ ràng hơn, chúng tôi đặt một số biến mới để xử lý tên và giá trị
$font: arial, sans-serif; $main-color: #3D7169; $secondary-color: #000; h1 { font: 200% $font; color: $main-color; } p { background: $secondary-color; color: $main-color; font-family: $font; padding: 10px; }9
Định nghĩa khác nhau
Nếu
enhanced_css.php?css=/css/styles.css0 không trống, chúng ta đang phải đối mặt với một định nghĩa biến. Vì vậy, chúng tôi phải lưu trữ giá trị này trong thuộc tính
enhanced_css.php?css=/css/styles.css1
LoadModule rewrite_module modules/mod_rewrite.so0
Lưu ý rằng chúng ta truyền lại giá trị biến trong phương thức
/css/styles.css4. Bằng cách này, các biến tiềm ẩn khác cũng sẽ được xử lý.
Các giá trị được lưu trữ trong mảng
enhanced_css.php?css=/css/styles.css1 với tên của biến là khóa. Ở cuối tập lệnh, mảng
enhanced_css.php?css=/css/styles.css1 trông như thế này.
LoadModule rewrite_module modules/mod_rewrite.so1
Ứng dụng biến
Nếu
enhanced_css.php?css=/css/styles.css0 trống, chúng tôi đang đối mặt với một ứng dụng thay đổi. Chúng tôi kiểm tra xem biến này có tồn tại trong mảng giá trị không. Nếu đúng như vậy, chúng tôi thay thế tên biến bằng giá trị của nó
LoadModule rewrite_module modules/mod_rewrite.so2
Sự thay thế này có vẻ phức tạp bất thường. Trên thực tế là không, sự thay thế này chỉ đảm nhiệm việc thay thế
/css/styles.css6 nếu nó được theo sau bởi một ký tự không phải [\W] hoặc một ký tự cuối dòng [\z]
Cuối cùng, chúng tôi xóa toàn bộ nội dung phù hợp để giữ cho biểu định kiểu rõ ràng và hợp lệ. Dòng đã xử lý được trả về
LoadModule rewrite_module modules/mod_rewrite.so3
Phương pháp hiển thị
Phương pháp này hiển thị biểu định kiểu được phân tích cú pháp. Để được cung cấp cho trình duyệt dưới dạng nội dung CSS, tiêu đề được đặt thành loại nội dung
enhanced_css.php?css=/css/styles.css7
LoadModule rewrite_module modules/mod_rewrite.so4
Bước 4 - Lưu trữ kết quả
Tại thời điểm này, mọi thứ đang hoạt động hoàn hảo. Tuy nhiên, thao tác này có thể rất tốn CPU khi được sử dụng với các trang web lớn hơn
Rốt cuộc, chúng ta không cần phân tích cú pháp các tệp CSS mỗi khi trình duyệt cần. Quy trình chỉ cần được chạy lần đầu tiên để tạo bộ đệm hoặc nếu tệp CSS gốc đã được sửa đổi kể từ lần hoạt động bộ nhớ đệm cuối cùng. Mặt khác, kết quả được hiển thị trước đó có thể được sử dụng lại. Vì vậy, hãy thêm một giải pháp bộ nhớ đệm vào tập lệnh của chúng ta
Thêm một thư mục mới có tên cache vào dự án. Nếu cần, hãy cho thư mục này quyền được viết bằng cách áp dụng một
enhanced_css.php?css=/css/styles.css8. Bây giờ dự án của chúng ta sẽ trông như thế này
Phương pháp bộ đệm
Một phương pháp mới đã được thêm vào. Chức năng của nó sẽ là
- đọc tệp bộ đệm nếu nó tồn tại
- tạo và lưu trữ kết quả hiển thị
- cập nhật tệp bộ đệm hiện có nếu tệp CSS đã được sửa đổi
Tất cả logic được xử lý theo phương pháp dưới đây
LoadModule rewrite_module modules/mod_rewrite.so5
Hãy giải thích mã này. Tên tệp bộ đệm được tính từ tên tệp CSS gốc được lưu trước đó trong thuộc tính
/css/styles.css3. Cuối cùng, chúng tôi sử dụng chức năng urlencode
LoadModule rewrite_module modules/mod_rewrite.so6
Bằng cách đó, một tệp CSS như
LoadModule rewrite_module modules/mod_rewrite.so7
sẽ được lưu trữ như
LoadModule rewrite_module modules/mod_rewrite.so8
Chúng tôi cần kiểm tra xem tệp bộ đệm đã tồn tại chưa [file_exists] và nếu có, hãy kiểm tra xem ngày tạo của nó có trước ngày sửa đổi [filemtime] của tệp CSS không
LoadModule rewrite_module modules/mod_rewrite.so9
Nếu không, chúng tôi tạo/tạo lại tệp bộ đệm
RewriteEngine on RewriteRule ^[.*\.css]$ enhanced_css.php?css=$00
Bây giờ phần còn lại của lớp phải đối phó với phương pháp mới này. Hai phương pháp cần phải được sửa đổi
RewriteEngine on RewriteRule ^[.*\.css]$ enhanced_css.php?css=$01
Phương pháp phân tích cú pháp hiện kiểm tra bộ đệm trước để chạy toàn bộ quá trình. Nếu không có sẵn bộ đệm, tệp CSS sẽ được phân tích cú pháp, nếu không, nội dung được lưu trong bộ đệm sẽ được trả về
RewriteEngine on RewriteRule ^[.*\.css]$ enhanced_css.php?css=$02
Cuối cùng, phương thức hiển thị đúng nội dung [mới hoặc được lưu trong bộ nhớ cache] được cung cấp bởi phương thức bộ nhớ đệm
Bộ nhớ đệm trình duyệt
Vì lý do bảo mật [phiên, nội dung động], các trình duyệt không lưu kết quả PHP trong bộ đệm của chúng. Một tệp CSS thực sẽ được
được lưu vào bộ nhớ cache nhưng không phải là kết quả của tập lệnh của chúng tôi. Chúng tôi phải đối phó với trình duyệt để mô phỏng hành vi của tệp CSS thực. Hãy thêm một số dòng vào hàm tạo.
RewriteEngine on RewriteRule ^[.*\.css]$ enhanced_css.php?css=$03
Chúng tôi sao chép ngày sửa đổi cuối cùng của tệp CSS gốc vào kết quả của chúng tôi trong tiêu đề.
Về cơ bản, các tiêu đề được trình duyệt và máy chủ trao đổi trước khi cung cấp dữ liệu.
Khi trình duyệt có một bản sao của một trang trong bộ đệm, trình duyệt sẽ gửi một yêu cầu
$font: arial, sans-serif; $main-color: #3D7169; $secondary-color: #000; h1 { font: 200% $font; color: $main-color; } p { background: $secondary-color; color: $main-color; font-family: $font; padding: 10px; }00 đến máy chủ
với ngày mà
$font: arial, sans-serif; $main-color: #3D7169; $secondary-color: #000; h1 { font: 200% $font; color: $main-color; } p { background: $secondary-color; color: $main-color; font-family: $font; padding: 10px; }01 đã đưa ra trước đó. . Nếu ngày khớp nhau thì nội dung
đã cập nhật và không cần tải lại; .
Một cách ngắn hơn là chỉ cần thêm
$font: arial, sans-serif; $main-color: #3D7169; $secondary-color: #000; h1 { font: 200% $font; color: $main-color; } p { background: $secondary-color; color: $main-color; font-family: $font; padding: 10px; }03 vào tệp. Nội dung sẽ được lưu vào bộ nhớ cache
1 giờ [3600 giây] bởi bất kỳ trình duyệt nào.
Sự kết luận
Xong. Giờ đây, bạn có thể kiểm tra một trong các biểu định kiểu trên máy chủ của mình. Ví dụ: http. // localhost/myproject/css/phong cách. css