写在前面
这里我用的是vuepress-theme-reco主题,可以先康康我的博客Landscape in the Mist,如果你喜欢这个主题的话再继续看下去叭!
其实我搭建这个博客用了不止一个小时,中间踩了很多坑,不过大都是由于没仔细看文档导致的,大家一定有问题先看文档! vuepress-theme-reco, VuePress
搭建步骤
初始化
这里推荐用yarn,我最开始用的是npm,但是不知道什么原因中间卡了很久
yarn global add @vuepress-reco/theme-cli //引入vuepress-theme-reco
theme-cli init //用官方的模板初始化项目
接下来会显示一些信息填写,如果现在没想好可以一路回车,之后这些信息都是可以更改的
经过这两个步骤,主题就安装好了,是不是特别方便特别快!
运行
接下来来看看效果吧
yarn
yarn dev
如果你喜欢这个主题就可以不用更改了,往里面加文章就行,对了,那个右下角的狗子默认页面是没有的,如果你想往里面加一些组件的话就继续看下去吧
亿点点改变
看板娘
也就是右下角那个狗子,不只有狗子,还有:
这个是官方插件,文档中有详细设置说明,引入依赖就行
yarn add @vuepress-reco/vuepress-plugin-kan-ban-niang //引入依赖
配置
在config.js下的moudule.export加入这些
plugins: [
[
'@vuepress-reco/vuepress-plugin-kan-ban-niang',{
theme: [
'miku', 'whiteCat', 'haru1', 'haru2', 'haruto', 'koharu', 'izumi', 'shizuku', 'wanko', 'blackCat', 'z16'
],
clean: false,
messages: {
welcome: '欢迎来到我的博客', home: '心里的花,我想要带你回家。', theme: '好吧,希望你能喜欢我的其他小伙伴。', close: '你不喜欢我了吗?痴痴地望着你。'
},
messageStyle: { right: '68px', bottom: '290px' },
width: 250,
height: 320
}
],
],
再次运行就能看见这个组件啦,想做更多修改的话看文档吧kanbanniang
音乐播放器
也是官方插件,引入依赖
yarn add @vuepress-reco/vuepress-plugin-bgm-player
配置
[
"@vuepress-reco/vuepress-plugin-bgm-player",{
audios: [
// 本地文件示例
{
name: '장가갈 수 있을까',
artist: '咖啡少年',
url: '/bgm/1.mp3',
cover: '/bgm/1.jpg'
},
// 网络文件示例
{
name: '강남역 4번 출구',
artist: 'Plastic / Fallin` Dild',
url: 'https://assets.smallsunnyfox.com/music/2.mp3',
cover: 'https://assets.smallsunnyfox.com/music/2.jpg'
},
{
name: '用胳膊当枕头',
artist: '최낙타',
url: 'https://assets.smallsunnyfox.com/music/3.mp3',
cover: 'https://assets.smallsunnyfox.com/music/3.jpg'
}
]
}
],
播放器位置和缩小浮动模式都是可以设置的,具体看bgmPlayer
效果图
主题色更改
可能你不太喜欢默认的绿色主题色,改!在.vuepress文件下新建styles/palette.styl文件
$accentColor = // 主题颜色
$textColor = // 文本颜色
$borderColor = // 边框线颜色
$codeBgColor = // 代码块背景色
$backgroundColor = // 悬浮块背景色
选择你要修改的部分往文件上加就行了
背景图修改
背景图分两部分,一个是打开网页就能看到的首页背景图,一个是平时浏览文章的背景图,推荐用gif,嗷嗷帅
首页背景图
修改根路径下README.md文件,往 YAML front matter 添加bgImage
和bgImageStyle
属性就行了
为啥是根路径下README.md文件?因为它的 YAML front matter 指定了home: true
其它页面背景图
往根路径下README.md文件最后面加上style就行了
<style>
body{
background-image: url(这里填路径);
}
</style>
导航栏
导航栏分为最上面的全局导航栏和侧边栏
全局导航栏
可能你想往里面增减一些东西,修改configs.js里themeconfig的nav即可,因为这个主题几乎继承 VuePress
默认主题的一切功能,所以具体配置可以看vuepress官方文档
侧边栏
侧边栏在themeConfig的sidebar里设置具体看文档
我自己是将所有文章都分类放在侧边栏了,像这样
如果你也想像我这样,按照这种格式写就行了
向下跳转
或许你发现了我的博客首页有个箭头,点击页面会向下滑,这个是参照使用vuepress-theme-reco搭建自己的博客,具体操作是在根路径README.md加入如下代码
<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>
部署到github
创建仓库
右上角点击创建仓库
填写了仓库名之后创建仓库
修改config.js
在module.exports里加入base:'/blog1/'
(这里的路径要和仓库名完全一致)
打包
yarn build
完成后会发现文件夹下多了个public文件夹
上传到仓库
每次想更新文章都输好几条命令提交显然不方便,这里写个脚本deploy.sh
放在根路径下
# deploy.sh文件
# 确保脚本抛出遇到的错误
set -e
# 进入生成的文件夹
cd ./public
git init
git add -A
git commit -m '--first commit'
# 如果发布到 https://<USERNAME>.github.io/<REPO>(REPO就是之前创建的仓库名)
git push -f git@github.com:<USERNAME>/<REPO>.git main:gh-pages
cd -
打开git bash,输入sh deploy.sh运行此脚本,代码即上传到仓库
设置为GitHub Pages
点击setting下的pages,设置Branch(根据自己的实际情况设置)
等一会上面会出现Your site is live at xxx,xxx就是地址,点进去看没问题就大功告成了!
不过由于众所周知的原因,有时候访问是会比较慢的,也可以选择再部署到gitee
部署到gitee
右上角选择从github导入仓库
url输入仓库对应的url,路径也要和仓库路径相同,即和base设置的一样
建立好之后在此仓库点击服务的Gitee Pages,进行部署,不过之后每次在github上有更新都需要回到gitee点击同步按钮,更简便的方法可以参照github博客自动同步到gitee(保姆级教程)