Nội dung
- Cài đặt trang web thứ mười một - Cấu trúc folder - Bố cục - Cấu hình Mười bảy - Sử dụng Starter - Học nhiều hơn nữa

Thứ năm, 02/04/2020 | 00:00 GMT+7

Tham quan ngắn gọn về máy phát trang web tĩnh 11 mươi

Máy phát điện tại chỗ tĩnh rất à la mode ngay bây giờ và với JAMStack trở thành một nhiều hơn khả thi thay thế cho nhiều dự án web những ngày này, không có gì lạ!

JAMStack hay không, trình tạo trang tĩnh (SSG) cung cấp một số lợi thế lớn so với các CMS truyền thống hơn và khi nói đến SSG, có rất nhiều tùy chọn để bạn lựa chọn . Jekyll, Hugo, Gatsby, Next.jst, Sapper,… Ôi trời!

Gần đây tôi đã đi mua sắm xung quanh để xem đâu sẽ là tùy chọn trình tạo trang web tĩnh tốt nhất cho một dự án của tôi có tên là Spiral11 . Đầu tiên tôi nghiêng về Gatsby vì nó có một số tính năng hiện đại như tối ưu hóa hình ảnh, nhưng sau đó tôi đã nhìn sâu hơn vào Eleventy và yêu thích.

11ty rất dễ sử dụng, không cản trở bạn và phun ra chính xác những gì bạn đưa vào, vì vậy không có gì ngạc nhiên hoặc có mã ẩn. Ở mức cơ bản nhất, 11ty chỉ biên dịch các file mà nó tìm thấy từ folder làm việc của bạn thành các file HTML tĩnh. Ngoài ra, vì nó được viết bằng JavaScript, bạn có quyền truy cập vào toàn bộ npm về các gói bạn có thể sử dụng trong dự án của bạn .

Hãy tham quan và xem nó hoạt động như thế nào…

Cài đặt trang web thứ mười một

Bắt đầu bằng cách cài đặt Eleventy trên phạm vi global trên máy của bạn bằng npm hoặc Yarn:

# with npm
$ npm install -g @11ty/eleventy

# with Yarn
$ yarn global add @11ty/eleventy

Đến đây bạn có thể chạy lệnh eleventy trong bất kỳ folder nào chứa file mẫu hợp lệ.

Ví dụ: giả sử ta có một folder được gọi là best-site-ever , với file index.md trong đó:

index.md

## Chomp Chomp **Chomp** 🐊🐊🐊

Đến đây bạn có thể chạy eleventy trong folder đó, bạn sẽ thấy rằng Eleventy tạo một folder _site với index.html trong đó chứa những gì ta mong đợi:

_site / index.html

<h2>Chomp Chomp <strong>Chomp</strong> 🐊🐊🐊</h2>

Nói về ngôn ngữ mẫu, bạn có rất nhiều lựa chọn. Bạn có thể sử dụng Markdown, Nunjucks, Liquid, Mustache,… Và bạn có thể trộn và kết hợp, vì vậy bạn có thể có một số file được viết bằng Liquid và một số file trong Nunjucks và Eleventy sẽ xử lý mọi thứ tốt.

mười một tùy chọn lệnh

Lệnh eleventy cũng chấp nhận một vài cờ hữu ích. Ví dụ:

–Watch : Viết lại các file kết quả khi các file nào trong dự án của bạn thay đổi.
–Serve : Cung cấp trang web đã xuất thông qua web server local và theo dõi các thay đổi.
–Dryrun : Kiểm tra quá trình xử lý mà không thực sự xuất ra các file nào.
–Output : Chỉ định một vị trí kết quả khác.

Điều đó nghĩa là rất thường xuyên, khi làm việc local , bạn cần phục vụ và xây dựng lại các thay đổi bằng lệnh sau:

$ eleventy --serve

Cấu trúc folder

Với Eleventy, bạn không chỉ tự do chọn ngôn ngữ mẫu yêu thích của bạn mà còn có thể chọn cấu trúc folder của riêng mình.

Giả sử ta có một file đánh dấu khác trong dự án của bạn , nhưng lần này nó nằm trong hai folder con lồng nhau:

/one/two/blog-post.md

One day *I will write* my 1st blog post!

Bây giờ nếu ta chạy eleventy , kết quả trong _site sẽ giống như sau:

📁 _site/
  index.html
  📁 one/
    📁 two/
      📁 blog-post/
        index.html

Vì vậy, bạn sẽ nhận thấy rằng cấu trúc folder được giữ lại, tên file được sử dụng làm slug / URI và Eleventy tạo một folder cho mỗi mẫu được xuất ra với file index.html bên trong có chứa kết quả HTML.

Điều gì sẽ xảy ra nếu ta muốn các file của bạn được tổ chức trong các folder được phản ánh khác nhau trong kết quả cuối cùng? Dễ dàng, ta chỉ có thể chỉ định liên kết cố định cho một mẫu cụ thể bên trong phần vấn đề phía trước ở trên cùng.

/one/two/blog-post.md

---
permalink: '/blog-post/'
---

One day *I will write* my 1st blog post!

Chỉ cần chạy lại eleventy và bây giờ bạn sẽ thấy rằng bây giờ blog-post xuất hiện ở cấp cơ sở trong _site . Bằng cách này, việc chỉ định một liên kết cố định cho phép bạn hoàn toàn linh hoạt.

Vấn đề phía trước

