vuepress（四）：修改主题样式

前言

vuepress-theme-reco主题已经非常非常优秀了，但是正因为优秀，用的人就非常多了，就容易千篇一律。这时你就可以在原有主题的基础上进行修改。

在 Markdown 中 使用 Vue

插值

{{1+1}}   //结果2

指令

<span v-for="i in 3">{{ i }} </span>    //结果 1 2 3

访问网站以及页面的数据

{{site}}

{{$page}}

示例

# 插值

**{{1+1}}**

# 指令

<span v-for="i in 3" :key="i"> {{i}} </span>

# 访问网站以及页面的数据

{{$site}}

{{$page}}

安装sass

npm install -D sass-loader@7.3.1 node-sass@4.14.1

这个有个bug，高版本的node-sass，sass-loader与vuepress版本并不兼容，就用上面的版本就好

使用组件

所有在 .vuepress/components 中找到的 *.vue 文件将会自动地被注册为全局的异步组件。你可以直接使用这些组件在任意的 Markdown 文件中（组件名是通过文件名取到的）。

修改默认主题

推荐一个修改的很不错的案例：

zealsay说你想说

案例git：git clone https://gitee.com/GodLikeZeal/vuepress_blog.git

新建theme文件夹

在.vuepress文件夹下新建theme文件夹

找到使用的主题模板
在 node_modules找到你使用的主题，我这里用的是vuepress-theme-reco。将文件夹下除node_modules外的所有文件复制到theme文件夹下，这样就可以修改主题了。

主要文件

问题
这里有个问题：

组件LoadingPage没有被注册，看了一下代码，根本找不到这个组件，可以直接注释掉。

示例

先重新启动一下项目，确保项目可以正常运行，再进行修改。

先修改一下404页面，如下：

<template>
  <div class="not-find-container">
    <img src="/404.png" alt="404" class="not-find-img" />
    <div class="not-find-btn">
       <router-link to="/">返回首页</router-link>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {},
};
</script>

<style>
.not-find-container {
  width: 100%;
  height: 90vh;
  margin: 0px;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.not-find-img {
  width: 350px;
  height: 380px;
}

.not-find-btn{
   margin-top: 50px;
   width: 180px;
   height: 40px;
   border: 1px solid #2B9ACA;
   text-align: center;
   line-height: 40px;
   border-radius: 5px;
   cursor:pointer;
}

a{
  text-decoration: none;
}

</style>

效果图