5

Hugo cung cấp một không gian làm việc tốt để tạo bố cục và nội dung. Tôi rất hài lòng với các tùy chọn có sẵn để tùy chỉnh trang web. Tuy nhiên, Hugo không có tiếng nói về cách cấu trúc CSS và JavaScript để có thể đưa nó vào trang web của chúng tôi. Trong Hugo, các nút DOM đã được tạo và chúng ta cần một cơ chế mà chúng ta có thể sử dụng để thêm trình lắng nghe sự kiện vào các nút DOM này. 

Các khung ứng dụng Trang đơn (SPA) như Angular và React tạo các nút DOM và xác định các trình lắng nghe sự kiện trong bộ điều khiển của thành phần. Để đính kèm trình lắng nghe sự kiện vào cây DOM hiện có, tôi đã bắt gặp một khung JavaScript có tên là FlightJS . Đó là một khung được tạo bởi những người ở Twitter giúp thêm hành vi vào các nút DOM. Đó là một khung tối thiểu không quy định cách thức các nút DOM được hiển thị cũng như không áp đặt các khía cạnh khác của ứng dụng web, như định tuyến, xử lý yêu cầu / phản hồi, cấu trúc dữ liệu để các thành phần khác có thể sử dụng nó, v.v. một cơ chế cho phép chúng ta thêm hành vi vào các nút DOM hiện có.

Đây chính xác là những gì tôi cần để xây dựng trang web tĩnh của mình. Chúng ta hãy xem cách tôi đã cấu trúc trang web của mình bằng SCSS , FlightJSGulp để xây dựng nội dung tĩnh: 

--src
  --js
    --pages
      --home
        --index.js
    --vendor
      --flight.js
      --jquery.js
  --styles
    --pages
      --home
        --index.scss
      --vendor
        --index.scss

Tôi đã tạo một thư mục ' src ' trong trang Hugo của mình, nơi sẽ chứa tất cả các tệp JavaScript và SCSS. Tài liệu của Hugo đề nghị rằng chúng ta cần giữ tất cả nội dung tĩnh (JavaScript, CSS, hình ảnh, tệp phông chữ, v.v.) trong thư mục ' tĩnh '. Ở đây, thư mục ' src ' sẽ chứa mã phát triển, tức là các tệp SCSS chưa được xử lý và các tệp JavaScript không được rút gọn. Mặt khác, thư mục ' tĩnh ' sẽ chứa mã CSS (SCSS đã xử lý) và các tệp JavaScript được thu nhỏ sẵn sàng sản xuất.

Trong ví dụ của chúng tôi, mã FlightJS có thể được bao gồm trong tệp ' js / page / home / index.js '. Đây là mã tạo ra thành phần FlightJS , xác định trình xử lý sự kiện ' nhấp chuột ' và đính kèm thành phần đó vào nút DOM hiện có:

// create a flight component
var AboutMeBtn = flight.component(aboutMe);

// component definition
function aboutMe () {
  // event listener for the click event
  this.onAboutMeBtnClick = function () {
    alert('About me');
  };

  // after the component has been initialized, attched the event listener
  this.after('initialize', function () {
    this.on('click', this.onAboutMeBtnClick);
  });
}

// attach the component to the DOM node with id - aboutMeBtn
AboutMeBtn.attachTo('#aboutMeBtn');

FlightJS có sự phụ thuộc vào jQuery và do đó bạn thấy jquery.js có trong thư mục ' nhà cung cấp '. Rất nhiều điều có thể được thực hiện với FlightJS, tuy nhiên, tôi đang hạn chế bài đăng này để xây dựng một bằng chứng về khái niệm thể hiện chức năng tối thiểu.

Bước tiếp theo là thêm một quy trình xây dựng để biên dịch các tệp SCSS, nén và ghép các tệp JS và tạo một hàm băm cho các tệp này để phá vỡ bộ đệm của trình duyệt. Tôi đang sử dụng GulpJS để tạo bản dựng đường ống và đây là chuỗi:

  1. Biên dịch các tệp SCSS - biên dịch riêng các tệp ' trang ' và 'nhà cung cấp'.
  2. Nối các tệp CSS liên quan đến nhà cung cấp.
  3. Di chuyển các tệp được tạo vào thư mục ' static / css '.
  4. Nén các tệp JS - các tệp ' trang ' và ' nhà cung cấp ' riêng biệt.
  5. Di chuyển các tệp được tạo vào thư mục ' static / js '.
  6. Sử dụng ' gulp-hash ' để tạo hàm băm cho các tệp JS và CSS được tạo. Tạo một tệp kê khai băm và đặt nó vào thư mục ' dữ liệu ' ( Tài sản_js.json và tài sản_css.json ).

Các gulpfile.js được sử dụng để xây dựng đường ống có thể được giới thiệu ở đây: https://github.com/sagar-ganatra/hugo_example/blob/master/gulpfile.js

Sau khi biên dịch và tạo nội dung trong thư mục ' tĩnh ', bạn có thể tham khảo các tệp này trong các mẫu bố cục của mình:

<link href="{{ .Site.BaseURL }}css/vendor/vendor.css }}" rel="stylesheet" type="text/css"> 
<script src="{{ .Site.BaseURL }}js/vendor/vendor.js }}"></script> 

Ở đây, biến mẫu {{.Site.BaseURL}} sẽ được thay thế bằng baseUrl được xác định trong tệp config.toml và khi trình tạo tạo tệp tĩnh, nó sẽ được tham chiếu đến tệp '<site> / css / eller / eller.css 'và' <site> /js/vendor/vendor.js '. Vì chúng tôi đang thêm một hàm băm vào các tệp này, nên không thể tham khảo các tệp ' eller.js ' và ' eller.css ' như thế này. Tuy nhiên, chúng ta có thể sử dụng các tệp kê khai được tạo khi tạo hàm băm để giới thiệu các tệp này.

Như đã lưu ý ở bước cuối cùng của quy trình xây dựng Gulp, chúng tôi đang tạo các tệp kê khai ' Tài sản_js.json ' và ' Tài sản_css.json ' trong thư mục ' dữ liệu '. Nội dung là một cấu trúc JSON có chứa các tham chiếu băm.

{
  "pages/home.js":"pages/home_4740e2cf.js",
  "pages/home_debug.js":"pages/home_debug_3f723556.js",
  "vendor/vendor.js":"vendor/vendor_f8da36b2.js",
  "vendor/vendor_debug.js":"vendor/vendor_debug_b3868b34.js"
}

Hugo có thể đọc các tệp trong thư mục ' dữ liệu ' và nó hỗ trợ các định dạng tệp TOML , YAMLJSON . Bây giờ chúng tôi có thể sửa đổi mẫu của chúng tôi để có được giới thiệu băm từ các tệp tài sản:

<link
    href="{{ .Site.BaseURL }}css/{{ index .Site.Data.code_assets.assets_css "vendor/vendor.css" }}"
    rel="stylesheet"
    type="text/css">

Và:

<script>
    src="{{ .Site.BaseURL }}js/{{ index .Site.Data.code_assets.assets_js "vendor/vendor.js" }}">
</script>

Biến mẫu ' .Site.Data.code_assets.assets_js ' sẽ chứa tham chiếu đến các giá trị trong tệp ' data / code_assets / property_js.json ' và khóa tham chiếu ' eller / Vend.js ' sẽ trả về giá trị được gán cho nó ( nhà cung cấp / nhà cung cấp_f8da36b2.js ).

Mã được chia sẻ tại kho GitHub của tôi tại đây:  https://github.com/sagar-ganatra/hugo_example

|