这是我参与「第五届青训营 」伴学笔记创作活动的第16天。
一、项目介绍
项目概述：
基于SSR开发静态掘金官网。
项目服务地址:仿掘金官网地址：http://localhost:3000/home
CMS账号:demo@qq.com
密码：m123456M
Github地址：github.com/Haite913/Ju…
二、项目分工
由我和一位网友完成，非常感谢这位网友给了我很多帮助和指导。
三、项目实现
3.1 技术选型与相关开发文档
采用next.js+react技术选型
该技术选型支持:静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置。
- React响应式 在保存文件时页面中的内容实时更新，方便查看效果，进行调试。
- 在实现中页面时把所有页面共同的部分配置进layout组件，再把layout配置到所有的页面中就不用一个页面一个页面的去配置。
- 支持typescript，可以在编译调试时知道语法错误，方便修改。
3.2 架构设计
跨端用户访问
- 不同的用户通过手机端，pc端，iPad等设备，要实现不同的页面展示效果以满足用户体验。
- 通过计算当前窗口的长宽像素，再通过判断语句，就能判断出是什么设备访问了，再展示对应的设备的效果
3.3 项目代码介绍
- components:存放一些部件，如footer，navbar，aside，layouts等页面中使用的组件。
- pages:存储一些页面，如首页，文章详情页。
- public：存放了一些页面使用到的图片。
- store：中存储了语言，主题等逻辑。
四、测试结果
总体效果
首页:
文章详情页：
功能分析
顶部导航栏:
- 鼠标悬浮时有字体的颜色变换
- 点击后弹出不同的地址。
- 点击弹窗示例后弹出空的弹窗。
- 点击主题切换按钮会实现明暗两种主题切换。
侧边栏:
- 点击不同按钮和部件后弹出不同效果
eg.点击作者榜中作者，进入作者个人主页（由于是静态页面，弹出的部分未实现）
- 作者榜，签到卡片等在页面的指定位置固定，不会随页面向下滚动而移动。
- 点赞，关注及举报按钮，相关文章等随着页面的滚动而向下移动：
主体部分：
- 文章卡片：鼠标悬浮到不同文章卡片时有卡片颜色加深的效果。
- 叉号：点击后可选择对该文章的操作：
性能分析
由于制作静态掘金网页，地址位于http://localhost:3000/home（位于本地服务器，只有当web服务器配置至服务回路接口时才能显示），无法使用[PageSpeed Insights](link.zhihu.com/?target=htt…
五、项目总结与反思
- 目前仍存在的问题：
首页部分：
- 点击顶部导航栏沸点等链接跳转到的页面还未实现。
- 因为个人基础和人数及时间问题，所文章详情页是写死的，只有一篇文章。
- 点击去签到按钮，关注，点赞等按钮是没有效果的
2.已识别出的优化项
- 不该写死文章，应该使用CMS管理文章内容。
- 功能不完整，部分内容都是徒有外形，没有实际的功能实现。
- 文章格式不应该是自己一行一行调整的，应该用markdown的方法来实现。
3.架构演进的可能性
- 导航栏大部分，文章分类，作者信息等没有设置对应的页面，可以添加完整。
4.项目过程中的反思与总结
- 由于个人基础原因和人数时间原因实现的功能不够完整，还有待完善。
- 这次项目中也学到了很多东西，第一次使用CMS管理，git/github的很多操作，巩固熟练了很多前端知识，将前段时间所学习的东西巩固了一下。
- 自己的基础还是很薄弱的，还有很多需要学习的，对CMS使用还不熟练。
