Templates / Variables for Markdown File Inclusion

[d-koppenhagen]

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

I have a documentation page, where I want to include a markdown template in multiple pages. This template is basically always the same but some words should be replaced.

Describe the solution you'd like

Let's assume we have a markdown file which includes the template and sets the variable values:

<!--@include: ./my-template.md{3,}[name='John Doe',prefix=App]-->

The template my-template.md could look like:

# Hello {{name}}

```ts
export class {{prefix}}Component {}

An in the end it should be rendered like:

````md
# Hello John Doe

```ts
export class AppComponent {}

### Describe alternatives you've considered

_No response_

### Additional context

_No response_

### Validations

- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)
- [X] Read the [docs](https://vitepress.dev).
- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).
- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

Ah just defineProps in your template markdown and import it instead of using file inclusion.

[d-koppenhagen]

Can you give me an example?

[brc-dd]

https://stackblitz.com/edit/vite-ni4j3y?file=docs%2Findex.md,docs%2F.vitepress%2Fcomponents%2Ftemplate.md

[fjun99]

https://stackblitz.com/edit/vite-ni4j3y?file=docs%2Findex.md,docs%2F.vitepress%2Fcomponents%2Ftemplate.md

great!

[d-koppenhagen]

Awesome! This solution is way better than my suggestion. Thanks for your help.

[fjun99]

@brc-dd This is fantastic.

I happened to be writing a VitePress 101 tutorial from morning till night today. I incorporated your technique into the advanced techniques collection just now.

Currently, this tutorial is only available in Chinese. I will consider translating the entire series into English after refining it.

You might be able to view it through browser translation.

10. advanced techniques collection : https://www.alang.ai/vitepress/v10.html

The 10-part tutorial: https://www.alang.ai/vitepress/

[fjun99]

@brc-dd thanks for your kind help in vitepress issue discussion.

[brc-dd]

@fjun99 It'll be better if you set lang: 'zh-Hans' in your .vitepress/config.ts. Browsers will then show translation prompt automatically.

[fjun99]

@fjun99 It'll be better if you set lang: 'zh-Hans' in your .vitepress/config.ts. Browsers will then show translation prompt automatically.

ok, thanks!