上周末经历了一次腾讯的电面,来的突然,也没怎么系统复习。
缺乏完善的准备总是会导致颇多不满意之处,自己的缺点也暴露的很具体。善于搬砖和琢磨雕虫小技,基础不全面,有些地方只有个大概印象,理解的不够深入。想来平时乐于敲demo,为了追求高效实现,很多时候对于底层一点的技术细节确实浅尝辄止。
聊了大概50分钟,面试官应该是做iOS和Flutter的,非常和善,循循善诱。最后也给了很中肯的建议,还推荐了几个讲解视频给我。体验非常棒。完了就赶紧写论文去了,心里盘算着怎么加强一下,最好赶下次面试之前把这些都补回来。
这也是这几天折腾的缘起,决定回来继续写博客啦。养成积累的好习惯。
博客的作用
之前曾在cnblog写过几篇,用Hexo也搭过两次。技术偏少,人生感悟偏多。个人对网上复制粘贴的做法嗤之以鼻,随便记录的也不想放上来。因为认真写作很费时间,而且没啥人看,后来就一直放着了。
博客是个展示自我的空间,主要用途在于记录和分享
。太过功利化和急于求成,反而容易钻牛角尖。反思之后觉得,写出自己满意且有价值的东西就够了。提升自己,回馈世界
。总结的过程虽然费劲,但也是个积累经验的好方法。谁还不是读着前人的文章成长起来的呢?网络这么伟大的发明,应该让它更美好一点。
技术选型
Hexo作为这几年一直流行的纯静态博客框架,无论是在性能、效率还是个性化上都首屈一指,而且对MarkDown的支持也很适合写作&记录。其它符合要求的框架也很多,这里选了自己最舒服的。
网上有大量的介绍文章和插件,也方便了后续的美化改造。
主题定制
目前用的这一款,是在官网的展示列表上发现的Volantis(查了下是拉丁文飞翔
的意思😝)
该主题完成程度很高,做了许多组件的封装,包括卡片、侧边栏和词云都是自带的。前身基于谷歌的Material Design设计,现在更偏向于各种现代设计语言的结合,例如卡片的圆角和浮动,毛玻璃背景等。个人觉得有种苹果的精致感,配色自定义程度也高,最后就选了这个。大赞作者@Xaoxuu 👍
基于个人喜好,对主题进行的改动有:
- 单独添加了Cover里面menu的颜色设定
- 降低了部分遮罩的透明度
- 更改了文本选中时的背景色
- 减小了底部版权信息与正文的间距
颜色搭配
正好最近设计了天意的夜间模式,了解了一下页面的配色。参考谷歌MD指引,你得选择一个颜色作为你的品牌主色调,然后附以相应的配色。主要需要考虑的有:
- 页面底色:位于最底层,推荐比较淡的颜色,不突出不伤眼
- 组件底色:用来承载主要内容,注意长期阅读的舒适感
- 主色调:用在一些关键的地方和重要操作上,如导航栏和标题的高亮
- 文本颜色:和组件底色的对比度要高一些,确保阅读清晰
- 辅助颜色:其它组成页面结构的内容,可根据主色调调节亮度而成
底色不推荐纯黑,因为艳丽一点的颜色在上面会有“震荡感”,也就是失去层次感受的稳定性。夜间模式时最好选择深灰色。此外总体上也要协调一致,看起来舒服。
本站的所有颜色都是根据主页顶图配的,绿色和黄色既是图片的主色调,又是网页的主色调,看起来就很和谐统一了(调了半宿🤣)。这张图出自画师@Yuumei,极爱她的此类画风,从偶然遇到就喜欢的不得了,一直收藏到今天。原图在此,根据其网站协议公开作者及链接,进行非商业化使用。非常感谢她的创作。
内容迁移
Hexo之间迁移非常简单,直接把/source/_post
目录下的文件复制过去即可。
虽然之前也没写过几篇,还是顺手copy过来了🤦一条命令的事。
访问优化
主要根据Volantis主题的文档做了些处理。
- 开启CDN:全站大部分静态资源使用了
jsdelivr + GitHub
托管 - 文件压缩:hexo-all-minifier
- 本地缓存:hexo-offline,注意设置忽略CDN托管的内容
- 图片懒加载:hexo-lazyload-image
- 减少不用资源的调用:有些没有使用的效果,直接去掉对其js文件的调用
统计分析
这里谷歌之后用了一个私有部署的产品,起因是看到国内某统计私自添加广告……并且之前对比移动端的统计时也发现,国产要的权限实在太多了,脸书的同类产品只需要网络访问权限。对比之下,高下立判。都自己建站了,还要让用户担心隐私嘛?
当然不。本站使用了符合欧盟GDPR(通用数据保护条例)的开源统计平台Matomo,并且私有化部署,不会侵犯或泄露任何访问者的个人隐私。
如果想保持彻底的匿名,请使用浏览器的无痕模式,站点将不会记录任何信息。
结语
经过这么一番折腾,博客就算弄好啦。后面就都是内容上的事情了。
设置菜单的时候,特意留了产品和实验室两个页面。虽然是静态博客,做个简单的展示还是OK的,后面所有的个人项目也会同步发布在这里。
博客兼个人主页,写技术写生活,总结积累的同时留下点滴记录。美滋滋😁