Need to customize 404 page title

[chenxi2035]

trafficstars

Is your feature request related to a problem? Please describe.

Is there any way to customize the 404 page title for the default theme, not like 404 | siteTitle ? I need this config to provide a more refined user experience. Thanks~

Describe the solution you'd like

And a config on ThemeConfig.notFound to change the title of 404 page

Describe alternatives you've considered

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Read the Contributing Guidelines.
• [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

Page title is not part of the themeConfig. IMO it should be supported via transformPageData:

  transformPageData(pageData) {
    if (pageData.isNotFound) {
      pageData.title = 'Not Found'
    }
  }

[chenxi2035]

@brc-dd Thanks for reply, I tried the transformHtml:

  async transformHtml(code, id, context) {
    if(id.includes('404')){
      console.log("-----------404 page changed-------------------")
      return code.replace("404","The way back home")
    }
    
  },

The output 404.html did changed, the title in the head section is :

<title>The way back home | SiteTitle</title>

Everything seems fine ,but when preview the 404 page, the title first shows the "The way back home“ as I want, but when the content of the 404 page is fully loaded , the title changed back to "404 | Site Title".

Now I'm trying to add my own Not Found component to change the title dynamically.

[chenxi2035]

@brc-dd Inspired by your reply, finally I solved this by changing page data in vue script.

import { onMounted,ref,reactive } from 'vue'
import { useData } from 'vitepress'

const { page } = useData()
const { Layout } = DefaultTheme

const extra = ref()
onMounted(() => {

})
let pageData = page.value;
console.log(pageData)
if(pageData.isNotFound){
    pageData.title = "不识庐山真面目，只缘身在此山中"
}