Dynamic siteTitle

[mammadataei]

Hi, is it possible to change the siteTitle for each sub-directory?! Something like multiple sidebars but for the site title.

[lieonlion]

I also want to be able to change the title in the top left to something different depending on the current page path, any way to do this?

[lemonicy]

You can use vue watchers.

Use this in your common template:

import { watch, nextTick } from 'vue';
import { useData, useRouter } from 'vitepress';
import { changeHeader } from { PATH_OF_CHANGEHEADER_FUNCTION };

const { frontmatter } = useData();
const router = useRouter();

watch(() => router.route.data.relativePath, (path) => {
    nextTick(() => {
        changeHeader(frontmatter.value.title);
    }, 100);
}, { immediate: false });

For Maintainability, you can put this in another file:

export function changeHeader(customTitle) {
    document.head.querySelector("title").innerText = customTitle;
}

In addition, if you need to change meta description or something else you want, you can refer to this.