简单的个人博客页设计

*

密码和确认密码不一致，请重新填写

https://junyangwei.com/blog/login

密码

Logo

注册页非常简洁：  - 帐号输入框  - 密码输入框  - 确认密码输入框  - 用户昵称输入框  - 注册按钮  - 返回按钮按钮点击：1. 点击“返回”按钮：直接返回首页2. 点击“注册按钮”有：  Tips：需要校验：帐号是唯一的、帐号格式正确、密码和确认密码一致  - 几种状态：  a）校验通过，注册成功    - 展示“注册成功”弹窗，点击关闭后自动跳转到首页  b）帐号已存在    - 弹窗提示“帐号已存在”，并清空输入框内容  c）帐号格式有误    - 弹窗提示“帐号格式不正确，只能由大小写字母或数组组成”，并清空输入框内容  d）密码和确认密码不一致    - 弹窗提示“密码和确认密码不一致”，并清空输入框内容

段落内容，哈哈哈哈哈哈哈哈哈哈哈哈非常厉害哦哦哦哦哦哦哦哦哦哦哦哦哦哦。这个还是很棒的呢.......

写作模块：主要分为两个区域：1. 标题栏  - 默认展示：未命名标题2. 写作内容区域  - 点击即可开始写东西  - 支持Markdown格式Tips：可以复用这个模块做文章修改

https://junyangwei.com/blog/article/xxid

与密码保持一致

顶部导航栏模块：分为两种状态1. 登陆  - 展示“写作”的字样，点击就会直接进入“写作”页  - 最右侧会展示“用户的昵称”2. 未登录  - 隐藏“写作”字样的展示  - 最右侧会展示“登陆”和“注册”的按钮，为了明显区分开两者，登陆的按钮边框和背景颜色一致公共部分：  - 导航栏最左边展示的是网站的 Logo  - 在用户昵称、登陆、注册的左边展示“搜索栏”Tips：导航栏默认浮动在页面最顶部

注册

没有图片标题的样式

返回

登陆成功

https://junyangwei.com/blog

注册成功

登陆页非常简洁：  - 帐号输入框  - 密码输入框  - 登陆按钮  - 返回按钮按钮点击：1. 点击“返回”按钮：直接返回首页2. 点击“登陆按钮”有两种状态：  a）帐号密码正确    - 展示“登陆成功”弹窗，点击关闭后自动跳转到首页    b）帐号密码不正确    - 输入的帐号或密码在后台匹配不到数据时    - 弹窗提示“帐号或密码不正确”，并清空输入框内容

关闭

用户昵称

有图片的样式标题

大小写字母或数字组成

未命名标题

顶部导航栏模块：1. Logo：点击回到首页2. 发布按钮：点击发布当前文章3. 用户昵称：展示当前用户的昵称

写作

确认密码

中部内容模块：盒子内是“文章简洁”，有两种状态1. 文章内没有图片  - 头部显示标题  - 中部展示内容(超过x字数省略号代替)  - 底部为“写作日期”和“作者昵称”2. 文章有图片  - 与没有图片的唯一区别是，需要占用右侧的空间，内容往左边压缩Tips：点击进入2️⃣浏览文章页每次加载的文章数默认为10篇，底部有“加载更多...”，点击后就再加载10篇默认按文章写作时间倒序，越新的在顶部

底部模块：显示：反馈邮箱、备案号等网站相关信息

2️⃣浏览文章页

帐号或密码不正确

写作内容实时预览区，能够时时刻刻看到自己写出来内容的效果

反馈邮箱: xxx@163.com

帐号已存在，请重新填写

写作区间块.........支持 Markdown 写作格式

https://junyangwei.com/blog/register

写作预览模块：  - 将文章的标题和内容实时的渲染出来  - 让写作的人能够实时看到效果

不限制

https://junyangwei.com/blog/article/write

2021.11.12  作者的昵称~

1️⃣首页

文章的内容............

登陆

搜索...

帐号格式有误，只能由大小写字母或数字组成

5️⃣写作页

4️⃣注册页

帐号

加载更多...

分为三个模块：1. 顶部导航栏（同上）2. 文章内容栏  - 包含：标题、内容、写作时间和作者昵称3. 底部反馈栏（同上）

发布

文章标题

3️⃣登录页