In this section, we will learn about adding a footer to your pages in misty-gray
.
The page
component has a show-footer
boolean type property. You can add different footers using the show-footer: true
property.
We have created a few footer components for you. Please, visit our footer package, you can choose the footer of your choice from there.
In the below example, we are using a basic-footer
from footer package.
FASTN.ftd
file.-- fastn.dependency: fastn-community.github.io/footer
my-ds
page module for misty-gray
?You can create a ds.ftd
module inside your fastn
package and create your custom my-ds
page component.
Let’s learn how to create a module:
Create a new file let’s say ds.ftd
.
ds.ftd
module would look like:-- import: fastn-community.github.io/misty-gray as ds -- import: fastn-community.github.io/misty-gray/common -- import: fastn-community.github.io/footer -- component page: children wrapper: optional caption title: optional body body: -- ds.page: $page.title site-logo: $fastn-assets.files.images.fastn.svg body: $page.body show-footer: true -- page.footer: -- footer: social: true site-logo: $assets.files.assets.dummy-site-logo.png site-url: $common.site-url site-name: $common.site-name twitter-url: https://twitter.com/FifthTryHQ facebook-url: / discord-url: https://discord.gg/bucrdvptYd instagram-url: / telegram-url: / copyright: Copyright © 2023 - fifthtry.com Stay in touch with everything you need -- end: page.footer -- ds.page.body: Some page body components and content here -- ftd.column: spacing.fixed.px: 13 width: fill-container children: $page.wrapper -- end: ftd.column -- end: ds.page -- end: page
Click on the download icon of the above code-block. ds.ftd
file will be downloaded. Import this file inside your new .ftd
or download below given footer.ftd
file.
my-ds
component to create a new page using it.-- import: fastn-community.github.io/misty-gray as ds -- import: <your fastn package name>/my-ds -- ds.page: This is page title This is body area. It contains multiple paragraphs. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum. -- ds.h1: This is heading level 1 This is heading level 1 optional body content. -- ds.h2: This is heading level 2 This is heading level 2 optional body content. -- ds.h3: This is heading level 3 This is heading level 3 optional body content. -- end: ds.page
Click on the download icon of the above code-block. footer.ftd
file will be downloaded.
fastn
project and deploy or run fastn serve
on your localhost. Access your localhost in the browser e.g.http://127.0.0.1:8000/footer/
you will see the page with the footer.