Using custom footer in all md files

[Karan-S-dev]

Hi,

I am already using a custom footer for my landing page and all other js pages. But when it comes to md file , i want another common custom footer to add in all md files.

Is there a way to achieve this?

[Advait251206]

Docusaurus doesn’t have a built-in “global footer for only MD files” feature, but you can achieve this in a few clean ways depending on how strict and reusable you want it to be.

---

Best approach (recommended): MDX wrapper component

Instead of pure .md, convert your docs to MDX and wrap content with a layout component.

1. Create a shared footer component

// src/components/DocsFooter.tsx

import React from 'react';

export default function DocsFooter() {
  return (
    <footer style={{ marginTop: '3rem', paddingTop: '2rem', borderTop: '1px solid #ddd' }}>
      <p>Custom footer for documentation pages</p>
    </footer>
  );
}

---

2. Create a layout wrapper

// src/components/DocsLayout.tsx

import React from 'react';
import DocsFooter from './DocsFooter';

export default function DocsLayout({ children }) {
  return (
    <div>
      {children}
      <DocsFooter />
    </div>
  );
}

---

3. Use it in .mdx files

Convert your markdown file to MDX and wrap it:

import DocsLayout from '@site/src/components/DocsLayout';

<DocsLayout>

# My Document

This is my content.

</DocsLayout>

---

Alternative 1: Theme swizzle (global docs footer)

If you want it automatically for all docs pages:

Swizzle:

npx docusaurus swizzle @docusaurus/theme-classic DocItem/Layout

Then append your footer:

import React from 'react';
import OriginalDocItem from '@theme-original/DocItem';

export default function DocItemLayout(props) {
  return (
    <>
      <OriginalDocItem {...props} />
      <footer style={{ marginTop: '3rem' }}>
        Custom global docs footer
      </footer>
    </>
  );
}

✔ This applies to ALL .md docs automatically
✔ No need to convert to MDX

---

Alternative 2: Inject via remark plugin (advanced)

You can create a remark plugin to append footer Markdown automatically:

• Works at build time
• No MDX conversion needed
• More complex to maintain

---

What NOT to do

• ❌ Trying to edit .md layout directly (not supported)
• ❌ Using docusaurus.config.js for doc-specific footer (only works for site footer)
• ❌ Duplicating footer manually in every file

---

Recommendation

Goal	Best solution
Few docs, high flexibility	MDX layout wrapper
Entire docs system footer	Swizzle DocItem/Layout
Large project, automation	Remark plugin

---

Summary

Docusaurus renders Markdown through MDX internally, so the correct extension points are:

✔ Swizzle DocItem/Layout for global behavior
✔ Or use MDX wrappers for per-page control

---

If this answer helped or pointed you in the right direction, I'd appreciate it if you could mark it as the accepted answer so it's easier for others with the same issue to find.

Also, if you found my contribution useful, I'd appreciate it if you could check out my GitHub profile, follow me, and star any repositories you find interesting.

GitHub: https://github.com/Advait251206