介绍
VuePress 由两部分组成:第一部分是一个极简静态网站生成器 (opens new window),它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
安装
npm install vuepress-theme-reco --save-dev
# or
yarn add vuepress-theme-reco
引用
// .vuepress/config.js
module.exports = {
theme: 'reco'
}
本地引用
- 下载 在https://github.com/vuepress-reco/vuepress-theme-reco仓库中下载全部文件
- 使用 在.vuepress文件夹下新建theme文件夹,再将packages文件夹下的vuepress-theme-reco文件夹放入theme; 修改.vuepress文件夹下config.js
"theme": require.resolve("./theme/vuepress-theme-reco"),
Front Matter
---
title: 烤鸭的做法
date: '2019-08-08 08:00:00'
sidebar: 'auto'
categories:
- 烹饪
- 爱好
tags:
- 烤
- 鸭子
keys:
- '123456'
publish: false
---
Front Matter配置
title: 文章标题 date: 时间,如('2019-08-08 08:00:00') sidebar: 'auto' categories:文章分类,可以有多个
tags:文章标签,可以有多个
keys:文章加密密码
sticky :是否置顶,sort type: 降序,可以按照 1, 2, 3, ... 来降低置顶文章的排列优先级
public:是否发布
优化页面
1.首页背景全屏显示 修改首页的README.md文件
bgImageStyle: {
height: '95vh',
background-color: '#D9AFD9',
background-image: 'linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%)'
}
2.添加鼠标点击特效 修改.vuepress/config.js中的head,如下所示:
[
"script",
{
"src": "https://cdn.jsdelivr.net/gh/forthespada/forthespada.github.io@master/plugin/click_heart.js"
}
]
3.首页添加向下滑动按钮 在主页的README.md文件最下面添加下列代码(此方法转载自https://blog.csdn.net/qq_41327483/article/details/119103300。)
<style>
.anchor-down {
display: block;
margin: 12rem auto 0;
bottom: 45px;
width: 20px;
height: 20px;
font-size: 34px;
text-align: center;
animation: bounce-in 5s 3s infinite;
position: absolute;
left: 50%;
bottom: 30%;
margin-left: -10px;
cursor: pointer;
}
@-webkit-keyframes bounce-in{
0%{transform:translateY(0)}
20%{transform:translateY(0)}
50%{transform:translateY(-20px)}
80%{transform:translateY(0)}
to{transform:translateY(0)}
}
.anchor-down::before {
content: "";
width: 20px;
height: 20px;
display: block;
border-right: 3px solid #fff;
border-top: 3px solid #fff;
transform: rotate(135deg);
position: absolute;
bottom: 10px;
}
.anchor-down::after {
content: "";
width: 20px;
height: 20px;
display: block;
border-right: 3px solid #fff;
border-top: 3px solid #fff;
transform: rotate(135deg);
}
</style>
<script>
export default {
mounted () {
const ifJanchor = document.getElementById("JanchorDown");
ifJanchor && ifJanchor.parentNode.removeChild(ifJanchor);
let a = document.createElement('a');
a.id = 'JanchorDown';
a.className = 'anchor-down';
document.getElementsByClassName('hero')[0].append(a);
let targetA = document.getElementById("JanchorDown");
targetA.addEventListener('click', e => { // 添加点击事件
this.scrollFn();
})
},
methods: {
scrollFn() {
const windowH = document.getElementsByClassName('hero')[0].clientHeight; // 获取窗口高度
document.documentElement.scrollTop = windowH; // 滚动条滚动到指定位置
}
}
}
</script>
4.首页气泡 - 添加依赖
npm install vue-canvas-effect -D
- 修改theme/vuepress-theme-reco/components/HomeBlog/index.vue
<!-- 首页气泡 (在27行添加如下代码)-->
<component v-if="bubbles"
:is="bubbles"
:options="options">
</component>
- 添加data
//首页气泡
data() {
return {
recoShow: false,
currentPage: 1,
tags: [],
bubbles: null
}
},
- 添加mounted
mounted() {
import('vue-canvas-effect/src/components/bubbles').then(module => {
this.bubbles = module.default
})
this.recoShow = true
this._setPage(this._getStoragePage())
},
5.修改置顶的样式 - 修改./vuepress/theme/vuepress-theme-reco/NoteAbstractItem.vue
<span v-if="item.frontmatter.sticky"
class="settop">置顶
</span>
<div class="title">
<reco-icon v-if="item.frontmatter.keys"
icon="reco-lock" />
<router-link :to="item.path">{{item.title}}</router-link>
</div>
- 添加css样式
.settop {
position: absolute;
right: 0;
top: 0;
background: $accentColor;
font-size: 0.6rem;
color: #fff;
transform: rotateZ(45deg) translateY(-55px);
padding: 50px 25px 3px;
}
6.修改文章列表title的鼠标hover样式 - 修改./vuepress/theme/vuepress-theme-reco/NoteAbstractItem.vue
<!-- 添加class name 为 hover-underline-animation-->
<div class="title hover-underline-animation">
<reco-icon v-if="item.frontmatter.keys"
icon="reco-lock" />
<router-link :to="item.path">{{item.title}}</router-link>
</div>
- 添加css样式
.hover-underline-animation {
display: inline-block;
position: relative;
color: $accentColor;
}
.hover-underline-animation:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: $accentColor;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
7.首页添加每日诗词
今日诗词 API 是一个可以返回一句古诗词名句的接口。它可以通过图片和 JSON 格式调用。今日诗词 API 根据不同地点、时间、节日、季节、天气、景观、城市进行智能推荐。 - 官方文档地址 https://www.jinrishici.com/doc/ - 修改.vuepress/theme/vuepress-theme-reco/components/HomeBlog/index.vue文件
<ModuleTransition delay="0.08">
<p v-if="recoShowModule && $frontmatter.tagline !== null"
class="description">
{{ $frontmatter.tagline || $description || 'Welcome to your vuePress-theme-reco site' }}
</p>
</ModuleTransition>
<!-- 加入如下代码即可 -->
<ModuleTransition delay="0.12">
<!-- marquee文字滚动标签
marquee 参数:
BGColor:滚动文本框的背景颜色。
direction:滚动方向设置.
left - 从右向左。默认值。
right - 从左向右。
up - 向上。
down - 向下
scrolldelay: 设置每次滚动时的时间间隔(以毫秒为单位)。默认值为 85。 值越大,滚动速度越慢,通常不设置。
注意:除非指定 truespeed 值,否则将忽略任何小于 60 的值,并改为使用 60。
scrollamount:一次滚动总的时间量,数字越小滚动越慢。
behaviour:滚动的方式设置,三种取值:Scroll(循环滚动) lide(单次滚动)、Alternate(来回滚动)。
align:文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。
width:滚动文本框的宽度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
height:滚动文本框的高度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
loop:滚动次数。默认值-1,无限次循环
hspace、vspace:前后、上下的空行。
onMouseOver='this.stop()' 鼠标放上去则暂停
onMouseOut='this.start()' 鼠标移开继续滚动
-->
<marquee behavior="alternate" loop="2" direction="right" scrollamount="10">
<img alt="今日诗词"
src="https://v2.jinrishici.com/one.svg"
style="max-width:100%; display: block; margin: 0 auto;" />
</marquee>
</ModuleTransition>
方式二: - 安装
npm -i jinrishici --save
- 使用 修改.vuepress/theme/vuepress-theme-reco/components/HomeBlog/index.vue文件
<!-- html部分 -->
<ModuleTransition delay="0.08">
<p v-if="recoShowModule && $frontmatter.tagline !== null"
class="description">
{{ $frontmatter.tagline || $description || 'Welcome to your vuePress-theme-reco site' }}
</p>
</ModuleTransition>
<ModuleTransition delay="0.12">
<!-- <span class="jinrishici-sentence">正在加载今日诗词....</span> -->
<marquee >
<span>{{word}}</span>
</marquee>
</ModuleTransition>
<!-- javascript部分 -->
data() {
return {
word: '正在加载今日诗词....',
}
},
methods: {
paginationChange(page) {
setTimeout(() => {
window.scrollTo(0, this.heroHeight)
}, 100)
},
getPagesByTags(tagInfo) {
this.$router.push({ path: tagInfo.path })
},
loadSentence: function () {
jinrishici.load(result => {
this.word = result.data.content
}, err => {
console.log("test");
})
}
},
mounted: function () { this.loadSentence() }
8.修改主页背景为随机图片 修改.vuepress/theme/vuepress-theme-reco/components/HomeBlog/index.vue
const url = instance.$frontmatter.bgImage
? instance.$withBase(instance.$frontmatter.bgImage)
: require('../../images/bg.jpg')
// 将上面代码修改为以下形式
const url = instance.$frontmatter.bgImage
? instance.$withBase(instance.$frontmatter.bgImage)
: 'https://picsum.photos/1600/900'
若使用随机背景图片,README.md文件中bgImageStyle配置如下即可
bgImageStyle: {
height: '95vh',
}
9.使用v-view插件对图片进行放大缩小 - 安装
npm install v-viewer --save
- 使用 修改.vuepress/theme/vuepress-theme-reco/enhanceApp.js如下所示
/* eslint-disable no-proto */
import postMixin from '@theme/mixins/posts'
import localMixin from '@theme/mixins/locales'
import Vue from 'vue';
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
import { interceptRouterError, fixRouterError404 } from '@theme/helpers/other'
import { install } from 'vue-demi'
export default ({
Vue,
siteData,
isServer,
router
}) => {
install(Vue)
Vue.mixin(postMixin)
Vue.mixin(localMixin)
// if (!isServer) {
// addScriptToHead('//kit.fontawesome.com/51b01de608.js')
// registerCodeThemeCss(siteData.themeConfig.codeTheme)
// }
Vue.use(Viewer)
Viewer.setDefaults({
Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
})
interceptRouterError(router)
fixRouterError404(router)
}
修改.vuepress/theme/vuepress-theme-reco/components/Page.vue如下
<!-- session添加v-viewer指令 -->
<section v-show="recoShowModule"
v-viewer>
<div class="page-title">
<h1 class="title">{{$page.title}}</h1>
<PageInfo :pageInfo="$page"
:showAccessNumber="showAccessNumber"></PageInfo>
</div>
<Content class="theme-reco-content" />
</section>
这里需要关闭vuepress内置的@vuepress/plugin-medium-zoom
// 只需将 Options 设置成 false 便可禁用该插件
module.exports = {
plugins: [
["@vuepress/plugin-medium-zoom", false] // disabled.
]
};
更新: 由于本人是将vuepress-theme-reco主题下载到本地进行修改,所以以上方式并不能关闭vuepress/plugin-medium-zoom插件 解决方式:修改.vuepress/theme/vuepress-theme-reco/index.js如下
plugins: [
'@vuepress-reco/back-to-top',
'@vuepress-reco/loading-page',
'@vuepress-reco/pagation',
'@vuepress-reco/comments',
'@vuepress/active-header-links',
// ['@vuepress/medium-zoom', {
// selector: '.theme-reco-content :not(a) > img'
// }],
只需要将vuepress/medium-zoom插件注释或者删除即可
插件不生效
在config.js中配置的插件未生效,于是本人根据vuepress加载流程,将插件配置放入了vuepress-theme-reco的index.js中,此时插件生效。