vuepress的简单记录
# 内置对象
# $page 对象
$page 对象包含以下属性:
- title: 当前页面的标题
- description: 当前页面的描述
- headers: 当前页面的标题层级结构, 如 h1、h2、h3 等
- frontmatter: 当前页面的元数据, 包括 YAML 头部信息和在 Markdown 文件中的 frontmatter 配置块中定义的内容
- lastUpdated: 当前页面的最后更新时间
- permalink: 当前页面的永久链接
- path: 当前页面的相对路径
- regularPath: 当前页面的绝对路径, 不包括 base 配置项的路径
- key: 当前页面的唯一标识符
- raw: 当前页面的原始 Markdown 源代码
# $contentClass
在 VuePress 中, {$contentClass} 是一个动态类名, 它代表的是 Markdown 渲染后的内容容器元素的类名。在 VuePress 中, 默认情况下, 所有 Markdown 渲染后的内容都会被包含在一个容器元素中, 该容器元素的类名就是 $contentClass。因此, 使用 $contentClass 选择器来选中该容器元素, 可以对渲染后的 Markdown 内容应用样式
在上述 CSS 定义中, .code 类选择器和 $contentClass 类选择器一起定义了代码块的样式。例如, 如果 $contentClass 的值是 markdown-body, 则渲染后的 HTML 代码类似于:
<div class="markdown-body">
<pre><code class="code">...</code></pre>
</div>
2
3
其中, markdown-body 是 $contentClass 的一个示例值, 实际的值可能会根据不同的 VuePress 主题而不同
Q: 下面解释下 <pre> 标签
在 HTML 中, <pre> 标签用于定义预格式化的文本, 即文本中的空格和换行符会被保留。通常用于显示计算机代码或其他可预格式化的文本内容。在示例中, <pre>标签的作用是将代码块以预格式化的形式呈现给用户
# vuepress 钩子函数: extendPageData
在 VuePress 的插件中, extendPageData 是一个生命周期钩子函数, 在编译每一个页面时都会被调用, 它接收一个 $page 参数, 其中包含了当前页面的许多信息, 例如: 路径、正文内容、Front Matter 等等。这些信息可以被插件用于对页面进行修改、增强等操作。因此, $page 参数就是在编译当前页面时传入的, 是 VuePress 本身定义的。插件通过 extendPageData 来拿到这个 $page 参数, 进而进行一些自定义的操作
# 剖析
# 启动大致流程
# plugins
- 内置插件
- 三方插件
# 依赖本地开发模块
- 本地模块目录
npm link
- 项目目录中运行
npm link vuepress-theme-vdoing
这样,你的本地模块就会被链接到你的 Vue 项目中
# 链接
以下是学习 VuePress 的一些网站地址:
- VuePress 官方文档: https://vuepress.vuejs.org/zh/ (opens new window)
- VuePress 插件列表: https://vuepress-plugin.qingwei.tech/ (opens new window)
- VuePress 中文文档网站源码: https://github.com/docschina/vuepress.vuejs.org (opens new window)
- VuePress 官方 GitHub 仓库: https://github.com/vuejs/vuepress (opens new window)
除了上述网站, 你还可以在各大搜索引擎中搜索相关的博客文章、视频教程等, 来学习 VuePress。同时, VuePress 是建立在 Vue.js 之上的, 如果你之前没有学习过 Vue.js, 也可以先学习一下 Vue.js 的基础知识, 这样对学习 VuePress 也会有帮助