返回

VuePress 主题的绝妙配置指南

前端

目录结构

VuePress 的默认主题采用扁平化的目录结构,这意味着你的文章和页面都应该放在 docs 目录下。你可以通过在 docs 目录下创建子目录来组织你的内容,例如:

docs
├── about
│  ├── index.md
│  └── team.md
├── blog
│  ├── 2023
│  │  ├── 01-january.md
│  │  └── 02-february.md
│  └── 2022
│  │  ├── 01-january.md
│  │  └── 02-february.md
├── guide
│  ├── getting-started.md
│  └── advanced-topics.md
└── index.md

首页

首页是你的网站的欢迎页面,通常包含你的网站的标题、和一些精选的文章或页面。你可以通过在 docs 目录下创建 index.md 文件来配置你的首页。

---
title: 我的网站
description: 这是一个关于 VuePress 的网站
---

# 欢迎来到我的网站

在这里,你可以找到关于 VuePress 的各种教程、指南和示例。

## 最新文章

* [VuePress 入门教程](/guide/getting-started.md)
* [VuePress 高级主题](/guide/advanced-topics.md)
* [VuePress 部署指南](/guide/deployment.md)

## 联系我

如果你有任何问题或建议,请随时与我联系。

* 电子邮件:example@gmail.com
* Twitter:[@username](https://twitter.com/username)

导航栏

导航栏是你的网站的顶部菜单,通常包含你的网站的标题、导航链接和一些额外的按钮或图标。你可以通过在 docs 目录下创建 _navbar.md 文件来配置你的导航栏。

---
# 导航栏配置

以下是一些导航栏配置选项:

* title: 你的网站的标题
* logo: 你的网站的徽标
* links: 导航链接
* buttons: 额外的按钮或图标
---

# 示例导航栏

title: 我的网站
logo: /logo.png
links:

  • /guide/: 指南
  • /blog/: 博客
  • /about/: 关于
    buttons:
  • /contact/: 联系我

侧边栏

侧边栏是你的网站的左侧菜单,通常包含一些额外的信息,例如你的网站的目录、标签或社交媒体链接。你可以通过在 docs 目录下创建 _sidebar.md 文件来配置你的侧边栏。

---
# 侧边栏配置

以下是一些侧边栏配置选项:

* title: 侧边栏的标题
* links: 侧边栏的链接
* widgets: 侧边栏的小部件
---

# 示例侧边栏

title: 侧边栏
links:

  • /guide/: 指南
  • /blog/: 博客
  • /about/: 关于
    widgets:
  • /social/: 社交媒体链接

搜索框

搜索框是你的网站的顶部搜索框,通常允许你的用户搜索你的网站的内容。你可以通过在 docs 目录下创建 _search.md 文件来配置你的搜索框。

---
# 搜索框配置

以下是一些搜索框配置选项:

* title: 搜索框的标题
* placeholder: 搜索框的提示文本
* action: 搜索框的提交动作
---

# 示例搜索框

title: 搜索
placeholder: 搜索我的网站
action: /search/

自定义主题

如果你想使用自定义主题,你需要在你的 VuePress 项目中安装并配置它。你可以通过以下步骤来安装和配置一个自定义主题:

  1. 在你的 VuePress 项目中安装自定义主题。
  2. 在你的 VuePress 项目的 config.js 文件中配置自定义主题。
  3. 在你的 VuePress 项目的 docs 目录下创建 _custom.styl 文件来配置自定义主题的样式。

结论

VuePress 的默认主题提供了许多强大的配置选项,允许你对你的网站的外观和功能进行高度的自定义。通过遵循本指南,你可以轻松地配置你的 VuePress 网站,并创建一个具有个性化外观和功能的网站。