2个周末,历时100+小时,YourBatman新版Blog正式上线


今天是2021年高考第一天,作为过来人给广大考生的一个小小建议:不要提前交卷,因为即使最后35秒依旧可能拿下13分。

前言

你好,我是YourBatman。本文阅读起来很轻松,介绍我近期建站的一些心得和站点内容分享:https://yourbatman.cn

正所谓每个技术人都应当有个个人站点。最近花了些时间“翻新”了我那博客,决定“弄它”的冲动是觉得其布局有点跟不上时代了(虽然还只run了一年),且内容不算丰富,分类不够清晰,所以决定捯饬捯饬。

经过2个完整周末,历时100+小时,从0开始重新设计、开发、部署、搬运资料,于2021-06-01正式上线。贴几张图来提前“感受一下”:

亦可直接访问(使用PC访问效果最佳):https://yourbatman.cn

首页01-动态背景
首页02-推荐文章
首页03-文章列表(时间倒序排列)

本文提纲

版本约定

  • YourBatman's Blog

正文

新站点采用更符合现代化的框架、主题来布局加以实现,所以整体呈现上还是不错的。下面附上老站点的图片:

个人觉得新站点相较于老站点:有如下优势:

  1. 宽屏布局,对宽屏显示器的显示效果更好,更时尚
  2. 响应式框架,对移动设备更适应(说明:虽说适配了移动设备,但使用PC访问效果最佳
  3. 云主机独立部署,采用公开Robot协议,对搜索引擎更友好
  4. 加入交互动效,用户体验更好
  5. 技术文章内容页面更聚焦,消除杂音提升阅读效率
  6. 新增除了技术文章菜单外的更多“菜单”,体现出个人站点更具个性化
  7. 提供“湖人总冠军”、“小游戏”、“个人简历”等功能页面,能让站点多些人文气息。技术人并非一块木头~
  8. ...

下面按照菜单顺序,进行简单介绍下哈(前方多图预警)。

首页

相较于大多数技术博客,本站点的首页内容相对丰富,看点颇多:

  • 开屏页使用动态(视频)背景,内容:陈莹-一直很安静。如下图所示(由于移动设备无法很好的对视频进行展示,因此适配为背景图片):

  • 公告栏:实时更新,公示站长(YourBatman)or站点的方方面面近况,如下图所示:

  • 文章推荐:you know,本站点是个纯技术博客。此模块用于在首页做文章推荐:推荐的文章可能是最新的,亦可能是“捞起来”的,避免了早期发布的“优秀”文章永远沉睡。如下图所示:

  • 文章列表:作为本站点的核心,拥有好的技术文章才是王道。本列表按照时间倒序排列且分页显示,如下图所示:


    为了抓住广大技术小伙伴的“视觉”,文章若没有自行制定封面图,系统将依据文章标题,自动从系统中匹配到一张靓图放上去,如上图就是看到的效果。

从底部的统计数据看:上线5天左右,PV有1000/天,UV约400/天。若能保持的话,这个量就已远远超出我的预期,服务器得升配了

  • 文章详情:作为本站点的的内核,除了文章内容自然必须硬核外,阅读体验也需要跟上。本part设计理念为:沉浸式阅读,去掉干扰项,又不失方便性,努力平衡。如下图所示:

技术专栏

我认为技术文章大都需要通过专栏的形式去学习、理解才能拥有更好效果,单篇文章篇幅有限导致一般只能浮于表面,并不能带来实质上的改变。

不管是我的公众号(ID:BAT的乌托邦),还是个人博客,主打的都是技术知识点以小而美的专栏形式呈现,做到合理拆解,逐个击破。一方面方便大家的阅读,另一方面我自己”复习“起来也非常方便。

本页面的作用便是对文章进行按专栏分类,方便读者能顺序聚焦和索引。如下图所示:

说明:新站点才建立,文章资料还只搬迁了很少一部分,这项工作将持续进行。包括公众号文章、CSDN的付费专栏等都会搬来免费供以阅读

图书馆

当下是个信息大爆炸的时代,查阅硬盘自己”搜藏“的(技术)电子书,那是真的只起到了搜藏的作用呀。要不是电子书,早就落灰很厚了。

技术路线到了”中年“也应该学会做减法,这是为了更聚焦。所以图书馆模块就是这样一个目的:放上10本左右”电子书“,提供在线浏览(当然也提供下载功能),随时随地可连续阅读,做到方便和聚焦,提高真实效率。如下图所示:

说明:书籍均经过高度压缩处理,体积相比压缩前小了5-10倍,提高在线阅读体验。PS:手机端暂不支持在线阅读,毕竟每本书也属”流量大户“

短视频

相较于我的老站点,新站点增加了人文生活气息,比如短视频模块就是体现。

本页面用于搜藏”经典“短视频,内容主要来自自制和抖音。相同的搜集理念:聚焦。因此数量不会很多,但尽力确保每个都值得留念,如下图所示:

PS:手机端只适配2~3个视频内容,更多内容请使用PC打开观看

湖人总冠军

2005年知道NBA,2006年开始看(关注)科比、詹姆斯、姚明、麦迪、艾弗森、安东尼、韦德、波什、邓肯、吉诺比利、帕克、纳什、斯达德迈尔、比卢普斯、阿泰斯特、巴蒂尔、加内特、雷阿伦、霍华德、奥尼尔、华莱士、JR史密斯、克里斯保罗...

北京时间2021年6月4日,湖人在系列赛败给保罗带领的菲尼克斯太阳队,詹姆斯史上第一次首轮游,我们青春真的结束了吗?仅以此页记录热爱篮球的热血青春。如下图所示:


文章

终于进入”正题“了,毕竟咱这是个地地道道的技术博客嘛,技术文章才是它的主题,要不怎么说把此菜单放在中心位置呢:

此菜单有2个子菜单,旨在帮你按不同维度,快速定位到你想要的文章/专栏。

  • 统计:按照标签、分类维度进行分类

  • 日历:按照时间维度(倒序)进行展示

我的

顾名思义,本菜单主要记录站长YourBatman的一些”私货“,所以它必然也分了好几个子菜单(后续还会持续扩充哈):

  • 关于我:顾名思义喽,YourBatman的自我介绍哈



  • 碎碎念:有些东西不想发到wx朋友圈,就会通过手机发到这里来

  • 留言板:什么种草、灌水都可以来这里。但是,不可以定!外!卖!

  • 相册:光影留念,记录生活,留下瞬间


    当然喽,个人私密相册是加密的,需要密码才能访问,密码是:xxxxxx

更多

菜单栏的”名额“毕竟是有限的,因此对于一些周边性的功能就会放在此菜单类下面:

  • 我的简历:顾名思义,这是我求职会用得简历喽。密码是:xxxxxx

  • 小游戏: 程序员已经很卷了,此页面让你休闲一会、放松一下



  • 程序员导航:每个人的搜藏夹里都躺着众多网址,来,这个程序员导航帮你减负

搜索

现在大家获取信息的渠道重度依赖搜索引擎,因此本站提供了站内搜索功能:输入关键字即可快速找到相关内容。

Tips:站内搜索的范围是技术文章,毕竟这才是本站核心嘛~

总结

新站点内容较为丰富,除了干巴的技术文章外,还融入了简单的人文、休闲娱乐等模块。多次,体验过的小伙伴们反馈也是褒贬不一:

  • 不纯粹:作为技术博客,应该是白底黑字的网站,不要花里胡哨
  • 酷炫:增加动效、增加多媒体元素、增加休闲游戏,使得一看就出自程序员之手
  • ...

总的来讲,虽然有贬有踩,我自己还是比较满意的(自己都不满意的话,也不会上线嘛)。我赞同技术博客应该更纯粹些,但是我又觉得个人博客应该具有个性,多些个性化元素,百花齐放是最好的。毕竟它流量不大,让这里成为自己的一片自留地也无可厚非嘛。

本站因为准备时间不长,上线稍仓促,因此主要还存在如下两个问题:

  1. 老站点的资料、阅读量、评论等信息并未做完整迁移,待续......
  2. 存在一定性能问题:某些页面打开时CPU占用率会飙升,风扇也会响起(如果有前端同学,能否绑定为下是哪块耗性能呢?因为我是做后端的,这块确实不懂)

既然是“重生”,本站对技术文章将做到:分类更清晰,把关更严格,质量把控也会提升一个等级。毕竟重要的事可再重复三遍:本站为纯技术博客、纯技术博客、纯技术博客

最后,欢迎大家来访、灌水、种草(使用PC访问效果最佳):https://yourbatman.cn

系列推荐

  • 10. 原来是这么玩的,@DateTimeFormat和@NumberFormat
  • 9. 细节见真章,Formatter注册中心的设计很讨巧
  • 8. 格式化器大一统 -- Spring的Formatter抽象

System.out.println("点个赞吧!");
print_r('关注【BAT的乌托邦】!');
var_dump('私聊YourBatman:fsx1056342982');
console.log("点个赞吧!");
NSLog(@"关注【BAT的乌托邦】!");
print("私聊YourBatman:fsx1056342982");
echo("点个赞吧!");
cout << "关注【BAT的乌托邦】!" << endl;
printf("私聊YourBatman:fsx1056342982");
Console.WriteLine("点个赞吧!");
fmt.Println("关注【BAT的乌托邦】!");
Response.Write("私聊YourBatman:fsx1056342982");
alert("点个赞吧!");

YourBatman:Spring Framework开源贡献者,Java架构师,领域专家。文章不标题党,不哗众取宠,每篇文章都成系列去系统的攻破一个知识点,每个系列可能是全网最佳/唯一。注重基本功修养,底层基础决定上层建筑。现有IDEA系列、Spring N多系列、Bean Validation系列、日期时间系列......关注免费获取