网站功能更新以及一些新的想法

一年前我给自己网站的定位是文字博客，设计理念是：一切皆文章，功能少而精。抱着这个想法，不知不觉，用11ty写一个完全属于自己的主题已经快过去一年，我却感觉这还是昨天的事情。打磨到现在，看了很多其他博主的网站后，觉得自己少了一点人味，于是决定改造并重新定位成：克制的偏向于大而全的个人网站，让网站多一点趣味性和社交性。

所以这次网站改了许多的内容，包括但不限于：

1. 旧版首页 banner 空间信息过少，浪费了巨大的空间，更新后直接取消 banner，布局更紧凑。
2. 经典的右侧边栏布局和主内容抢注意力，改成居中单栏布局 + 首屏分栏 Hero。
3. 相册页不再沿用瀑布流的方式，采用图+标题简介的极简杂志风设计排版。
4. 新加音乐页面，不模拟常规播放器UI，沿用文档方式嵌入音频组件，每一首音乐都须写推荐的理由。
5. 增加视频页，不知道有什么用，先留着。
6. 新增更新日志，记录网站的变动，可溯源。
7. 优化：动态页嵌入评论区、header添加完善图标、文章页使用单独的footer、项目结构优化…..。

总体而言，添加了不少新的页面，但总体上依然尽量保持克制，不搞太夸张的配色，不做太多自己需要频繁维护的功能。

今天提交完后，次数刚刚好达到了500次。

项目数据总结

其中大部分代码其实都是ai写的，这是我第二个vibe coding的项目，因为项目结构做的合理，即使用的是最便宜的甚至免费的ai，现在已经几乎不会出现改错代码或拆东墙补西墙的情况。但里面塞进去了多少史山代码我目前也不得而知。

vibe coding

不管怎么样，项目结构比以往任何时候都重要，尤其是在AI上下文不高的情况下。

在vibe coding这个概念被提出来前，我就已经有了vibe coding经验。deepseekr1发布那会，我想写一个微信小程序玩玩，但没接触过微信小程序语法，就硬是用中文在网页端告诉它逻辑让它“翻译成函数”给我拿去使用，例如下面这样：

描述：

把数组第一行当表头，在下面补一行 ---，剩下的每一行都拼成 | 单元格 | 单元格 |，最后用换行连起来，返回一个 Markdown 表格。

deepseek回答：

const toMd = ([h, ...d]) =>
  [h, h.map(() => '---'), ...d]
    .map(r => `| ${r.join(' | ')} |`)
    .join('\n');

就这样，我靠着复制粘贴手搓出一个微信小程序，还备案上线了，当然，写的是一个功能没什么特色的集记账、笔记、倒数计时纪念日的小程序，现在也已经下线了。这是我第一个vibe coding的项目。

早期因为ai的上下文普遍不高，所有的class，method、function都必须写的简短细碎，如果你还架构设计耦合，总会改了这坏了那，牵一发而动全身，到时候搞得一团糟只能重构。

因为这个小程序，让我形成了良好的写项目前必须花大量时间设计架构的习惯。