博客项目(2、网站原型)

简介: 博客项目(2、网站原型)

一、前言

额,晚上尝试了一小时的墨刀进行原型设计, 发现他可能没有我想象的那么简单,真的要实现我的想法也挺复杂的,凭借我的技术可能不是一天两天的问题。 那么在这个相互借鉴的互联网上, 我也就借鉴一下大佬们的作品, 展示页面到后台管理页面,但肯定不会是一味的模仿,而是相互借鉴,并且全部手写,比较目的就是想要熟悉或者学习一些技术

二、页面规划

前台展示首页导航栏如下, 实际上除了logo其他的应该向右靠拢的, 这个模仿了掘金(咱就说, 好看就用呗)

网络异常,图片无法展示
|

在下面应该是一个轮播图, 放一些热点文章,比较自己的个人博客看的人会少很多, 搞个轮播图轮询热点数据可能会更好吧(图片来自于墨刀-网站原型)

网络异常,图片无法展示
|

当然也有想过做成以下这种, 图片素材来自于《我没有三颗心脏》大佬的个人博客页面, 菜单隐藏式, 向下翻动页面浮出导航栏这种。首页只有一张图片, 还是轮播形式, 感觉会很好

网络异常,图片无法展示
|

以上是个人是想法, 初入博客网站映入眼帘的一幕, 接下里就是对首页的一个精细划分, 目前可能是考虑做成掘金这样的,  左右留白,中间部分左侧是文章列表, 右侧是个人信息或者标签等零碎信息

网络异常,图片无法展示
|

(插一句,掘金的这个复制图片自动上传到服务器, 然后返回加水印图片的url地址这个一直想了解, 但是以前只是想想,我一定也要实现)

首页最下方的区域准备写自己的个人信息, 网站信息和联系方式等, 准备搞个公众号,虽然目前进度为-1

网络异常,图片无法展示
|

分类和标签页面讲真的还没有想好, 大众化的话都是一样的, 没得区别, 等以后有新的想法了,再来更改这篇文章,照片墙的话更倾向于铺满整个页面,并在每张照片的左下角配上文字,说明记录的事件或事件或人物, 大概如下所示, 图片来自  ONESTAR 的博客

网络异常,图片无法展示
|

关于我页面, 可能会向 ONESTAR 一样写的比较有趣,也可能会是介绍一下自己的经历等

网络异常,图片无法展示
|

后台管理页面方面更多的就是借鉴GitHub或者gitee了, 毕竟是给自己看的, 能用,不难看就行,开发以快为主, 大概可能如下吧

网络异常,图片无法展示
|

但是仪表盘上更希望能够显示出访问用户的省份那种地理信息,对接到百度或者高德地图的, 别的应该基本都这样

三、后续规划

基本每日任务:

  • 数据库设计
  • 创建项目整个mybatis和swagger,使用mybatis的代码自动生成工具
  • 完成基本的代码开发
  • 完善登录接口,结合redis和jwt
  • 开始前端页面的简单demo创建等工作
  • 后台管理界面大致架构(格局)这个可能要好几天

目前就写这些吧,毕竟理想很丰满,现实很骨感

四、总结

加油,坚持就是胜利,已经放弃过很多次了, 总不至于每次都放弃的吧



目录
相关文章
|
5月前
|
小程序
简单的写博客小程序模板
这是一款非常简单实用的手机写博客,个人日记记录,个人博客微信小程序页面模板。包含:博客主页、写博客、我的个人、登录、注册等。
81 0
原型工具Axure和墨刀哪个更好?
原型工具Axure和墨刀哪个更好?
237 1
|
弹性计算 安全 JavaScript
基于函数计算快速搭建Typecho博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Typecho博客。
|
架构师 数据可视化 人机交互
Axure介绍与原型案例分享
Axure介绍与原型案例分享
|
域名解析
如何使用Gatsby创建自己的博客
首先使用npm安装gatsby,使用gatsby –version命令可以查看是否安装
105 0
如何使用Gatsby创建自己的博客
|
前端开发
前端学习案例2-原型面试题2 原
前端学习案例2-原型面试题2 原
64 0
前端学习案例2-原型面试题2 原
|
前端开发
前端学习案例-原型3
前端学习案例-原型3
46 0
前端学习案例-原型3
|
前端开发
前端学习案例-原型4
前端学习案例-原型4
82 0
前端学习案例-原型4
|
前端开发
前端学习案例-原型2
前端学习案例-原型2
63 0
前端学习案例-原型2