独立页面

页面功能由插件 plugin-content-pages 提供支持。它也是 Docusaurus 的默认插件。所以你创建的应用默认包含页面功能。

在位于项目的根目录下有个 pages 目录，你不仅可以使用 md/mdx 格式的文件来生成独立页面，更可以使用 React 代码来建立页面。

页面布局

如果你的页面是以 mdx 文件生成的，则它是默认包含网站公共的头部导航和底部的。

而如果你的页面是通过新建的 jsx 代码生成的，它是不包含公共部分的。你需要导入 Layout 组件。

import React from 'react';
import Layout from '@theme/Layout';
import Head from '@docusaurus/Head';

export default function () {
  return (
    <Layout title='城市印象' description='记录自己的城市风景，居一城，爱一城'>
      <Head>
        <meta name='keywords' content='城市,风景,无锡,随手拍,江南,太湖' />
      </Head>
    </Layout>
    {/* ... */}
  )
}

比如本站的足迹 https://spacexcode.com/routes 页面就是一个不包含公共头部和底部的页面。

import React from 'react';
import Head from '@docusaurus/Head';

export default function () {
  return (
    <>
      <Head>
        <meta name="title" content='我的足迹' />
        <meta name="keywords" content='足迹,跑步,金城湾,尚贤湖,Strava,运动' />
      </Head>
    {/* ... */}
    </>
  )
}

当这个页面不包含 layout 组件的时候，如何去设置页面的标题，这里的标题不同于 meta 标签 name 属性里面的 title，它直接显示在浏览器的标签里。

import Head from '@docusaurus/Head';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

export default function () {
  const { siteConfig } = useDocusaurusContext();

  return (
    <>
      <Head>
        <title>{`New Page Title | ${siteConfig.title}`}</title>
      </Head>
      {/* ... */}
    </>
  )
}

页面布局​

页面布局