Chủ đề VuePress Hope - game nổ hũ 88

Bìa Xây dựng kho kiến thức riêng của bạn với chủ đề này, có thể triển khai bằng Vercel.

Môi trường chạy
Cài đặt Vuepress-Hope
Bắt đầu sửa đổi cấu hình
Cấu hình thanh điều hướng
Thanh bên
Thông tin trang
Các yếu tố nhỏ khác
Plugin
Plugin mặc định được kích hoạt
Cấu hình khác

Vài ngày trước, tôi đã thành công trong việc di chuyển ghi chú đám mây sang Vuepress, giải quyết một vấn đề lo lắng nhất của tôi: Ghi chú đám mây gốc sử dụng Docsify không thể tải favicon. Ngoài ra, giao diện cũng đẹp hơn rất nhiều. So với Docsify, Vuepress không chỉ có các chức năng cơ bản (tìm kiếm, mục lục, làm nổi bật mã), mà còn hỗ trợ nhiều chức năng mở rộng. Bài viết này dùng để ghi lại cách thiết lập Vuepress, để tham khảo sau này, đồng thời có thể xem như một hướng dẫn.

Vuepress-Hope là một chủ đề của Vuepress, và cũng là chủ đề Vuepress được tải xuống nhiều nhất trên NPM, được nhiều người yêu thích nhất. Lý do nó được ưa chuộng là vì nó có sự hỗ trợ phong phú từ các plugin và cấu hình chức năng, cho phép bạn tùy chỉnh tối đa trang web theo ý muốn. Ngoài việc xây dựng hệ thống quản lý tài liệu (ghi chú đám mây), nó cũng có thể dùng làm blog. Hiện tại có rất nhiều người sử dụng Vuepress-Hope để xây dựng tài liệu và blog.

Các tài liệu chính thức có thể hơi khó hiểu, tôi cũng mất hai ngày nghiên cứu mới có thể đưa ghi chú đám mây lên mạng. Tài liệu của họ thiên về dạng tài liệu kỹ thuật hơn là hướng dẫn chi tiết, vì vậy bạn có thể tham khảo bài viết này để xây dựng một ghi chú đám mây giống hệt tôi.

Nếu bạn gặp vấn đề khi đọc hướng dẫn thiết lập của tôi, có thể là do chủ đề Vuepress-Hope đã được cập nhật, khiến một số nội dung trong bài trở nên lỗi thời. Trong trường hợp đó, bạn có thể truy cập tài liệu chính thức của Vuepress-Hope, nhưng phần còn lại vẫn có thể tiếp tục tham khảo.

Hãy bắt đầu nào!

MÔI TRƯỜNG CHẠY

Về IDE, ở đây tôi khuyến nghị sử dụng VSCode, nó hỗ trợ rất tốt cú pháp của Vuepress-Hope và cung cấp game nổ hũ 88 kiểm tra kiểu dữ liệu, tự động hoàn thiện mã nguồn.

Ngoài ra, máy tính của bạn cần có môi trường NodeJS, hãy tải phiên bản mới nhất.

Lưu ý rằng nếu phiên bản NodeJS cũ, bạn nên nâng cấp lên phiên bản mới nhất vì hướng dẫn này sử dụng phiên bản mới nhất của Vuepress-Hope, và chúng yêu cầu phiên bản NodeJS tương đối cao.

Sau khi cài đặt NodeJS, tôi khuyên bạn nên sử dụng trình quản lý gói pnpm, vì toàn bộ tài liệu chính thức của Vuepress-Hope đều sử dụng trình quản lý này và tôi cũng đang sử dụng nó.

Trong terminal, nhập các lệnh sau để kích hoạt trình quản lý gói pnpm:

1
2


corepack enable
corepack prepare pnpm@latest --activate

Shell

Khi hoàn tất bước này, bạn có thể mở PowerShell và nhập ‘pnpm’ để kiểm tra xem đã cài đặt thành công hay chưa.

CÀI ĐẶT VUEPRESS-HOPE

Sử dụng lệnh cd để chuyển đến thư mục bạn muốn cài đặt, nhập lệnh sau để khởi tạo thư mục và cài đặt Vuepress-Hope. Ở đây tôi sẽ cài đặt dự án vào thư mục gốc ổ đĩa A và đặt tên thư mục là vuepress-demo.

