主页模板大改

自我发布Revealry个人网站模板后，差不多一年的时间内，我一直在更新这个玩意，断断续续，成为我更新最久的一个项目了，来聊聊吧

这次更新是有预谋的，我称之为Plan.VU，因为我觉得当时一些界面设计得太丑了，在这次更新区间（就当作是这篇博客之后的更新吧，也就是3a3a204开始），除去package-lock.json ，总的git更改行数为+2414 -1124

另外，Plan.VU顺便还把名字改了，因为我觉得之前的那个不好听，之前那个是AI取得，还重名了，我想了一想，就按Alteidos和Velotux那样在拉丁语的基础上生造词了，叫Viderexo，即videre+nexo，但是我后来又觉得它不好听，于是基于fenster和ego造出了Fenstego，现在就叫Fenstego了~

更新内容

我做了个视频发B站上了，不过里面还包含一些以前更新的内容，可以先看看视频，下面是一些补充和一些看不见的事情的分享

重写程度

• 首页：完全重写
• 介绍页：重写了一大半
• 链接页：没怎么改
• 博客页：算是重写了一大半吧
• 文章：改了一点点

设计新页面

既然觉得丑，那就设计一个新的，好看的出来吧

导航

由于我想顺便加上开往和萌备，按照原本的方式似乎没什么地方好放啊，浮动按钮？还是直接加到顶部应用栏？

要不顺便加个底部导航栏方便在几个板块之间快速切换？

思考良久，最后我得出来的结果是——侧边栏

首页

首页是肯定要完全重构的

由于有了个人形象，我肯定要展示展示的，尤其是在首页，那要不每个页面都得有吧

那么子页面入口放哪呢？控制按钮放哪呢？我想过很多方案

• 左上角放标题，右上角放按钮，左下角放页脚，右下角放入口：手机怎么办？
• 顶上居中标题和按钮，底下放入口和页脚
• 就留一个顶栏，其他东西都放到侧边栏让用户自己打开
• 终末地菜单的样式：你哪来那么多按钮
• ……

最后，我选择了左上角-右上角的方式

并且入口按钮对响应式也做了一点点优化，不是直接判定画面宽度，而是直接将它与元素宽度进行对比，从横变竖，不过这个玩意测试下来还是有点小问题

我还打算以后换上Material You Expressive，你可以发现这个背景图模糊已经有点感觉了，而并排的入口按钮其实也是在为它做准备

介绍页

主要改的是上面的基础信息部分，原本用的卡片形式，太丑了太不直观了，就使用了像Github等平台的个人空间的形式，左边放头像和名字，右边放更加详细一点的信息，既然是一个在左边一个在右边，那么右边的文字肯定得是居右更和谐一些吧，配上几个图标，完美！

博客页

博客页的筛选模块我也不太满意

我一开始想着，用两个折叠面板，一个是筛选，一个是查看（翻页） ，后来懒得做翻页就用两个按钮互动过去了

分类和标签就不用mdui-select了吧，改用mdui-chip直接给你选择，标签依旧不给你多选，因为我不知道多选的时候是取交集还是取并集更好

由于我又嫌这个文章卡片占用面积太大了，想要一个紧凑一点的，就做了一个可切换的视图，默认卡片，可选列表，结果发现我更喜欢列表，就把列表改成默认了

改名改文件位置

• 把src/_configs文件夹移到了configs文件夹，然后把vite.config.ts的配置内容移到了configs/config.yaml，使得所有的自定义内容都在configs和posts两个文件夹里面了，以后更新可以删掉其他文件夹只保留这两个了
• 在scripts文件夹内，所有vite-*-plugin.ts都改名为plugin-*.ts，没啥效果，只是因为爽
• 让ai写了个vite-sever-url-fix.ts把不是版本和开发服务器的url结尾有无/而不同导致的问题给解决了
• 把主页的ts和css文件移到了home文件夹内，因为src目录下文件有点多了
• 产物的博客img目录位置改成了/blog/img，这样的话就和posts目录并排了，顺眼多了
• 在configs目录下，可以放置icon.svgavatar.png作为网站图标和头像，此外还有两个文件夹intros和bg分别是链接页的图标和背景壁纸

