vuepress-theme-vdoing vuepress-theme-vdoing
首页
  • 主题初衷与诞生
  • 介绍
  • 快速上手
  • 目录结构
  • 核心配置和约定
  • 自动生成front matter
  • Markdown 容器
  • Markdown 中使用组件
  • 相关文章

    • 使目录栏支持h2~h6标题
    • 如何让你的笔记更有表现力
    • 批量操作front matter工具
    • 部署
    • 关于写文章和H1标题
    • 关于博客搭建与管理
    • 在线编辑和新增文章的方法
  • 主题配置
  • 首页配置
  • front matter配置
  • 目录页配置
  • 添加摘要
  • 修改主题颜色和样式
  • 评论栏
资源
案例
问答
赞助
GitHub (opens new window)
首页
  • 主题初衷与诞生
  • 介绍
  • 快速上手
  • 目录结构
  • 核心配置和约定
  • 自动生成front matter
  • Markdown 容器
  • Markdown 中使用组件
  • 相关文章

    • 使目录栏支持h2~h6标题
    • 如何让你的笔记更有表现力
    • 批量操作front matter工具
    • 部署
    • 关于写文章和H1标题
    • 关于博客搭建与管理
    • 在线编辑和新增文章的方法
  • 主题配置
  • 首页配置
  • front matter配置
  • 目录页配置
  • 添加摘要
  • 修改主题颜色和样式
  • 评论栏
资源
案例
问答
赞助
GitHub (opens new window)
npm

(进入注册为作者充电)

  • 配置

    • 主题配置
    • 首页配置
    • front matter配置
    • 目录页配置
      • 目录页说明
      • 配置项
        • pageComponent.name
        • pageComponent.data
        • pageComponent.data.path
        • pageComponent.data.imgUrl
        • pageComponent.data.description
      • 如何在导航栏中添加目录页链接
    • 添加摘要
    • 修改主题颜色和样式
    • 评论栏
目录

目录页配置

# 目录页说明

注意

目录页数据需要依赖于结构化的侧边栏数据,就是说你需要在config.js配置 sidebar: 'structuring' 或 sidebar: { mode: 'structuring', collapsable: false} 才能实现目录页数据的获取。

  • 目录页文件(.md文件)可以放置在二级目录、三级目录和四级目录。(级别说明)
  • 如果你不想在侧边栏显示目录页,你可以在一级目录中单独创建一个文件夹放置你的目录页(.md文件),并在front matter中设置sidebar: false。
  • 如果你想让目录页和其他页面一起出现在侧边栏,你可以和其他页面共同放置在相应的文件夹。(不要设置sidebar: false)
  • 参照下面的示例配置好front matter,然后就可以在导航栏或首页添加目录页链接了。

示例:

---
pageComponent: # 使用页面组件
  name: Catalogue # 组件名:Catalogue => 目录页组件
  data: # 组件所需数据
    path:  01.学习笔记/01.前端 # 设置为`docs/`下面的某个文件夹相对路径,如‘01.学习笔记/01.前端’ 或 ’01.学习笔记‘ (有序号的要带序号)
    imgUrl: /img/web.png # 目录页内的图片
    description: JavaScript、ES6、Vue框架等前端技术 # 目录描述(可加入a标签)

title: 前端 # 页面标题
date: 2020-01-12 11:51:53 # 创建日期
permalink: /note/javascript # 永久链接
sidebar: false # 不显示侧边栏
article: false # 不是文章页 (不显示面包屑栏、最近更新栏等)
comment: false # 不显示评论栏
editLink: false # 不显示编辑按钮
---

提示

配置好目录页之后,点击文章页的面包屑将会跳转到目录页。

# 配置项

# pageComponent.name

  • 组件名,必需
  • 使用目录页时 必须 设置为Catalogue

# pageComponent.data

  • 组件所需数据,必需

# pageComponent.data.path

  • 要为其生成目录页的文件夹的相对路径,必需
  • 必须是在docs目录底下的文件夹相对路径
  • 示例:01.学习笔记或01.学习笔记/01.前端(有序号的要带序号)

注意

在v1.8.2版本之前,没有path属性,使用key代替。但key只支持指定一级目录的文件夹名称。

# pageComponent.data.imgUrl

  • 目录页内的图片,可选。(v1.9.4之前必填)
  • 图片尺寸在页面中显示为80px*80px

# pageComponent.data.description

  • 目录描述,必需
  • 可加a标签(如需加入a标签时,标签内部的引号请使用单引号)

# 如何在导航栏中添加目录页链接

 // config.js
module.exports = {
    themeConfig: {
        nav:  [
            // 没有二级导航时可以直接添加
           {text: '目录页', link: '/web/'},

          // 有二级导航时
           {text: '页面',
               link: '/ui/',   //目录页, vdoing主题新增的配置项,有二级导航时,可以点击一级导航跳到目录页
               items: [
                 {text: 'HTML', link: '/pages/11/'},
                 {text: 'CSS', link: '/pages/22/'},
               ]
            },
       ]
    }
}

参考:.vuepress/config/nav.js (opens new window)

上次更新: 2023/07/09, 11:40:24
front matter配置
添加摘要

← front matter配置 添加摘要→

Theme by Vdoing | Copyright © 2019-2024 Evan Xu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式