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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
---
title: Getting Started
layout: ../layouts/Main.astro
---
This template already provides your pages with a side bar navigation (on the left) for your pages, and a content navigation (on the right) for your sections.
## Page navigation
The page navigation, through the side bar on the left, needs to be manually updated. Open the `config.ts` file and you will find the following structure:
```ts
export const sidebar = [
{
text: 'Introduction',
link: '', // No leading slash needed, so this links to the homepage
children: [
{ text: 'Getting Started', link: 'getting-started' },
{ text: 'Example', link: 'example' },
],
},
];
```
You can change this file to match the pages you want to display, the items within `children` can also have children elements, but only the first level and second levels will be displayed.
The page navigation is generated in the `src/components/SiteSidebar.astro`, so if you want to change the depth of elements displayed, styles, etc, that's the place to go.
## Section navigation
The section navigation, through the side bar on the right, is automatically generated by the `src/components/DocSidebar.tsx` file, it uses the meta-data from markdown files to generate the structure you see.
By default only elements from depth 2 to 5 will be displayed, and at the moment doesn't work for `.astro files`.
## Other Components
### Footer
You can edit your footer here `src/components/ArticleFooter.astro`, at the moment it is composed of a list of avatars. You can generate your own avatar [here](https://getavataaars.com/) and replace the ones from `AvatarList.astro`.
### Theme
The `src/components/ThemeToggle.tsx` is only responsible for applying the theme, to change the theme colors see `public/theme.css`
## Documentation
For more information on how to use Astro components, check the documentation pages:
- [General Instructions](https://github.com/snowpackjs/astro#readme)
- [astro.config.mjs](https://github.com/snowpackjs/astro/blob/main/docs/config.md)
- [API](https://github.com/snowpackjs/astro/blob/main/docs/api.md)
- [Command Line Interface](https://github.com/snowpackjs/astro/blob/main/docs/cli.md)
- [Collections](https://github.com/snowpackjs/astro/blob/main/docs/collections.md)
- [Development Server](https://github.com/snowpackjs/astro/blob/main/docs/dev.md)
- [Markdown](https://github.com/snowpackjs/astro/blob/main/docs/markdown.md)
- [Publishing Astro components](https://github.com/snowpackjs/astro/blob/main/docs/publishing.md)
- [Renderers](https://github.com/snowpackjs/astro/blob/main/docs/renderers.md)
- [Styling](https://github.com/snowpackjs/astro/blob/main/docs/styling.md)
- [.astro Syntax](https://github.com/snowpackjs/astro/blob/main/docs/syntax.md)
|
