Xây dựng một blog phản ứng nhanh với Svelte và Sapper

Sapper là một khung được xây dựng trên đầu Svelte. Nó tập trung vào tốc độ ra khỏi hộp với kết xuất máy chủ, liên kết tải trước và khả năng tạo công nhân dịch vụ. Kết hợp với Svelte, kết quả cuối cùng là một trang web nhanh có thể tùy chỉnh, nhanh chóng với một dấu chân nhỏ.

Trong hướng dẫn này, chúng tôi sẽ sử dụng Sapper để xây dựng một trang web viết blog nhẹ bằng các thành phần Svelte (xem chúng tôi Làm thế nào để bắt đầu một blog Đăng cho một số mẹo ít kỹ thuật hơn trên blog). Svelte là một khuôn khổ với một sự khác biệt. Nó phân tích mã tại thời điểm biên dịch và tạo một tập hợp các mô-đun trong JavaScript vani, tránh nhu cầu về thời gian chạy. Nếu bạn cần thêm trợ giúp với bố cục thì hãy kiểm tra bài viết của chúng tôi về cách hoàn hảo Bố trí trang web . Hoặc cho các lựa chọn khác, xem những thứ này xây dựng trang web Và hãy nhớ rằng, bạn cũng sẽ cần phải có được web hosting Dịch vụ tại điểm.

Tải xuống các tệp hướng dẫn trên FileSilo tại đây

01. Cài đặt phụ thuộc

Đầu tiên, chúng ta cần tải xuống và cài đặt phụ thuộc. Nó dựa trên Svelte để hoạt động và yêu cầu một khung khác để xây dựng máy chủ, nhưng phần còn lại phụ thuộc vào ứng dụng đang được xây dựng. Trong trường hợp này, chúng tôi cần một vài gói để giúp trích xuất các tệp đánh dấu sau này.

Tải xuống các tệp hướng dẫn (ở trên), tìm chúng trên dòng lệnh và cài đặt các phụ thuộc.

> npm install

02. Xây dựng máy chủ

Sapper được xây dựng trong hai phần - khung phía máy khách và kết xuất phía máy chủ của khung đó. Điều này giúp tăng tốc độ tăng tốc cho những người trên các mạng chậm hơn. Nó được xây dựng bằng nút, cho phép Middleware Sapper thực hiện tất cả các nâng nặng cho chúng tôi.

Mở Server.js và tạo máy chủ với Express. Sử dụng khuyến nghị của họ, chúng tôi bao gồm nén để thu nhỏ các tập tin chúng tôi gửi và Sirv. để phục vụ các tập tin tĩnh.

 express ()
  .sử dụng(
    nén ({ngưỡng: 0}),
    sirv ("tĩnh", {dev}),
    sapper.mddleware ()
  )
  .listen (cổng); 

03. Gắn ứng dụng

Về phía khách hàng, chúng ta cần nói với Sapper nơi gắn ứng dụng. Điều này tương tự như phản ứng của dom rending. hoặc vue's. $ Gắn kết phương pháp. Bên trong client.js, bắt đầu sapper và gắn nó vào gốc & lt; div & gt; thành phần. Phần tử đó được bao gồm trong tệp Mẫu mà chúng ta sẽ đến sau.

 nhập * dưới dạng sapper từ "@ sapper / app";
sapper.start ({
  Mục tiêu: Tài liệu.GetEuityById (
   "nguồn gốc")
}); 

04. Bắt đầu máy chủ phát triển

Với các tệp máy chủ và máy khách cơ bản được thiết lập, chúng ta có thể khởi động máy chủ phát triển. Điều này khởi động một bản dựng của các tệp máy chủ, máy khách và dịch vụ, và nó sẽ khởi động trên cổng 3000 theo mặc định. Bất cứ khi nào một tập tin thay đổi, nó sẽ xây dựng lại một phần của ứng dụng đã thay đổi.

Chạy máy chủ trên dòng lệnh. Giữ cửa sổ này mở trong khi phát triển trang web.

 & gt; NPM RUN DEV 

05. Tạo một tuyến máy chủ

Bất cứ điều gì bên trong thư mục "tuyến đường" sẽ biến thành một tuyến đường cho ứng dụng. Tập tin với. .js. tiện ích mở rộng sẽ trở thành những gì được gọi là tuyến máy chủ. Những tuyến đường này không có UI, nhưng thay vào đó được yêu cầu bởi ứng dụng để tìm nạp dữ liệu. Trong trường hợp của chúng tôi, chúng tôi sẽ sử dụng chúng để tải lên bài đăng trên blog.

