Reflex
  • Blocks
    • Header
    • Hero
    • Features
    • Call to action
    • Forms
    • Pricing
    • Team
    • Testimonials
    • Cards
    • Footer
    • Posts
    • Videos
  • Examples
  • Learn
  • Videos
  • Docs
  • Theme

    Theme reference

    • Colors
    • Font family
    • Font size
    • Font weight
    • Line height
    • Box shadow
    Create a theme Extend base
arshadcnv0.5.3
Reflex
Reflex

Customization

Customize the videos landing page, header and the video page.

Videos landing page

To customize the /videos landing page, create src/@reflexjs/gatsby-theme-video/videos.js:

View source.

src/@reflexjs/gatsby-theme-video/videos.js
import * as React from "react"
import { Article, H2, P, Div, Grid, Span } from "@reflexjs/components"
import { Link } from "@reflexjs/gatsby-theme-core"
import { Image } from "@reflexjs/gatsby-plugin-image"
export const Videos = ({ videos }) => {
// Add custom video display here.
}

See more examples in the blocks library.

Video page

To customize the video page, create src/@reflexjs/gatsby-theme-video/video.js:

View source.

src/@reflexjs/gatsby-theme-video/video.js
import * as React from "react"
import { MDXRenderer, Icon, ButtonLink } from "@reflexjs/gatsby-theme-core"
import { Article, H1, Container, Div, Iframe, P } from "@reflexjs/components"
export const Video = ({
title,
excerpt,
body,
embedUrl,
date,
datetime,
pageContext,
}) => {
return (
<Article py="8|12|14">
<Container>// Customize the display here.</Container>
</Article>
)
}

To add a header and footer to the video pages, create the following blocks.

site
└── content
└── blocks
└── videos-header.mdx <-- /videos header
└── videos-footer.mdx <-- /videos footer
└── video-header.mdx <-- video page header
└── video-footer.mdx <-- video page footer
├── images
├── navs
├── pages
└── videos

The blocks are placed on the corresponding pages automatically.

Add a videoTheming

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github