How to Create a New Page
Here is the example on how to create your custom page and add it to the leftsidebar menu, breadcrumbs and also meta tag.
1. Create a new folder in src/routes/. ex. NewPage, and then create a svelte file in src/routes/NewPage with name +page.svelte
Example :-
-
As you know, there are 2 different types of layouts, first is Blank Layout and second is Full layout.
- if you want to make your page blank layout, then you need to wrap your page's content with <Container >
- if you want to make your page with full layout, then you need to wrap your page's content with <div className="page-content"><div> tag and <Container fluid>
-
Add Breadcrumbs component. it's a common component, it's used to add breadcrumbs in your page.
- You have to pass 2 props here, first is title and second is breadcrumbItem.
- the title prop refers to page title and the breadcrumbItem refers to page's breadcrumb item's title.
- Svelte Base Components(with layout)
<svelte:head> <title>New Page | Velzon - Svelte Admin & Dashboard Template</title> </svelte:head> <script> import { Col, Container, Row } from 'sveltestrap'; import BreadCrumb from '../../Components/Common/BreadCrumb.svelte'; </script> <div class="page-content"> <Container fluid> <BreadCrumb title="Starter" pageTitle="Pages" /> <Row> <Col xs={12} /> </Row> </Container> </div>- Svelte Base Components (without layout)
<svelte:head> <title>New Page | Velzon - Svelte Admin & Dashboard Template</title> </svelte:head> <script> import { Col, Container, Row } from 'sveltestrap'; import BreadCrumb from '../../Components/Common/BreadCrumb.svelte'; </script> <div > <Container > //Write code </Container> </div>2. Add your new page's route in /src/routes/ folder.
-
Create a file with .svelte extension in src/routes/.
-
Example :-
src/routes/+page.svelte -
if you want to create inner route,then create file in src/routes/folder_name/+page.svelte
Example :-
src/routes/folder_name/+page.svelte
3. Add a navigation in the layouts
For more details, check the Navigation page to see how to add menu item in your template.
-
For Vertical Layout :-
/src/Layouts/LayoutMenuData.js
