Vuepress-theme-antd-docs NPM

本项目是使用 vuepress 开发的文档平台，ant design 文档风格，用于在线展示组件的使用方式及相关文档。

Usage

安装依赖

yarn vuepress-theme-antd-docs

# or

npm install vuepress-theme-antd-docs

Todo

[] API Table 组件
[] 侧边栏分类
[] 代码显示
[] 索引菜单层级

配置说明

使用主题

在你的.vuepress/config.js文件中配置：

module.exports = {
  theme: 'antd-docs'
}

主屏

在主屏的readme中设置 YAML front matter

<!-- 是否显示主屏内容 -->
home: true
<!-- 主屏标题 -->
heroText: Wisdom UI
<!-- 主屏图标 -->
heroImage: /images/wc.png
tagline: 企业级产品设计体系，创造高效愉悦的工作体验 ## 标题描述文字
<!-- 主屏按钮 -->
actionText: 开始使用
<!-- 按钮链接 -->
actionLink: /introduce/
features: ## 内容项
- title: 设计思想
  details: 这是 Wisdom UI 评价设计好坏的内在标准。基于「每个人都追求快乐工作」这一假定，我们在「确定性」和「自然」的基础上，新增「意义感」和「生长性」两个价值观，指引每个设计者做更好地判断和决策。
  code: design
- title: 设计思想
  details: 这是 Wisdom UI 评价设计好坏的内在标准。基于「每个人都追求快乐工作」这一假定，我们在「确定性」和「自然」的基础上，新增「意义感」和「生长性」两个价值观，指引每个设计者做更好地判断和决策。
  code: design
  <!-- ## 底部配置 -->
footer: MIT Licensed | Copyright © 2020-present WisdomCity Technology
footerColumn: 3
footerWrap:
- headline: 相关资源
  items:
  - title: 谷歌
    link: www.google.com
    details: 谷歌
  - title: github
    link: www.github.com
    details: github

主题配置

主题配置与官网默认配置相同，请查看vuepress 默认主题配置

这里提供一个参考配置.vuepress/config.js：

themeConfig: {
        logo: '/images/wc.png',
        navbar: true,
        // 顶部导航
        nav: [
            { text: '设计', link: '/design/' },
            { text: '文档', link: '/introduce/' },
        ],
        // 配置侧边栏菜单
        sidebar: {
            '/design/': [
                {
                    title: 'Wisdom UI', // 必要的
                    path: '/design/', // 可选的, 标题的跳转链接，应为绝对路径且必须存在
                    collapsable: false, // 可选的, 默认值是 true,
                    sidebarDepth: 1 // 可选的, 默认值是 1
                }
            ],
            '/introduce/': [
                {
                    title: 'Wisdom UI of Vue',
                    path: '/introduce/',
                    collapsable: false,
                    sidebarDepth: 1
                },
                {
                    title: '快速上手',
                    path: '/introduce/getting-started/',
                    collapsable: false,
                    sidebarDepth: 1
                }
            ],
        }
    }

在文档中自动生成右侧索引目录

---
title: Wisdom UI of Vue
---
# Wisdom UI of Vue

`wisdom ui` 是基于 Wisdom 设计体系的 Vue UI 组件库，主要用于研发企业级中后台产品。

::: slot toc
[[toc]]
:::

在文档中设置 footer

在文档 YAML front matter 中配置footer相关即可

---
footer: MIT Licensed | Copyright © 2020-present WisdomCity Technology
footerColumn: 3
footerWrap:
- headline: 相关资源
  items:
  - title: 谷歌
    link: www.google.com
    details: 谷歌
  - title: github
    link: github.com
    details: github
---