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

【问题标题】：How can I use markdown in the Homepage layout of the VuePress?如何在 VuePress 的主页布局中使用 markdown？
【发布时间】：2020-07-07 20:23:02
【问题描述】：

在Vuepress的homepage layout的features标签中，任何markdown符号都不能使用，因为会报错。所以，我想制作我的自定义布局，它是从默认主页布局扩展而来的，并且可以使用 markdown。

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

【问题讨论】：

标签： vuepress

【解决方案1】：

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

我们创建了一个名为 HomeFeatures.vue 的首页组件。 (see the repo) 另外，我们几乎是直接从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 直播。

【讨论】：

嗨，瑞恩！好主意，我喜欢这种方法！感谢您的精彩建议和分享您的建议网站！

【解决方案2】：

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

就个人而言，我建议您尝试直接使用带有自定义布局的 HTML。要为主页使用自定义布局，请查看我的 other answer，要使用 HTML，请参阅 VuePress #2186 中的相关问题

【讨论】：