Chỉ dẫn nhanh: Tạo CSS trực tiếp cho AMP dễ dàng hơn với Jade hoặc PHP

() translation by (you can also view the original English article)

Dự án AMP cung cấp một cách tương đối dễ dàng để thực hiện một số tối ưu hóa trang web khác nhau. Bạn có thể tìm hiểu chi tiết về dự án AMP là gì và nhiệm vụ của nó trong bài Dự án AMP: Liệu nó có làm cho trang web của bạn trở nên nhanh hơn?.

Để tóm tắt cách AMP được cài đặt, bạn sẽ:

Bắt đầu với một số code mẫu được nạp ở trong JavaScript theo yêu cầu
Sử dụng một số phần tử HTML tùy biến
Làm theo một số quy cách thực hiện tốt nhất

Một khi bạn đã thực hiện xong ba điều ở trên thì phần còn lại của quá trình tối ưu hóa được giải quyết cho bạn đằng sau hậu trường. Ngoài ra, các trang AMP phải vượt qua một bài kiểm tra xác nhận, và để vượt qua bài kiểm tra này tất cả các quy cách thực hiện tốt nhất của nó phải được tuân thủ triệt để.

Tuy nhiên, một trong những quy tắt của AMP có thể hơi khó sử dụng trong suốt quá trình phát triển, và đó là yêu cầu mà tất cả các CSS tuỳ biến được nạp trực tiếp bên trong phần head giữa một thẻ <style amp-custom>...</style>.

Nếu bạn tự viết CSS của bạn trực tiếp vào phần head của trang, bạn sẽ phải đối mặt với các vấn đề và các hạn chế. Nếu bạn cần thay đổi CSS trên nhiều trang web nó sẽ rất mất thời gian, và bạn sẽ không có tùy chọn sử dụng các công cụ CSS nâng cao ví dụ như preprocessor hoặc minifier.

Vì lý do này, nếu bạn thấy mình tạo ra nhiều hơn một mẫu template AMP thì bạn sẽ muốn tìm kiếm một cách để viết CSS của bạn trong một stylesheet bên ngoài để duy trì tiến trình làm việc bình thường của bạn, mà vẫn vượt qua sự kiểm tra hợp lệ của AMP bằng cách di chuyển tất cả CSS của bạn vào phần head.

Trong chỉ dẫn nhanh này, bạn sẽ tìm hiểu hai cách để bạn có thể làm điều đó.

Cách 1: Với Jade

Jade là một ngôn ngữ mà bạn có thể xem nó như là một preprocessor cho HTML. Nó cho phép bạn viết HTML ngắn gọn, hình thức viết tắt được biên dịch thành HTML thông thường, nhưng quan trọng nhất là nó cũng cho phép bạn nhập các tập tin CSS và xuất ra bất cứ nơi đâu mà bạn muốn.

Trong cách này, bạn sẽ viết các template AMP của bạn bằng cú pháp Jade, và nhập các tập tin CSS bên ngoài vào phần head của mỗi template. Đây là một trong những cách tốt nhất mà bạn có thể sử dụng để tạo ra các trang AMP nếu bạn cần xuất ra HTML tĩnh. Dưới đây là cách thực hiện.

Tạo một Stylesheet bên ngoài

Việc đầu tiên bạn cần làm là thiết lập các stylesheet bên ngoài mà bạn muốn nhập vào trong các template AMP của bạn. Tạo một thư mục để chứa dự án của bạn, sau đó bên trong nó hãy tạo ra một stylesheet mới và đặt tên nó là "style.css".

Thêm một số CSS cơ bản vào stylesheet của bạn, bất cứ điều gì mà bạn chọn miễn là tập tin của bạn không lớn hơn 50kb, việc này là để tuân theo các quy tắc kiểm tra của AMP.

Nếu bạn chỉ muốn thử một số CSS để giúp bạn làm quen, thì thêm như sau:

