React và Docusaraus
Có một trang web tài liệu được thiết kế phù hợp và toàn diện là rất quan trọng đối với bất kỳ dự án nào. Nhưng việc tạo tài liệu tốt có thể là một thách thức và các vấn đề như trải nghiệm giới thiệu người dùng kém và tăng yêu cầu hỗ trợ có thể trở thành rắc rối hàng ngày đối với một nhóm.
Đây là lý do tại sao các công cụ tài liệu như Docusaurus rất tuyệt vời để giúp bạn tạo các trang web tài liệu trực quan tuyệt đẹp trong 5 phút.
Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách xây dựng một trang web tài liệu bằng React và Docusaurus.
Nếu bạn chưa quen với Docusaurus, có lẽ bạn đang tự hỏi, "tại sao lại là React?, tại sao không phải là bất kỳ framework nào khác như Next.js?", Đừng lo lắng - tôi cũng sẽ trả lời câu hỏi này trong hướng dẫn này.
Mục lục
Điều kiện tiên quyết
Để làm theo hướng dẫn này, bạn nên có:
-
Node.js phiên bản 18.0 trở lên được cài đặt
-
Kiến thức cơ bản về React và Markdown
-
IDE (tốt nhất là VSCode)
Docusaurus là gì?
Docusaurus được phát hành bởi nhóm Meta Open Source vào năm 2017 để giúp các nhà phát triển xây dựng, triển khai và duy trì các trang web tài liệu một cách dễ dàng và nhanh chóng. Mục tiêu khác của dự án là cải thiện tốc độ của cả nhà phát triển và người dùng cuối bằng cách sử dụng mẫu PRPL.
Một số tính năng thú vị của nó bao gồm tìm kiếm và bản địa hóa, được cung cấp bởi Algolia (tìm kiếm) và Crowdin (hỗ trợ ngôn ngữ và quốc tế hóa).
Bây giờ, hãy nói về lý do tại sao chúng ta sử dụng React cho hướng dẫn này. Chà, Docusaurus được xây dựng trên React, giúp bạn dễ dàng tùy chỉnh trang web. Ngoài ra, Docusaurus hỗ trợ Markdown và MDX (cho phép bạn sử dụng React JSX trong nội dung markdown của mình).
Bản thân là một nhà văn kỹ thuật, tôi thích rằng công cụ này hỗ trợ Markdown, công cụ mà tôi khá quen thuộc. Nó cho phép tôi tập trung vào việc tạo tài liệu hữu ích mà không phải lo lắng về việc chuyển đổi văn bản sang các định dạng văn bản khác.
Bắt đầu và cài đặt
Bắt đầu với Docusaraus khá đơn giản. Điều đầu tiên bạn cần làm là đi đến thiết bị đầu cuối của mình và chạy lệnh bên dưới:
npx create-docusaurus@latest my-website classic
Ghi: Nhóm Docusaurus đề xuất mẫu này vì nó dễ dàng hơn để bắt đầu nhanh. Nó cũng chứa - bao gồm tài liệu tiêu chuẩn, blog, trang tùy chỉnh và khung CSS (có hỗ trợ chế độ tối).classic``@docusaurus/preset-classic
Cấu trúc dự án
Sau khi cài đặt, đây là cấu trúc dự án Docusaurus mới được tạo của bạn sẽ trông như thế nào:
📦my-website
┣ 📂blog
┃ ┣ 📂2021-08-26-welcome
┃ ┃ ┣ 📜docusaurus-plushie-banner.jpeg
┃ ┃ ┗ 📜index.md
┃ ┣ 📜2019-05-28-first-blog-post.md
┃ ┣ 📜2019-05-29-long-blog-post.md
┃ ┣ 📜2021-08-01-mdx-blog-post.mdx
┃ ┣ 📜authors.yml
┃ ┗ 📜tags.yml
┣ 📂docs
┃ ┣ 📂tutorial-basics
┃ ┃ ┣ 📜congratulations.md
┃ ┃ ┣ 📜create-a-blog-post.md
┃ ┃ ┣ 📜create-a-document.md
┃ ┃ ┣ 📜create-a-page.md
┃ ┃ ┣ 📜deploy-your-site.md
┃ ┃ ┣ 📜markdown-features.mdx
┃ ┃ ┗ 📜_category_.json
┃ ┣ 📂tutorial-extras
┃ ┃ ┣ 📂img
┃ ┃ ┃ ┣ 📜docsVersionDropdown.png
┃ ┃ ┃ ┗ 📜localeDropdown.png
┃ ┃ ┣ 📜manage-docs-versions.md
┃ ┃ ┣ 📜translate-your-site.md
┃ ┃ ┗ 📜_category_.json
┃ ┗ 📜intro.md
┣ 📂src
┃ ┣ 📂components
┃ ┃ ┗ 📂HomepageFeatures
┃ ┃ ┃ ┣ 📜index.js
┃ ┃ ┃ ┗ 📜styles.module.css
┃ ┣ 📂css
┃ ┃ ┗ 📜custom.css
┃ ┗ 📂pages
┃ ┃ ┣ 📜index.js
┃ ┃ ┣ 📜index.module.css
┃ ┃ ┗ 📜markdown-page.md
┣ 📂static
┃ ┣ 📂img
┃ ┃ ┣ 📜docusaurus-social-card.jpg
┃ ┃ ┣ 📜docusaurus.png
┃ ┃ ┣ 📜favicon.ico
┃ ┃ ┣ 📜logo.svg
┃ ┃ ┣ 📜undraw_docusaurus_mountain.svg
┃ ┃ ┣ 📜undraw_docusaurus_react.svg
┃ ┃ ┗ 📜undraw_docusaurus_tree.svg
┃ ┗ 📜.nojekyll
┣ 📜.gitignore
┣ 📜babel.config.js
┣ 📜docusaurus.config.js
┣ 📜package.json
┣ 📜README.md
┗ 📜sidebars.js
Bây giờ, hãy khám phá một số thư mục chính:
-
blog/: Đây là nơi bạn lưu trữ các bài đăng trên blog của mình -
docs/: Như tên của nó, đây là nơi các dự án tài liệu của bạn được lưu giữ -
src/: Thư mục này cho phép bạn tùy chỉnh trang web của mình hơn nữa bằng cách sử dụng mã React. -
static: Tại đây, bạn lưu trữ các tệp tĩnh như hình ảnh, logo, biểu tượng yêu thích, v.v.
Một tệp rất quan trọng là tệp, hoạt động như tệp cấu hình chính cho trang web của bạn.docusaurus.config.js
Cách khởi động trang web Docusaurus của bạn
Để chạy trang web của bạn cục bộ, trước tiên hãy mở một thiết bị đầu cuối mới trên IDE của bạn và chạy lệnh sau để khởi động máy chủ phát triển:
cd my-website
npm i
npx docusaurus start
Sau khi chạy lệnh trên, trình duyệt biên dịch các tệp React và Markdown và khởi động một máy chủ phát triển cục bộ tại http://localhost:3000/. Docusaurus cho phép tải lại nóng, vì vậy bạn có thể tự động xem các thay đổi được thực hiện cho các tệp React, Markdown và MDX của mình - mà không cần tải lại toàn bộ ứng dụng của bạn.
Đây là giao diện trang web trên trình duyệt của bạn:
Trong hình trên, trước tiên bạn được chào đón đến một trang web trực quan và dễ điều hướng. Ở góc trên cùng bên trái của trang web, bạn sẽ thấy phần "Hư ớng dẫn" và "Blog".
-
Hướng dẫn: Đây là nơi người dùng có thể xem phiên bản trực tiếp của tài liệu của bạn.
-
Blog: Đây là nơi người dùng có thể xem phiên bản trực tiếp của blog của bạn.
Liên kết đến repo GitHub mã nguồn mở Docusaurus và biểu tượng để chuyển đổi trang web của bạn giữa chế độ sáng và tối nằm ở góc trên cùng bên phải của trang web.
Ngoài ra, bạn có thể sử dụng docusaurus.new để kiểm tra Docusaurus nhanh chóng trong sân chơi mà không cần phải trải qua quá trình cài đặt. Tại đây, bạn có một tùy chọn để lựa chọn giữa CodeSandbox và StackBlitz.
Cách tạo tài liệu (Tổng quan)
Chúng ta hãy xem xét kỹ hơn thư mục của chúng tôi. Nếu chúng ta quay trở lại trang web địa phương của mình và nhấp vào "Hướng dẫn", chúng ta sẽ thấy một số trang tài liệu được tạo sẵn, như hình dưới đây:docs
Các trang tài liệu này được phản ánh trong thư mục nằm trong IDE của bạn. Khi chúng tôi mở trang, chúng tôi có thể điều chỉnh tên hoặc vị trí của mỗi trang. Điều này có nghĩa là bạn không phải đặt tên các thư mục giống với tên trang, vì tên của tệp sẽ là URL của trang.docs``category.json
Để tạo tài liệu mới của chúng tôi, hãy sử dụng các bước sau:
-
Xóa tất cả các tệp trong thư mục tài liệu. Trình duyệt và thiết bị đầu cuối của bạn thường sẽ hiển thị lỗi sau đó.
Điều này là do chúng ta cần ít nhất một trang trong thư mục docs.
-
Tạo một tệp mới bên trong thư mục docs, có thể được đặt tên bất cứ thứ gì bạn thích, nhưng trong trường hợp của chúng tôi, tôi đã đặt tên nó single-page.md. Bạn sẽ thấy thay đổi này ngay lập tức được phản ánh khi bạn truy cập trang web địa phương của mình. Đây là những gì bạn sẽ thấy trong phần trang tài liệu:
Bên trong tệp mới được tạo này, bạn có thể tạo tài liệu của mình một cách liền mạch. Hình ảnh trên cho thấy nội dung Markdown nhỏ mà tôi đã tạo nói "Trang đơn" trong H1 và "Đây là một trang duy nhất" bằng văn bản thuần túy.
Giả sử bạn muốn tạo một cấu trúc nội dung có tổ chức hơn, nhưng bạn không biết cách bắt đầu. Dưới đây là một vài bước đơn giản về cách thực hiện điều đó:
-
Tạo một thư mục mới bên trong thư mục, có tên là "Bắt đầu"
docs -
Tạo các tệp Markdown mới bên trong thư mục "Bắt đầu" và đặt tên cho chúng bất cứ thứ gì bạn thích. Vì lợi ích của hướng dẫn này, hãy đặt tên cho nó
API-docs.mdvàSession-replay.md. -
Viết tài liệu của bạn trong Markdown
Đây là cách cấu trúc tệp sẽ trông giống như trên IDE của bạn:
📦docs
┣ 📂Getting started
┃ ┣ 📜Open-replay.md
┃ ┗ 📜Session-replay.md
┗ 📜single-page.md
Dưới đây là một GIF đơn giản để chứng minh cách thức hoạt động của nó trên trang web tài liệu địa phương.
Bây giờ, hãy thử tạo một trang riêng trong thư mục. Để làm điều này, hãy tạo một trang trong thư mục. Bên trong tệp, chúng tôi sẽ bao gồm văn bản JSON sau:doc``category.json``Getting started``category.json
{
"label": "Custom Title",
"position": 2,
"link": {
"type": "generated-index",
"description": "This is a custom description"
}
}
-
Đối tượng tạo một trang riêng cho thư mục.
link -
Thuộc tính được đặt thành tạo-chỉ mục, có nghĩa là thuộc tính sẽ tạo các trang có tất cả các trang phụ.
type -
Thuộc tính là mô tả về trang sẽ hiển thị bên dưới tiêu đề.
description
Khi bạn kiểm tra trang web tài liệu được lưu trữ cục bộ của mình, bạn sẽ thấy rằng nhãn đã thay đổi và một trang riêng đã được tạo cho thư mục.
Trong phần này, tôi sẽ chỉ cho bạn một ví dụ về cách các tiêu đề và bảng nội dung hoạt động trong Docusaurus.
Điều đầu tiên tôi làm là tạo một tệp markdown.md. Sau đó, tôi dán một vài tiêu đề ở định dạng văn bản Markdown ngay bên trong tệp, như thế này:
---
title: Basic Markdown
sidebar_position: 1
---
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
Khi chúng tôi quay trở lại trang web của mình, chúng tôi có thể thấy rằng chỉ các tiêu đề cấp 2 và 3 được tự động thêm vào, giống như hình dưới đây:
Chúng tôi có thể chỉnh sửa để đảm bảo rằng tất cả các tiêu đề hiển thị. Để thực hiện việc này, trước tiên hãy tạo một table-of-contents.md, sau đó dán vào Markdown sau:
---
title: Table of Contents
sidebar_position: 2
toc_min_heading_level: 2
toc_max_heading_level: 6
---
import TOCInline from '@theme/TOCInline';
<TOCInline toc={toc} minHeadingLevel={2} maxHeadingLevel={6} />
## Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
### Heading 3
Some content here.
#### Heading 4
Some content here.
##### Heading 5
Some content here.
###### Heading 6
Some content here.
## Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
### Heading 3
Some content here.
#### Heading 4
Some content here.
##### Heading 5
Some content here.
###### Heading 6
Some content here.
## Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
### Heading 3
Some content here.
#### Heading 4
Some content here.
##### Heading 5
Some content here.
###### Heading 6
Some content here.
Tôi đã thêm một thuộc tính TOC và đặt các mức tiêu đề tối thiểu và tối đa với và . Chúng tôi cũng đã thêm một mục lục nội tuyến bằng cách nhập đầu tiên từ . Sau đó, chúng tôi đã tạo một thành phần TOCInline (có thể được đặt ở bất cứ đâu bạn muốn TOC của mình hiển thị).toc_min_heading_level: 2``toc_max_heading_level: 6``TOCInline``@theme/TOCInline
Bây giờ, tất cả các tiêu đề hiển thị trong phần mục lục của trang web:
Đẹp phải không?
Thành phần MDX và React
Bây giờ, hãy nói về một trong những tính năng thú vị nhất của Docusaurus: các thành phần MDX và React.
Bạn có thể hỏi - Docusaurus có thể sử dụng hoặc trong tệp Markdown như thế nào? Chà, đó là bởi vì Docusaurus sử dụng MDX, về cơ bản là Markdown với JSX.TOC``import
Để chứng minh điều này, hãy tạo một tệp Markdown mới bên trong thư mục của chúng ta có tiêu đề MDX.md , sau đó chúng ta tạo một tệp riêng bên trong thư mục > và đặt tên cho tệp . Sau đó, chúng tôi dán mã sau:Getting started``src``components``Tag.js
import React from 'react';
export default function Tag({ children, color }) {
return (
<span
style={{
backgroundColor: color,
borderRadius: '4px',
color: '#fff',
padding: '0.2rem 0.5rem',
fontWeight: 'bold',
}}
>
{children}
</span>
);
}
Ở đây, đầu tiên chúng ta import thư viện Core React, và sau đó chúng ta định nghĩa một component chức năng gọi là Tag, lấy hai prop làm đầu vào: và . Trong câu lệnh return của chúng ta, chúng ta đã bao gồm các kiểu CSS của chúng ta cho phần tử .children``color``span
Bên trong tệp MDX.md, dán mã dưới đây:
---
title: MDX
sidebar_position: 3
---
import Tag from '@site/src/components/Tag';
<Tag color="#FF5733">Important</Tag> information: This is an <Tag color="#3399FF">Exciting</Tag> example of custom components!
I can write **Markdown** alongside my _JSX_!
Ở đây, chúng tôi nhập từ thư mục thành phần của chúng tôi. Đây là những gì nó trông giống như:Tag
Ghi: Bởi vì chúng tôi sử dụng MDX, Docusaurus đi kèm với các thành phần được xây dựng sẵn như Tab, cảnh báo, khối mã và hơn thế nữa. Hãy kiểm tra chúng trong các tiểu mục sau.
Tab
Trong tiểu mục này, chúng ta sẽ nói về các tab như một thành phần được xây dựng sẵn trong Docusaurus. Hãy đi sâu vào ngay!
Để bắt đầu, hãy tạo một tệp Markdown mới có tên tabs.md và dán mã sau:
---
title: Tabs in Markdown
sidebar_position: 4
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
<Tabs>
<TabItem value="book" label="Book" default>
Dive into the world of knowledge with a captivating book 📚
</TabItem>
<TabItem value="painting" label="Painting">
Admire the strokes of artistry on a beautiful painting 🖼️
</TabItem>
<TabItem value="music" label="Music">
Let the soothing melodies of music transport you 🎶
</TabItem>
</Tabs>
I'm a text that doesn't belong to any tab. So I'm always visible.
Chúng tôi nhập khẩu từ và từ . Sau đó, chúng tôi đã tạo một thành phần Tabs, là vùng chứa và thành phần là chính tab. Thuộc tính là giá trị của tab, trong khi thuộc tính là nhãn của tab. Thuộc tính mặc định xác định tab nào được mở theo mặc định – trong trường hợp này là tab "Sách".Tabs``@theme/Tabs``TabItem``@theme/TabItem``TabItem``value``label
Đây là cách nó trông:
Mỗi tab đều có thể nhấp và chuyển tiếp trơn tru.
Cảnh báo hoặc Khuyên nhủ
Docusaurus đi kèm với các cảnh báo hoặc lời khuyên được xây dựng sẵn. Để tạo cảnh báo, bạn chỉ cần bọc văn bản bằng ba dấu hai chấm và theo dõi nó với loại cảnh báo bạn muốn người đọc ghi nhớ.
Hãy tạo một tệp Markdown mới có tên alerts.md và dán vào Markdown sau:
---
title: Alerts or Admonitions
sidebar_position: 5
---
:::note
Here's some **information** with _Markdown_ styling.
:::
:::tip
Here's a **helpful tip** with _formatted text_.
:::
:::info
Here's some **useful info** presented in a clear way.
:::
:::caution
Please take **extra caution** with this important note.
:::
:::danger
This is a **dangerous situation** you need to be aware of.
:::
:::note[This is a _custom title_]
And you can add images as well.
:::
Các loại cảnh báo khác nhau, như được hiển thị trong Markdown ở trên, là:
-
note -
tip -
info -
caution -
danger
Đây là những gì nó trông giống như trên trang web:
Cảnh báo và lời khuyên khá phổ biến trong các trang web tài liệu. Vì vậy, nếu bạn đã từng tự hỏi làm thế nào nó được thực hiện, tốt, đây là nó! Nó khá đơn giản.
Khối mã
Như chúng ta đã biết, Docusaurus hỗ trợ MDX, cho phép chúng ta bao gồm các khối mã trong các tệp của mình. Các khối mã là các khối văn bản được bao bọc bởi các chuỗi gồm ba dấu gạch ngược. Bạn có thể thêm tên của ngôn ngữ sau dấu tích cuối cùng trong ba dấu tích ngược.
Hãy tạo một tệp codeblocks.md và dán mã JSX sau:
---
title: Codeblocks
sidebar_position: 6
---
```jsx title="Codeblock"
function Greeting(props) {
return <p>Welcome, {props.userName}!</p>;
}
export default Greeting;
```
```jsx title="Highlight Lines"
function HighlightText(highlight) {
if (highlight) {
return 'This text is highlighted!';
}
return 'Nothing highlighted';
}
function HighlightMoreText(highlight) {
if (highlight) {
return 'This range is highlighted!';
}
return 'Nothing highlighted';
}
```
```jsx title="Line Numbers" showLineNumbers
import React from 'react';
function UserProfile(props) {
const { username, email, isAdmin } = props;
return (
<div>
<h1>User Profile</h1>
<p>Username: {username}</p>
<p>Email: {email}</p>
{isAdmin && <p>Admin User</p>}
</div>
);
}
export default UserProfile;
```
```jsx title="Line Numbers with Highlight" {4,9-11} showLineNumbers
import React from 'react';
function UserProfile(props) {
const { username, email, isAdmin } = props;
return (
<div>
<h1>User Profile</h1>
<p>Username: {username}</p>
<p>Email: {email}</p>
{isAdmin && <p>Admin User</p>}
</div>
);
}
export default UserProfile;
Đây là những gì các khối mã trông giống như:
Bạn có thể dễ dàng sao chép mã bằng cách di con trỏ qua các khối mã và nhấp vào biểu tượng sao chép ở phía trên bên phải của khối mã.
Ghi: Theo mặc định, Docusaurus sử dụng để tô sáng cú pháp.Prism
Nếu bạn cũng muốn làm nổi bật một số dòng mã, bạn có thể làm điều đó bằng cách thêm nhận xét như thế này:
return 'This text is highlighted!';
}
return 'Nothing highlighted';
}
function HighlightMoreText(highlight) {
if (highlight) {
return 'This range is highlighted!';
}
-
highlight-next-line: cho phép bạn đánh dấu một dòng mã duy nhất -
highlight-start and highlight-end: cho phép bạn làm nổi bật một loạt các dòng
Docusaurus Blog
Blog Docusaurus cũng đi kèm theo mặc định với mẫu. Nếu bạn không có blog, bạn có thể thêm các dòng sau vào tệp của mình:classic``docusaurus.config.js
{
label: 'Blog',
to: '/blog',
}
Thông thường, dòng này phải có trong tệp cấu hình của bạn sau khi cài đặt Docusaurus lần đầu tiên.
Blog Docusaurus rất đơn giản để hiểu. Điều hướng đến thư mục blog trong trình khám phá dự án và bạn sẽ thấy tất cả các bài đăng trên blog, là tệp MDX. Ngày đăng bài trên blog nên được bao gồm trong tên tệp như hình dưới đây:
Khi bạn mở một trong các bài đăng trên blog, bạn sẽ thấy một cái gì đó như thế này:
---
slug: long-blog-post
title: Long Blog Post
authors: yangshun
tags: [hello, docusaurus]
---
This is the summary of a very long blog post,
Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
<!-- truncate -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
slug: Bạn có thể thêm một slug vào URL của bài đăng trên blog -
title: Tiêu đề của bài đăng trên blog -
authors: Các tác giả của bài đăng trên blog -
tags: Thẻ liên quan đến bài đăng trên blog
Trong bài đăng trên blog, chúng ta cũng có thể sử dụng tất cả các tính năng Markdown cộng với JSX như chúng ta đã thấy trước đây.
Trang tùy chỉnh
Về mặt kỹ thuật, Docusaurus không chỉ là một trình tạo trang web tài liệu ưa thích với một blog. Đó là một trình tạo trang web tĩnh tiêu chuẩn - có nghĩa là bạn có thể tạo bất kỳ trang nào bạn muốn.
Để xem cách tạo một trang tùy chỉnh trong Docusaurus hoạt động, hãy tạo một tệp about.js trong thư mục > và bao gồm mã sau:src``pages
import React from 'react';
import Layout from '@theme/Layout';
import Head from '@docusaurus/Head';
export default function About() {
return (
<Layout>
<Head>
<title>About</title>
<meta name="description" content="This is the about page" />
</Head>
<div>
<h1 className="red-text">About</h1>
<p>This is the about page.</p>
</div>
</Layout>
);
}
Khi bạn đi đến http://localhost:3000/about, bạn sẽ thấy một cái gì đó như thế này:
Chúng ta cũng có thể thêm trang vào navbar bằng cách vào tệp docusaurus.config.js và thêm một mục mới vào mảng navbar. Mục trông như thế này:
{to: 'about', label: 'About', position: 'left'},
Sau đó, nó xuất hiện trên menu điều hướng trang chủ như thế này:
Bây giờ bạn có thể tạo kiểu và tùy chỉnh tệp theo bất kỳ cách nào bạn muốn bằng React.about.js
Phong cách trong Docusaurus
Hãy xem cách bạn có thể tạo kiểu cho trang web của mình trong Docusaurus. Cách dễ nhất là tùy chỉnh tệp bên trong tệp >. Đây là giao diện của tệp:custom.css``css``custom.css
Tại đây, bạn có thể thay đổi toàn bộ lược đồ màu của trang web và kiểu dáng khác nhau cho tệp này.
Bạn có thể đọc thêm về điều này trong tài liệu về kiểu dáng và bố cục Docusarus.
SEO trong Docusaurus
Docusaurus rất coi trọng SEO. Theo mặc định, Docusaurus tự động thêm tiêu đề mô tả, liên kết URL chuẩn và siêu dữ liệu hữu ích khác vào mỗi trang. Điều này có thể được cấu hình như hình dưới đây:
---
title: Our First Page
sidebar_position: 1
description: A short description of this page
image: ../static/img/docusaurus-social-card.jpg
keywords: [keywords, describing, the main topics]
---
# Single Page
This is a single page.
Bạn có thể đọc thêm về điều này trong tài liệu SEO Docusaurus.
Triển khai
Việc triển khai khá dễ dàng với Docusaurus. Vì nó là một trang web tĩnh, bạn có thể triển khai nó cho bất kỳ dịch vụ lưu trữ trang web tĩnh nào. Để thực hiện việc này, hãy chạy lệnh trên CLI của bạn. Điều này tạo ra một thư mục xây dựng như dưới đây:npm run build
Sau đó, bạn có thể tải nội dung của thư mục xây dựng lên dịch vụ lưu trữ của mình.
Kết thúc
Trong bài viết này, chúng tôi đã đề cập đến cách xây dựng tài liệu từ đầu, cách tạo, tùy chỉnh và tạo kiểu trang cũng như sức mạnh SEO tuyệt vời của Docusaurus.
Docusaurus thân thiện với cả nhà phát triển và nhà văn kỹ thuật. Là một nhà phát triển, bạn có thể tập trung vào việc tùy chỉnh trang web, trong khi là một nhà văn kỹ thuật, bạn có thể tập trung vào việc viết tài liệu.
Tôi thực sự sẽ giới thiệu công cụ này cho cả công ty khởi nghiệp và các doanh nghiệp đã thành lập muốn xây dựng các trang web tài liệu tuyệt đẹp.
Hướng dẫn này không đầy đủ, nhưng bao gồm mọi thứ bạn cần biết về những điều cơ bản của việc xây dựng một trang web tài liệu với React và Docusaurus.
Tôi hy vọng bạn thấy nó hữu ích :)
Đây là liên kết đến mã GitHub của tôi cho các mục đích tiếp theo.
Và đây là tài liệu chính của Docusaurus nếu bạn muốn tìm hiểu sâu hơn. Source: Cách xây dựng một trang web tài liệu bằng React và Docusaraus