读者 | 做了个博客，看看咋样

学前端的朋友自己写的博客

大家好，我是鱼皮，今天有位读者朋友想让我帮忙看看他做的个人博客，提点小建议。

在征得这位朋友的同意下，分享出来，帮助大家一起学习鼓劲！

看看网站

先看看 PC 端，打开网站，首先是一个开屏页，跳出来一段话、一只朝我抛媚眼的 Jerry 老鼠、还有右下角的一只小幽灵：

看到这个页面大家心里就清楚了，显然是这位朋友自己亲手做的，而不是套了现成的壳子或者用了生成器。

这个页面虽然不够美观，但暗藏玄机，有一些细节。比如点击右下角的小鬼，可以快速返回顶部：

将鼠标放到老鼠身上，老鼠就会转起来：

点击老鼠，就进入到博客的主页了，整体的布局看上去还算清新，功能也比较丰富。除了导航条上有一些博客网站中常见的菜单项之外，左下角有个最近访客区域、还有介绍个人学习进度的条条~

从主页能看到，这是个动态网站，使用 Vue 3.0 来开发前端，用 node.js 的 Express 框架作为后端，用 Mongodb 数据库来存储数据。前后端都自己做，看来也是个不小的工程~

再往下拉，看到了博客文章列表，卡片的样式和配色好像有点怪：

点进文章后，发现文章底下竟然有评论区，还有登录功能！

最后再打开浏览器的开发者工具，看下移动端的效果。额，好像还没适配移动端：

大概是这些，其实整个网站中还有很多的小细节，用文章不太方便演示，大家可以点击文末的阅读原文自行查看。

给点建议

OK，网站带大家看完了，不知道大家感觉怎么样。

在给出建议前，我先跟作者简单地交流了下。得知这位朋友是工作转行，辞职后全职在家学习前端， 至今大概学习了 6个月，刚刚学完 Vue 3.0，便参考网上的一些页面风格，做了这样一个博客网站。

我一听，6 个月就已经学到这个程度，还是很厉害的。

听朋友说：他自己以前喜欢玩电脑，经常在网上看相关知识。

看来主要还是对前端感兴趣，才让他下定决心转行吧，也才能够学的比较快速。

我的感受是，虽然页面不算精致，但网页中绝大多数功能都是自己实现的，作为一个帮助自己学习技术而做的项目，已经很棒了。

接下来，可以从几个方面进行优化：

1. 性能

目前页面加载比较慢，打开开发者工具后发现，加载的资源尺寸较大，绝大多数都是图片文件。因此可以考虑将 图片压缩 并使用懒加载（需要显示该图片时才加载），并且将一些 JS 文件进行拆分、按需加载。

2. 样式

虽然是学习时做的项目，但每个自己做过的项目最好都不要浪费，可以将网站的界面做的更美观一些，比如统一网页的字体、统一网站的元素间距等。

目前网页在移动端的显示效果有待优化，建议还是参考现有的响应式网站样式，或者试着引入一个组件库吧~

3. 扩展

目前整个网站已经拥有了博客网站应有的核心功能，无需开发额外功能。

可以给网站加个 监控统计 ，一方面是用现成的脚本，比如百度统计、站长之家统计等；另一方面是自己开发一些业务层面的统计，比如用户分析等，有能力的话搞个后台管理、监控面板就更好了（看情况），网上有个现成的后台管理项目 Vue Element Admin 可以学习下。

还有就是 SEO（搜索引擎优化），对博客网站来说是非常重要的，感兴趣的话可以自主学习下这方面的知识并实践，每隔几天去站长之家或搜索引擎官网看一下自己网站的权重。

时间有限，大家有什么想法欢迎发表留言哦~

以上就是本期分享，我是鱼皮，求个 点赞 + 在看 ，这将是我持续创作的最大动力，谢谢 🙏