返回介绍

配置

发布于 2019-05-30 13:40:05 字数 1624 浏览 1150 评论 0 收藏 0

配置文件(config file)

不做任何配置的话,页面会显得过于简单,用户也无法方便地浏览网站。想要定制你的网站,首先需要在文档目录中创建一个 .vuepress 目录。这是放置所有 VuePress 特有(VuePress-specific) 文件的地方。你的项目结构可能长这样:

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

配置 VuePress 站点的基本文件是 .vuepress/config.js,其中导出一个 JavaScript 对象:

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around'
}

如果开发服务器正常运行,你应该看到该页面现在有一个 title 标题和一个搜索框。VuePress 带有内置的 基于 header 搜索(headers-based search) 的功能 - 它会自动从所有页面的 title, h2h3 header 标签中,建立一个简单的搜索索引。(译者注:此搜索是遍历 pages 数组的每一项,取出其中的 headers 数组,其中数组每项对应 markdown 标题,具体代码查看 /lib/default-theme/SearchBox.vue 的 suggestions 函数)

请查阅 配置参考 以获取完整的选项列表。

可替代的配置格式

你也可以使用 YAML(.vuepress/config.yml) 或 TOML(.vuepress/config.toml) 格式编写配置文件。

主题配置(theme configuration)

VuePress 主题,负责网站的所有布局和交互细节。VuePress 附带一个默认主题(你现在看到的就是),专门为技术文档设计。它暴露许多选项,允许你自定义导航栏(navbar)、侧边栏(sidebar)和主页(homepage)等。详细信息请查看 默认主题配置 页面。

如果你想开发自定义主题,请参考 自定义主题。

应用程序级别的增强功能(app level enhancements)

由于 VuePress 应用是一个标准的 Vue 应用程序,所以你可以通过创建一个 .vuepress/enhanceApp.js 文件,来使用应用程序级别的增强功能,如果此文件存在,该文件将会被导入到该应用程序中。该文件应该通过 export default 方式导出一个钩子函数,它将接收一个含有一些应用程序级别值的对象作为参数。你可以使用这个钩子来安装额外的 Vue 插件,注册全局组件,或者添加额外的路由钩子:

export default ({
  Vue, // 当前 VuePress 应用所使用的 Vue 版本
  options, // 根 Vue 实例的选项
  router, // 应用程序的路由实例
  siteData // 网站元数据
}) => {
  // ...使用应用程序级别的增强功能
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文