这是一个主要使用Vue技术栈构建的博客前端系统，本来是学校Web应用开发课程的大作业， 但本着一不做二不休的原则，我打算以这份大作业为基础，逐渐将这个博客系统完善为我的个人博客。
Check My Instance Its domain may looks weird but not purposely be offensive. It's just a test for Chinese included domain and I randomly choose the words. When the blog is formally in service I will register a new decent domain.
- 多用户的博客系统
- 注册、登录、用户设置
- 单一用户的个性化主页 [-]
- 具有短博文与长博文两种类型
- 长博文支持Markdown语法
- 长博文支持多单元格编辑
- 支持点赞、评论 [-]
- 共享的日志
[-]: 尚未完全实现，等待后续OTA
尽管此项目将会部署上线作为我的个人博客，前端部分构建前的源代码将会保持开源。
| 框架 | 构建工具 | 组件库(CSS框架) | 网络请求库 | 后端API(可选) | 测试框架(可选) |
|---|---|---|---|---|---|
 Vue 3 |
 Vite |
 Element Plus |
 Axios |
 strapi Community Edition |
 Vitest |
在clone下载本项目后，请首先安装依赖
npm
npm installyarn
yarn installpnpm
pnpm install后文中将均以npm为例，其他包管理器修改管理器命令即可
要进入开发模式，使用vite中的dev指令即可
vite dev || npm run dev要部署到Web Server上，需要先使用Vite进行构建，默认输出到.\deploy目录中
vite build || npm run build要修改输出目录或公共基础路径，需要修改vite.config.js文件
export default defineConfig({
plugins: [vue()],
base: '/',//<----修改base选项来修改公共基础路径
build: {
outDir: 'deploy',//<----修改outDir选项来修改输出目录
}
// resolve: { alias: { 'vue': 'vue/dist/vue.esm-bundler.js' } }
})关于自动拉取构建与部署静态站点，请参考Vite官网文档中关于部署静态站点 的说明。
请注意，无论您使用何种静态站点部署与托管服务，请务必确保fork本repo后，将fork的仓库导入。
我的博客页面主要采用三栏式布局,中间一栏作为主要内容区域，左侧为菜单栏，右侧为附加/工具栏。这样布局设计主要是受到Twitt* r布局方式的启发，这种布局简洁易用，也易于展示较新的信息流，后续加入响应式布局也比较方便。
关于灵感
起初我是打算使用个人技术博客常用的以板块进行分区的布局方式，即根据博文所属的不同技术分区进行归类，大致用UI模拟了一下，发现这样主页比较冗杂，不便使用。
不仅如此，我们的作业要求构建一个支持多人使用的博客系统，即他人也可以通过博客平台分享自己的博文，用户之间可以互动，我转念一想这不就是社交媒体的交互形式吗，于是借鉴了小蓝鸟的三栏式布局，但也根据相应的需求调整了比例与具体内容。
左侧的菜单栏是相对比较静态的页面，主要承担着整个博客项目中Navigator的角色。
侧边栏典型状态
主要由Logo、导航按钮、长博文发送按钮和Profile栏组成
-
Logo是采用简单的黑白底色+文字实现的，但是似乎直角边与圆角风格由些许违和，后续可能会改成圆角形式
-
导航按钮采用的是Element+组件库中的
<el-button>标签实现，点击按钮即可导航到相应的二级页面 -
长博文按钮采用单个的大号蓝色按钮(由于组件库默认主题色为蓝色)
-
Profile栏则是在初次加载页面时加载，首先会检查cookie中是否存储了登录的token信息，若没有则显示未登录，若存储了则通过Get请求获取个人头像ID信息。
目前主要有六类二级页面，分别为：
最新博文预览目前主要负责从后台获取博文信息流，并将其以简短形式流式展示在主页上
展示方式主要为两列，第一列为头像，第二列分别从上到下排列为昵称与博文内容，底部为操作栏，可以进行点赞，评论，转发等操作
头像采用<el-avatar>标签，博文内容分为两类，短博文如下：
长博文采用卡片形式简短展示，卡片为element+标签<el-card>，并修改了圆角值，效果如下:
除了博文展示外，用户还可以直接在页面顶部随手发送一篇短博文，同样使用头像+主区域的形式，其中头像使用头像组件，主区域为一个自适应高度的输入框，
使用 <el-input>中的type="textarea"属性实现，字数限制为300，使用maxlength属性实现，输入框下方使用按钮组件作为发送按钮，效果如下：
我的关注列表主要采用条式展示用户关注的用户列表信息，可以点击用户进行查看 目前效果如下 (暂时) ：
博客日志主要用于展示博客更新的日志以及一些日后的一些更新计划，主要由两部分组成，分别为日历与当日详细日志列表