テーマ設定
theme.config.tsx を編集することで、サイトの見た目を自由にカスタマイズできます。
基本設定
theme.config.tsx
import React from 'react'
import { DocsThemeConfig } from 'nextra-theme-docs'
const config: DocsThemeConfig = {
logo: <span>My Nextra Site</span>,
project: {
link: 'https://github.com/my-user/my-repo',
},
// ...
}
export default config主なオプション
ロゴ
画像やSVGコンポーネントを使用できます。
logo: (
<>
<span style={{ fontWeight: 800 }}>My Docs</span>
</>
),フッター
テキストの変更や非表示設定が可能です。
footer: {
text: `© ${new Date().getFullYear()} My Project.`
},SEO設定
useNextSeoProps を使って、全ページのメタタグを制御できます。
useNextSeoProps() {
return {
titleTemplate: '%s – My Project'
}
}