快速开始

💡

博客主题的示例可以在这里找到。

与文档主题类似,您可以使用以下命令安装博客主题:

配置

  1. 安装 Next.js, Nextra 和 React: yarn add next nextra react react-dom

  2. 安装博客主题: yarn add nextra-theme-blog

  3. 在主目录下创建 Next.js 配置文件和主题配置文件:

// next.config.js
const 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.js
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'
}
]
}
  1. 创建 pages/_app.js 并引入主题样式表:
import 'nextra-theme-blog/style.css'
export default function Nextra({ Component, pageProps }) {
return <Component {...pageProps} />
}
  1. 搞定!

💡

你还可以使用 <style jsx> 来设置 theme.config.js 中的元素样式。