vuepress（四）：修改主题样式

前言

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

在 Markdown 中 使用 Vue

插值

{{1&＃43;1}} //结果2


指令

<span v-for&＃61;"i in 3">{{ i }} </span> //结果 1 2 3


访问网站以及页面的数据

{{site}}{{$page}}


示例

# 插值**{{1&＃43;1}}**# 指令<span v-for&＃61;"i in 3" :key&＃61;"i"> {{i}} </span># 访问网站以及页面的数据{{$site}}{{$page}}


使用组件

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

修改默认主题

新建theme文件夹

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

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

主要文件

示例

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

先修改一下404页面&＃xff0c;如下&＃xff1a;

<template><div class&＃61;"not-find-container"><img src&＃61;"/404.png" alt&＃61;"404" class&＃61;"not-find-img" /><div class&＃61;"not-find-btn"><router-link to&＃61;"/">返回首页</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>


效果图