📦 plugin-content-blog

Provides the Blog feature and is the default blog plugin for Docusaurus.

some features production only

The feed feature works by extracting the build output, and is only active in production.

Installation

npm

npm install --save @docusaurus/plugin-content-blog

Yarn

yarn add @docusaurus/plugin-content-blog

pnpm

pnpm add @docusaurus/plugin-content-blog

Bun

bun add @docusaurus/plugin-content-blog

tip

If you use the preset @docusaurus/preset-classic, you don't need to install this plugin as a dependency.

You can configure this plugin through the preset options.

Configuration

Accepted fields:

Name	Type	Default	Description
path	string	'blog'	Path to the blog content directory on the file system, relative to site dir.
editUrl	string | EditUrlFn	undefined	Base URL to edit your site. The final URL is computed by editUrl + relativePostPath. Using a function allows more nuanced control for each file. Omitting this variable entirely will disable edit links.
editLocalizedFiles	boolean	false	The edit URL will target the localized file, instead of the original unlocalized file. Ignored when editUrl is a function.
blogTitle	string	'Blog'	Blog page title for better SEO.
blogDescription	string	'Blog'	Blog page meta description for better SEO.
blogSidebarCount	number | 'ALL'	5	Number of blog post elements to show in the blog sidebar. 'ALL' to show all blog posts; 0 to disable.
blogSidebarTitle	string	'Recent posts'	Title of the blog sidebar.
routeBasePath	string	'blog'	URL route for the blog section of your site. DO NOT include a trailing slash. Use / to put the blog at root path.
tagsBasePath	string	'tags'	URL route for the tags section of your blog. Will be appended to routeBasePath.
pageBasePath	string	'page'	URL route for the pages section of your blog. Will be appended to routeBasePath.
archiveBasePath	string | null	'archive'	URL route for the archive section of your blog. Will be appended to routeBasePath. DO NOT include a trailing slash. Use null to disable generation of archive.
authorsBasePath	string	'authors'	URL route for the authors pages of your blog. Will be appended to path.
include	string[]	['**/*.{md,mdx}']	Array of glob patterns matching Markdown files to be built, relative to the content path.
exclude	string[]	See example configuration	Array of glob patterns matching Markdown files to be excluded. Serves as refinement based on the include option.
postsPerPage	number | 'ALL'	10	Number of posts to show per page in the listing page. Use 'ALL' to display all posts on one listing page.
blogListComponent	string	'@theme/BlogListPage'	Root component of the blog listing page.
blogPostComponent	string	'@theme/BlogPostPage'	Root component of each blog post page.
blogTagsListComponent	string	'@theme/BlogTagsListPage'	Root component of the tags list page.
blogTagsPostsComponent	string	'@theme/BlogTagsPostsPage'	Root component of the "posts containing tag" page.
blogArchiveComponent	string	'@theme/BlogArchivePage'	Root component of the blog archive page.
blogAuthorsPostsComponent	string	'@theme/Blog/Pages/BlogAuthorsPostsPage'	Root component of the blog author page.
blogAuthorsListComponent	string	'@theme/Blog/Pages/BlogAuthorsListPage'	Root component of the blog authors page index.
remarkPlugins	any[]	[]	Remark plugins passed to MDX.
rehypePlugins	any[]	[]	Rehype plugins passed to MDX.
recmaPlugins	any[]	[]	Recma plugins passed to MDX.
beforeDefaultRemarkPlugins	any[]	[]	Custom Remark plugins passed to MDX before the default Docusaurus Remark plugins.
beforeDefaultRehypePlugins	any[]	[]	Custom Rehype plugins passed to MDX before the default Docusaurus Rehype plugins.
truncateMarker	RegExp	/<!--\s*truncate\s*-->/ | \{\/\*\s*truncate\s*\*\/\}/	Truncate marker marking where the summary ends.
showReadingTime	boolean	true	Show estimated reading time for the blog post.
readingTime	ReadingTimeFn	The default reading time	A callback to customize the reading time number displayed.
authorsMapPath	string	'authors.yml'	Path to the authors map file, relative to the blog content directory.
feedOptions	See below	{type: ['rss', 'atom']}	Blog feed.
feedOptions.type	FeedType | FeedType[] | 'all' | null	Required	Type of feed to be generated. Use null to disable generation.
feedOptions.createFeedItems	CreateFeedItemsFn | undefined	undefined	An optional function which can be used to transform and / or filter the items in the feed.
feedOptions.limit	number | null | false	20	Limits the feed to the specified number of posts, false or null for all entries. Defaults to 20.
feedOptions.title	string	siteConfig.title	Title of the feed.
feedOptions.description	string	`${siteConfig.title} Blog`	Description of the feed.
feedOptions.copyright	string	undefined	Copyright message.
feedOptions.xslt	boolean | FeedXSLTOptions	undefined	Permits to style the blog XML feeds with XSLT so that browsers render them nicely.
feedOptions.language	string (See documentation for possible values)	undefined	Language metadata of the feed.
sortPosts	'descending' | 'ascending'	'descending'	Governs the direction of blog post sorting.
processBlogPosts	ProcessBlogPostsFn	undefined	An optional function which can be used to transform blog posts (filter, modify, delete, etc...).
showLastUpdateAuthor	boolean	false	Whether to display the author who last updated the blog post.
showLastUpdateTime	boolean	false	Whether to display the last date the blog post was updated. This requires access to git history during the build, so will not work correctly with shallow clones (a common default for CI systems). With GitHub actions/checkout, use fetch-depth: 0. When deploying to Vercel, set the environment variable VERCEL_DEEP_CLONE=true.
tags	string | false | null | undefined	tags.yml	Path to the YAML tags file listing pre-defined tags. Relative to the blog content directory.
onInlineTags	'ignore' | 'log' | 'warn' | 'throw'	warn	The plugin behavior when blog posts contain inline tags (not appearing in the list of pre-defined tags, usually tags.yml).
onUntruncatedBlogPosts	'ignore' | 'log' | 'warn' | 'throw'	warn	The plugin behavior when blog posts do not contain a truncate marker.

