Guidelines for Adding a new page to a already existing section in the Project
This project is using VitePress, and the site structure is controlled through the config.tms
file. Based on the provided configuration, here are detailed steps to add a new page or a new section to the project.
1. Adding a New Page to an Existing Section
If you want to add a new page to one of the existing sections, follow these steps:
Steps:
Create the New Markdown File:
- Each page in VitePress is represented by a Markdown (
.md
) file. - Navigate to the correct directory inside the
src
folder for the section where you want to add a new page. - Create a new Markdown file. For example, to add a page to the "Why Cat Docs?" section:
- Navigate to
src/why-cat-docs/
. - Create a new file called, for example,
new-topic.md
.
- Navigate to
- Each page in VitePress is represented by a Markdown (
Add Content to the Markdown File:
- Open
new-topic.md
and add the relevant content for your page. - Optionally, at the top of the file, you can add frontmatter to define a title or meta description:markdown
--- title: New Topic description: Learn about the new topic in Cat Docs. ---
- Open
Update the Sidebar Navigation:
- Open the
config.tms
file. - Find the section where you want to add the new page, and add it under
items
. For example, to add it under "Why Cat Docs?", modify it like this:typescriptsidebar: [ { text: "Why Cat Docs?", items: [ { text: "Why", link: "/why-cat-docs/why" }, { text: "New Topic", link: "/why-cat-docs/new-topic" } ], }, // Other sections... ]
- Open the
Link the Page in the
nav
(Optional):- If you want to add the new page link to the top navigation, you can update the
nav
section in the same file:typescriptnav: [ { text: "Home", link: "/" }, { text: "Why Cat Docs?", link: "/why-cat-docs/why" }, { text: "New Topic", link: "/why-cat-docs/new-topic" } // Add this line ],
- If you want to add the new page link to the top navigation, you can update the
Test the Page:
- Run the local server (usually with
vitepress dev
ornpm run dev
) to see the new page live in the project.
- Run the local server (usually with