vuepress（三）博客页面自定义布局

程序媛小y

已于 2022-07-03 13:04:54 修改

阅读量2.9k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vuepress 文章标签： vue.js 前端 javascript

于 2022-06-05 21:21:38 首次发布

本文链接：https://blog.csdn.net/weixin_52834435/article/details/125136896

vuepress 专栏收录该内容

6 篇文章

订阅专栏

本文教你如何在VuePress中实现博客页面的自定义布局，通过组件注册和引用，实现在.md文件中灵活设计，展示在线简历案例。掌握组件注册、结构编写与应用，打造个人知识库的独特风格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vuepress（三）博客页面自定义布局

文章目录

vuepress（三）博客页面自定义布局

前言

这里是一个关于vuepress搭建的系列教程，里面也包括了我自己对博客的一些优化

我的博客👉：一枚前端程序媛的blog

我的面筋小站👉：面筋小站

面筋小站是使用vuepress默认主题开发
我的博客使用gungnir主题开发

我在最开始时用的是 Hexo+butterfly搭建博客，但是后来发现，hexo的界面虽然很好看，但是自认为vuepress的文章分类更清楚，更适合于当做自己的笔记库（而本人就是想搭建一个自己的知识库）。

系列文章

vuepress博客搭建（一）导航栏与侧边栏

vuepress（二）插件安装推荐

vuepress（三）博客页面自定义布局

vuepress（四）给vuepress加入githubcalendar贡献日历

vuepress（五）部署到github.io

一、博客自定义页面布局

效果展示：

我的博客的自定义布局👉：在线简历

在默认主题下，每一个.md文件都会被渲染在<div class="page"></div>这样的一个标签中，同时生成页面的侧边栏、编辑链接(如果有)、最新更新时间(如果有)以及上一篇/下一篇(如果有)。
但是如果我们不想生成这样的页面，而是想使用自定义布局，也就是使用Vue组件来进行自定义页面开发，VuePress提供给了我们这样的能力，它在保留导航栏的基础上，其它一切我们都可以自定义的，它的配置可能是这样的

// 在需要自定义的.md文件中使用YAML语法
---
layout: customerComponent
---

上面这样的一个组件名，它对应的路径为.vuepress/components/customerComponent.vue，由于 VuePress会自动帮我们把.vuepress/components目录下的所有组件全部注册，这样我们可以在任何一个.md文件中进行使用

1.在compontents文件夹下注册组件

根据我们的博客目录结构，我们要将自定义的布局组件放在 components文件夹下，

在这里插入图片描述

并且我的组件对应的css样式与components文件夹同级

然后我们就可以按照vue的方式在组件中编写对应的代码了

一个demo🌰

<template>
  <div class="customer-component">
    <div class="left">123</div>
    <div class="center">123</div>
    <div class="right">123</div>
  </div>
</template>
<style lang="stylus">
  .customer-component
    height: calc(100vh - 60px);
    display: flex;
    background-color: #333;
    color: #fff;
    & > div
      flex: 0 0 200px;
      width: 200px;
      text-align: center
    .left
      background-color: #58a;
    .center
      flex: 1;
      background-color: #fb3;
    .right
      background-color: #58a;
</style>

最终显示效果：

在这里插入图片描述