Skip to content

Commit

Permalink
[Translation] tutorial/part-six
Browse files Browse the repository at this point in the history
  • Loading branch information
@dennis-IT @vitokhangnguyen
dennis-IT authored and vitokhangnguyen committed Jan 2, 2020
1 parent 897e3bf commit f532e72
Showing 1 changed file with 63 additions and 63 deletions.
126 changes: 63 additions & 63 deletions docs/tutorial/part-six/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
---
title: Transformer plugins
title: Các transformer plugin
typora-copy-images-to: ./
disableTableOfContents: true
---

> This tutorial is part of a series about Gatsby’s data layer. Make sure you’ve gone through [part 4](/tutorial/part-four/) and [part 5](/tutorial/part-five/) before continuing here.
> 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.
## What's in this tutorial?
## Bài hướng dẫn này có những gì?

The previous tutorial showed how source plugins bring data _into_ Gatsby’s data system. In this tutorial, you'll learn how transformer plugins _transform_ the raw content brought by source plugins. The combination of source plugins and transformer plugins can handle all data sourcing and data transformation you might need when building a Gatsby site.
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.

## Transformer plugins
## Các transformer plugin

Often, the format of the data you get from source plugins isn't what you want to
use to build your website. The filesystem source plugin lets you query data
_about_ files but what if you want to query data _inside_ files?
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
_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?

To make this possible, Gatsby supports transformer plugins which take raw
content from source plugins and _transform_ it into something more usable.
Để 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.

For example, markdown files. Markdown is nice to write in but when you build a
page with it, you need the markdown to be HTML.
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.

Add a markdown file to your site at
`src/pages/sweet-pandas-eating-sweets.md` (This will become your first markdown
blog post) and learn how to _transform_ it to HTML using transformer plugins and
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à
GraphQL.

```markdown:title=src/pages/sweet-pandas-eating-sweets.md
Expand All @@ -40,19 +40,19 @@ 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>
```

Once you save the file, look at `/my-files/` again—the new markdown file is in
the table. This is a very powerful feature of Gatsby. Like the earlier
`siteMetadata` example, source plugins can live-reload data.
`gatsby-source-filesystem` is always scanning for new files to be added and when
they are, re-runs your queries.
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
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.

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

```shell
npm install --save gatsby-transformer-remark
```

Then add it to the `gatsby-config.js` like normal:
Sau đó thêm nó vào `gatsby-config.js` như thông thường:

```javascript:title=gatsby-config.js
module.exports = {
Expand All @@ -79,31 +79,31 @@ module.exports = {
}
```

Restart the development server then refresh (or open again) GraphiQL and look
at the autocomplete:
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:

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

Select `allMarkdownRemark` again and run it as you did for `allFile`. You'll
see there the markdown file you recently added. Explore the fields that are
available on the `MarkdownRemark` node.
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.

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

Ok! Hopefully, some basics are starting to fall into place. Source plugins bring
data _into_ Gatsby's data system and _transformer_ plugins transform raw content
brought by source plugins. This pattern can handle all data sourcing and
data transformation you might need when building a Gatsby site.
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.

## Create a list of your site's markdown files in `src/pages/index.js`
## Tạo một danh sách các tập tin markdown của site trong `src/pages/index.js`

Now you'll have to create a list of your markdown files on the front page. Like many
blogs, you want to end up with a list of links on the front page pointing to each
blog post. With GraphQL you can _query_ for the current list of markdown blog
posts so you won't need to maintain the list manually.
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.

Like with the `src/pages/my-files.js` page, replace `src/pages/index.js` with
the following to add a GraphQL query with some initial HTML and styling.
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.

```jsx:title=src/pages/index.js
import React from "react"
Expand Down Expand Up @@ -169,11 +169,11 @@ export const query = graphql`
`
```

Now the frontpage should look like:
Bây giờ frontpage sẽ trông như thế này:

![frontpage](frontpage.png)

But your one blog post looks a bit lonely. So let's add another one at
Nhưng một bài viết trên blog của bạn trông có vẻ hơi đơn điệu. Vì vậy, hãy thêm một cái khác tại
`src/pages/pandas-and-bananas.md`

```markdown:title=src/pages/pandas-and-bananas.md
Expand All @@ -190,35 +190,35 @@ seem to really enjoy bananas!

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

Which looks great! Except… the order of the posts is wrong.
Trông ổn đấy! Ngoại trừ... thứ tự của bài viết là sai.

But this is easy to fix. When querying a connection of some type, you can pass a
variety of arguments to the GraphQL query. You can `sort` and `filter` nodes, set how
many nodes to `skip`, and choose the `limit` of how many nodes to retrieve. With
this powerful set of operators, you can select any data you want—in the format you
need.
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
cần.

In your index page's GraphQL query, change `allMarkdownRemark` to
`allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC })`. _Note: There are 3 underscores between `frontmatter` and `date`._ Save
this and the sort order should be fixed.
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.

Try opening GraphiQL and playing with different sort options. You can sort the
`allFile` connection along with other connections.
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
kết nối `allFile` cùng với các kết nối khác.

For more documentation on our query operators, explore our [GraphQL reference guide.](/docs/graphql-reference/)
Để 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/)

## Challenge
## Thử thách

Try creating a new page containing a blog post and see what happens to the list of blog posts on the homepage!
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ủ!

## What's coming next?
## Tiếp theo là gì?

This is great! You've just created a nice index page where you're querying your markdown
files and producing a list of blog post titles and excerpts. But you don't want to just see excerpts, you want actual pages for your markdown files.
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.

You could continue to create pages by placing React components in `src/pages`. However, you'll
next learn how to _programmatically_ create pages from _data_. Gatsby is _not_
limited to making pages from files like many static site generators. Gatsby lets
you use GraphQL to query your _data_ and _map_ the query results to _pages_—all at build
time. This is a really powerful idea. You'll be exploring its implications and
ways to use it in the next tutorial, where you'll learn how to [programmatically create pages from data](/tutorial/part-seven/).
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_
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
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/).

0 comments on commit f532e72

Please sign in to comment.