Vuepress-theme-next NPM

vuepress-theme-next

一款专为 Vue.js 组件开发场景而生 VuePress 主题。

如何使用

npm i vuepress-theme-next --save-dev

使用自定义主题：

// .vuepress/config.js
module.exports = {
    theme: 'next',
    // 自定义配置
};

主题配置

首页

使用主题提供的首页布局，只需要在根级 README.md 的 YAML front matter 指定 home: true 即可使用。以下是可配置项：

网站主题

heroText：string - 站点主标题
tagline:：string - 站点副标题
branding：url、array - 品牌墙徽标
startText：string - 主操作文本
startLink：route-path - 主操作路径
startLogo：url、array - 主操作徽标
actionText：string - 次操作文本
actionLink：route-path - 次操作路径
actionLogo：url、array - 次操作徽标

heroText: 面向 <b>未来</b> 的企业级<br> 前端「全链路」开发服务平台
tagline: 基于 <a target="_blank" href="https://cn.vuejs.org/" >Vue.js</a> 生态构建，致力于提升研发效率和改善开发体验
branding: /img/branding.svg
startText: 开发指南
startLink: /docs/guide/
startLogo:
- /img/start-light.svg
- /img/start-dark.svg
actionText: 项目模板
actionLink: /store/scaffold/
actionLogo:
- /img/action-light.svg
- /img/action-dark.svg

特别赞助

title：string - 赞助标题
detail：string - 赞助描述
special：array
- name：string - 赞助商名称
- logo：url、array - 赞助商徽标
- link：href-link - 赞助商链接
actionText：string - 主操作文本
actionLink：href-link - 主操作链接

patreon:
  title: 我们的赞助商
  detail: 特别感谢赞助商的资金支持，这有助于我们投入更多的开发时间，<br />使项目能够健康持续地发展。
  special:
  - name: tipe
    logo: /img/tipe.png
    link: https://tipe.io/
  - name: bit
    logo:
    - /img/bit-light.png
    - /img/bit-dark.png
    link: https://bit.dev/
  - name: wrappixel
    logo:
    - /img/wrappixel-light.png
    - /img/wrappixel-dark.png
    link: https://www.wrappixel.com/
  actionLink: https://www.patreon.com/vultur
  actionText: 支持我们

产品特性

title：string - 特性标题
image：url、array - 特性插图
detail：string - 特性描述
actionText：string - 主操作文本
actionLink：route-path - 主操作路径

features:
- title: 全新平台产品<b>通用设计语言</b>
  image:
  - /img/components-primary.svg
  - /img/components-dark.svg
  detail: 基于对企业中后台成百上千个业务形态的总结和抽象，提炼出一套标准化中后台体验设计原则与模式，并提供了开箱即用的高质量前端组件实现，将复杂的业务场景抽象为用户标准认知层的交互方式，让设计和研发无缝衔接。
  actionText: 设计语言
  actionLink: /design/
- title: <b>移动优先</b>创造极致用户体验
  image:
  - /img/mobile-primary.svg
  - /img/mobile-dark.svg
  detail: 遵循『移动优先』的设计理念，保证所有组件在多端都拥有一致贯穿的良好体验。除此之外，你还可以使用栅格布局轻松地针对<b>手机</b>、<b>平板</b>和<b>桌面端</b>等不同设备或屏幕尺寸定制化设计多个固定布局，输出协调一致并具备高可用性的产品。
  actionText: 栅格布局
  actionLink: /components/grid/

技术框架

title：string - 区段标题
popular：array
- name：string - 类库名称
- logo：url、array - 类库徽标
- link：href-link - 类库链接

library:
  title: 使用社区最受欢迎的<b>框架</b>和<b>库</b>，加速<b>现代 Web 应用</b>的开发与构建<br> 得益于 JavaScript 繁荣的生态和社区，让我们可以构建和维护复杂的 Web 应用程序
  popular:
  - name: Vuejs
    logo: /img/vuejs.png
    link: https://cn.vuejs.org/
  - name: TypeScript
    logo: /img/typescript.png
    link: https://www.typescriptlang.org/zh/
  - name: Babel
    logo: /img/babel.png
    link: https://babeljs.io/
  - name: Webpack
    logo:
    - /img/webpack-light.png
    - /img/webpack-dark.png
    link: https://webpack.docschina.org/

