该文章还在更新中 更新进度大概为 永无止境 最新一次更新的日期为 2026/4/16
如果那个日期是很久以前的 那该文章大概是腰斩了 不用太过伤心
仔细想想这更新日志后边也得整合进主站 暂时在这放着
neocities.org是什么
静态网站托管用的网页
简单来说 注册完你就获得了自己的域名+一个专属自己的静态网站
88×31动图
翻了不少博客都带怀旧风格的88*31动态按钮 点击之后就能访问博客 我觉得挺酷 实在不会平面设计 仿了个简易版本
目前在github上边用 挺有感觉的
webTUI
目前看下来 这个css库与我想要实现的网页效果差不多 前端没怎么特地练过 看来要利用ai+自学点网页设计了
https://maonie.neocities.org/
初具雏形 整体模仿了Webtui用于展示的博客例子
呈现方式
一点对官方页面的参考+ai辅助 把首页写了出来
主页该怎么搞呢….
想做成类似该博客的读取md文件内容并浏览/渲染 可惜neocities不允许读取文件 遂放弃
若是所有内容都做在一个页面上 那就太多冗余了 再想想吧
放文章的仿终端搞完了 可风格不像是主页面….
想想整个嵌套结构
再加个友链和更新日志充数用
cv差不多用ai跑了个透彻 主页面的风格还有待决定…
多半是和介绍页面差不多的数字流动背景+内容吧
之前想的是套个模板——能替换主题 主题色随上海地铁线路变化
| 线路 | 标志色 | RGB值 | HEX色号 | 备注 |
|---|---|---|---|---|
| 1号线 | 红色 | (234, 27, 57) | #EA1B39 | 标准大红色 |
| 2号线 | 绿色 | (139, 196, 63) | #8BC43F | 淡绿色/翠绿色 |
| 3号线 | 黄色 | (251, 210, 8) | #FBD208 | 明黄色 |
| 4号线 | 紫色 | (81, 45, 141) | #512D8D | 深紫色 |
| 5号线 | 紫红色 | (144, 86, 163) | #9056A3 | 紫红色系 |
| 6号线 | 品红色 | (214, 24, 112) | #D61870 | 品红色 |
| 7号线 | 橙色 | (244, 113, 33) | #F47121 | 橙色 |
| 8号线 | 蓝色 | (0, 158, 219) | #009EDB | 标准蓝色 |
| 9号线 | 天蓝色 | (121, 201, 238) | #79C9EE | 淡天蓝色 |
| 10号线 | 淡紫色 | (189, 168, 211) | #BDA8D3 | 淡紫色 |
| 11号线 | 棕色 | (127, 33, 49) | #7F2131 | 深棕色 |
| 12号线 | 深绿色 | (1, 124, 103) | #017C67 | 深绿色 |
| 13号线 | 粉红色 | (232, 149, 193) | #E895C1 | 粉红色 |
| 14号线 | 橄榄绿 | (94, 92, 41) | #5E5C29 | 橄榄绿色 |
| 15号线 | 香槟金 | (187, 167, 134) | #BBA786 | 香槟金色 |
| 16号线 | 水绿色 | (142, 209, 192) | #8ED1C0 | 水绿色 |
| 17号线 | 浅棕色 | (184, 121, 116) | #B87974 | 浅棕色 |
| 18号线 | 土黄色 | (186, 160, 81) | #BAA051 | 土黄色 |
| 浦江线 | 灰色 | (181, 181, 182) | #B5B5B6 | 中灰色 |
| 磁浮线 | 蓝绿色+肉橙色 | (0, 139, 154) / (245, 167, 78) | #008B9A / #F5A74E | 双色组合 |
构思
抓耳挠腮下来 目前的主页停留在想法阶段 总得有个计划 搞了个设计图
目前想的:
主页面右边的控制台通过js实现打字机+每日一句话功能(已实现)
终端里的文字最终采用了荧光绿 果然经典配色才是好文明
底下是目前成品的展示图
首页
主页(背景还得改改...)
/cv 随笔页面
还有不少明显瑕疵 至少有了雏形 睡个一会继续开改....主页迷思
逛了圈别人的网站 看到个挺想参考的仿winxp的博客页面
效果非常惊艳 类似我所计划的效果 那就用ai和手搓来搞一个现代化的试试
大概搞好了 ai搞window xp进度条仿的还真像回事
期间研究出了副产物——主站的88x31gif！
手绘+gif编辑 通过叠合两帧相似手绘风格线条形成的动态
再次回到正题…主页做成window风得大改啊 先摸会概率论 稍等
回来了 顺便做了个分享88x31按钮用的小页面 在页面中悬浮/可以拖动 所以不会遮挡内容
加上了开机 菜单栏 关机 还差软件图标啥的
软件图标 48*48大小 还是手绘+ezgif 搞了上下浮动的便宜效果 至于动态到时候再说
细节调整
经过不少试错和调整 基本雏形已经完成
· 删除了div的分层线 加上了泉此方xp背景
· 底栏还是删干净了 留个菜单就好
现在的主页
伪关机
伪关机后的页面
目前的网页逻辑
首页进系统——伪加载——伪登陆页面（用于改动页面中的用户名）——伪主机页面
主机页面中有四个选项 随笔（cv）选项（option）更新日志（log）关于页面（about）
要退出点击左下角的菜单 点击关机 播放动画 随后回到首页
如此这般把css和js都垒的太高了 所以代码搬到了外部文件里方便整理修改
目前的明显问题
1.加载速度不是特别稳定——主要是开伪软件时候窗口加载留白 加个加载动画吧
2.菜单里边的玩意基本成了冗余 要么开新栏目要么直接移除得了
3.优化css逻辑 这个日后再说吧
继续添笔
决定把一整套流程都搞上 所以加上了用户名输入的部分 同时支持了多窗口同时开启
登录页面(啥都不输会默认用户名user)
至于其中的小页面 基本完工了 接下来就是持续更新…
这期间新加的玩意
log页面
pet页面
这部分源自项目 gifypet 很方便 提供部分gif素材就能自己生成一个
开机页面新增音效开关
给首页与主页中的关于页面新增跳过按钮
接下来准备给about页面新加个目录 回答一些问题
1.作者是谁
2.制作网页的目的是？
3.自我介绍（不想做）
然后加个喜闻乐见的评论区 先忙会…
新页面
留言板
广告位 兼职友链
接下来的计划:
准备新搞个计数页面 利用moe counter+不算子进行联动计算进入人数
neocities不支持外部js引入 所以放在这个域名 部署在新页面即可
加入winxp音效包 开关按钮做在时钟旁边即可
2026/3/10 v0.4.2b
计数页面
2026/4/16
准备整合个ctf速查表 先新建文件夹….
结论是 不用外界实现几乎不可能 直接借用了老gitbook
做顺手了 顺便加了个摘录页面 存读书笔记/电影 漫画 现实对话/歌词
2026/4/30
今天准备新加页面推荐番剧….就叫bangumi吧
结尾/引用
We are just another visitor in a transient world.