Nói về vấn đề phía trước, bạn có thể đặt tất cả các loại metadata vào đó, sau đó sẽ có sẵn cho các bố cục (sẽ nói thêm về điều đó sau). Ví dụ, vấn đề trước tiên là bạn sẽ chỉ định những thứ như tiêu đề, mô tả meta / đoạn trích và các thẻ cho một bài đăng, và hầu hết các khóa có thể được đặt tên bất kỳ thứ gì bạn muốn.

Đây là một ví dụ để minh họa:

/one/two/blog-post.md

---
title: "My first blog post 😊"
date: 2020-04-02
excerpt: "This post talks about how one day I'll write a 1st post."
permalink: '/blog-post/'
emotion: happy
tags:
  - blog
  - getting-started
---

One day *I will write* my 1st blog post!

Bộ sưu tập

Tôi sẽ không đi quá sâu về chủ đề ở đây và tôi mời bạn đọc tài liệu để tìm hiểu thêm, nhưng Eleventy sử dụng các thẻ bạn cung cấp ở vấn đề chính để điền các bộ sưu tập, có thể được lặp lại trong các mẫu khác như, nói , các trang chuyên mục.

Ngoài ra còn có một bộ sưu tập đặc biệt được gọi là all theo mặc định bao gồm mọi bài đăng. Với all bộ sưu tập, bạn có thể kết thúc với một cái gì đó giống như một sơ đồ trang web bao gồm các bài đăng / trang mà bạn không muốn, vì vậy có một cách dễ dàng để chọn không tham gia đưa bài đăng hoặc trang vào bộ sưu tập:

---
eleventyExcludeFromCollections: true
---

Bố cục

Cho đến nay những gì ta đã làm chỉ là xuất HTML từ các file đánh dấu mà ta đã tạo. Hầu hết thời gian mặc dù các file đánh dấu như vậy nên được bao bọc trong một bố cục để cung cấp những thứ như HTML soạn sẵn, tiêu đề, thanh chuyển , thanh bên và chân trang.

Theo mặc định, các mẫu bố cục sẽ nằm trong folder _includes .

Hãy tạo một số bố cục mẫu bằng cú pháp Nunjucks. Một sẽ là bố cục mặc định với trình soạn thảo HTML của ta và một sẽ là bố cục blog của ta :

_includes / default.njk

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }} | My Site</title>
</head>
<body>
   {{ content | safe }}
</body>
</html>

_includes / blog.njk

---
layout: default
---

<h1>{{ title }}</h1>
<div>
  Published on {{ date }}
</div>

<article>
  {{ content | safe }}
</article>

Như bạn thấy , một bố cục có thể gọi một bố cục khác và các bố cục của ta có thể truy cập vào dữ liệu nằm trong vấn đề quan trọng của các file mẫu thông thường của ta .

Ta có thể sử dụng một bố cục bằng cách chỉ định nó ở vị trí hàng đầu của bất kỳ mẫu nội dung nào của ta :

---
layout: blog.njk
title: "My first blog post 😊"
date: 2020-04-02
excerpt: "This post talks about how one day I'll write a 1st post."
---

One day *I will write* my 1st blog post!

Cấu hình Mười bảy

Lúc này, ta đã làm mọi thứ mà không cần chạm vào file cấu hình và nó cho thấy sự đơn giản của việc sử dụng Eleventy. Nhưng khi trang web ngày càng phức tạp, chắc chắn bạn cần có thể đặt một số tùy chọn cấu hình. Bạn có thể làm điều đó trong file .eleventy.js ở root dự án của bạn.

Đây là file cấu hình mẫu sao chép nội dung tĩnh của ta vào folder kết quả và chỉ định tên folder kết quả khác ( public ):

.eleventy.js

module.exports = eleventyConfig => {
  // Copy our static assets to the output folder
  eleventyConfig.addPassthroughCopy('css');
  eleventyConfig.addPassthroughCopy('js');
  eleventyConfig.addPassthroughCopy('images');

  // Returning something from the configuration function is optional
  return {
    dir: {
      output: 'public'
    }
  };
};

Bạn có thể thực hiện tất cả mọi thứ trong file cấu hình của bạn như giảm thiểu kết quả HTML, sử dụng các plugin và cấu hình mã ngắn. , tôi mời bạn xem tài liệu để tìm hiểu thêm về những gì có thể được cấu hình. Nhưng nếu bạn bắt đầu bị choáng ngợp lúc đầu, hãy nhớ rằng theo mặc định, Eleventy thậm chí không cần file cấu hình và có thể thực hiện hầu hết các công việc nặng nhọc mà không cần file .

Sử dụng Starter

Lúc này, ta đã tạo một trang web từ đầu để xem mọi thứ hoạt động như thế nào, nhưng thường thì bạn cần bắt đầu với một cơ sở tốt đã được cấu hình và / hoặc được tạo kiểu theo cách bạn thích. Bạn có thể duyệt qua danh sách 11 mươi người mới bắt đầu tại đây .

Cá nhân tôi thực sự thích Skeleventy starter , sử dụng Tailwind CSS để tạo kiểu và được cấu hình với PurgeCSS để loại bỏ các kiểu không sử dụng trong production . Nếu bạn đang bắt đầu viết blog, thì blog chính thức của Eleventy cũng sẽ là một nơi tuyệt vời để bắt đầu.

Học nhiều hơn nữa

✨✨ Đó là phần giới thiệu ngắn gọn này, nhưng tôi mời bạn tìm hiểu thêm bằng cách xem các tài nguyên sau:

Các tài liệu chính thức
Tập Learn With Jason này với Zach Leatherman , người tạo ra Eleventy

Tags:

Các tin liên quan