Các Tuyến đường / blog / index.json.js tập tin sẽ tạo /blog.json. điểm cuối trên máy chủ của chúng tôi. Nhập các bài đăng trên blog và tạo một số JSON từ họ.

 Nhập bài đăng từ "./_posts.js";
const hàm lượng = json.stringify (
  bài đăng.map (post = & gt; ({
    Tác giả: Post.Author,
    hình ảnh: post.Image,
    Tiêu đề: Post.Title,
    sên: post.slug.
  }))
); 

06. Trả lại bài viết trên blog

Máy chủ định tuyến Các chức năng xuất tương ứng với các phương thức HTTP. Ví dụ: để đáp ứng yêu cầu GET, chúng tôi sẽ xuất một hàm được gọi là được từ tập tin tuyến máy chủ. Tạo một được Chức năng đáp ứng với dữ liệu mà chúng tôi đã thu thập ở bước trước trong định dạng JSON. Mở http: // localhost: 3000 / blog.json Trong trình duyệt và kiểm tra các bài đăng đang đi qua.

 Lấy chức năng xuất (req, res) {
  res.writehead (200, {
    "Loại nội dung": "Ứng dụng / JSON"
  });

  res.end (nội dung);
} 

07. Tạo trang chỉ mục

Các trang trong Sapper là các thành phần Svelte thông thường. Mỗi thành phần là một tệp duy nhất với một .svelte. mở rộng và chứa tất cả logic và tạo kiểu để quản lý chính nó. Bất kỳ JavaScript thành phần này cần chạy sẽ sống bên trong một & lt; script & gt; Tag - giống như bất kỳ trang html nào.

Phía trong tuyến / index.svelte. , Nhập một vài thành phần Svelte khác mà chúng ta có thể sử dụng để xây dựng trang này. Xuất khẩu A. Bài viết biến mà chúng ta sẽ điền vào sau.

 & lt; script & gt;
  Nhập container từ.
   "../Components/container.svelte";
  Nhập khẩu từ
   "../Components/postsummary.svelte";
  Xuất đăng bài;
& lt; / script & gt; 

08. Fetch Blog Đăng dữ liệu

Với trang thiết lập, chúng ta có thể bắt đầu mang theo các bài đăng trên blog (bạn có thể muốn sao lưu chúng trong lưu trữ đám mây ). Chúng ta cần làm điều này ngay khi trang được tải. Để máy chủ nhận thức được điều này và sau đó yêu cầu dữ liệu này khi nó hiển thị trang, nó cần phải đi riêng biệt & lt; script bối cảnh = "mô-đun" & gt; nhãn.

