shiori.fun

博客框架更换为VuePress

博客焕然一新！
为了更好的使用和学习Vue，所以我决定使用VuePress框架来驱动博客。
通过vercel来自动化部署项目，实现解放双手。
那么它的好处是什么呢？它可以：

• 支持vue，vue的特性，它统统都有，我们可以直接在vuepress上进行组件的编写
• 文档化支持丰富，作为博客也是不错的选择
• 社区支持，丰富的插件，以及任何有关于vue，或是支持vue的插件，你都可以部署到你的vuepress上

主题使用

Blog采用VuePress驱动markdown文档，已hope为VuePress主题使用。

如何使用该主题

克隆我的仓库GitHub
当然你也可以直接去hope官网进行主题安装

git clone

git clone git@github.com/shiori2024/shiori-blog.git

or

git clone https://github.com/shiori2024/shiori-blog.git

随后

npm i

如果你在使用 npm 的过程中，遇到依赖下载失败的情况，那么请使用nvm

运行

项目调试

npm run docs:dev

项目打包

npm run docs:build

项目文件结构

  <docs> → 由你指定的项目文件夹
     │
     ├── .github → github 配置文件，github aciton部署
     │
     ├── package.json →  项目索引文件
     │
     ├── .gitignore → git 配置文件
     │
     ├── CHANGELOG.MD → git commit 文件
     │
     │── src
          ├── .vuepress (可选的) → 用于存放全局的配置、组件、静态资源等
          │
          ├── dist (默认的) → 构建输出目录
          │
          ├── public (可选的) → 静态资源目录
          │
          ├── styles (可选的) → 用于存放样式相关的文件
          │
          ├── config.{js,ts} (可选的) → 配置文件的入口文件
          │
          └── client.{js,ts} (可选的) → 客户端文件
          │
          ├── ... → 其他项目文档
          ├── README.md → 项目主页

首页配置

参考
你需要在相应的页面的frontmatter中，设置home: true和layout: BlogHome来使用博客主页。
你可以使用heroText设置主标题，并通过tagline设置副标题。

我的配置参考

# src/README.md
---
home: true
layout: BlogHome
icon: home
title: Home
bgImage: /bg.jpg
heroText: 寄蜉蝣于天地，渺沧海之一粟。
heroFullScreen: true
copyright: false
footer: MIT Licensed | Copyright © 2020-present sakurafeiyu
---

图片资源的默认路径是src/.vuepress/public，所以你只要将图片资源放于该文件夹下即可。
更多详细配置可以看我的仓库源码。 ...To be continue