如果你熟悉 VuePress 的话,你会发现,在 VuePress 中,可以通过在文档根目录下新建一个 README.md 并结合 frontmatter 来创建一个主页,如 VuePress 官网的主页(markdown 源码见这里)。


 有了本插件,你将不需要创建 README.md 就能获得同样的主页。主页支持的选项如下:



你可以通过插件的 home 选项来重新配置它们,如


module.exports = {
  title: 'Ant Design 实战教程',
  description: '基于 umi 的 Ant Design 实战教程',
  plugins: [
    ['vuepress-plugin-yuque', {
      repoUrl: 'https://www.yuque.com/ant-design/course',
      home: {
        actionText: 'Getting Started →',
        actionLink: '/intro/',
        heroImage: 'https://cdn.nlark.com/yuque/0/2018/png/84868/1535520500482-avatar/20c595c5-ab31-4543-9142-f36cc87c8868.png?x-oss-process=image/resize,m_fill,w_320,h_320',
        footer: `Copyright © 蚂蚁金服体验技术部`
      }
    }]
  ]
}


那么,你将获得一个这样的主页:

image.png

你也可以在首页中像 VuePress 主页那样加上一些 features:


module.exports = {
  // ...
  plugins: [
    ['vuepress-plugin-yuque', {
      // ...
      home: {
        // ...
        features: [
          { title: '循序渐进', details: '本教程的难度依次递进,为阅读者呈现舒适的学习曲线' },
          { title: '值得信赖', details: '由 antd 团队亲自打造,从技术栈、生态、研发流程等来为你提供系统化的学习体验' },
          { title: '最佳实践', details: '通过结合实际开发过程中的案例,来描述不同场景下的最佳实践' },
        ]
      }
    }]
  ]
}


那么,你的主页将会变成:


image.png