Skip to content

content management

Jump to bottom
Hossein Mehrabi edited this page Oct 30, 2023 · 2 revisions

Content Management

Docusaurus offers a range of content management plugins to help you organize and display different types of content on your website. As part of the Logos Docusaurus preset, three core content plugins come pre-configured: docs, blog, and pages. Each of these plugins serves a distinct purpose, making them suitable for specific content types.

Plugins

Docs Plugin

Use this plugin when you need to create documentation, guides, and other forms of written content. It's the go-to choice for building comprehensive resources for your users, whether you're crafting documentation for your project, guides for your community, or important root pages like "Terms of Use", "Privacy Policy", "Community" and more.

Adding a Documentation or Guides Section

Use this step-by-step guide to create documentation or guides for your project:

  1. Create a new directory in the root of your project named docs.

  2. Create a new file in the docs directory named index.md.

  3. Add the following content to the index.md file:

---
id: index
title: Documentation
---

Documentation
  1. Locate the Logos Docusaurus preset configuration in your docusaurus.config.js file, and add the docs option to the preset configuration as shown in the example below:
// docusaurus.config.js
presets: [
  [
    '@acid-info/logos-docusaurus-preset',
    /** @type {import('@acid-info/logos-docusaurus-preset').PluginOptions} */
    ({
      docs: {
        path: 'docs', // Path to docs directory
        routeBasePath: '/docs', // URL base path for docs
      },
    }),
  ],
]

Or add a new docs plugin configuration to your docusaurus.config.js if the preset's docs plugin is used for another purpose:

// docusaurus.config.js
plugins: [
  [
    '@docusaurus/plugin-content-docs',
    /** @type {import('@docusaurus/plugin-content-docs').PluginOptions} */
    ({
      id: 'docs', // The id of the docs plugin, make sure it is unique among your other plugins; defaults to 'default'
      routeBasePath: '/docs', // Path to docs directory
      path: 'docs', // URL base path for docs
    }),
  ]
]

Creating Root Pages

Use this step-by-step guide to create root pages such as "Terms of Use", "Privacy Policy", "Community", etc:

  1. Create a new directory in the root of your project named root-pages.

  2. Create a new file in the root-pages directory named terms.md.

  3. Add the following content to the terms.md file:

# Terms of Use

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl eget ultricies ultrices, nunc nisl aliquet nunc, vitae aliquam nisl nunc eg
  1. Locate the Logos Docusaurus preset configuration in your docusaurus.config.js file, and add the docs option to the preset configuration as shown in the example below:
// docusaurus.config.js
presets: [
  [
    '@acid-info/logos-docusaurus-preset',
    /** @type {import('@acid-info/logos-docusaurus-preset').PluginOptions} */
    ({
      docs: {
        path: 'root-pages', // Path to root-pages directory
        routeBasePath: '/',
      },
    }),
  ],
]

Or add a new docs plugin configuration to your docusaurus.config.js if the preset's docs plugin is used for another purpose:

// docusaurus.config.js
plugins: [
  [
    '@docusaurus/plugin-content-docs',
    /** @type {import('@docusaurus/plugin-content-docs').PluginOptions} */
    ({
      id: 'root', // Make sure it is unique among your other plugins; defaults to 'default'
      path: 'root-pages', // Path to root-pages directory
      routeBasePath: '/',
    }),
  ]
]

Ensure all of your website's root pages are located in the root-pages directory. The routeBasePath option in the plugin configuration ensures that all root pages are accessible from the root of your website.

To keep a consistent layout for your root pages, ensure all root pages have the same front matter as shown in the example below:

pagination_prev: null
# will remove the link to the previous page
pagination_next: null
# will remove the link to the next page
displayed_sidebar: null
# will remove the left sidebar

Optionally, you can hide the table of contents for your root pages by adding the following front matter to each root page:

hide_table_of_contents: true

Adding an About Section

Follow the steps in the previous section if a single "About" page is sufficient for your project. However, if you need to create a dedicated "About" section with multiple pages, you can use the docs plugin to achieve this:

  1. Create a new directory in the root of your project named about.

  2. Create a new file in the about directory named index.md.

  3. Add the following content to the index.md file:

---
title: About
---

About Page
  1. Add a new docs plugin configuration to your docusaurus.config.js file:
// docusaurus.config.js
plugins: [
  [
    '@docusaurus/plugin-content-docs',
    /** @type {import('@docusaurus/plugin-content-docs').PluginOptions} */
    ({
      id: 'about', // Make sure it is unique among your other plugins; defaults to 'default'
      path: 'about', // Path to root-pages directory
      routeBasePath: '/about',
    }),
  ]
]

Alternatively, you can add the about plugin configuration to the Logos Docusaurus preset configuration if the preset's docs plugin is not used for another purpose:

Pages Plugin

This plugin is your ally when you want to create various types of web pages. It's an excellent choice when you need to craft landing pages that provide a captivating introduction to your project or serve as entry points for your audience.

Adding a Landing Page

If you're using one of your templates, you can add a landing page simply by creating an index.mdx file in the src/pages/ directory. Learn how to use our mdx components on your landing page here.

Blog Plugin

If you plan to share articles, stories, and updates with your audience, the Blog Plugin is the way to go. It provides a structured platform for creating engaging blog posts, making it easy to keep your website fresh, dynamic, and up-to-date.

Our Docusaurus preset comes pre-configured with the Blog plugin, so you can start creating blog posts right away. Follow the steps below to create your first blog post:

  1. Create a new directory in the root of your project named blog.

  2. Create a new file in the blog directory named my-blog-post.md.

  3. Add the following content to the my-blog-post.md file:

---
# custom url for this blog post
slug: my-custom-url
# The title of your blog post
title: My Blog Post
# The publish date of your blog post
date: 2021-01-01
# A preview image for your blog post
image: /img/my-blog-post.png
# The author of your blog post
authors:
  - John Doe
  - Jane Doe
---

My blog post content

Add a summary to your blog post: Add the summary content after the front matter of your blog post, followed by the <!--truncate--> HTML comment. The summary content will be displayed on the blog post card on the blog page.

---
slug: my-custom-url
title: My Blog Post
date: 2021-01-01
image: /img/my-blog-post.png
---

My blog post summary

<!--truncate-->

My blog post content
Clone this wiki locally