fastn midnight-rush Template. Build Your Own Website with Ease

LOGO

Home

Blog

Landing

Adding Footer

In this section, we will learn about adding a footer into your pages in midnight-rush.

The page component has a show-footer boolean type property. You can add different footers using 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 basic-footer from [footer package] (https://fastn-community.github.io/footer/docs/).

Add footer dependency inside your FASTN.ftd file.

-- fastn.dependency: fastn-community.github.io/footer

Lang:

ftd

How to create a global `my-ds` page module for `midnight-rush`?

You can create a my-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 my-ds.ftd.

Here’s what your my-ds.ftd module would look like:

my-ds.ftd module

-- import: fastn-community.github.io/midnight-rush as ds
-- import: fastn-community.github.io/midnight-rush/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

-- ds.page.footer:

-- footer.basic-footer:
footer-list: $common.sitemap.sections
site-logo: https://fastn.com/-/fastn.io/images/fastn.svg
site-url: /
copyright: Copyright © 2023 - [FifthTry.com](https://www.fifthtry.com/)

-- end: ds.page.footer

-- ds.page.body:

Some page body components and content here

-- ftd.column:
spacing.fixed.em: 0.8
width: fill-container
children: $page.wrapper

-- end: ftd.column

-- end: ds.page

-- end: page

my-ds.ftd

Lang:

ftd

Click on download icon of above code-block. my-ds.ftd file will be downloaded. Import this file inside your new .ftd or download below given footer.ftd file.

Use my-ds component to create a new page using it.

-- import: fastn-community.github.io/midnight-rush 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

footer.ftd

Lang:

ftd

Click on download icon of above code-block. footer.ftd file will be downloaded.

Add this file inside your 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 a footer.

On this page

How to create a global my-ds page module for midnight-rush?

In this section, we will learn about adding a footer into your pages in midnight-rush.

The page component has a show-footer boolean type property. You can add different footers using 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 basic-footer from [footer package] (https://fastn-community.github.io/footer/docs/).

Add footer dependency inside your FASTN.ftd file.

-- fastn.dependency: fastn-community.github.io/footer

Lang:

ftd

How to create a global `my-ds` page module for `midnight-rush`?

You can create a my-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 my-ds.ftd.

Here’s what your my-ds.ftd module would look like:

my-ds.ftd module

-- import: fastn-community.github.io/midnight-rush as ds
-- import: fastn-community.github.io/midnight-rush/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

-- ds.page.footer:

-- footer.basic-footer:
footer-list: $common.sitemap.sections
site-logo: https://fastn.com/-/fastn.io/images/fastn.svg
site-url: /
copyright: Copyright © 2023 - [FifthTry.com](https://www.fifthtry.com/)

-- end: ds.page.footer

-- ds.page.body:

Some page body components and content here

-- ftd.column:
spacing.fixed.em: 0.8
width: fill-container
children: $page.wrapper

-- end: ftd.column

-- end: ds.page

-- end: page

my-ds.ftd

Lang:

ftd

Click on download icon of above code-block. my-ds.ftd file will be downloaded. Import this file inside your new .ftd or download below given footer.ftd file.

Use my-ds component to create a new page using it.

-- import: fastn-community.github.io/midnight-rush 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

footer.ftd

Lang:

ftd

Click on download icon of above code-block. footer.ftd file will be downloaded.

Add this file inside your 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 a footer.

Stay in touch with everything you need