如何在 VuePress 的主页布局中使用 markdown？

Question

在Vuepress homepage layout的features标签中，由于出现错误，无法使用任何markdown符号。所以，我想制作我的自定义布局，它是从默认主页布局扩展而来的，并且可以使用 markdown。

这可能吗？欢迎任何建议，谢谢！

Answer 1

目前，你必须经历很多麻烦。默认主题的主页使用 YAML front matter 传递用户配置文本，不会被解析为 markdown。

我个人建议您尝试直接使用 HTML 自定义布局。要为主页使用自定义布局，请查看我的 , and to use HTML see the relavent issue in VuePress #2186

Answer 2

我同意 @Sun Haoran's ，但要注意添加 content/html 的好方法是使用组件。

我们创建了一个名为 HomeFeatures.vue 的首页组件。 (see the repo) Also, we pretty much just copied this straight from vuepress.

<template>
  <div class="features">
    <div class="feature">
      <h2>AccuTerm</h2>
      <p>
        <a href="/accuterm/getting-started/">Getting Started</a><br />
        <a href="/accuterm/license-activation/">Licensing</a><br />
        <a href="/accuterm/desktop/">Desktop</a><br />
        <a href="/accuterm/web/">Web</a><br />
        <a href="/accuterm/mobile/">Mobile</a>
      </p>
    </div>
    <div class="feature">
      <h2>jBASE</h2>
      <p><a href="/jbase/">All Docs</a><br /></p>
    </div>
    <div class="feature">
      <h2>OpenQM</h2>
      <p>Main (Coming Soon!)<br /></p>
    </div>
    <div class="feature">
      <h2>MV Dashboard</h2>
      <p>
        <a href="/mv-dashboard/introduction/">Introduction</a><br />
        <a href="/mv-dashboard/installation-guide/">Installation Guide</a><br />
        <a href="/mv-dashboard/programmers-guide/">Programmers Guide</a>
      </p>
    </div>
    <div class="feature">
      <h2>MV Connect</h2>
      <p>
        <a href="/mv-connect/">Overview</a><br />
        <a href="/mv-connect/get-started/">Getting Started</a><br />
        <a href="/mv-connect/api/">API</a>
      </p>
    </div>
    <div class="feature">
      <h2>Customer Portal</h2>
      <p>
        <a href="/customer-portal/">All Docs</a>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Features'
};
</script>

并且像这样包含它：(see the repo)

---
home: true
heroImage: /assets/img/logo-grey.png
heroText: Product Documentation
tagline: Welcome to the future
footer: MIT Licensed | Copyright © 2019-present Company Name
---

<HomeFeatures />

我们的文档会在线 here 如果您想看到它的实际效果。

如何在 VuePress 的主页布局中使用 markdown？

How can I use markdown in the Homepage layout of the VuePress?

vuepress