Skip to main content

Tạo trang

Tạo trang Trong phần này, chúng ta sẽ tìm hiểu về cách tạo các trang trong Docusaurus.

Plugin cho phép bạn tạo các trang độc lập một lần như trang giới thiệu, trang sân chơi hoặc trang hỗ trợ. Bạn có thể sử dụng các thành phần React hoặc Markdown.@docusaurus/plugin-content-pages

ghi Trang không có thanh bên, chỉ có tài liệu mới có.

Thông tin Kiểm tra tài liệu Tham khảo API Plugin Pages để biết danh sách đầy đủ các tùy chọn.

Thêm trang React React được sử dụng làm thư viện giao diện người dùng để tạo trang. Mỗi thành phần trang nên xuất một thành phần React và bạn có thể tận dụng tính biểu cảm của React để xây dựng nội dung phong phú và tương tác.

Tạo một tệp :/src/pages/helloReact.js

/src/pages/helloReact.js

import React from 'react';
import Layout from '@theme/Layout';

export default function Hello() {
  return (
    <Layout title="Hello" description="Hello React Page">
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: '50vh',
          fontSize: '20px',
        }}>
        <p>
          Edit <code>pages/helloReact.js</code> and save to reload.
        </p>
      </div>
    </Layout>
  );
}

Sau khi bạn lưu tệp, máy chủ phát triển sẽ tự động tải lại các thay đổi. Bây giờ hãy mở http://localhost:3000/helloReact và bạn sẽ thấy trang mới mà bạn vừa tạo.

Mỗi trang không đi kèm với bất kỳ kiểu dáng nào. Bạn sẽ cần nhập thành phần từ và bao bọc nội dung của mình trong thành phần đó nếu bạn muốn thanh điều hướng và/hoặc chân trang xuất hiện.Layout@theme/Layout

mẹo Bạn cũng có thể tạo các trang TypeScript với phần mở rộng ()..tsxhelloReact.tsx

Thêm trang Markdown Tạo một tệp :/src/pages/helloMarkdown.md

/src/pages/helloMarkdown.md

---
title: my hello page title
description: my hello page description
hide_table_of_contents: true
---

Hello

How are you?

Theo cách tương tự, một trang sẽ được tạo tại http://localhost:3000/helloMarkdown.

Các trang Markdown kém linh hoạt hơn các trang React vì nó luôn sử dụng bố cục chủ đề.

Dưới đây là một trang Markdown ví dụ.

mẹo Bạn cũng có thể sử dụng toàn bộ sức mạnh của React trong các trang Markdown, hãy tham khảo tài liệu MDX.

Routing Nếu bạn đã quen thuộc với các trình tạo trang web tĩnh khác như Jekyll và Next, phương pháp định tuyến này sẽ cảm thấy quen thuộc với bạn. Bất kỳ tệp JavaScript nào bạn tạo trong thư mục sẽ được tự động chuyển đổi thành trang web, theo hệ thống phân cấp thư mục. Chẳng hạn:/src/pages//src/pages/

/src/pages/index.js → [baseUrl]
/src/pages/foo.js → [baseUrl]/foo
/src/pages/foo/test.js → [baseUrl]/foo/test
/src/pages/foo/index.js → [baseUrl]/foo/

Trong kỷ nguyên phát triển dựa trên thành phần này, chúng tôi khuyến khích đặt cùng kiểu dáng, đánh dấu và hành vi của bạn cùng nhau thành các thành phần. Mỗi trang là một thành phần và nếu bạn cần tùy chỉnh thiết kế trang của mình với các kiểu của riêng mình, chúng tôi khuyên bạn nên đặt cùng kiểu của bạn với thành phần trang trong thư mục riêng của nó. Ví dụ: để tạo trang "Hỗ trợ", bạn có thể thực hiện một trong các thao tác sau:

Thêm tệp/src/pages/support.js
Tạo thư mục và tệp./src/pages/support//src/pages/support/index.js

Loại thứ hai được ưu tiên hơn vì nó có lợi ích là cho phép bạn đặt các tệp liên quan đến trang trong thư mục đó. Ví dụ: một tệp mô-đun CSS () với các kiểu chỉ được sử dụng trên trang "Hỗ trợ".styles.module.css

ghi Đây chỉ là một cấu trúc thư mục được khuyến nghị và bạn vẫn sẽ cần nhập thủ công tệp mô-đun CSS trong mô-đun thành phần của bạn ().support/index.js

Theo mặc định, bất kỳ tệp Markdown hoặc JavaScript nào bắt đầu bằng sẽ bị bỏ qua và không có tuyến đường nào được tạo cho tệp đó (xem tùy chọn)._exclude

my-website
├── src
│   └── pages
│       ├── styles.module.css
│       ├── index.js
│       ├── _ignored.js
│       ├── _ignored-folder
│       │   ├── Component1.js
│       │   └── Component2.js
│       └── support
│           ├── index.js
│           └── styles.module.css
.

cảnh báo Tất cả các tệp JavaScript / TypeScript trong thư mục sẽ có đường dẫn trang web tương ứng được tạo cho chúng. Nếu bạn muốn tạo các thành phần có thể tái sử dụng vào thư mục đó, hãy sử dụng tùy chọn (theo mặc định, các tệp có tiền tố , test files() và các tệp trong thư mục không được chuyển thành trang).src/pages/exclude_.test.js__tests__

Tuyến đường trùng lặp Bạn có thể vô tình tạo nhiều trang được truy cập trên cùng một lộ trình. Khi điều này xảy ra, Docusaurus sẽ cảnh báo bạn về các tuyến trùng lặp khi bạn chạy hoặc (hành vi có thể định cấu hình thông qua cấu hình onDuplicateRoutes), nhưng trang web vẫn sẽ được xây dựng thành công. Trang được tạo cuối cùng sẽ có thể truy cập được, nhưng nó sẽ ghi đè các trang xung đột khác. Để giải quyết vấn đề này, bạn nên sửa đổi hoặc xóa mọi tuyến đường xung đột.yarn startyarn build

5:10:59 AM