Provide more slots when extending the default theme

[Charles7c]

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

Hi there!

I want to expand the theme to add content in the red box below, but we do not have slots in these two positions, I would like to ask if there is a good way?

Describe the solution you'd like

Is it possible to add doc-title-after, doc-footer-before slots like that.

Describe alternatives you've considered

For example, if I wanted to add content after the title, the schemes I tried were as follows:

• Use custom components under the heading of each MD document.
• Expand the custom content in the doc-before slot position, then move it when the page loads.

Obviously, they are either troublesome or have problems.

Additional context

I'm sorry to disturb you. In addition to completely customizing the theme, do you have a better plan to guide me? I am just like an amateur in front end.
Say thank you in advance.

Validations

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

[brc-dd]

Is it possible to add doc-title-after, doc-footer-before slots like that.

doc-title-after would not be possible because that heading is part of your markdown content. We don't have control over that. You can create some component say MainHeader, register it globally and use it on your every doc page instead of the # foo syntax. You'll also have to add title in frontmatter if you are adding it through your MainHeader component.

doc-footer-before is possible, feel free to create a PR for that.

Use custom components under the heading of each MD document.
Obviously, they are either troublesome or have problems.

What's the issue you're having?

[Charles7c]

Is it possible to add doc-title-after, doc-footer-before slots like that.

doc-title-after would not be possible because that heading is part of your markdown content. We don't have control over that. You can create some component say , register it globally and use it on your every doc page instead of the syntax. You'll also have to add in frontmatter if you are adding it through your component.MainHeader``# foo``title``MainHeader

doc-footer-before is possible, feel free to create a PR for that.

Use custom components under the heading of each MD document.
Obviously, they are either troublesome or have problems.

What's the issue you're having?

Sure enough, I have also considered this issue and I also think it is unlikely to add doc-title-after.

About the first solution I mentioned above, once you define a global component, you need to use it after the title every time you write an article. As a programmer, you obviously hate this kind of repetitive transaction. But I have to say it works.

Obviously, they are either troublesome or have problems.

The content mentioned in this section mainly refers to the second solution I tried above, which has a serious problem and requires a manual refresh after opening the page to take effect. That solution has been vetoed by me.

In replying to you, I thought of another way:

• If the title attribute is set in FrontMatter, it is assumed that it needs to be specified as the title of the article, that is, use <h1>{{frontmatter. Title}}</h1> when rendering, then you can add doc-title-before, doc-title-after slots.

Do you think this solution is feasible? 😄

[brc-dd]

If the title attribute is set in FrontMatter, it is assumed that it needs to be specified as the title of the article,

Not exactly, people use it to change navbar title. Like having # foo in md, and having foo | ctx (ref).

[brc-dd]

you need to use it after the title every time you write an article. As a programmer, you obviously hate this kind of repetitive transaction

Probably you can write a markdown-it plugin for this to add your component after every h1.

[brc-dd]

Register AfterTitle globally, then you can add this:

// .vitepress/config.ts
import { defineConfig } from 'vitepress'

export default defineConfig({
  markdown: {
    config: (md) => {
      md.renderer.rules.heading_close = (tokens, idx, options, env, slf) => {
        let htmlResult = slf.renderToken(tokens, idx, options, env, slf)
        if (tokens[idx].tag === 'h1') htmlResult += `\n<AfterTitle />`
        return htmlResult
      }
    }
  }
})

[Charles7c]

全局注册，然后您可以添加以下内容：AfterTitle

// .vitepress/config.ts
import { defineConfig } from 'vitepress'

export default defineConfig({
  markdown: {
    config: (md) => {
      md.renderer.rules.heading_close = (tokens, idx, options, env, slf) => {
        let htmlResult = slf.renderToken(tokens, idx, options, env, slf)
        if (tokens[idx].tag === 'h1') htmlResult += `\n<AfterTitle />`
        return htmlResult
      }
    }
  }
})

awesome, thank you. 😃 👍

[Charles7c]

Thank you again for solving the problem of doc-title-after well. @brc-dd

Looking forward to doc-footer-before.

[Charles7c]

Very good.