VuePress 如何自定义主题和页面布局
要自定义VuePress的主题，需要做以下几步：
-
创建主题文件夹：在VuePress项目的根目录下创建一个themes文件夹，并在其中新建一个以主题名命名的文件夹，例如my-theme。
-
创建主题配置文件：在my-theme文件夹中创建一个config.js文件，用于配置主题的一些选项，例如导航栏、侧边栏、颜色等。
-
创建主题模板文件：在my-theme文件夹中创建一个layouts文件夹，并在其中创建.vue文件，用于定义不同页面类型的布局，如首页、文章页、404页等。
-
引入主题：在VuePress项目的配置文件.vuepress/config.js中，将theme选项指向my-theme主题的路径。
要自定义VuePress的页面布局，需要做以下几步：
-
创建页面模板文件：在VuePress项目的根目录下创建一个.vue文件，用于定义特定页面的布局。
-
配置页面布局：在.vue文件中使用组件来包含页面内容，并通过插槽（slot）来定制布局的各个部分，如导航栏、侧边栏、页脚等。
-
配置页面路由：在VuePress项目的根目录下的.vuepress/config.js中，配置特定页面的路由路径和组件路径，如：
module.exports = {
themeConfig: {
sidebar: [
['/my-page', 'My Page']
]
},
extendPageData($page) {
if ($page.path === '/my-page') {
$page.layout = 'MyLayout'
}
}
}
其中sidebar选项配置了页面的侧边栏，extendPageData函数用于获取当前页面的信息，并通过layout属性指定使用哪个布局模板。
添加代码高亮、分页功能
- 代码高亮
VuePress 使用了 Prism.js 来实现代码高亮。要开启代码高亮功能，需要在 .vuepress/config.js 文件中进行如下配置：
module.exports = {
themeConfig: {
// ...
markdown: {
// 配置 markdown-it 插件
extendMarkdown: md => {
md.set({ breaks: true })
md.use(require('markdown-it-prism'))
}
}
}
}
上述配置中，我们通过 extendMarkdown 选项来引入了 markdown-it-prism 插件，该插件可以为代码块添加语法高亮。
- 分页
要实现分页功能，需要先安装 @vuepress/plugin-pagination 插件。安装方法如下：
npm install -D @vuepress/plugin-pagination
然后，在 .vuepress/config.js 文件中进行如下配置：
module.exports = {
plugins: [
'@vuepress/plugin-pagination'
]
}
接着，在 Markdown 文件中，你可以使用 [[pages]] 占位符来指定需要分页的位置。例如：
# My blog
[[pages]]
## Page 2
[[pages]]
VuePress实现搜索功能
要在 VuePress 中添加搜索功能，可以按照以下步骤进行操作：
- 安装
@vuepress/plugin-search 插件：
npm install -D @vuepress/plugin-search
- 在
.vuepress/config.js 配置文件中添加插件：
module.exports = {
plugins: [
['@vuepress/search', {
searchMaxSuggestions: 10
}]
]
}
其中 searchMaxSuggestions 属性用于设置最大建议项数目。
- 在需要启用搜索功能的页面上添加搜索框组件：
<template>
<div>
<SearchBox />
</div>
</template>
<script>
import SearchBox from '@vuepress/search-box'
export default {
components: {
SearchBox
}
}
</script>
- 运行
vuepress dev 命令启动本地服务器，在网站上查看搜索功能是否已启用。
Markdown中使用Vue组件
VuePress 是一个基于 Vue.js 的静态网站生成器，它支持使用 Markdown 来编写文档并利用 Vue.js 来构建交互式的组件。
要在 VuePress 的 Markdown 中使用 Vue 组件，需要进行以下步骤：
- 安装所需的 Vue 组件：
npm install --save <component-name>
- 在
.vuepress/components 目录下创建一个 .vue 文件来定义该组件。
例如，如果要使用 MyComponent 组件，可以创建一个 MyComponent.vue 文件，并在其中定义组件：
<template>
<div>
<!-- 组件的模板 -->
</div>
</template>
<script>
export default {
// 组件的逻辑
}
</script>
- 在 Markdown 中使用组件。
可以使用 VuePress 的原生语法来调用 Vue 组件。例如，在 Markdown 中插入以下代码：
<MyComponent/>
这将会被渲染成 MyComponent.vue 文件中定义的内容。
需要注意的是，VuePress 的 Markdown 仅支持在部分标签中使用 Vue 组件。具体来说，只有在 <p>、<blockquote>、<ul>、<ol>、<li> 和 <table> 标签内部才能使用 Vue 组件。如果尝试在其他标签中使用组件，将会导致组件无法正确渲染。
此外，还可以通过 $page 对象在组件中访问页面的数据和元信息，以及通过 $site 对象访问站点的配置和元信息等。这些对象在 VuePress 中都是全局可用的。