1
2


cd A:/
pnpm create vuepress-theme-hope vuepress-demo

Shell

Ở bước này, sẽ xuất hiện giao diện chọn ngôn ngữ như hình dưới, bạn có thể chọn tiếng Việt. Sử dụng phím mũi tên lên/xuống để chọn và nhấn Enter để xác nhận.

Sau khi chọn ngôn ngữ hiển thị, các tùy chọn tiếp theo bạn có thể tự do thiết lập theo nhu cầu của mình hoặc giữ nguyên như trong hình của tôi.

BẮT ĐẦU SỬA ĐỔI CẤU HÌNH

Mở VSCode, mở thư mục dự án vừa tạo, bây giờ bạn có thể bắt đầu chỉnh sửa.

Cấu trúc thư mục dự án như sau:

Thư mục src là thư mục tài liệu, khi tạo trang tĩnh sẽ render các tệp markdown trong thư mục này. Thư mục .vuepress chứa các tập tin cấu hình và kiểu dáng, public dùng để lưu trữ các tập tin tĩnh, styles dùng để lưu trữ các kiểu dáng, màu sắc chủ đề có thể được định nghĩa ở đây. config.ts là tập tin cấu hình tổng thể, navbar.ts là cấu hình thanh điều hướng, sidebar.ts là cấu hình thanh bên, theme.ts là cấu hình chủ đề. Trong thư mục src còn có một tập tin README.md, chứa mẫu trang chủ mạnh mẽ được tạo sẵn bởi Vuepress-Hope, bạn có thể dựa vào đó để chỉnh sửa.

CẤU HÌNH THANH ĐIỀU HƯỚNG

Điều này được cấu hình trong tập tin navbar.ts. Có vài loại thanh điều hướng có thể cấu hình, bạn có thể trực tiếp xem mã nguồn.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


//navbar.ts
import { navbar } from "vuepress-theme-hope";
export default navbar([
 "/", /* đơn */
 {
  text: "V2 Tài liệu", /* 
  icon: "book",
  link: "
 },
 {
  text: "Hướng dẫn",
  icon: "lightbulb",
  prefix: "/guide/",
  children: [ /* lồng nhau */
   {
    text: "Bar",
    icon: "lightbulb",
    prefix: "bar/",
    children: ["baz", { text: "...", icon: "ellipsis", link: "" }],
   },
   {
    text: "Foo",
    icon: "lightbulb",
    prefix: "foo/",
    children: ["ray", { text: "...", icon: "ellipsis", link: "" }],
   },
  ],
 },
]);

TypeScript

Bạn có thể mở terminal và sử dụng lệnh sau để xem trước giao diện này. Lệnh này sẽ giúp bạn xem trước tại localhost:8080.

1

pnpm docs:dev

Shell

Nếu bạn muốn thêm liên kết ngoài, bạn cần điền tên liên kết text và đường dẫn link, biểu tượng icon là tùy chọn, nếu không điền, chủ đề sẽ tự động xử lý nó như một liên kết nội bộ.

Ngoài ra, thanh điều hướng có thể bật một số tính năng bổ sung, ví dụ như ghi chú đám mây của tôi có bật chế độ toàn màn hình, chuyển đổi màu sắc chủ đề, chuyển đổi chế độ ban đêm. Điều này sẽ được giới thiệu ở phần sau.

THANH BÊN

Thanh bên khá phức tạp, bạn có thể đọc chi tiết hơn trên tài liệu chính thức, ở đây tôi chia sẻ cấu hình của riêng mình. Trong ghi chú đám mây của tôi, ví dụ như dưới mục MySQL có ba danh mục [“Kiến thức cơ bản”, “Ứng dụng nâng cao”], tôi muốn khi vào mục gốc MySQL thì hiển thị tiêu đề của ba danh mục này. Khi click vào một trong ba danh mục, sẽ hiển thị các mục con khác trong danh mục đó, như hình dưới.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


