前言
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 文件中(组件名是通过文件名取到的)。
修改默认主题
推荐一个修改的很不错的案例:
案例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>
效果图