CyBlog: 一个非模板开发的Next博客

前言

CyBlog其实是本人的一份毕业设计，旨在创造出一个可以高度定制化开发，用于记录前端技术与生活的个人博客。

当然开发过程中的学习经历更为重要......

用户界面

多端适配

本站现以支持移动端设备和桌面端设备的适配，但推荐使用桌面端设备进行访问，以达到最佳体验。(ps: 手机和平板设备可能会存在个别兼容性问题）

首页

这里用来展示本站的所有文章列表，以及站点简介，您可以通过文章卡片中的相关标签和摘要去了解，并通过点击标题或封面图跳转到您喜欢的文章查看。

文章详情页

这里是各个文章的内容详情页，大致分为以下三个区域：

• 目录
  • 当您在专注阅读文章内容时，左侧目录栏将会以第一个子标题为基准固定位置；
  • 当您滑动到文章的不同区域时，目录会对相应标题进行高亮对您进行提醒；
• 内容
  • 这是本站的核心部分，文章将从MongoDB数据库获取，经过渲染以Markdown格式呈现给您；
  • 总体渲染风格基本参照Github风格，但仍有部分自定义效果；
  • 关于代码块的风格，不同编程语言会应用不同的渲染样式，桌面端用户可以点击代码块右下角按钮实现复制。

  js
    console.log("hello world!");
    <!-- 点击右下角图标复制 -->

  • 在向下滑动时，导航栏中会显示文章标题，您可以通过将鼠标移动到此处点击按钮，即可回到文章顶部
• 评论
  • 您可以在登录后在文章详情页最下方为文章进行评论，如果您看不到评论区，可能是管理员暂时关闭了评论区展示。

登录页

您可以通过点击本站右上角的登录按钮进行登录，目前提供两种登录方式：

• 邮箱密码登录
  • 如果您还没有账号，则可以点击立即注册，使用邮箱注册一个账号，默认头像将参照您的用户名生成，后期可在个人资料中进行修改。
• Github认证登录
  • 初次使用github登录的用户，用户名和头像将使用您的github名字和头像，后期可在个人资料中进行修改。

个人资料页

已登录用户可通过点击本站右上角的个人资料进行修改，在这里您可以：

• 更新头像
• 更新用户名
• 更新密码
• 注销账号

“我的”

这里是博主的一些个人简介，不必理会。当然如果您有对本站的一些建议或使用方面的任何问题，可以通过这里的联系方式找到博主～

管理系统

• 用户不可见

总结

本站是一个前后端分离项目，其实后端的管理系统要更为复杂，但此篇文章只是一篇面向用户的使用手册，在此就不赘述。后期我会陆续整理出关于此博客项目详细的技术文章，敬请期待