//sidebar.ts
import { sidebar } from "vuepress-theme-hope";
export default sidebar({
 '/mysql/': [
  '/mysql/Kien-thuc-co-ban/',
  '/mysql/MySQL-co-ban/',
  '/mysql/Ung-dung-cao-cap/'
 ],
 '/mysql/Kien-thuc-co-ban/': [
  '/mysql/Kien-thuc-co-ban/Nhan-dien-cSDL.md',
  '/mysql/Kien-thuc-co-ban/Thao-tac-bang.md',
  '/mysql/Kien-thuc-co-ban/Thao-tac-CSDL.md',
  '/mysql/Kien-thuc-co-ban/Loai-du-lieu-MySQL.md',
  '/mysql/Kien-thuc-co-ban/Cac-dong-cSDL-MySQL.md'
 ]
});

TypeScript

Chẳng hạn, trong mục tra cứu nhanh Assembly của tôi chỉ có một ghi chú duy nhất, không có danh mục con nào khác, tôi muốn khi vào mục này sẽ hiển thị các ghi chú khác, như hình dưới.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


//sidebar.ts
import { sidebar } from "vuepress-theme-hope";
export default sidebar({
 '/assembly/': [
  '/assembly/',
  '/awt/',
  '/crawler/',
  '/css/',
  '/django/',
  '/fastapi/',
  '/flask/',
  '/html/',
  '/java/',
  '/javascript/',
  '/linux/',
  '/mongodb/',
  '/mysql/',
  '/nlp/',
  '/pyqt6/',
  '/python/',
  '/redis/',
  '/swing/',
  '/tornado/'
 ]
});

TypeScript

Cần lưu ý rằng cấu trúc thư mục của Vuepress và giữa các tuyến đường có mối quan hệ phối hợp nhất định. Vì Vuepress cuối cùng sẽ tạo ra các trang tĩnh, khi chúng ta vào một đường dẫn mặc định, chúng ta sẽ truy cập index.html, nó được render từ tập tin README.md, và các đường dẫn khác, chẳng hạn như [“Kiến thức cơ bản.html”] sẽ được render từ [“Kiến thức cơ bản.md”]. Do đó, bạn có thể thấy rằng trong ghi chú MySQL của tôi, một số đường dẫn kết thúc bằng “.md” và một số kết thúc bằng “/”. Những đường dẫn kết thúc bằng [“某某/”] tương đương với [“某某/README.md”].

THÔNG TIN TRANG

Mỗi tập tin Markdown phía trước có thể sử dụng một số cú pháp YAML đơn giản để định nghĩa thông tin của trang này. Chẳng hạn như title đại diện cho tiêu đề của trang web này, description 123win.club là mô tả của trang web này.

Ví dụ bây giờ tôi sửa tập tin README.md ở thư mục gốc, như sau.

1
2
3
4
5
6


---
title: Đây là tiêu đề trang web
description: Đây là mô tả trang web
author: Tên tác giả
---
Đây là nội dung chính.

Markdown

Do đây là tập tin README.md ở thư mục gốc, vì vậy thường chúng ta sẽ render nó thành trang chủ, lúc này chúng ta có thể thêm dòng home: true vào phần YAML ở đầu.

Bạn có thể thêm một số yếu tố để làm cho nó trông giống trang chủ hơn. Dưới đây là đoạn mã mẫu đã được tôi rút gọn từ mẫu mặc định của chính thức.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45


---
home: true
icon: home
title: Trang chủ dự án
heroImage: /logo.svg
bgImage: 
bgImageDark: 
bgImageStyle:
 background-attachment: fixed
heroText: Tên dự án
tagline: Bạn có thể đặt mô tả dự án ở đây.
actions:
 - text: Hướng dẫn sử dụng
  icon: lightbulb
  link: ./demo/
  type: primary
 - text: Tài liệu
  link: ./guide/
highlights:
 - header: Thêm nội dung mong muốn trong Markdown
  description: Chúng tôi đã mở rộng chuẩn CommonMark để thêm nhiều chức năng.
  image: /assets/image/markdown.svg
  bgImage: 
  bgImageDark: 
  bgImageStyle:
   background-repeat: repeat
   background-size: initial
  features:
   - title: 
    icon: clipboard-check
    details: Kiểm tra Markdown 
    link: 
   - title: Hỗ trợ hộp gợi ý
    icon: box-archive
    details: Trang trí nội dung Markdown bằng kiểu dáng
    link: 
   - title: Cảnh báo GFM
    icon: bell
    details: Hộp cảnh báo phong cách GFM
    link: 
   - title: Tab
    icon: table-columns
    details: Nhóm nội dung tương tự bằng tab
    link: 
copyright: true