Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug]Markdown file with specified layout will render extra text. #67

Closed
Ynewtime opened this issue Feb 16, 2021 · 5 comments
Closed

[bug]Markdown file with specified layout will render extra text. #67

Ynewtime opened this issue Feb 16, 2021 · 5 comments

Comments

@Ynewtime
Copy link
Contributor

Bug report

Markdown file with specified layout will render extra text.

1、Add a new page like pages/test.md

Hello World

<route lang="yaml">
meta:
  layout: home
</route>

2、Can avoid by adding a hidden class:

Hello World

<route lang="yaml" class="hidden">
meta:
  layout: home
</route>

Reproduction repo

vitesse-md-with-layout

@hannoeru
Copy link
Collaborator

hannoeru commented Feb 16, 2021

You can't just write custom block to markdown file because it will transform into <template>/* here */</template>,
there is a option in vite-plugin-pages call extendRoute, which can add some custom meta using:

// vite.config.js plugin
Pages({
  extendRoute: (route) => {
    if (route.component.endsWith('pages/test.md')) {
      route.meta.layout = 'home'
    }
  }
})

@Ynewtime
Copy link
Contributor Author

@hannoeru Yah I got it, thanks. So is there another way to specify custom layout directly inside of a markdown file? I tried YAML meta head just like how jekyll does, and it doesn't work as expected. Maybe I should check out the markdown plugin source code.

@JohnCampionJr
Copy link
Collaborator

Would it be a big change for the vite-markdown plugin to strip out the route block?

@Hebilicious
Copy link

Hebilicious commented Feb 16, 2021

I had to slightly modify @hannoeru snippet to get things working, hopefully this helps someone else :

//vite.config.ts
        Pages({
            extensions: ['vue', 'md'],
            extendRoute: (route) => {
                if (/.*\/mydirname\/.*\.md/.test(route.component)) {
                    route.meta = { layout: 'mylayout' }
                }
            },
        }),

@hannoeru
Copy link
Collaborator

With vite-plugin-md v0.5.0, now you can write route custom block inside markdown file!!

markdown:

# Hello World

<route lang="yaml">
meta:
  layout: home
</route>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants