docusaurus
docusaurus copied to clipboard
facebook
Customize page title per plugin instance - avoid duplicated page title
Have you read the Contributing Guidelines on issues?
- [X] I have read the Contributing Guidelines on issues.
Prerequisites
- [X] I'm using the latest version of Docusaurus.
- [X] I have tried the
npm run clearoryarn clearcommand. - [X] I have tried
rm -rf node_modules yarn.lock package-lock.jsonand re-installing packages. - [X] I have tried creating a repro with https://new.docusaurus.io.
- [X] I have read the console error message carefully (if applicable).
Description
By default, the landing page name repeats itself, i.e. "Auth with Caddy | Auth with Caddy".
Steps to reproduce
Please see the landing page of https://authp.github.io/
Expected behavior
The page name should not repeat, i.e. be "Auth with Caddy".
Actual behavior
The name repeats itself "Auth with Caddy | Auth with Caddy".
Your environment
- Public source code: https://github.com/authp/authp.github.io
- Public site URL: https://authp.github.io/
- Docusaurus version used:
2.0.0-beta.9 - Environment name and version (e.g. Chrome 89, Node.js 16.4): Node v14.17.6
- Operating system and version (e.g. Ubuntu 20.04.2 LTS): CentOS 8
Reproducible demo
No response
Self-service
- [X] I'd be willing to fix this bug myself.
You can omit the title field in the home page layout:
export default function home() {
return (
// Don't add the title here
<Layout>
{/* ... */}
<Layout>
)
}
And I do think there's something we can do: check if site title is equal to page title, and do not duplicate if that's the case:
https://github.com/facebook/docusaurus/blob/cbcaa52f88cb702a3712c2b4c19b02225f975ea9/packages/docusaurus-theme-common/src/utils/generalUtils.ts#L12-L14
You can omit the title field in the home page layout:
@Josh-Cena , thank you! This change from defaults worked! 👍
And I do think there's something we can do: check if site title is equal to page title, and do not duplicate if that's the case:
Yes, that would be great!
Additionally, it would be nice to have "Page Name" | "Instance Name" | "Site Title" in the case of multi-doc instance.
For example, I have two pages:
| Path | Page Name |
|---|---|
| https://authp.github.io/docs/authenticate/intro | Auth Portal Plugin Overview | Auth with Caddy |
| https://authp.github.io/docs/authorize/intro | Authorize Plugin Overview | Auth with Caddy |
It would be nice to have instance name (i.e. Authenticate and Authorize) taken into account.
| Path | Page Name |
|---|---|
| https://authp.github.io/docs/authenticate/intro | Auth Portal Plugin Overview | Authenticate | Auth with Caddy |
| https://authp.github.io/docs/authorize/intro | Authorize Plugin Overview | Authorize | Auth with Caddy |
I propose this API to replace the current titleDelimiter in docusaurus.config.js:
titleFormat: '{pageTitle} | {pluginID} | {siteTitle}'
It will leverage the existing interpolate API, and you can swap out the delimiter, rearrange the components, get rid of siteTitle on all pages, etc.
Afaik, every page belongs to a plugin, so the pluginID will always be available. When pluginID === 'default', it will be omitted.
You mean... allowing each plugin instance to declare its own title component instead of relying on pluginID? That sounds fine with me
Using plugin instance name in site title is a quite specific need.
In any case, I'd rather not apply this by default, and I think it's more a theming concern, not sure we want to add a nodejs plugin option just for this.
React Helmet already has a titleTemplate system so it's worth reusing it (already in use) instead of using our custom interpolate fn.
The way I'd solve it:
- swizzle/wrap the theme DocPage component (we should rename it to something better like
DocLayout, and IMHO each plugin should always have a layout comp with a consistent name) - add
<Head titleTemplate={currentInstanceId === "ios" ? "%s | iOS | MySite" : "%s | Android | MySite"}/>in it
Didn't test this but it should work. I'd rather use this because this is a marginal use-case and we already have/want APIs to support that
Oh actually didn't even notice but we don't use titleTemplate but rather a custom useTitleFormatter hook 😅
titleFormat: '{pageTitle} | {pluginID} | {siteTitle}'
This is not a bad idea to have such a global themeConfig but the pluginId is not necessarily a good-looking label, and we can't easily make it good looking because it's used in many places like FS paths, not allowing all kind of chars.
Relevant discussions related to customizing site title (in particular the prefix)
https://github.com/facebook/docusaurus/discussions/6640 https://github.com/facebook/docusaurus/discussions/7491
Upvoted. Not entirely sure what the rationale was behind the decision to create these SEO values dynamically. You want to have full control as a website owner over this aspect.
I propose this API to replace the current
titleDelimiterindocusaurus.config.js:titleFormat: '{pageTitle} | {pluginID} | {siteTitle}'It will leverage the existing
interpolateAPI, and you can swap out the delimiter, rearrange the components, get rid ofsiteTitleon all pages, etc.
This would be superb. Would help to avoid swizzling layouts just to change the title format.
