to customize BlogListPage of multiple blogs

[rafaelrdealmeida]

Hi,

We have two blogs on docusaurus (multiple blogs) working, but they share the same BlogListPage. It is possible to customize BlogListPage for each blog

see blog1:
https://labriunesp.org/cadernos/

see blog2:
https://labriunesp.org/noticias/

best

[Siemienik]

I think you may use multiple plugin instances:

https://docusaurus.io/docs/using-plugins#multi-instance-plugins-and-plugin-ids

module.exports = {
  plugins: [
    [
      '@docusaurus/plugin-content-blog',
      {
        id:'blog1',
        path: 'blox-xyz',
        routeBasePath: 'blog-xyz',
        
        // Theme components used by the blog pages.
        blogListComponent: '@theme/BlogListPage',
        blogPostComponent: '@theme/BlogPostPage',
        blogTagsListComponent: '@theme/BlogTagsListPage',
        blogTagsPostsComponent: '@theme/BlogTagsPostsPage',
      },
    ],
    [
      '@docusaurus/plugin-content-blog',
      {
        id:'blog2',
        path: 'blox-abc',
        routeBasePath: 'blog-abc',

        // Theme components used by the blog pages.
        blogListComponent: '@theme/BlogListPage',
        blogPostComponent: '@theme/BlogPostPage',
        blogTagsListComponent: '@theme/BlogTagsListPage',
        blogTagsPostsComponent: '@theme/BlogTagsPostsPage',
      },
    ],
    
  ],
};

[rafaelrdealmeida]

Hi @Siemienik ,

Thanks for the answer.

We did something like your suggestion. See

https://gitlab.com/unesp-labri/sites/labri/-/blob/main/website/docusaurus.config.js

We just don't add the "Theme components used by the blog pages".

I haven't tested it yet, but if we put the BlogListPage of each blog, will it be autonomy for us to customize?

[Siemienik]

Components that I listed are the default ones.
You may swizzle one of them, rename to SecondaryBlogPostPage and use it in config by

        blogPostComponent: '@theme/SecondaryBlogPostPage',

That allows you to have different components for each blog.

I'm not sure, however, it might require setting blog:false for theme config, and config all blogs as a plugin.

[slorber]

It's not 100% clear to me how your 2 blog list pages should look like, but @Siemienik solution is the way to go.

You can provide your own implementation of theme components, using the implementation of the classic theme as a base for inspiration.

If the 2 pages look quite close to each others, you can also just swizzle the BlogListPage and add if/else according to the current URL or something?

Or maybe you just want to customize the CSS and we should add a classname to easily target one blog or the other?