Update 'README.md'

README.md

@@ -1,8 +1,8 @@
 # Hura Docs
 
-## Adman Docs 
+## Adman Docs
 
-0. **[Link Demo](https://spiffy-axolotl-a27647.netlify.app/)**
+0. Website Docs mẫu tại **[Adman Docs Beta](https://spiffy-axolotl-a27647.netlify.app/)**
 
 1. Cài đặt **Nodejs phiên bản** mới nhất: https://nodejs.org
 
@@ -12,4 +12,128 @@
 
 4. Sau khi cài đặt xong **node_module**. Chạy lệnh npm `npm run start` để khởi chạy **dự án**.
 
-5. Xây dựng phiên bản chạy tĩnh trên server, chạy lệnh `npm run build`, xuất hiện thư mục **build** chứa toàn bộ **dự án**.
+5. Xây dựng phiên bản chạy tĩnh trên server, chạy lệnh `npm run build`, xuất hiện thư mục **build** chứa toàn bộ **dự án**.
+
+## Docusaurus
+
+Đọc Docs và API tại **[Docusaurus Docs](https://docusaurus.io/docs)**
+
+Xem Website demo hướng dẫn tại **[Tutorial Demo](https://tutorial.docusaurus.io/)**
+
+### Tạo dự án mới
+
+Cài đặt Node.js và khởi tạo **dự án với tên là my-website, module mặc định - classic**:
+
+```
+npx create-docusaurus@latest my-website classic
+```
+
+Khởi chạy **dự án vừa tạo**:
+
+```
+cd my-website
+npx docusaurus start
+```
+
+Local host : **[http://localhost:3000](http://localhost:3000)**
+
+### Một số khái niệm cơ bản
+
+- Thẻ heading `h1, h2, h3,...` tương ứng với `#, ##, ###,...` **[Heading and List](https://docusaurus.io/docs/markdown-features/toc)**
+- Thẻ list - ul: dùng dấu `-`
+  ```
+  - List cấp 1
+      - List cấp 2
+  ```
+- Chữ in đậm: `**content**`
+- Chữ in nghiêng: `*content*`
+- Thẻ tag a - link: `[content](url)`
+- Thẻ tag img - hình ảnh `![alt](url)`
+- Thẻ code: **[Code Block](https://docusaurus.io/docs/markdown-features/code-blocks)**
+- Thẻ lời khuyên: Tip, Note, Caution,... **[Admonitions](https://docusaurus.io/docs/markdown-features/admonitions)**
+
+### Cây thư mục
+
+Có một số thư mục và file quan trọng như:
+
+- thự mục **docs**: chứa các bài viết hướng dẫn chính.
+- thư mục **src** bao gồm:
+  - **components**: các thành phần chính của website có thể tái sử dụng nhiều lần.
+  - **css**: chứa file `custom.css` - file css global, hay `css` vào đây.
+  - **pages**: chứa code giao diện các page tĩnh, trong đó `index.js` mặc định là giao diện trang **Homepage**.
+- thư mục **blog**: chưa bài blog.
+- thư mục **static**: chứa các file tĩnh tùy chọn.
+- file **docusaurus.config.js**: file chứa toàn bộ `option config` của toàn bộ dự án **[docusaurus.config](https://docusaurus.io/docs/api/docusaurus-config)**.
+
+### Tạo phiên bản
+
+Xem thêm tại **[Versioning](https://docusaurus.io/docs/versioning)**
+
+- **Tạo phiên bản** khi ta cần tạo ra nhiều hướng dẫn cho từng phiên bản từ cao xuống thấp. Ví dụ như Hura 7 - 8 - 9 - 10.
+- **Tạo phiên bản** sẽ sao lưu lại toàn bộ nội dung của thư mục **docs** mặc định và gán nó cho phiên bản đã tạo.
+- **Lưu ý**: thư mục **docs** mặc định luôn được xác định là phiên bản mới nhất. Ví dụ là Hura 10.
+
+#### 1. Tạo 1 phiên bản mã số - 1.1.0 (tên phiên bản)
+
+```
+npm run docusaurus docs:version 1.1.0
+```
+
+Lúc này sẽ có 2 thư mục và 1 file xuất hiện:
+
+- thư mục **versioned_docs**: chứa danh sách thư mục từng phiên bản, bên trong mỗi thư mục đó là nội dung của từng phiên bản. Nếu bạn cần chỉnh sửa phiên bản nào thì phải vào thư mục phiên bản đó.
+- thư mục **versioned_sidebars**: chứa file config thanh điều hướng bên trái.
+- file **versions.json**: chứa danh sách các phiên bản đã tạo.
+
+#### 2. Chỉnh sửa version tại file docusaurus.config
+
+Trong đó `versions.current.label` chính là tên phiên bản mới nhất, bạn có thể đặt tên tùy ý.
+Nếu đặt theo số phiên bản vui lòng chỉnh sửa lại sau mỗi lần cập nhật phiên bản mới.
+
+```
+module.exports = {
+  presets: [
+    '@docusaurus/preset-classic',
+    docs: {
+      // last version
+      lastVersion: 'current',
+      versions: {
+        current: {
+          label: 'Last', // tên phiên bản mới nhất
+        },
+      },
+      // last version
+    },
+  ],
+};
+```
+
+#### 3. Thêm chọn phiên bản tại Navbar Header - file docusaurus.config
+
+```
+module.exports = {
+  themeConfig: {
+    navbar: {
+      // Version dropdown
+      items: [
+        {
+          type: 'docsVersionDropdown',
+          position: 'right',
+          dropdownActiveClassDisabled: true,
+        },
+      ],
+      // Version dropdown
+    },
+  },
+};
+```
+
+#### Ví dụ
+
+- Ta hiện tại có `Hura 7 là phiên bản cũ` và `Hura 8 là phiên bản hiện tại`, `chứa trong thư mục docs mặc định`.
+- Ta muốn thêm cho `Hura 9`, thì tạo phiên bản cho `Hura 8`
+
+  ```
+  npm run docusaurus docs:version Hura-8
+  ```
+- Lúc này thư mục **docs** mặc định sẽ dùng để chỉnh sửa nội dung cho `Hura 9` và `Hura 9` sẽ là phiên bản mới nhất.