examples/docs/src/content/themes/blog/index.mdx
import { Steps } from 'nextra/components'
Similar to the docs theme, you can install the blog theme with the following commands:
<Steps>npm i next nextra react react-dom
npm i nextra-theme-blog
import nextra from 'nextra'
const withNextra = nextra({
theme: 'nextra-theme-blog',
themeConfig: './theme.config.js'
})
export default withNextra()
export default {
footer: <p>MIT 2021 © Nextra.</p>,
head: ({ title, meta }) => (
<>
{meta.description && (
<meta name="description" content={meta.description} />
)}
{meta.tag && <meta name="keywords" content={meta.tag} />}
{meta.author && <meta name="author" content={meta.author} />}
</>
),
readMore: 'Read More →',
titleSuffix: null,
postFooter: null,
cusdis: {
appId: 'your_app_id',
host: 'your_host(optional)',
lang: 'your_lang'
},
darkMode: false,
navs: [
{
url: 'https://github.com/shuding/nextra',
name: 'Nextra'
}
]
}
pages/_app.js and include the theme stylesheet:import 'nextra-theme-blog/style.css'
export default function Nextra({ Component, pageProps }) {
const getLayout = Component.getLayout || (page => page)
return <Component {...pageProps} />
}
[!TIP]
You can also use
<style jsx>to style elements insidetheme.config.js.
[!NOTE]
An example of the blog theme can be found here.