用户好评

title：string - 区段标题
praise：array
- name：string - 用户姓名
- avatar：url - 用户头像
- text：string - 用户评价
- link：href-link - 用户链接

customer:
    title: <span>基于领域模型与团队实践共同打造</span><b>一站式开发平台</b>，<span>全面提升研发与管理效率</span><br>
           <span>适用于多种业务场景，让优秀的团队更优秀</span>
    praise:
    - name: 怒江
      avatar: /img/user_1.png
      text: 青，出于蓝而胜于蓝。冰，水为之而寒于水。
      link: http://wall-e.me/
    - name: 牧然
      avatar: /img/user_2.png
      text: 天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为。

高级主题

title：string - 主题标题
detail：string - 主题描述
preview：url、array - 主题预览
actionText：string - 操作文本
actionLink：href-link、route-path - 操作链接
previewText：string - 预览文本
previewLink：href-link、route-path - 预览链接

    title: Next Design <b>Pro</b>
    detail: 企业级中后台前端/设计解决方案，涵盖绝大多数中后台典型场景，最大化地减轻开发者工作量，易于上手并支持多端的响应式能力
    preview:
    - /img/preview-light.png
    - /img/preview-dark.png
    actionText: 开始使用
    actionLink: /docs/pro/
    previewText: 在线预览
    previewLink: http://example.com

导航栏

导航栏可能包含站点标题、站内搜索、导航菜单、仓库链接，这取决于你的配置。

头部徽标

你可以通过 themeConfig.logo 增加头部徽标，徽标可以被放置在公共文件目录：

// .vuepress/config.js
module.exports = {
    themeConfig: {
        logo: '/img/logo.png',
        // 使用 Array 类型可以配置在不同主题模式下显示不同的徽标
        // logo: ['/img/next-primary.svg', '/img/next-white.svg'],
    },
};

导航栏菜单

你可以通过 themeConfig.navbar 增加一些导航栏链接：

// .vuepress/config.js
module.exports = {
    themeConfig: {
        navbar: [
            { text: '首页', link: '/' },
            { text: '文档', link: '/docs/' },
            { text: '查看源码', link: 'https://github.com/Vultur/vuepress-themes' },
        ],
    },
};

外部链接 <a> 标签的特性将默认包含 target="_blank" 和 rel="noopener noreferrer"，你可以提供 target 与 rel，它们将被作为特性被增加到 <a> 标签上：

// .vuepress/config.js
module.exports = {
    themeConfig: {
        navbar: [
            { text: '首页', link: '/' },
            { text: '文档', link: '/docs/', target: '_blank' },
            { text: '查看源码', link: 'https://github.com/Vultur/vuepress-themes', target: '_self', rel: '' },
        ],
    },
};

当你提供了一个 items 数组而不是一个单一的 link 时，它将显示为一个下拉菜单：

// .vuepress/config.js
module.exports = {
    themeConfig: {
        navbar: [
            {
                text: '...',
                items: [
                    { text: '实战教程', link: '/courses/' },
                    { text: '设计资源', link: '/resources/' },
                    { text: '品牌徽标', link: '/branding/' },
                    { text: '术语解释', link: '/glossary/' },
                ],
            },
        ],
    },
};

此外，你还可以通过嵌套的 items 在下拉菜单中设置分组：

// .vuepress/config.js
module.exports = {
    themeConfig: {
        nav: [
            {
                text: '生态系统',
                items: [
                    { text: '开发工具', items: [/*  */] },
                    { text: '社区论坛', items: [/*  */] },
                ],
            },
        ],
    },
};

禁用导航栏

你可以通过设置 themeConfig.navbar 为 false 来禁用所有页面的导航栏：

// .vuepress/config.js
module.exports = {
    themeConfig: {
        navbar: false,
        // 注意：默认主题的导航栏菜单配置和禁用选项使用的是不同的字段，
        // 而 next 主题则使用同一个字段，即：themeConfig.navbar
    },
};

你也可以通过 YAML front matter 来禁用某个指定页面的导航栏：