快速开始
💡
博客主题的示例可以在这里找到。
与文档主题类似,您可以使用以下命令安装博客主题:
配置
安装 Next.js, Nextra 和 React:
yarn add next nextra react react-dom
安装博客主题:
yarn add nextra-theme-blog
在主目录下创建 Next.js 配置文件和主题配置文件:
// next.config.jsconst withNextra = require('nextra')({ theme: 'nextra-theme-blog', themeConfig: './theme.config.js', // optional: add `unstable_staticImage: true` to enable Nextra's auto image import})module.exports = withNextra()
// theme.config.jsexport 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
并引入主题样式表:
import 'nextra-theme-blog/style.css'export default function Nextra({ Component, pageProps }) { return <Component {...pageProps} />}
- 搞定!
💡
你还可以使用 <style jsx>
来设置 theme.config.js
中的元素样式。