【开发笔记】记一次"清朝老主页"的开发

偶然间发现了小学六年级的时候我做的一个项目，闲着没事重写了一下……

笔记前言

大家好，我是小改，如你所见，这是一个开发笔记。

至于是什么项目，相信各位在标题中就能看出来了——个人主页。

刚好这几天日常内容有点写烦了，简单写点开发笔记换个脑子。

开发背景

在开发这个项目前有一段《很有意思》的《背景》，这也说明了为什么我叫这个个人主页项目叫 "清朝老项目" ……

今年5月，我偶然间翻了翻我以前的 GitHub 账号，偶然间翻到了一个我在小学的时候写的一个个人主页项目：abaqwq。

没错，这个项目可以叫这个名字，虽然看似有点深井，但我认为，这也算是我梦开始的地方（确实也只能这么说了），毕竟那个时候的确，小学生，确实比较闲。小学就是这么悠闲，即使六年级也是这样。我那时候看了会儿 Bootstrap v5 的文档后，身为小学生的我便写了这两个项目（其中一个项目名还挺深井，就是我测你们码，仓库名wcnmm，看丁真梗看的，那个时候还确实让我小火了一下）

刚好那个时候才6年级，有的是时间，于是就开发了一个简单的个人主页。

那个时候还不太会用 GitHub，所以……

不过好在现在倒是会用 git push 了，至于我以前做的个人主页效果如何……

完成度虽然不是很高，里面还有那么一点点凑数的功能，不过照以前那个技术，的确做出来这个很不容易了（雾），不过说实话，真的感觉这页面好短。

背景就是这样，我把小学时做的一个项目，重写了，叫清朝老项目的原因，就是这项目是三年前的，也有点年头了，就是这么回事。

初版开发

反正闲着也是闲着，我换了 Bootstrap v5.3 的前端框架（旧版好像用的是 v5.1，应该是这样），就打算重写一下这个"清朝老项目"。

我原先是想保留个人、听歌和底部的信息，然后把中间那一部分文字改成我认为我写的比较将就的文章，也没想着做一个比较大的改变，更没有字体什么事了。没错，这就是我今年5月份《重写》的理念，十分敷衍，基本上没有做太大的改动，甚至背景还是一模一样。

不知道我那个时候是不是意识到了这样太敷衍了，于是又完善了一下我以前没有完全做的菜单，顺便又美化了一下网站的底部信息，这样一来这个页面差不多就写好了：

这么一重写，你就发现了一些问题：

不是哥们，你要是这样叫重写，那为什么不能直接在原基础上改？这连魔改也算不上吧。

由于那个时候我没什么心情去继续重写下去，就简单画个饼，写 README.md 的时候便说：

以后会改的

然后鸽到了8月，到现在才发第二次正式版（笑）

不过这事也不能完全这么说，至于我2025年5月的那次重写，到底重写了些什么？

旧版页面的代码（节选）

旧版页面因为没涉及有多少 CSS，直接在头部用了个 <style></style> 就解决了。

不过也没凑多少行代码，旧版代码量还是少得可怜（悲）

旧版也确实没多少功能，这代码也是，随便一翻就见底了，刚好100行，很多还是凑的。

虽然但是，这也算是我那个时候的一次学习成果吧，毕竟那个时候看了会儿 Bootstrap v5 的文档后还是写出了点东西来（就是这未免有点太简单了，不过那个时候我也是小学生，的确没太多的开发经验）

后面我把很多 CDN 上的资源放到本地了，css 文件和 js 文件放在两个不同的文件夹，网站上的一些 css 设置尽量使用 style.css 存着，这便是我想重写这个项目的一大意义：改进一下原先的网站结构。

改进想法

暑假回来看，我天这什么史山，重写了跟没重写一样我还重写啥啊，虽然有了结构但这功能不是都差不多的吗，除了又多了几个中看不中用没有任何首页意义的功能。

后面看了几个个人模板，原本是想直接魔改其他人开发的个人模板，但又想着用之前同样的技术栈去纪念小学探索前端的我，我便想着多做点功能，于是打算在已经重写的基础上对原有功能进行以下改进：