Trên máy chủ, Sapper sẽ tìm kiếm một tải trước chức năng, và chờ nó hoàn thành trước khi hiển thị trang. Ở đây, chúng tôi đang điền vào Bài viết biến từ bước trước.

 & lt; bối cảnh tập lệnh = "mô-đun" & gt;
  Xuất chức năng Async Tải trước () {
    const res = chờ đợi
     this.fetch ("blog.json");
    Const Data = Await Res.json ();
    Trả về {Bài viết: Dữ liệu};
  Không thể
& lt; / script & gt; 

09. Hiển thị tóm tắt bài viết

Trong Svelte, các biến là phản ứng theo mặc định. Điều này có nghĩa là, khi họ cập nhật, các thành phần của chúng tôi cũng sẽ cập nhật. Như Bài viết Biến bây giờ giữ một loạt các bài đăng trên blog, chúng ta có thể lặp qua các mục này và hiển thị chúng.

Chúng ta có thể làm điều này bằng cách sử dụng một #mỗi khối. Những thứ này sẽ lặp lại những gì bên trong dấu ngoặc cho mỗi mục trong một mảng. Ở dưới cùng của thành phần, bên ngoài bất kỳ thẻ nào, thêm HTML để hiển thị các bài đăng.

 & lt; container & gt;
  & lt; ul & gt;
    {#each bài viết như bài đăng}
      & lt; li & gt;
        & lt; bài viết {... bài} / & gt;
      & lt; / li & gt;
    {/mỗi}
  & lt; / ul & gt;
& lt; / container & gt; 

10. Phong cách container

Chúng ta có thể sử dụng các thành phần để chứa bất kỳ logic lặp đi lặp lại và sử dụng chúng bất cứ nơi nào chúng cần thiết - bao gồm các kiểu. Các & lt; container & gt; Thành phần hiện không làm bất cứ điều gì, nhưng chúng ta có thể sử dụng nó để cung cấp độ rộng tối đa cho nội dung bên trong nó.

Mở ra Linh kiện / Container.svelte. và thêm một số kiểu bên trong một & lt; phong cách & gt; nhãn. Bất kỳ phong cách nào mà chúng ta áp dụng bên trong một thành phần đều có phạm vi thành phần đó, điều đó có nghĩa là chúng ta có thể sử dụng bộ chọn chung.

 & lt; phong cách & gt;
  div {
    KHAI THÁC: 0 AUTO;
    Đệm: 0 1rem;
    chiều rộng tối đa: 50rem;
  Không thể
& lt; / style & gt; 

11. Xác định A & LT; Slot & GT;

Nếu một thành phần được thiết kế để trở thành cha mẹ cho các thành phần khác, chúng ta cần một cách để vượt qua các thành phần đó thông qua. Các & lt; Slot & GT; Yếu tố làm điều đó, và có thể được đặt bất cứ nơi nào có ý nghĩa trong đánh dấu của một thành phần.

Với & lt; container & gt; , chúng tôi đang gói nội dung theo kiểu & lt; div & gt; . Sử dụng & lt; Slot & GT; Bên trong & lt; div & gt; để để mọi thứ khác thông qua.

 & lt; div & gt;
  & lt; slot / & gt;
& lt; / div & gt; 

12. Tiếp xúc với đạo cụ bài viết

Không phải mọi thành phần sẽ tìm nạp một số dữ liệu. Khi chúng ta đang tải các bài đăng từ thành phần trang chính, nó có thể được chuyển qua các thành phần mà nó sẽ kết xuất thông qua các thuộc tính của nó.

Mở Linh kiện / Bài viết bình cảm.svelte. và xác định một số thuộc tính ở đầu tệp. Chúng được điền vào bởi nhà khai thác lây lan mà chúng tôi đã thêm vào bước 09.

 & lt; script & gt;
  Xuất khẩu cho tác giả;
  Xuất hình ảnh;
  xuất khẩu lên;
  Xuất khẩu tiêu đề;
& lt; / script & gt; 

13. Hiển thị bài viết Blog Tóm tắt

Khi các thuộc tính được điền, sau đó chúng được truy cập giống như bất kỳ biến khác. Bằng cách có các thuộc tính riêng biệt cho mỗi phần của Tóm tắt bài đăng, chúng tôi sẽ thực hiện đánh dấu dễ đọc hơn.

Ở dưới cùng của thành phần, hãy thêm một số HTML để tạo tóm tắt. Các lớp liên quan đến các phong cách được xác định trước.

& lt; bài viết & gt;
& lt; div class = "post-image" style = "
 Hình nền: URL ({image}) "/ & gt;
& lt; div class = "body" & gt;
  & lt; div class = "Tác giả-hình ảnh" & gt;
    & lt; img src = {Author.image}
     alt = {Tác giả.name} / & gt;
  & lt; / div & gt;
  & lt; div class = "về" & gt;
    & lt; h1 & gt; {title} & lt; / h1 & gt;
    & lt; span class = "byline" & gt; bởi
     {Tác giả.name} & lt; / span & gt;
  & lt; / div & gt;
& lt; / div & gt;
& lt; / bài viết & gt; 

14. Liên kết đến bài viết trên blog

Không giống như các khung tương tự như Next.js, Sapper hoạt động với các liên kết neo thông thường. Tại thời điểm xây dựng, nó có thể phát hiện các liên kết nội bộ, và cũng để thực hiện các tối ưu hóa riêng của nó.

Cập nhật đánh dấu từ bước trước bằng cách gói nó trong một liên kết. Không cần bạn tạo các chuỗi mẫu để soạn URL bị sên.

 & lt; một rel = "prefetch" href = "/ blog / {slug}" & gt;
  & lt; bài viết & gt; ... & lt; / bài viết & gt;
& lt; / a & gt; 

15. Lấy một bài viết của sên

Sapper có thể tạo các trang dựa trên các tham số URL. Trong trường hợp của chúng tôi, chúng tôi liên kết đến / blog / sên, có nghĩa là nó làm cho thành phần tại /routes/blog/[slug[.svelte. .

Bên trong thành phần đó, tìm nạp dữ liệu blog như chúng tôi đã làm cho trang chỉ mục. Các thông số Đối tượng chứa các tham số từ URL, trong trường hợp này là sên.

 & lt; bối cảnh tập lệnh = "mô-đun" & gt;
  Xuất chức năng Async
   tải trước ({params}) {
    const res = đang chờ đợi điều này.
     `blog / $ {params.slug} .json`);
    Const Data = Await Res.json ();
  Không thể
& lt; / script & gt; 

16. Lỗi nếu không tìm thấy bài đăng

Không giống như trang chỉ mục, có một cơ hội không có một bài đăng trên blog tại URL. Trong trường hợp đó, chúng ta nên hiển thị một lỗi. Cùng với lấy , các tải trước Phương pháp cũng bao gồm lỗi thay vào đó hãy thay đổi phản hồi cho một trang lỗi.

Ở cuối phương thức tải trước, hiển thị lỗi nếu không có bài đăng tìm thấy. Nếu không, hãy đặt bài đăng biến cho trang.

 if (res.status === 200) {
  Trả về {POST: Dữ liệu};
} other {
  this.Error (res.status,
    dữ liệu.message);
} 

17. Hiển thị bài đăng trên blog

Với dữ liệu được tìm nạp, bây giờ chúng ta có thể hiển thị bài đăng trên trang. Tương tự như thành phần Postummary, chúng tôi hiển thị từng phần nội dung của bài viết bên trong dấu ngoặc nhọn. Ở dưới cùng của thành phần, thêm một số đánh dấu để hiển thị trên trang.

 & lt; bài viết & gt;
  & lt; container & gt;
    & lt; div class = "Tiêu đề" & gt;
      & lt; h1 & gt; {post.title} & lt; / h1 & gt;
      & lt; div class = "byline" & gt; bởi
       {post.author.name} & lt; / div & gt;
    & lt; / div & gt;
    & lt; IMG Class = "Post-Image" src = {post.image} alt = "" / & gt;
     {post.html}
  & lt; / container & gt;
& lt; / bài viết & gt; 

18. Thay vào đó hãy hiển thị HTML

Nhìn vào trang bây giờ, mọi thứ hiển thị chính xác ngoài nội dung bài thực tế. Chuyển đổi đánh dấu tạo HTML, nhưng chúng ta thấy rằng được in dưới dạng văn bản trên chính bài đăng. Sapper có trình phân tích cú pháp HTML được xây dựng trong trường hợp này. Đặt @html. Trước mặt nó sẽ sử dụng trình phân tích cú pháp này.

 {@ html post.html} 

19. Đặt trang & lt; tiêu đề & gt; giá trị

Blog của chúng tôi có chức năng chính xác, nhưng có một vài thay đổi cần thiết để hoàn thành nó. Một trong số đó là cập nhật & lt; Tiêu đề & GT; Trên trang để relabel tab nó được hiển thị trong.

Svelte hỗ trợ A. & lt; Svelte: Head & GT; yếu tố, tiêm bất cứ thứ gì bên trong nó vào & lt; Head & GT; của trang. Sử dụng nó để đặt tiêu đề của bài viết như & lt; Tiêu đề & GT; .

 & lt; Svelte: Head & GT;
  & lt; tiêu đề & gt; {post.title} |
   Blog Sapper & LT; / Tiêu đề & GT;
& lt; / svelte: Head & GT; 

20. Cập nhật & LT; Tiêu đề & GT;

Mỗi trang đi qua một mẫu để đóng dấu HTML cho phần còn lại của trang. Đây là nơi bất kỳ thiết lập nào như nhập phông chữ và thẻ meta sẽ được nhập. Mở template.html và thêm một hook cho nội dung của & lt; Svelte: Head & GT; yếu tố từ bước trước. Thêm nó vào ngay trước khi đóng cửa & lt; / head & gt; nhãn.

 & lt; Head & GT;
  [...]% sapper.head%
& lt; / head & gt; điều cuối cùng chúng ta cần thêm là một bố cục cho blog. Thay vì bọc mỗi trang trong một thành phần, Sapper sẽ tìm một tệp "_layout.svelte" để thực hiện công việc này cho chúng tôi.
Bên trong _layout.svelte, nhập & lt; tiêu đề & gt; thành phần và hiển thị rằng ở đầu mỗi trang. Nó cung cấp một liên kết thuận tiện trở lại trang chủ. 

21. Thêm tiêu đề vĩnh viễn

Điều cuối cùng chúng ta cần thêm là một bố cục cho blog. Thay vì bọc mỗi trang trong một thành phần, Sapper sẽ tìm kiếm một _layout.svelte. tập tin để làm công việc này cho chúng tôi. Phía trong _layout.svelte. , nhập khẩu & lt; tiêu đề & gt; thành phần và hiển thị rằng ở đầu mỗi trang. Nó cung cấp một liên kết thuận tiện trở lại trang chủ.

 & lt; script & gt;
  Nhập khẩu tiêu đề từ.
   "../Components/header.svelte";
& lt; / script & gt;
& lt; main & gt;
  & lt; tiêu đề / & gt;
  & lt; slot / & gt;
& lt; / main & gt; 

Nội dung này ban đầu xuất hiện trong trình thiết kế web.

• Các thành phần web: Hướng dẫn cuối cùng
• 30 tiện ích mở rộng Chrome cho các nhà thiết kế web và bộ phát triển
• 52 Công cụ thiết kế web để giúp bạn làm việc thông minh hơn năm 2019