@docusaurus/theme-classic

What is @docusaurus/theme-classic?

@docusaurus/theme-classic is a theme package for Docusaurus, a static site generator. It provides a classic look and feel for documentation websites, including features like a sidebar, navbar, search, and more. It is highly customizable and designed to work seamlessly with Docusaurus.

What are @docusaurus/theme-classic's main functionalities?

Sidebar

The sidebar feature allows you to create a collapsible and hideable sidebar for your documentation site. This is useful for organizing large amounts of content.

{
  "themeConfig": {
    "sidebar": {
      "hideable": true,
      "autoCollapseCategories": true
    }
  }
}

Navbar

The navbar feature allows you to create a customizable navigation bar at the top of your site. You can add links to different sections of your site, such as documentation and blog.

{
  "themeConfig": {
    "navbar": {
      "title": "My Site",
      "logo": {
        "alt": "My Site Logo",
        "src": "img/logo.svg"
      },
      "items": [
        {
          "to": "docs/",
          "label": "Docs",
          "position": "left"
        },
        {
          "to": "blog",
          "label": "Blog",
          "position": "left"
        }
      ]
    }
  }
}

Search

The search feature integrates Algolia search into your documentation site, allowing users to quickly find the information they need.

{
  "themeConfig": {
    "algolia": {
      "apiKey": "YOUR_API_KEY",
      "indexName": "YOUR_INDEX_NAME"
    }
  }
}

Other packages similar to @docusaurus/theme-classic

gatsby-theme-docz

Gatsby is a React-based static site generator. The gatsby-theme-docz package provides a theme for creating documentation sites with Gatsby. It includes features like a sidebar, navbar, and search, similar to @docusaurus/theme-classic, but is built on Gatsby's ecosystem.

README

Docusaurus Theme Classic

The classic theme for Docusaurus.

Installation

Add docusaurus/theme-classic to your package:

npm i @docusaurus/theme-classic
# or
yarn add @docusaurus/theme-classic

Modify your docusaurus.config.js:

module.exports = {
  ...
+ themes: ['@docusaurus/theme-classic'],
  ...
}

Swizzling components

$ npm swizzle @docusaurus/theme-classic [component name]

All components used by this theme can be found here