@lambdacurry/gatsby-theme-directus
v2.1.0
Published
## 🚀 Quick start
Downloads
68
Readme
Gatsby Theme - Directus
🚀 Quick start
Install the theme.
Install the theme via
npm
oryarn
.npm install @lambdacurry/gatsby-theme-directus # or yarn add @lambdacurry/gatsby-theme-directus
Add the theme to your
gatsby-config.js
Add the theme to the
plugins
array with the appropriate options.Note: All options are required. If you do not provide a page template, no pages will be created.
module.exports = { plugins: [ // ...other plugins { resolve: `@lambdacurry/gatsby-theme-directus`, options: { url: `https://cms.example.com`, // Replace w/ the url for your hosted Directus instance authToken: `myAuthTokenExample`, // Replace w/ your Directus auth token templatePaths: { page: `${__dirname}/src/templates/page.tsx` // Replace w/ the actual path to your page template } } } ] };
Create the page template.
Create a page template at the path you provided in the plugin options (i.e.,
src/templates/page.tsx
).import React from `react`; import { graphql } from `gatsby`; import { Layout } from `../components/Layout`; const Page: React.FC<{ data: any }> = ({ data }) => { const { page } = data.directus; return ( <Layout> <h1>{page.title}</h1> {page.sections.length > 0 && page.sections.map(section => { return <section key={section.id}>{/* ... */}</section>; })} </Layout> ); }; export default Page; export const pageQuery = graphql` query ($id: ID!) { directus { page: page_by_id(id: $id) { title sections { id } } } } `;
Run your site and start customizing!
Run your site using
yarn develop
.Once the pages have been created, the plugin will output some messages to the terminal, including a list of pages that were created.
success @lambdacurry/gatsby-theme-directus: 3 pages created successfully. success @lambdacurry/gatsby-theme-directus: Pages created at: - /about-us - / - /test
Visit one of the pages in your browser (i.e., http://localhost:8000/about-us).
Edit your page template to see your site update in real-time!