@docusaurus/plugin-content-pages

What is @docusaurus/plugin-content-pages?

@docusaurus/plugin-content-pages is a plugin for Docusaurus, a popular static site generator. This plugin allows you to create custom pages in your Docusaurus site using React components. It is useful for adding static content that doesn't fit into the documentation or blog categories, such as landing pages, about pages, or custom 404 pages.

What are @docusaurus/plugin-content-pages's main functionalities?

Creating Custom Pages

This feature allows you to create custom pages in your Docusaurus site. You can define a new page by creating a React component in the `src/pages` directory. The example shows how to create a simple custom page with a title and some content.

module.exports = {
  plugins: [
    '@docusaurus/plugin-content-pages',
  ],
};

// src/pages/customPage.js
import React from 'react';
import Layout from '@theme/Layout';

function CustomPage() {
  return (
    <Layout title="Custom Page">
      <div>
        <h1>Custom Page</h1>
        <p>This is a custom page.</p>
      </div>
    </Layout>
  );
}

export default CustomPage;

Custom 404 Page

This feature allows you to create a custom 404 page for your Docusaurus site. By creating a `404.js` file in the `src/pages` directory, you can define the content that will be displayed when a user navigates to a non-existent page.

// src/pages/404.js
import React from 'react';
import Layout from '@theme/Layout';

function NotFound() {
  return (
    <Layout title="Page Not Found">
      <div>
        <h1>404</h1>
        <p>Oops! The page you are looking for does not exist.</p>
      </div>
    </Layout>
  );
}

export default NotFound;

Other packages similar to @docusaurus/plugin-content-pages

gatsby-plugin-page-creator

gatsby-plugin-page-creator is a plugin for Gatsby, another popular static site generator. It automatically creates pages from React components in specified directories. Compared to @docusaurus/plugin-content-pages, it offers similar functionality but is tailored for use with Gatsby.

next.js

Next.js is a React framework that allows you to create static and dynamic pages. It provides a file-based routing system where you can create pages by adding React components to the `pages` directory. While it offers more advanced features like server-side rendering and API routes, it can be used similarly to @docusaurus/plugin-content-pages for creating static content.

README

@docusaurus/plugin-content-pages

Pages plugin for Docusaurus.

Usage

See plugin-content-pages documentation.

Changelog

3.5.2 (2024-08-13)

:bug: Bug Fix

• docusaurus-theme-common
  • #10397 fix(theme-common): restore useContextualSearchFilters public API for retrocompatibility (@slorber)
• docusaurus
  • #10391 fix(core): always alias React/ReactDOM to site dependency so that importing MDX from anywhere works (@slorber)
• create-docusaurus, docusaurus-plugin-content-blog
  • #10392 fix(create-docusaurus): Improve init templates blog setup + fix warnings (@slorber)
• docusaurus-theme-classic
  • #10390 fix(theme): Adjust blog authors line height to show descenders in lowercase letters (g, j, p, q, and y) (@josh-wong)

:nail_care: Polish

• docusaurus-theme-classic, docusaurus-theme-common, docusaurus-theme-translations
  • #10394 fix(translations): change casing of some en labels (@cstangerup)

:memo: Documentation

• #10393 docs(showcase): remove sites not using Docusaurus anymore (@GatienBoquet)

:robot: Dependencies

• #10396 chore(deps): bump github/codeql-action from 3.25.13 to 3.26.0 (@dependabot[bot])

Committers: 4

• Christian Stangerup (@cstangerup)
• Gatien Boquet (@GatienBoquet)
• Josh Wong (@josh-wong)
• Sébastien Lorber (@slorber)