在 VuePress 1.x 实现一个自定义的首页布局

在 VuePress 1.x 版本中，你可以通过创建自定义的布局组件来实现一个自定义的首页布局。下面是一些基础步骤来帮助你配置自己的首页布局：

第一步：创建自定义布局

在你的 .vuepress 文件夹内创建一个 components 目录（如果尚不存在），然后创建一个用于首页的自定义布局组件，例如 CustomHome.vue。

 .vuepress/components/CustomHome.vue

第二步：编写自定义布局组件

编辑刚才创建的 CustomHome.vue 文件，添加以下示例代码作为起点：

<template> 
<div class="custom-home">
 <header class="hero"> 
<!-- 添加你的标题和介绍 -->
 <h1>我的 VuePress 站点</h1>
 <p>这里是我的站点介绍。</p> 
</header> 
<!-- 其他自定义内容 --> 
<!-- ... --> </div> 
</template> 
<script>
 // 可以在这里添加一些脚本逻辑
 export default { // 这里是 Vue 组件的选项 } 
</script> 
<style> 
/* 在这里添加样式 */ 
.custom-home { /* 自定义样式 */ } 
.hero { /* 更多自定义样式 */ } 
</style>

 

 

第三步：使用自定义布局

在你的首页 Markdown 文件（通常是 README.md）的 YAML front matter 中指定该布局。你需要在文件顶部加入如下配置：

markdown复制代码

--- home: false

layout: CustomHome

---

# 这里是正文的其他 Markdown 内容

将 home: false 设置为 false 是重要的，因为默认的首页布局会在设置了 home: true 的情况下被启用。

第四步：应用样式和调整布局

现在，你可以自由地修改你的 CustomHome.vue 文件，以包含任何你希望展示在首页的元素和样式。这可能包括图片、链接列表、特性列举等。

VuePress 允许你使用 Vue 的功能和 Webpack 加载的任何资源，所以你几乎可以无限制地创建一个独特且功能丰富的首页。