ImQi1 / 小记 / 站点开发手记
ImQi1 / 小记 / 站点开发手记

站点开发手记

好久没写文了,写一写让自己觉得很有成就感的事情

想法 & 历史

在大二上学期的时候,我想过有一个自己的网站,里面可以记录自己。当时还不知道有“博客”这个东西,向同学请教后,我才知道了这个名词。在建站初期,自己还是小白的时候,也是这个同学教的我,在此对他表示感谢。当时在腾讯云靠新用户优惠买了个一个月的服务器,还有域名,备案也是自己弄的。在备案没有通过期间,自己没有找到合适的 CMS(Content Manage System,内容管理系统),就在拼多多上找建站的订单,大多都是源码,于是就找到了第一个自己比较喜欢的样式,然后自己改了改,就正式上线了。

网页样式我记得,但是找不到源码了,我就画了一个,类似于下面这样。

第一个网页的源码第一个网页的源码.webp

第二个接触到的框架就是 halo 框架,用了一个月。当时请教了同学之后,为了不过多麻烦他,我自己在网上搜教程,搜视频,最后找到了一个以 halo 框架作为 CMS 的视频。看了视频效果,我很满意,于是我就跟着他操作。选用的主题是Heo设计的,然后小孙同学开发的 theme-halo-hao 主题。但正如[浅尝Halo博客框架:基础体验还一言难尽]一文中提到的,Halo 有一堆 bug,然后我那时候还是小白,连 docker 都不会,只会跟着文档走,而 Halo 的文档我又看不懂,数据也丢失了,于是就从头开始,换了另一个框架:Typecho。

Halo-Theme-Hao主题样式Halo-Theme-Hao主题样式.webp

Typecho从过去一直用到现在,最开始在 Typecho 社区尝试过许多主题,然后在某主题站内看到了 🌸MyDiary 主题,它是收费的。我从建站到现在,每一项服务都在花钱,所以当时没有在意太多,就购入了这款主题。当时建站追求的是颜值和功能,MyDiary 主题很满足我的需求,于是第一次站点使用了此主题开始了第一次长时间的运营。

MyDiary主题MyDiary主题.webp

再后来,MyDiary 主题作者出了新作品。刚开始价格很便宜(50左右?),还在测试版本,我也是第一批使用新主题的用户,还写了篇五千字的测评文。MyDiary 主题是固定的左右栏,我不喜欢,还尝试修改过。新主题的导航栏在上方,配色很简洁,盒子还会发光,还有很多配色,我也是被它花哨的功能吸引了。Typecho 的主题都很简单,但是新主题功能超级多,样式也有很多。在换到现在这个主题前,站点一直用的新主题,直到24年初我决定开发一个属于自己的主题。

MyLife主题MyLife主题.webp

和以前一样,在主题站看了好久,找到一个小众的又符合我的主题:Citizen。换上这个主题了以后,也在作者处征求了魔改的意见,作者也同意了(他说我拿去倒卖都没事),于是我也就在此主题的基础上添加了许多我喜欢的东西。

改动

我喜欢很多其他博主设计的样式:

  • blog.zhheo.com 的关于界面,风格是圆角矩形,滚动的卡片。
  • thyuu.com 中展示相册的封面铺满了屏幕。
  • 苹果官网的站点地图。我们熟知的站点地图都是以 XML 形式展示给搜索引擎的爬虫的,而且很多博主把站点地图内展示的东西以“侧边栏”、“归档”、“内容统计”等形式呈现给读者,整体都很分散。我觉得苹果官网和大多数国内网站的站点地图一样,就把网站中所有的内链全部放到此页中,读者可以快速找到他想要的页面,而不必去导航栏或页脚处查找,极大方便读者的阅读。
  • blog.bennyxguo.com 的归档页面,归档是以时间线形式呈现出来的。
  • msn 的图注,用一个小线条将图片和图注连接起来。
  • skywt.cn 的导航栏,有一个很明显的伸缩动作。
  • guhub.cn 的主页。
  • 子比主题邮件通知的样式。

于是参考着这些样式,加上思考如何把这些样式完美地融合在一起而不违和,我总耗时两星期左右,把这些样式融合到了一起。

现在的 Citizen 主题已更名为 ImQi1 主题。在看到风记星辰打算将自己的主题作为独立主题分发并起名字时,虽然我没有分发的想法,但是我也觉得,仪式感要有。于是我开始重构代码,尝试让 imqi1 这五个字符遍布各处。

现在你所看到的imqi1.com,就是我自己的得意之作。为什么得意,因为我完成了开头时提到的梦想:想过有一个自己的网站,并且还是自己写的。或许学计算机专业的幸福感就来自于此吧。

成果

  • 全新的关于界面。其中,大多数模仿自 skywt.cn,小部分模仿自 blog.zhheo.com/about.html。
  • 全新的导航栏,完全模仿自 skywt.cn。
  • 模仿着thyuu.com中图片分类的封面展示,我也做了一个符合本站风格的“摄影”类封面展示,其他分类则不再显示封面。

摄影类文章封面展示摄影类文章封面展示.webp

经过了一个小时的优化,桌面端LightHouse跑分几乎满分,但移动端略低一些。

桌面端LightHouse跑分桌面端LightHouse跑分.webp

细节

除此之外,我还在网站里设置了很多小细节,可能有很多人没有注意到。

  • 浏览器控制台中的欢迎提示;
  • 关于页面中的站点截图中,展示的站点使用的主题模式取决于当前使用的主题;

