无
这个网站的主题……是我写的!(自豪脸)
除非你在用RSS,否则你现在就在欣赏这一主题——Bootpecho,我(这辈子第一次做前端开发的人)将尽我所能展现出Bootstrap 5的强大之处。它的所有代码都已开源且可以在GitHub上找到,此文章将对其作简要介绍。
设计理念
Bootstrap提供了大量的框架可供使用。大到导航栏、侧边栏、各宽度全元素弹性设计,小到链接颜色、标志、设置元素边框和内外边距,都提供了十分易用的解决方案。仅仅使用Bootstrap 5,我们就能够打造出一个“Bootstrap-Style Typecho”,简称“Bootpecho”。
为了保证主题的简洁性,我选用了Typecho主题Twenty Twelve v1.2(GitHub)进行修改。然而Bootpecho与其说是原作改版,不如说是以原作为模板。修改后的主题不管是从前端视觉效果看,还是从代码来看,几乎都只有Typecho的原生语句是相同的。此外,为了避免作者用了GPL-3.0协议但我没用导致不符合协议要求,Bootpecho使用了GPL-3.0协议。具体协议内容请前往GitHub阅读。
全主题使用了Bootstrap 5官方的CSS和JavaScript文件,由cdnjs分发。此外主题文件夹内还包含一个style.css样式表和一定数量的其他JavaScript文件。这些JavaScript文件大多是原作者原包内的,不少已经移出最终构建的HTML文件,因此不会加载。但是懒得删为了避免各位大佬可能需要这些JS的部分功能,所以它们依旧留在仓库里,各位按需取用即可。是否手动引入这些额外的JS文件不会对现代浏览器的显示效果造成影响,你也可以开箱即用所有功能。
主题还选用了Outsrkem大佬的阅读量统计。大佬选择在functions.php中添加向数据库中写入阅读量数据的方式实现。使用时需要在post.php页面中添加一行显示代码来确保统计功能正常运行。如果你不愿意向数据库写入除官方定义的标准数据,请手动移除相应代码。
后来我还加入了GitHub Style Alert的支持,使用JavaScript实现。性能不是很好而且有时候还会露馅……优化什么的交给后人。
详细的安装步骤在GitHub上,请仔细阅读README文件了解详情。
从原作到首个版本
由于我是第一次上手修改PHP代码,只能自己依靠HTML基础知识一点点修改。Typecho官网糟糕的技术文档更是让完成这一修改工作雪上加霜。好在大多数PHP代码只是调用数据库数据,可以直接复制粘贴调用。很快,第一个可用的版本就做好了。
首先,我希望首页是干净的,只有文章的罗列。于是我选用了Offcanvas组件来将侧边栏隐藏为一个按钮,通过按钮查看近期文章、页面、评论、登录按钮和别的东西。
那么,展开按钮放在哪里呢?显然,我们需要用到Navbar自己做一个导航栏了。目前来说,导航栏上只有两个元素:一个是首页链接,跟着站点名称走;另一个就是侧边栏展开按钮了。
然后就是大标题了。为了区分站名和文章标题,以及文章标题和文章内的小标题,我选择使用Display样式来突出整页的核心标题。元素本身仍然是<h1>,但是使用了display类来凸显文章标题的特殊性。大标题后接网站简介,合情合理。
接着是最重要的文章展现方式。我选择了使用Card组件来展现文章。在电脑屏幕或者足够宽的屏幕上,文章列表会自动分成两栏以最大化利用屏幕空间;在小屏幕上则只会显示一栏。由于只有文章足够多,分栏才有意义,因此上述分栏效果还要求本页文章数大于等于3个才会显示。对于Card展示的信息,我参考了其他网站的设计,认为至少应该有阅读量统计。鉴于先前的网站设计经验告诉我“不要随便使用第三方的托管服务”,我选用了Outsrkem大佬的阅读量统计。至此,每篇文章都有了日期、作者、分类、阅读量和评论数的显示,置于卡片的顶部和底部。
最后当然是网站的页脚了。Typecho提供了文章和评论RSS的选项,我就直接都放在页脚了。致谢这一块,Typecho是必写的;为了表达Bootstrap 5对本主题的大力支持(?),我也把Bootstrap 5写进去了。
放个图给你们看看效果:

除了上述介绍的部分,后来我还加了不少内容,但总之就是修修补补,把一些有Bug或者不协调的地方改改,添加目录或是GitHub Style Alert等新特性。整个主题也趋于完善了。GitHub上大多数提交信息都以中文撰写,所以即使是非Code Reader应该也能看懂个大概,只是不要期待写的很全很详细啦……
Liquid Glass 是什么?能吃吗?
2025年的WWDC25上,Apple发布了他们最新的设计语言:Liquid Glass。这一设计语言包含各种华丽的玻璃折射和色散效果,但也因性能差、可读性差而为人所诟病。然而一旦看惯了新的设计,再回看我们Bootpecho,简直是太古老了。于是我决定取其精华,去其糟粕,对Bootpecho来一波大改版。绝对不是因为Microsoft Developer E5快过期了导致的。
2025年11月28日:新版本目前在Bootpecho存储库的dev分支开发,上述的“首个版本”则发布于Release页面(v1.0.0)以便下载。详细信息请参阅存储库中的README.md文件。
未完待续……