Skip to content

Commit

Permalink
[Maintainer Review] tutorial/part-six
Browse files Browse the repository at this point in the history
  • Loading branch information
@vitokhangnguyen
vitokhangnguyen committed Jan 2, 2020
1 parent f532e72 commit bbd3ddd
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 47 deletions.
12 changes: 6 additions & 6 deletions docs/tutorial/part-five/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ typora-copy-images-to: ./
disableTableOfContents: true
---

> Bài hướng dẫn này nằm trong loạt bài hướng dẫn về lớp dữ liệu của Gatsby. Hãy bảo đảm rằng bạn đã thông qua [phần 4](/tutorial/part-four/) trước khi tiếp tục ở đây.
> Bài hướng dẫn này là một phần trong chuỗi bài về lớp dữ liệu của Gatsby. Hãy bảo đảm rằng bạn đã thông qua [phần 4](/tutorial/part-four/) trước khi tiếp tục ở đây.
## Có gì trong bài hướng dẫn này?
## Bài hướng dẫn này có những gì?

Trong mục hướng dẫn này, bạn sẽ học về cách kéo dữ liệu vào trong trang web Gatsby của bạn sử dụng GraphQL và các plugin nguồn (source plugin). Tuy nhiên, trước khi bạn học về những plugin này, bạn sẽ muốn biết về cách sử dụng một thứ gọi là GraphiQL, một công cụ hỗ trợ bạn cấu trúc nên những câu truy vấn của bạn một cách đúng đắn.
Trong mục hướng dẫn này, bạn sẽ học về cách kéo dữ liệu vào trong trang web Gatsby của bạn sử dụng GraphQL và các source plugin. Tuy nhiên, trước khi bạn học về những plugin này, bạn sẽ muốn biết về cách sử dụng một thứ gọi là GraphiQL, một công cụ hỗ trợ bạn cấu trúc nên những câu truy vấn của bạn một cách đúng đắn.

## Giới thiệu GraphiQL

Expand All @@ -33,11 +33,11 @@ GraphiQL Explorer cho phép bạn xây dựng những truy vần hoàn thiện m
lessonTitle="Build a GraphQL Query using Gatsby’s GraphiQL Explorer"
/>

## Những plugin nguồn
## Các source plugin

Dữ liệu trong những trang web Gatsby có thể đến từ bất kì nơi nào: APIs, cơ sở dữ liệu (databases), CMSs, những tập tin tại chỗ, vâng vâng.

Những plugin nguồn (source plugin) lấy dữ liệu từ nguồn của chúng. Ví dụ, plugin nguồn filesystem biết làm cách nào để lấy dữ liệu từ hệ thống tập tin. Plugin WordPress biết làm cách nào để lấy dữ liệu từ WordPress API.
Những source plugin lấy dữ liệu từ nguồn của chúng. Ví dụ, source plugin filesystem biết làm cách nào để lấy dữ liệu từ hệ thống tập tin. Plugin WordPress biết làm cách nào để lấy dữ liệu từ WordPress API.

Hãy thêm [`gatsby-source-filesystem`](/packages/gatsby-source-filesystem/) vào và khám phá cách hoạt động của nó.