同时也顺便发现了远古一个问题：链接页的站内图标原本是放在src/assets/intros/的，等等，怎么是intros不是links？不知道，可能是我当时脑抽了吧，结果一直以来没发现这个问题，直到把它移到config/intros也没发现，最近才刚发现我竟然认错了，不过我也懒得改了

侧边栏

这次的更新有一个侧边栏，为了简便和方便配置，我设置了特殊的class，于是就能在主页复用了，只需要一次在global.static.yaml中配置即可，即使它们在页面的位置并不一样

顺带一提，*.static.yaml新增了replace target，可以替换元素，这样方便在侧边栏底部按钮增加更多按钮，比如开往（友链接力）（我还夹带了私货偷偷引入了评论区和开往的图标）

介绍页的cd

这次介绍页的两个抽卡栏目加了个cd，防止你刷太快看不过来（坏

你会说，你不就是把按钮给禁用了吗？不不不，我还加了一层判断，你想的美

那怎么突破呢？

其实真的不难，但是我不告诉你（被你发现了，好吧，你看js就行了，全都在那里）

而这个延时有两个模式，一个是直接在配置文件输入数字，等待对应毫秒，一个是写js表达式，直接eval你，一般写个Math.random就行了，但是我加了个小彩蛋

顺带一提，*.static.yaml配置文件新增_others.eval可以给页面插入自定义代码

背景

不瞒您说，其实我最开始是想做可切换动态的，但是我发现制作壁纸太难了，尤其是动态壁纸，所以我没制作，所以我没做这个功能

我还想要在首页来个传感器或鼠标的背景倾斜互动但是因为懒得写没写

此外我遇到一个问题

我想在非首页设置透明度，要是用body background css的话不好搞，因为我还想要mdui background color

那就改用img元素，但是我又发现z-index有问题，背景会覆盖文字，但是我又不想改，就把z-index改成负的

然后发现body的background-color把它覆盖了，只能去掉body的背景颜色而使用div.bg-container代替了，也顺便实现了在非首页背景避开顶部导航栏的功能

生成背景图

这里所说我为我自己生成的那些背景图吧

有一点点想法就要开始反复轮流拷打Seedream/NanoBanana/GPT-Image-2

Seedream的风格我觉得不错，就是提示词遵循不太行，我先把即梦的额度给用完了，又把豆包的额度给用完了，最后跑到arena.ai玩

而使用Nano Banana 2就没有这种顾虑，因为Google Flow给的额度应该是无限的，可惜Pro有限额

最想用的是GPT-Image-2，可是你知道的，免费用户额度太**少了，为此我搜罗了一些公益站用，比如这个

arena.ai是个好东西，直接用，限额还不那么高，一开始还有gpt-iamge-2(medium)和NanoBanan Pro的，但是后来没了，太可恶了！后来我直接用Max（自动路由）生成，没写拒听用了什么模型，按时写了是谁家的，基本上都是OpenAI，偶尔会有Google和Grok

最开始生成的几张我很满意，毕竟是细细想过了的，后来开始急了，做得有些粗糙，尤其是gpt-image-2的画面问题，虽然内容上很好，但是画面上看起来会有亿点点碎渣感

由于发现有些图片太大了，动不动十几MB，这对网络很不友好，于是我用Caesium Image Compressor反复压缩图片使其控制在1MB左右

SEO

1. 简单地说，就是让ai改了几个插件多了几个meta标签
2. 添加了一个会乱动但是用户看不到摸不着的div.seo-part到介绍页和博客页，放上链接，以便抓取
3. 让写了个插件把sitemap用api推送给百度后台

国内的搜索引擎真不好搞，基本上都是要强制备案的，搜狗还没有sitemap抓取功能要我20个20个url填到网页上，百度的sitemap抓取还不对我们开放，还好给了api推送功能，但是最神奇的是神马（也就是夸克用的那个），使用html标签验证的时候要我关掉https才能验证网站所有权，可是我netlify是强制https的我关不掉

这又要提到netlify了，url是强制转换成小写是，说是提高缓存利用率，可又不给我开关，怕影响搜索引擎抓取于是加了个配置项使得sitemap中主域名的url可选地转换成纯小写格式

最后提一下友链持续接受提交申请哦，壁纸来源于我的OC项目，也接受壁纸投稿哦~

顺手链接一下L站帖子