还有一部分则是站点中莫名出现的字符,其实它们都有自己的意义:

  • 首页中头像右侧第一行文字“棋 / Qi1 / .”,其实都是我各个平台的昵称,最后的“.”也是昵称。
  • imqi1,这个字符组合实际上是 I'm Qi1,即“我是棋”的意思。因为 1 和 Qi 同韵母,且某些平台不允许短昵称,所以我就将它们连到了一起。

回答

有很多人问过我关于建站的一些问题,我很乐意和大家分享。在此我分享一下我的网页都运用了什么技术。

本站域名托管于腾讯云,加速服务是腾讯云的 EdgeOne 个人版,服务器是京东云的 2H4G5M 轻量云主机,云存储则使用的是又拍云云存储。

本站的 CMS 为 Typecho,主题为魔改过的 Citizen 主题,魔改后的主题不分发也不售卖,仅个人使用。至于样式,我的样式都是参考的别人的,我感觉本站的样式可不可以参考都谈不上。

本站加速服务有 EdgeOne 和又拍云云存储提供的 CDN 服务,还有 Typecho 的基于 Redis 数据库缓存的 Tpcache 插件,以提高本站的访问速度。

本站的字体为思源宋体,代码字体为 JetBrainsMono。这两个字体都托管于又拍云云存储中,且加入了防盗链和跨域等限制,因此需要引用这两个字体的请前往官网下载。思源宋体链接 JetBrainsMono 字体链接

值得一提的是,思源宋体字体的整体文件大小很大,约2M,对于低带宽的客户端来说很不友好。目前很多网页都对字体分段加载(我也不知道具体的名词是什么),具体就是将一个字体文件拆成几十个字体文件,每个字体文件有10KB左右,然后在CSS中,给出这个字体的链接和对应的Unicode编码范围。举例:

@font-face {
    font-family: "Noto Serif SC";
    src: url(https://cdn.imqi1.com/static/notoserifsc/H4c8BXePl9DZ0Xe7gG9cyOj7mlK1SzUpCNMKEN0nmGnGv-OMEQDgKS-k5SiuioPhBdQcziZZTQ.4.woff2) format("woff2");
    unicode-range: U+1f1e9-1f1f5,U+1f1f7-1f1ff,U+1f21a,U+1f232,U+1f234-1f237,U+1f250-1f251,U+1f300,U+1f302-1f308,U+1f30a-1f311,U+1f315,U+1f319-1f320,U+1f324,U+1f327,U+1f32a,U+1f32c-1f32d,U+1f330-1f357,U+1f359-1f37e
}

@font-face {
    font-family: "Noto Serif SC";
    src: url(https://cdn.imqi1.com/static/notoserifsc/H4c8BXePl9DZ0Xe7gG9cyOj7mlK1SzUpCNMKEN0nmGnGv-OMEQDgKS-k5SiuioPhBdQcziZZTQ.5.woff2) format("woff2");
    unicode-range: U+fee3,U+fef3,U+ff03-ff04,U+ff07,U+ff0a,U+ff17-ff19,U+ff1c-ff1d,U+ff20-ff3a,U+ff3c,U+ff3e-ff5b,U+ff5d,U+ff61-ff65,U+ff67-ff6a,U+ff6c,U+ff6f-ff78,U+ff7a-ff7d,U+ff80-ff84,U+ff86,U+ff89-ff8e,U+ff92,U+ff97-ff9b,U+ff9d-ff9f,U+ffe0-ffe4,U+ffe6,U+ffe9,U+ffeb,U+ffed,U+fffc,U+1f004,U+1f170-1f171,U+1f192-1f195,U+1f198-1f19a,U+1f1e6-1f1e8
}

上面的CSS代码中,unicode-range和src是一一对应的。这样网页中只要出现了该范围的字体,CSS就会加载对应的字体文件,而不需下载全部字体文件。

计划

明天就要回沈阳了,暑期计划就是搭建一个类似云笔记的站点,但是不记笔记了(因为不再学新知识了)。这个笔记里记录一些常用库的用法,然后把它们的库做一个镜像,加快访问速度。

预想的样子:

标题:JQuery

内容:jQuery is a fast, small, and feature-rich JavaScript library...

jQuery的用法:$(选择器).方法(参数),如改变 CSS 样式:$("#some-element").css("some-style", "some-value")

类似于上面这样吧。

写在最后

我觉得,学习计算机专业最大的成就感就来自于,可以将自己的想法在计算机中变成现实。这次有了自己的主题,我很高兴,我在其中尝试了很多没有尝试过的新事物。最让我觉得方便的,就是我给网页加了个 PWA。这里的“写在最后”,就是我用手机编写的。感谢代码给我的生活中增添了如此多的乐趣。

评论

点击评论者的头像以回复。

    风记星辰 www.thyuu.com 2周前

    思源宋体可以直接使用google的cdn,国内加载没有问题。https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@200..900&display=swap

      imqi1.com 2周前 回复 @风记星辰

      我知道,但是不如放在自己的cdn里快

    永恒末匕 www.likaijian.com 2周前

    厉害,如果我的学习效率和一样就好了

    Teacher Du dusays.com 2周前

    我还以为框架也是徒手写的~

      imqi1.com 2周前 回复 @Teacher Du

      框架是Typecho

    obaby h4ck.org.cn 2周前

    这个效果好
    样式看起来也比较舒服

      imqi1.com 2周前 回复 @obaby

      嘻嘻,自己写的