完善菜单栏，填充网站的空白区域，但不必过于臃肿
最开始的本人大致招呼和本人个性签名保留，体现个性
增加个人简介板块，展示这个人的大体信息
增加参与项目（我的作品）板块，展示这个人的相关经历
增加个人爱好（skills）板块，直观展示个人技能或爱好
推荐文章从4篇改为3篇，只保留最推荐的3篇文章
底部 thanks 无太多意义，不如改成信息展示，并且展示赞助商
原先壁纸已经看着很疲劳了，不如换一个绿色的
微软雅黑这个默认字体看着少点感觉，建议换宋体
压根没多少人愿意进入听歌区域，不如删了
……

抱着这些乱七八糟也不知道能不能改善体验的想法，我便试了试。

改进过程

字体与背景

由于原先在展示的时候很不舒服我便把原先 "雨夜街道" 的 gif 壁纸更改了，新的壁纸就是影视飓风素材库中的一张照片，放上去就算看再多遍也没有十分严重的审美疲劳。

/* 节选自 v1.1.0 版本的 css/style.css */
body {
    background-image: url('../img/background-1.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
}

但微软雅黑这个字体我看着还是十分难受，尤其是在我网站上真的感觉有时比较突兀，亦或者也算是一种视觉疲劳吧，所以我把站内的字体换成了宋体，虽然在文档上见宋体已经见烦了，但起码看着会比较舒服，并且选的都是艺术宋，又不是简单的宋体，我选的便是屏显臻宋。

/* CSS 部分 节选自 v1.1.0 版本的 css/style.css */
body {
    font-family: "Clear Han Serif";
    font-weight: normal;
    backdrop-filter: blur(5px);
}

<!-- HTML 部分 节选自 v1.1.0 版本的 index.html -->
<head>
    <link rel="stylesheet" href="https://fontsapi.zeoseven.com/79/main/result.css">
</head>

这样就舒服多了

个人介绍区

因为好久没用这个框架了，恶补了一下 Bootstrap v5 后便写了这个个人介绍。

我计划打算这块地方简单处理一下就行。

使用的头像（本人社恐没敢贴大头照）
礼貌招呼和个人简要概括
一段个人对于自己情况的简要介绍

这开发大纲不就说来就来了吗，马上就简单的写了一下……

<!-- 节选自 v1.1.0 版本的 index.html 有修改 因为有个地方写的有问题 -->
<!-- 个人介绍 -->
<div class="container mt-5 text-white" id="about">
    <h1 class="text-center">关于我</h1>
    <p class="text-center text-white">你好，我叫小改，要不要互相认识一下？</p>
    <div class="row">
        <div class="col-sm-5 text-center float-end">
            <img src="img/avatar.png" width="250" class="rounded-circle mx-auto d-block img-thumbnail">
        </div>
        <div class="col-sm-7 float-start">
            <br>
            <h2>你好，我叫小改</h2>
            <h5>一位热爱学习、热爱编程、热爱生活的在校学生</h5>
            <p>你好，我是小改，一位在某个不太知名的小城市里比较好的私立中学上学的初三学生。热爱编程与学习的同时也热爱生活，常常利用课余时间提升自己。
                <br>
                现在在尝试开发自己的一些项目，比如这个个人主页，虽然简陋，但也算是我真正意义上的“处女之作”。
            </p>
            <a href="https://www.haoyu233.com" target="_blank">
                <button type="button" class="btn btn-success">🙂关于我</button>
            </a>
        </div>
    </div>
</div>
<!-- 个人介绍 End -->

推荐文章区

这个板块是我重写这个项目时写的一个板块，但由于2×2布局展示4篇我还是嫌多了，而且不止是数量的问题，他2×2布局时卡片也大的难受，我于是就打算：

只展示自己推荐的三篇文章

于是……

<!-- 节选自 v1.1.0 版本的 index.html -->
<!-- 博客内容 -->
<div style="background-color:transparent;" id="blog">
    <h2 class="text-center text-white">推荐文章</h2>
    <p class="text-center text-white">小改写的一些文章，欢迎大家阅读！</p>
    <div class="row row-cols-1 row-cols-md-3 g-4 col-md-10 mx-auto">
        <div class="col">
            <a href="https://www.haoyu233.com/1767.html" target="_blank" class="text-underline-delete">
                <div class="card">
                    <img src="https://www.haoyu233.com/wp-content/uploads/2025/08/1d0938c5bde26e767026a5072ec10e63.webp"
                        class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">【25年33周记】北京四日游记、发烧、初三Coming Soon…</h5>
                        <p class="card-text">
                            没有旅游团，也没有别的麻烦的事，就是一次轻松愉悦的北京游，不好玩的是旅游结束后我便发烧了。不过，初二升初三的暑假即将结束，这次暑假的倒计时预示着离初三和中考不远了……
                        </p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col">
            <a href="https://www.haoyu233.com/1563.html" target="_blank" class="text-underline-delete">
                <div class="card">
                    <img src="https://www.haoyu233.com/wp-content/uploads/2025/07/d500abc97ec5e8c4e4be206472739404.webp"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">【运维笔记】使用ibd文件恢复MySQL数据表数据</h5>
                        <p class="card-text">
                            手欠去安装各种东西而不考虑后果是数据库资料丢失中比较常见的原因，而当我们有一些文件的时候，我们似乎可以通过一些方式去尽力恢复一些资料，本文将介绍使用ibd文件恢复MySQL数据的方法……
                        </p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col">
            <a href="https://www.haoyu233.com/1517.html" target="_blank" class="text-underline-delete">
                <div class="card">
                    <img src="https://www.haoyu233.com/wp-content/uploads/2025/07/6f67d78f0fc212c60af40ef36bc5f617.webp"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">【旧事重提】我与蓝屏工作室的5年——"花有重开日，人无再少时"</h5>
                        <p class="card-text">
                            新冠疫情按下了“暂停键”，但这不影响每个人在便利的互联网中相遇。疫情的到来让一些不成熟的孩子相遇，而五年转瞬即逝，即使变化很多，蓝屏仍承载着许多人少年时的狂欢……
                        </p>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>
<!-- 博客内容 End -->

效果也大概是这样：

参与项目（作品）区

这是一个很神奇的想法，原先我是不打算做这个区的，因为没想到。不过我想了想，总得展示一下我的劳动成果，亦或者是参与的项目吧。

就这么灵机一动，便写出来了个这个：

<!-- 节选自 v1.1.0 版本的 index.html -->
<!-- 个人作品 -->
<div class="container-fluid bg-3 text-center text-white" id="program">
    <h2>我的作品</h2>
    <p>我曾经或者现在的一些作品</p>
    <div class="row">
        <div class="col-sm-3">
            <img src="img/program-img/p1.png" class="img-responsive" style="width:175px">
        </div>
        <div class="col-sm-3">
            <img src="img/program-img/p2.png" class="img-responsive" style="width:175px">
        </div>
        <div class="col-sm-3">
            <img src="img/program-img/p3.png" class="img-responsive" style="width:175px">
        </div>
        <div class="col-sm-3">
            <img src="img/program-img/p4.png" class="img-responsive" style="width:175px">
        </div>
    </div>
</div>
<!-- 个人作品 End -->

不过这个图与图之间的间距的确看着不舒服，我后面抽时间再试着改一下。

优化底部区域

我现在写网站的时候很喜欢在底部添加一堆链接、本站的相关信息和赞助商，想到这个之后想起之前项目和 v1.0.1 版本中的 "Thanks" 区看着就难受，于是我便又改了改……

<!-- 节选自 v1.1.0 版本的 index.html -->
<div class="text-white text-center" style="background-color:transparent;">
    <p>©Copyright 2020-2025 <a href="https://pages.haoyu233.com" class="footer-text-style" target="_blank">kadzh520</a>
        All Rights Reserved.<br><a href="https://icp.gov.moe/?keyword=20254514" target="_blank"
            class="footer-text-style">萌ICP备20254514号</a> | 本站由<img src="img/hydun.png" width="60">提供内容分发网络加速与防护服务</p>
</div>

这样，底部信息就大概是这样了：

404页面

原先我还以为开发的差不多了，结果刚打开以前的项目才发现：

我以前还给自己的页面整了个404页面啊？

于是我就简单的写了个404页面……

<!-- 节选自 v1.1.0 版本的 404.html -->
<!-- Start -->
<div class="jumbotron text-center py-2 py-md-2 mt-2" style="background-color:transparent;" id="404">
    <img src="img/404.png" class="rounded-circle mx-auto d-block img-thumbnail" width="225" height="225">
    <br>
    <h1 class="text-white">404 Not Found</h1>
    <p class="text-white">找不到相关页面或链接失效了，请检查链接是否正确，或点击相关按钮返回首页</p>
    <a href="index.html">
        <button type="button" class="btn btn-success">🏠返回首页</button>
    </a>
    <a href="https://www.haoyu233.com" target="_blank">
        <button type="button" class="btn btn-primary">📚进入博客</button>
    </a>
</div>
<!-- Start End -->