Template Page

4. Edit Page Content

To edit content on a page, go to its file in the pages folder. If you're following along with the demo, this is an "About Me" page with the wrong title. Let's change that.

To edit the title of this page:

1. Open the about-me file created in step 1.
2. Find the first <Heading> component in the file. It will have the words Template Page inside the <Heading> tags.
3. Replace the words Template Page with About Me.

Once you save your work, the page title will change to "About Me"!

5. Add New Content

A Paste component must be imported at the top of a file to be used in that file (and show up on that page). Go to the Paste Docsfor a full list of components you can add.

To practice, let's add in a <Separator> component

To add a component to the "About Me" page:

1. Find the import statements at the top of the about-me.js file.
2. Add the new component's import statement below the existing ones. For the <Separator> component, this statement is import { Separator } from '@twilio-paste/core/separator';
3. Add the component itself into the code. For the <Separator> component, make a new line after the closing tag of the Heading component you edited in step 3 (looks like </Heading>). Then copy the following code and paste it into the new line: <Separator orientation="horizontal" verticalSpacing="space50" />

Once you save your work, a thin, horizontal separator line will appear beneath your heading!

6. Connect Pages Internally

Connect different pages in this kit to each other by using the <PrototypeAnchor> component to create links.

To practice, let's add a link to this page that leads back to the "Home" page.

To add a link in the "About Me" page for the "Home" page:

1. Create a new line under the closing tag of the <Heading> component in the about-me.js file.
2. Add the <PrototypeAnchor> component by copying the following code and pasting it into the new line:<PrototypeAnchor></PrototypeAnchor>
3. Add the text of the link to the inside of the <PrototypeAnchor> component tags. For a link that says "Go to Home", the component should now read: <PrototypeAnchor>Go to Home</PrototypeAnchor>
4. Add a reference for the page the link leads to. The home page has the reference "/". Specify the reference by adding href="/" inside of the opening <PrototypeAnchor> component tag. It should now read: <PrototypeAnchor href="/">Go to Home</PrototypeAnchor>

Save your work and click on the link to check that it works!