customize the page of each blog

[rafaelrdealmeida]

Hello we are using multiple blogs. How could we customize the page of each blog?

for example, we have the two blogs below and we would like to customize their pages

• https://labriunesp.org/cadernos
• https://labriunesp.org/lantri/noticias

best

[slorber]

You can use CSS using the classes added to the HTML elements:

html.plugin-blog.plugin-id-cadernos {
  color: red;
}

html.plugin-blog.plugin-id-fourth-blog {
  color: blue;
}

You can also swizzle components components and do conditional JSX

const {plugin} = useRouteContext();
if (plugin.id === "cadernos") {
  return <X/>
}
else {
  return <Y/>;
}

Note: useRouteContext is not documented atm but we'll probably add it to our public API surface soon. We may refactor it, but it's unlikely we'll remove the ability to do such conditions so it's quite safe to use on your site's code

import useRouteContext from '@docusaurus/useRouteContext';

[rafaelrdealmeida]

Hi @slorber ,

could you give me another example of using CSS using the classes added to the HTML elements?

For example in css BlogPostItem .blogPostTitle handles the font size of post titles, but I couldn't customize it by CSS using the classes added to the HTML elements

can I leave the customization in the BlogPostItem folder or only in css/custom.css?

As swizzle components can do, but when doing the build I get the error TypeError: source_default(...).bold is not a function. Do I have to run yarn swizzle...? Which one?

best

[arisac]

a quick demo for using css selectors in your global css file:

html.plugin-blog.plugin-id-cadernos div[class^="CardContainer_"] div[class^="blogCard_"] h2[class^="blogPostTitle_"] {
  font-size: 1.4rem !important;
}

[slorber]

could you give me another example of using CSS using the classes added to the HTML elements?

I can't give you that, this is basic CSS knowledge, you must learn it to use it properly, and it's outside the scope of Docusaurus to teach you CSS basis.

For example in css BlogPostItem .blogPostTitle handles the font size of post titles, but I couldn't customize it by CSS using the classes added to the HTML elements

CSS classes in styles.module.css are not "global" and when rendered there will be a "hash" in the final className to avoid potential collision of multiple CSS classnames sharing the same name but used in different places. This means you declare .blogPostTitle but in practice the class is . blogPostTitle_xG45dfg64dfdgf

Those files are called "CSS modules" and you should read the doc in https://github.com/css-modules/css-modules to use them properly. If you want to make a className global you can use :global using the documented CSS module syntax.

Otherwise you can use a selector like div[class^="blogPostTitle_"] (similar to what @arisac suggests above), but this is more a quick workaround than an elegant solution. And those selectors might break on Docusaurus upgrades if we decide to change the name of the class (that are considered implementation details, not public API).

can I leave the customization in the BlogPostItem folder or only in css/custom.css?

I'd recommend using your own global classNames or swizzle (not necessarily both at the same time, as you split your customizations in multiple files)

As you already swizzled the component, I don't understand why you try to also do customizations through custom.css => you should try to co-locate the CSS customization close to the swizzled component for maintainability reasons.

As swizzle components can do, but when doing the build I get the error TypeError: source_default(...).bold is not a function. Do I have to run yarn swizzle...? Which one?

I don't know what you are trying to do, and how you get that error, so I can't really help you here.

You have to swizzle the appropriate component (and only you can know, it depends on what you want to do) and make sure your customizations do not prevent the site from building.

[arisac]

I agree with @slorber , my code is just a demo for using css selectors to override a class value.
It is useful hack for making small changes. But it may cause more future works in Docusaurus upgrades, the class names may change.
So it is not recommended if modifying large amount of styles.

I also recommend using your own classNames in your swizzles for the purpose of better maintenance.