Expand Down Expand Up @@ -215,4 +215,4 @@ Và bây giờ dẫn tới [http://localhost:8000/my-files](http://localhost:800
## Tiếp theo là gì?
Hiện tại bạn đã được học cách thức những source plugin mang dữ liệu _vào_ hệ thống dữ liệu của Gatsby. Trong hướng dẫn tiếp theo, bạn sẽ được học cách thức những transformer plugin _biến đổi_ nội dung thô được truyển tải bởi các source plugin. Sự kết hợp giữa các source plugin và các transformer plugin có thể xử lý mọi cung ứng dữ liệu và chuyển đội dữ liệu mà bạn cần khi xây dựng một trang web Gatsby. Tìm hiểu về những transformer plugin tại [phần 6 của hướng dẫn](/tutorial/part-six/).
Hiện tại bạn đã được học cách thức những source plugin mang dữ liệu _vào_ hệ thống dữ liệu của Gatsby. Trong hướng dẫn tiếp theo, bạn sẽ được học cách thức những transformer plugin _biến đổi_ nội dung thô được truyển tải bởi các source plugin. Sự kết hợp giữa các source plugin và các transformer plugin có thể xử lý mọi sự cung ứng dữ liệu và chuyển đội dữ liệu mà bạn cần khi xây dựng một trang web Gatsby. Tìm hiểu về những transformer plugin tại [phần 6 của hướng dẫn](/tutorial/part-six/).
82 changes: 41 additions & 41 deletions docs/tutorial/part-six/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
---
title: Các transformer plugin
title: Transformer Plugins
typora-copy-images-to: ./
disableTableOfContents: true
---

> Bài hướng dẫn này là một phần trong chuỗi bài về lớp dữ liệu của Gatsby. Hãy đảm bảo rằng bạn đã xem qua [phần 4](/tutorial/part-four/) và [phần 5](/tutorial/part-five/) trước khi tiếp tục tại đây.
> Bài hướng dẫn này là một phần trong chuỗi bài về lớp dữ liệu của Gatsby. Hãy bảo đảm rằng bạn đã thông qua [phần 4](/tutorial/part-four/) và [phần 5](/tutorial/part-five/) trước khi tiếp tục tại đây.
## Bài hướng dẫn này có những gì?

Bài hướng dẫn lần trước đã chỉ ra cách các source plugin mang dữ liệu _vào trong_ hệ thống dữ liệu của Gatsby. Trong bài hướng dẫn này, bạn sẽ học cách các transformer plugin _chuyển đổi_ các nội dung thô được mang bởi các source plugin. Sự kết hợp giữa các source plugin và các transformer plugin có thể xử lý tất cả các nguồn dữ liệu và chuyển đổi dữ liệu mà bạn có thể cần khi xây dựng một trang web Gatsby.
Bài hướng dẫn lần trước đã chỉ ra cách các source plugin mang dữ liệu _vào trong_ hệ thống dữ liệu của Gatsby. Trong bài hướng dẫn này, bạn sẽ học cách các transformer plugin _chuyển đổi_ các nội dung thô được mang đến bởi các source plugin. Sự kết hợp giữa các source plugin và các transformer plugin có thể xử lý mọi sự cung ứng dữ liệu và chuyển đội dữ liệu mà bạn cần khi xây dựng một trang web Gatsby.

## Các transformer plugin

Thông thường, định dạng của dữ liệu mà bạn lấy từ các source plugin không phải là cái bạn muốn
sử dụng để xây dựng website. Source plugin hệ thống tập tin cho phép bạn truy vấn dữ liệu
Thông thường, định dạng của dữ liệu mà bạn lấy từ các source plugin không phải là cái bạn muốn
sử dụng để xây dựng trang web. Source plugin filesystem cho phép bạn truy vấn dữ liệu
_về_ các tập tin nhưng nếu bạn muốn truy vấn dữ liệu _bên trong_ các tập tin thì sao?

Để thực hiện điều này, Gatsby hỗ trợ các transformer plugin lấy
nội dung thô từ các source plugin và _chuyển đổi_ nó thành một cái gì đó có thể sử dụng nhiều hơn.
Để làm cho điều này khả thi, Gatsby hỗ trợ các transformer plugin lấy
nội dung thô từ các source plugin và _chuyển đổi_ nó thành một cái gì đó có khả năng ứng dụng cao hơn.

Ví dụ, các tập tin markdown. Markdown dễ viết nhưng khi bạn xây dựng một
Ví dụ, các tập tin markdown. Markdown dễ viết nhưng khi bạn xây dựng một
trang với nó, bạn cần markdown trở thành HTML.

Hãy thêm một tập tin markdown vào site của bạn tại
`src/pages/sweet-pandas-eating-sweets.md` (Đây sẽ là markdown đầu tiên của bạn ở dạng
bài viết trên blog) và tìm hiểu cách _chuyển đổi_ nó sang HTML bằng cách sử dụng các transformer plugin và
`src/pages/sweet-pandas-eating-sweets.md` (Đây sẽ trở thành bài viết markdown
đầu tiên của bạn) và tìm hiểu cách _chuyển đổi_ nó sang HTML bằng cách vận dụng các transformer plugin và
GraphQL.

```markdown:title=src/pages/sweet-pandas-eating-sweets.md
Expand All @@ -40,11 +40,11 @@ Here's a video of a panda eating sweets.
<iframe width="560" height="315" src="https://www.youtube.com/embed/4n0xNbfJLR8" frameborder="0" allowfullscreen></iframe>
```

Sau khi bạn lưu tập tin, nhìn `/my-files/` một lần nữa—tập tin markdown mới đầu tiên ở trong
Một khi bạn đã lưu tập tin, nhìn vào `/my-files/` một lần nữa—tập tin markdown mới đã ở trong
bảng. Đây là một tính năng rất mạnh mẽ của Gatsby. Tương tự như ví dụ
`siteMetadata` trước đó, các source plugin có thể tải lại dữ liệu trực tiếp.
`gatsby-source-filesystem` luôn quét tìm các tập tin mới được thêm vào và
nếu có, chạy lại các truy vấn của bạn.
`siteMetadata` trước đây, các source plugin có thể tải lại dữ liệu trực tiếp.
`gatsby-source-filesystem` luôn quét tìm các tập tin mới được thêm vào và
nếu có, chạy lại các truy vấn của bạn.

Hãy thêm vào một transformer plugin có thể chuyển đổi các tập tin markdown:

Expand Down Expand Up @@ -79,31 +79,31 @@ module.exports = {
}
```

Khởi động lại máy chủ phát triển sau đó làm mới (hoặc mở lại) GraphiQL và quan sát
chế độ tự động hoàn thành:
Khởi động lại máy chủ phát triển sau đó làm mới (hoặc mở lại) GraphiQL và quan sát
phần tự động hoàn thành:

![markdown-autocomplete](markdown-autocomplete.png)

Chọn `allMarkdownRemark` một lần nữa và chạy tương tự như đã làm cho `allFile`. Bạn sẽ
thấy tại đó tập tin markdown mà bạn vừa mới thêm vào. Tìm hiểu các field
có sẵn trên `MarkdownRemark` node.
Chọn lại `allMarkdownRemark` và chạy nó tương tự như đã làm cho `allFile`. Bạn sẽ
thấy tại đó tập tin markdown mà bạn vừa mới thêm vào. Khám phá các trường mà đang
có sẵn trên node `MarkdownRemark`.

![markdown-query](markdown-query.png)

Ok! Hy vọng một số điểm cơ bản đang bắt đầu vào đúng vị trí. Các source plugin mang
dữ liệu _vào trong_ hệ thống dữ liệu của Gatsby và các transformer plugin _chuyển đổi_ các nội dung thô
được mang bởi các source plugin. Quá trình này có thể xử lý tất cả các nguồn dữ liệu và
chuyển đổi dữ liệu mà bạn có thể cần khi xây dựng một trang web Gatsby.
dữ liệu _vào trong_ hệ thống dữ liệu của Gatsby và các transformer plugin _chuyển đổi_ các nội dung thô
được mang đến bởi các source plugin. Mô hình này có thể xử lý mọi sự cung ứng dữ liệu và
chuyển đội dữ liệu mà bạn cần khi xây dựng một trang web Gatsby.

## Tạo một danh sách các tập tin markdown của site trong `src/pages/index.js`
## Tạo một danh sách các tập tin markdown của trang web trong `src/pages/index.js`

Bây giờ bạn sẽ phải tạo một danh sách các tập tin markdown của bạn trên trang đầu. Giống như nhiều
blog khác, bạn muốn kết thúc với một danh sách các liên kết trên trang đầu chỉ đến từng
bài viết trên blog. Với GraphQL, bạn có thể _truy vấn_ cho danh sách hiện tại các bài viết dưới dạng markdown trên blog
vì vậy bạn sẽ không cần phải duy trì danh sách theo cách thủ công.
Bây giờ bạn sẽ phải tạo một danh sách các tập tin markdown của bạn trên trang đầu. Giống như nhiều
blog, bạn muốn kết thúc với một danh sách các liên kết trên trang đầu chỉ đến từng
bài viết. Với GraphQL, bạn có thể _truy vấn_ cho danh sách các bài viết markdown hiện tại
nên bạn sẽ không cần phải bảo trì danh sách đó theo cách thủ công.

Như là với trang `src/pages/my-files.js`, thay thế `src/pages/index.js` với
đoạn sau để thêm một truy vấn GraphQL với một số HTML và định dạng ban đầu.
Như là với trang `src/pages/my-files.js`, thay thế `src/pages/index.js` với
đoạn sau để thêm một truy vấn GraphQL với một số HTML và tạo kiểu ban đầu.

```jsx:title=src/pages/index.js
import React from "react"
Expand Down Expand Up @@ -190,35 +190,35 @@ seem to really enjoy bananas!

![two-posts](two-posts.png)

Trông ổn đấy! Ngoại trừ... thứ tự của bài viết là sai.
Trông tuyệt đấy! Ngoại trừ... thứ tự của các bài viết bị sai.

Nhưng điều này có thể sửa dễ dàng. Khi truy vấn một kết nối của một vài dạng, bạn có thể truyền
nhiều đối số (argument) tới truy vấn GraphQL. Bạn có thể `sắp xếp` và `lọc` các node, thiết lập
có bao nhiêu node để `bỏ qua`, và chọn `giới hạn` có bao nhiêu node để gọi. Với
bộ toán tử (operator) mạnh mẽ này, bạn có thể chọn bất kỳ dữ liệu nào bạn muốn-trong định dạng bạn
Nhưng điều này có thể được sửa dễ dàng. Khi truy vấn một kết nối của một vài dạng, bạn có thể truyền
nhiều đối số (arguments) tới truy vấn GraphQL. Bạn có thể `sắp xếp` và `sàng lọc` các node, thiết lập
có bao nhiêu node để `bỏ qua`, và chọn `giới hạn` bao nhiêu node để lấy. Với
bộ toán tử (operators) mạnh mẽ này, bạn có thể chọn bất kỳ dữ liệu nào bạn muốn—trong định dạng bạn
cần.

Trong trang index của truy vấn GraphQL, thay đổi `allMarkdownRemark` thành
`allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC })`. _Chú ý: Có 3 dấu gạch dưới giữa `frontmatter` và `date`._ Lưu lại
và thứ tự sắp xếp đã được sửa.

Hãy mở GraphiQL và thử qua các tùy chọn sắp xếp khác nhau . Bạn có thể sắp xếp
Hãy mở GraphiQL và thử nghiệm qua các tùy chọn sắp xếp khác nhau. Bạn có thể sắp xếp
kết nối `allFile` cùng với các kết nối khác.

Để biết thêm tài liệu về các toán tử truy vấn (query operator) của chúng tôi, hãy khám phá [Hướng dẫn tham khảo GraphQL.](/docs/graphql-reference/)
Để có thêm tài liệu về các toán tử truy vấn (query operators) của chúng tôi, hãy khám phá [Hướng dẫn tham khảo GraphQL](/docs/graphql-reference/) của chúng tôi.

## Thử thách

Hãy thử tạo một trang mới có chứa một bài viết trên blog và xem điều gì xảy ra với danh sách các bài viết trên blog ở trang chủ!
Hãy thử tạo một trang mới có chứa một bài viết và xem điều gì xảy ra với danh sách các bài viết blog ở trang chủ!

## Tiếp theo là gì?

Thật là tuyệt! Bạn vừa tạo một trang index nơi bạn sẽ truy vấn các
tập tin markdown và tạo một danh sách các tiêu đề bài viết trên blog và các đoạn trích. Nhưng bạn không muốn chỉ thấy các đoạn trích, bạn muốn các trang thực sự cho các tập tin markdown của mình.
tập tin markdown và tạo một danh sách các tiêu đề và đoạn trích của các bài viết blog. Nhưng bạn không muốn chỉ thấy các đoạn trích, bạn muốn các trang thực sự cho các tập tin markdown của bạn.

Bạn có thể tiếp tục tạo các trang bằng cách đặt các React component trong `src/pages`. Tuy nhiên, bạn sẽ
tìm hiểu tiếp sau đây cách tạo các trang _bằng cách lập trình_ từ _dữ liệu_. Gatsby _không_
tìm hiểu tiếp sau đây cách tạo các trang _bằng cách lập trình_ từ _dữ liệu_. Gatsby _không_
bị giới hạn để tạo các trang từ các tập tin như nhiều trình tạo trang tĩnh. Gatsby cho phép
bạn sử dụng GraphQL để truy vấn _dữ liệu_ của bạn và ánh xạ (map) các kết quả truy vấn tới các _trang_ ngay tại
bạn sử dụng GraphQL để truy vấn _dữ liệu_ của bạn và _ánh xạ (map)_ các kết quả truy vấn tới các _trang_—ngay tại
thời điểm xây dựng. Đây là một ý tưởng thực sự mạnh mẽ. Bạn sẽ khám phá ý nghĩa của nó và
cách sử dụng nó trong hướng dẫn tiếp theo, trong đó bạn sẽ học cách [tạo các trang từ dữ liệu bằng cách lập trình](/tutorial/part-seven/).
những cách để sử dụng nó trong bài hướng dẫn tiếp theo, nơi mà bạn sẽ học cách [tạo các trang từ dữ liệu bằng cách lập trình](/tutorial/part-seven/).

0 comments on commit bbd3ddd

Please sign in to comment.