-- ds.page.right-sidebar
in a doc-site refers to a vertical column that is typically positioned on the right-hand side of the ds.page
content area. It is a common design element used in web layouts to provide additional information, navigation options, or supplementary content alongside the main content.ds.page.right-sidebar
inside your page then refer below code snippet.-- ds.page: sidebar: true -- ds.page.right-sidebar: -- ds.h3: Heading in sidebar You can call any component inside sidebar -- ds.compact-text: Quick links: - [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) -- ds.compact-text: Join us: We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community today. We are trying to create a language for human beings and we do not believe it would be possible without your support. We would love to hear from you. -- end: ds.page.right-sidebar -- ds.page.body: This is body content of your page. -- end: ds.page
Click on the download icon of the above code-block. page.ftd
file will be downloaded.
fastn serve
on your localhost. Access your localhost in the browser and open http://127.0.0.1:8000/page/
url, you will see page with a right-sidebar as seen in 👉🏻 right side of this page.FASTN/ds.ftd
global module that helps you to keep all your global properties and configurations in one .ftd
file.FASTN/ds.ftd
module of doc-site
?You can modify a FASTN/ds.ftd
module which is already added inside your fastn
package.
Let’s learn how to modify FASTN/ds.ftd
module:
Edit FASTN/ds.ftd
module and enable sidebar: true
ftd.ui list right-sidebar:
property from page
component and add -- ftd.ui list page.right-sidebar
and its content inside your FASTN/ds.ftd
file below -- end: page.footer
as shown in below code snippet. -- import: fastn-community.github.io/footer -- import: fastn-community.github.io/doc-site/common -- import: fastn-community.github.io/roboto-typography as typo -- import: fastn-community.github.io/doc-site export: author-bio,code,compact-text,featured-post,h0,h1,h2,h3,iframe,image,image-first,image-in-between,link,link-group,markdown,not-found-1,not-found-2,output,post,posts,rendered,tip,without-image,youtube -- component page: children wrapper: optional caption title: optional body body: boolean sidebar: true optional string document-title: optional string document-description: optional ftd.raw-image-src document-image: optional string site-name: Doc Site optional ftd.image-src site-logo: boolean github-icon: true optional string github-url: https://github.com/fastn-community/doc-site/ boolean full-width: false ftd.type-data types: $typo.types ftd.color-scheme colors: $ftd.default-colors integer logo-width: $common.logo-width integer logo-height: $common.logo-height boolean show-footer: true boolean show-banner: true ftd.ui list banner: fastn.app-ui apps: $common.apps boolean login-button: $common.login-button string site-url: $common.site-url -- ftd.ui list page.footer: -- footer.fastn-footer: copyright: Copyright © 2023 - [FifthTry](https://www.fifthtry.com/) site-logo: $common.fastn-logo powered-by-text: Powered by powered-by-link: https://fastn.com/ -- end: page.footer -- ftd.ui list page.right-sidebar: -- ds.h3: Heading in sidebar You can call any component inside sidebar -- ds.compact-text: Quick links: - [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) -- ds.compact-text: Join us: We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community today. We are trying to create a language for human beings and we do not believe it would be possible without your support. We would love to hear from you. -- end: page.right-sidebar -- doc-site.page: $page.title site-logo: $page.site-logo body: $page.body colors: $page.colors sidebar: $page.sidebar full-width: $page.full-width types: $page.types show-banner: $page.show-banner show-footer: $page.show-footer site-name: $page.site-name logo-height: $page.logo-height logo-width: $page.logo-width github-icon: $page.github-icon github-url: $page.github-url right-sidebar: $page.right-sidebar footer: $page.footer banner: $page.banner document-title: $page.document-title document-description: $page.document-description document-image: $page.document-image apps: $page.apps login-button: $page.login-button site-url: $page.site-url -- ftd.column: spacing.fixed.em: 0.8 width: fill-container children: $page.wrapper -- end: ftd.column -- end: doc-site.page -- end: page
Click on the download icon of the above code-block. ds.ftd
file will be downloaded.
Replace FASTN/ds.ftd
file with this downloaded file inside your fastn
project.
fastn serve
on your localhost. Access your localhost in the browser e.g.http://127.0.0.1:8000/
you will see all your pages with a right-sidebar.