Types

EditUrlFn

type EditUrlFunction = (params: {
  blogDirPath: string;
  blogPath: string;
  permalink: string;
  locale: string;
}) => string | undefined;

ReadingTimeFn

type ReadingTimeOptions = {
  wordsPerMinute: number;
};

type ReadingTimeCalculator = (params: {
  content: string;
  locale: string;
  frontMatter?: BlogPostFrontMatter & Record<string, unknown>;
  options?: ReadingTimeOptions;
}) => number;

type ReadingTimeFn = (params: {
  content: string;
  locale: string;
  frontMatter: BlogPostFrontMatter & Record<string, unknown>;
  defaultReadingTime: ReadingTimeCalculator;
}) => number | undefined;

FeedType

type FeedType = 'rss' | 'atom' | 'json';

FeedXSLTOptions

Permits to style the blog XML feeds so that browsers render them nicely with XSLT.

• Use true to let the blog use its built-in .xsl and .css files to style the blog feed
• Use a falsy value (undefined | null | false) to disable the feature
• Use a string to provide a file path to a custom .xsl file relative to the blog content folder. By convention, you must provide a .css file with the exact same name.

type FeedXSLTOptions =
  | boolean
  | undefined
  | null
  | {
      rss?: string | boolean | null | undefined;
      atom?: string | boolean | null | undefined;
    };

CreateFeedItemsFn

type CreateFeedItemsFn = (params: {
  blogPosts: BlogPost[];
  siteConfig: DocusaurusConfig;
  outDir: string;
  defaultCreateFeedItemsFn: CreateFeedItemsFn;
}) => Promise<BlogFeedItem[]>;

ProcessBlogPostsFn