3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-02 08:19:07 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(theme-{classic,common}): change how site/page/search metadata is handled (#6925)

Browse source
This commit is contained in:
Sébastien Lorber 2022-03-18 18:53:00 +01:00 • committed by GitHub
parent 74e37e86ba
commit 74f653dd82
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 808 additions and 625 deletions
Download patch file Download diff file Expand all files Collapse all files

6
website/docs/guides/creating-pages.md
View file

@ -35,9 +35,9 @@ Create a file `/src/pages/helloReact.js`:
import React from 'react';
import Layout from '@theme/Layout';
function Hello() {
export default function Hello() {
return (
<Layout title="Hello">
<Layout title="Hello" description="Hello React Page">
<div
style={{
display: 'flex',
@ -53,8 +53,6 @@ function Hello() {
</Layout>
);
}
export default Hello;
```
Once you save the file, the development server will automatically reload the changes. Now open `http://localhost:3000/helloReact` and you will see the new page you just created.

41
website/docs/seo.md
View file

@ -42,22 +42,6 @@ Similar to [global metadata](#global-metadata), Docusaurus also allows for the a
Some content...
```
```jsx title="my-react-page.jsx"
import React from 'react';
import Head from '@docusaurus/Head';
export default function page() {
return (
<Layout title="Page" description="A React page demo">
<Head>
<meta property="og:image" content="image.png" />
</Head>
{/* ... */}
</Layout>
);
}
```
Docusaurus automatically adds `description`, `title`, canonical URL links, and other useful metadata to each Markdown page. They are configurable through front matter:
```md
@ -77,6 +61,31 @@ Prefer to use front matter for fields like `description` and `keywords`: Docusau
:::
For JSX pages, you can use the Docusaurus [`<Head>`](docusaurus-core.md#head) component.
```jsx title="my-react-page.jsx"
import React from 'react';
import Layout from '@theme/Layout';
import Head from '@docusaurus/Head';
export default function page() {
return (
<Layout title="Page" description="A React page demo">
<Head>
<meta property="og:image" content="image.png" />
</Head>
{/* ... */}
</Layout>
);
}
```
:::tip
For convenience, the default theme `<Layout>` component accept `title` and `description` as props.
:::
## Static HTML generation {#static-html-generation}
Docusaurus is a static site generator—HTML files are statically generated for every URL route, which helps search engines discover your content more easily.