Warm tip: This article is reproduced from stackoverflow.com, please click
vue.js vuepress

Vuepress README.doc first page in format yaml convert to markdown format doc

发布于 2020-06-22 02:28:28

I am not able to find information on how to modify the main page of Vuepress, which, although I like its structure, being in .yaml format does not allow me to put links.

Is it possible to put links? Or better, is it possible to convert that page to markdown format but keeping the output it delivers?

Front of vuepress. I like it

Questioner
abkrim
Viewed
14
Delena Malan 2020-04-02 22:55

Unfortunately it is not possible without modifying the Vue templates. The home page is rendered by the Home component component and it renders the page's frontmatter using Vue's "Mustache" syntax. Values inside the mustaches will only ever be rendered as plain text.

You'll have to modify the Home component by either "ejecting" the default theme or by creating a custom layout for the home page. In both cases, you will obviously not receive any updates to the components anymore when you upgrade Vuepress.

I've created a demo to show how to use a custom layout to allow the frontmatter to be HTML. I've copied the Layout and Home components from Vuepress and changed the new Home component to use v-html to inject HTML values into the h1 component. So now your heroText could be Hi! This is a <a href='https://www.google.com'>link</a> and it will be displayed as a link on the home page. You could obviously do the same for the other elements.

Be sure to set the layout value of your home page to the new layout, e.g. layout: HomeLayout.