1	body { background: #3498db; color: #fff }

Mẫu code Jade cho AMP với CSS Import

Bước tiếp theo là thêm code mẫu AMP vào, nhưng với hai sự khác biệt đáng kể. Một, chúng ta sẽ sử dụng cú pháp Jade thay vì HTML thuần tuý, và hai, chúng ta sẽ nhập tập tin "style.css" bên ngoài của chúng ta .

Tạo một tập tin mới bên trong thư mục dự án có tên là "index.jade" và thêm code sau đây vào:

doctype
html(amp, lang="en")
  head
    meta(charset="utf-8")
    title AMP via Jade
    link(rel="canonical", href="/index.html")
    meta(name="viewport", content="width=device-width,minimum-scale=1,initial-scale=1")
    script(type="application/ld+json").
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    | 
    |<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    script(async, src="https://cdn.ampproject.org/v0.js")
    style(amp-custom)
      include style.css
  body
    h1 This is a Jade based AMP page.

Đoạn code ở trên giống với những gì bạn sẽ thấy trong tài liệu hướng dẫn AMP, chỉ khác là chuyển đổi thành cú pháp của Jade.

Bạn sẽ nhận thấy ở phía dưới cùng của đoạn code này chúng ta có:

1	style(amp-custom)
2	include style.css

Dòng style(amp-custom) sẽ xuất ra các thẻ <style amp-custom>...</style> theo yêu cầu.... Dòng thụt vào sau đó bạn sẽ thấy include style.css. Việc này tận dụng tính năng include của Jade, và sẽ nhập tất cả nội trong tập tin "style.css" của bạn và xuất nó vào giữa các thẻ style.

Biên dịch Jade bằng Prepros

Bây giờ bạn đã thiết lập tất cả các code theo yêu cầu cho phương pháp này, và bạn chỉ cần biên dịch template Jade của bạn. Bạn có thể làm điều này thông qua một trình chạy tác vụ như Gulp hoặc Grunt, hoặc thông qua một ứng dụng biên dịch.

Đối với các dự án tương đối đơn giản nơi mà bạn chỉ cần có được các tập tin đã được biên dịch, tôi khuyên bạn nên sử dụng một ứng dụng được gọi là Prepros. Bạn chỉ cần phiên bản miễn phí/dùng thử cho mục đích của phương pháp này.

Một khi bạn đã cài đặt và chạy Prepros, tất cả những gì bạn phải làm là kéo thư mục dự án vào trong giao diện của nó và nó sẽ tìm kiếm tập tin Jade của bạn. Nó sẽ tự động theo dõi những sự thay đổi trong dự án của bạn, vì vậy cần lưu tập tin Jade hoặc CSS và Prepros sẽ biên dịch template của bạn.

Bây giờ bạn sẽ nhìn thấy một tập tin mới xuất hiện trong dự án của bạn với tên là "index.html", và bên trong nó bạn sẽ thấy code HTML mẫu được biên dịch xong cùng với mã CSS trực tiếp:

<!DOCTYPE html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP via Jade</title>
    <link rel="canonical" href="/index.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script> 
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <style amp-custom>body { background: #3498db; color: #fff }
    </style>
  </head>
  <body>
    <h1>This is a Jade based AMP page.</h1>
  </body>
</html>

Xem trước trang web với MAMP

Điều tiếp theo bạn sẽ muốn làm là kiểm tra trang web của bạn. Cho dù bạn có thể chỉ cần xem tập tin AMP của bạn trong trình duyệt ngay từ ổ đĩa của bạn, nhưng tốt nhất bạn nên xem trang web của bạn với một máy chủ cục bộ, có nghĩa là mô phỏng một máy chủ web ở trên máy tính của bạn.

Prepros đi kèm với một máy chủ cục bộ cho phép xem trước, nó tự động tải lại trang khi có sự thay đổi trong dự án của bạn. Tuy nhiên, bạn không thể sử dụng nó với AMP (không may là vậy). Lý do là Prepros nạp một số JavaScript vào trong bản xem trước của nó để kích hoạt live reload, nhưng do thực tế AMP không cho phép mã JavaScript tuỳ biến ở trong trang nên trình xác nhận sẽ nhận ra mã này và sau đó đưa ra một lỗi.

Vì lý do này, cách mà tôi khuyến cáo là xem trước trang web của bạn ở trên máy chủ cục bộ bằng cách sử dụng MAMP cho Mac hoặc Windows. Bạn sẽ làm theo tiến trình tương tự như chúng ta đã làm ở trên, sự khác biệt duy nhất là bạn sẽ tạo thư mục dự án của bạn bên trong thư mục "htdocs" của MAMP trước khi kéo nó vào trong giao diện của Prepros. Khi MAMP đang chạy, thì điều này sẽ kích hoạt để cho phép bạn xem nó tại địa chỉ http://localhost:8888/tên dự án.

Với cách này bạn có được hai thứ tốt nhất: một máy chủ cục bộ để xem trước mà không gặp vấn đề với MAMP, và tự động biên dịch Jade với Prepros.

Cách 2: Với PHP

Nếu bạn không cần tạo ra các template HTML tĩnh thì bạn có một tuỳ chọn sử dụng PHP để tự động xuất ra stylesheet của bạn bên trong phần head. Cách này tất nhiên ít rắc rối hơn một chút, nhưng chỉ phù hợp nếu dự án của bạn yêu cầu (và máy chủ của bạn) hỗ trợ PHP.

Nhân đây, ngay cả nếu bạn chưa từng sử dụng PHP trước đây và chỉ muốn viết mã HTML đơn giản thay vì sử dụng cú pháp của Jade, thì bạn vẫn có thể sử dụng kỹ thuật này.

Bắt đầu bằng cách tạo một tập tin index và thêm vào nó bằng code mẫu của AMP, nhưng thay vì đặt tên tập tin là "index.html" thì bạn đặt tên nó là "index.php":

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Nếu bạn đã từng làm việc trên một template AMP thì bạn chỉ cần đổi tên tập tin, thay đổi đuôi mở rộng thành ".php", bằng cách đó chuyển đổi nó thành một tập tin PHP. Ví dụ, "about.html" nên được đặt tên là "about.php". (Chỉ cần đảm bảo là bạn thay đổi phần đuôi mở rộng trên bất kỳ liên kết bên trong nào.)

Bây giờ tạo một stylesheet bên ngoài với tên là "style.css" ở trong thư mục gốc của bạn. Nếu bạn có một template mà bạn đang làm việc với nó, hãy cắt bất kỳ mã CSS nào mà bạn hiện có ở giữa thẻ <style amp-custom>...</style> và dán nó vào bên trong stylesheet bên ngoài của bạn.

Để kéo CSS bên ngoài của bạn vào trong phần head của tập tin AMP, chỉ cần dán dòng code PHP này ở giữa thẻ <style amp-custom>...</style>:

1	<?php readfile( getcwd() . "/style.css"); ?>

Chia nhỏ

Nếu bạn không hứng thú với PHP thì bạn có thể chỉ cần như vậy thôi, biết được đoạn code cho phép PHP tìm nạp stylesheet của bạn từ máy chủ, đọc nội dung của nó, sau đó xuất nó trực tiếp. Tuy nhiên nếu bạn muốn biết nhiều hơn về đoạn code, hãy chia nhỏ nó.

Đầu tiên, chúng ta có thẻ mở và đóng của PHP <?php ... ?>. Những thứ này cho phép máy chủ biết rằng những gì ở giữa hai thẻ đó là mã PHP mà không phải là HTML bình thường.

Sau đó chúng ta sử dụng hàm readfile(). Hàm này tìm kiếm tập tin cụ thể giữa cặp dấu ngoặc đơn, tìm nạp nó từ máy chủ, đọc nội dung của nó và sau đó xuất nội dung đó trực tiếp.

Ở giữa cặp dấu ngoặc đơn chúng ta có hàm getcwd(). Hàm này lấy đường dẫn đến thực mục hiện tại, đó là thư mục chứa tập tin PHP của bạn.

Sau đó chúng ta có chuỗi (chuỗi văn bản bình thường) "/style.css" xác định tên của stylesheet, tương đối với vị trí của tập tin PHP. sau đó ở giữa chuỗi này và hàm getcwd() chúng ta đặt một dấu chấm . nối hai cái lại với nhau để tạo ra đường dẫn đầy đủ đến stylesheet của bạn. Ví dụ, trong MAMP xem đường dẫn sẽ gần giống như thế này “/Applications/MAMP/htdocs/myproject/style.css”.

Bạn có thể sử dụng đoạn code này trong các template PHP khi bạn cần, và bất kỳ sự thay đổi nào đối với stylesheet bên ngoài sẽ được xuất ra trên tất cả các template của bạn.

Xem trước trang với MAMP

Tương tự như phướng pháp dùng Jade, một cách tuyệt vời để xem trước trang AMP dựa trên PHP của bạn là sử dụng MAMP, nó hỗ trợ đầy đủ PHP. Cài đặt MAMP và tạo thư mục dự án của bạn bên trong thư mục "htdocs" và bạn sẽ có thể xem trước trang của bạn tại URL như http://localhost:8888/tên dự án mà không cần thêm bước cài đặt nào.

Tổng kết

Bây giờ chúng ta đã khái quát hai cách mà bạn có thể giữ stylesheet bên ngoài và tiến trình CSS bình thường của bạn mà vẫn vượt qua sự xác nhận của AMP bằng cách di chuyển CSS trực tiếp của bạn. Hãy tóm tắt nhanh mỗi cách.

Cách 1: Jade
Viết các template của bạn bằng cú pháp Jade và sử dụng include để xuất một stylesheet bên ngoài trong phần head. Biên dịch nó với Prepros và xem trước với MAMP.
Cách 2: PHP
Viết template của bạn bằng cú pháp HTML bên trong các tập tin với đuôi mở rộng là ".php". Bao gồm một đoạn code PHP để xuất ra stylesheet bên ngoài của bạn ngay trong phần head. Xem trước với MAMP.

Cách mà bạn chọn, nó sẽ phụ thuộc vào đặc điểm của dự án, nhưng nói chung:

Nếu bạn làm việc trên một trang web tĩnh và bạn sử dụng Jade hoặc muốn học thêm, thì phương thức thứ nhất là hợp với bạn nhất.
Nếu trang web của bạn sẽ (hoặc có thể) trở thành trang web động cùng với truy xuất đến PHP, hoặc bạn không hứng thú với Jade, thì đoạn code nhỏ của cách thứ hai là một giải pháp nhanh và đơn giản cho bạn.

Với một trong hai cách này bạn có thể phát triển CSS theo cách mà bạn vẫn thường làm, với sự thay đổi ngay lập tức có tác dụng đối với toàn bộ template và truy xuất đến các công cụ preprocessor & tối ưu hoá, trong khi vẫn sử dụng CSS trực tiếp theo cách phù hợp với AMP.

Tôi hy vọng điều đó giúp làm cho tiến trình phát triển với AMP của bạn trở nên trơn tru hơn một chút!