Vanilla JS → Next.js on Cloudflare 实验网站「Liberogic Office Green」

大家知道有一个叫「Office Green」的网站吗..?

我们发布的内容，包括企业网站在内，全部都是实验场地。（二俣先生的a11y应用除外！顺便说一下，这个网站还没有符合WCAG标准😭）

说起来，这一切始于5-6年前新冠时期，当时一位闲散的社长自己动手为办公室进行绿化DIY。（https://yurulog.liberogic.jp/posts/qx9nibr59）

最初的一个大胆想法@2023

需求

• 有一位客户想要开设联盟营销网站，既然如此，不如趁机做个小实验呢！（因为该客户后来放弃了，所以最终只成了一个实验）
• 能否在将模态框内展开的页面索引化的状态下，在没有实际页面的情况下通过亚马逊联盟资格认证呢？（既然办公室绿化时购买了很多物品，不如就用那些东西作为素材来制作呢！）
• 360°素材旋转展示这类工作平时还真不常接触。既然有现成的库而且看起来也不难，不如试试看呢！
• 既然利润什么的都不在乎，不如把实验和学习结合起来，做好了就直接公开吧！
• 我们公司网站就是客户的试验田，你明白吗？（❓）

入职不久后，我就被分配了以下这些需求。

实现工作从2023年02月开始，我将记录迄今为止的改进和内容添加的历程！
让 Liberogic Office Green 发光发热！☀️

技术栈

• Vanilla JS (ES Modules) — 无框架，通过 import/export 自行进行模块划分
• Pannellum - 360度全景查看器库（在本地以 pannellum/ 文件夹形式部署，采用自托管而非CDN）
• HTML / Sass - 标记和样式设计

外部API和服务

首先，该网站的核心功能是一个360°旋转画面内容。我们使用理光的"THETA SC2"相机来拍摄办公室。

这是拍摄的原始照片。

360° 的实现使用了 Pannellun 库。只需设置拍摄的图像，就能够 360° 环绕查看。

由于需要进行各种自定义，我下载了库本身而不是使用 CDN。

自定义

在介绍的商品旁放置"i"标记，用鼠标hover时，商品名称会在气泡中显示。

点击后会显示产品介绍模态框，并链接到 Amazon 关联链接。右下角的办公室平面图上显示一个星形标记，指示放置位置。

产品介绍不加滤镜，带上总裁的诚实评价！！

左上还有一个开关可以切换关灯后的视图，点击箭头还可以移动到社长的办公桌一侧！

为了让产品管理更方便编辑和修改，我们刻意选择用电子表格而不是 CMS 来管理。

原因是这样的，

「客户应该更希望运营起来简单轻松吧？试试用电子表格来协作吧！」

我们通过 fetch 电子表格的数据并将其填充到模态框中…。虽然完成了，

「这个网站太慢了～」

…………

API 是基于 Custom Hotspot 的源代码使用的。参考资料原本只是在任意位置放置标记，悬停时显示文本，但我们在原始基础上添加了很多自己的元素，比如弹出模态框或切换视图。

终于完成了！🎊
完成时真的开心得不停地在网站上转圈！

Amazon Associates

众所周知的 Amazon 产品联盟营销服务。

步骤如下。

• 网站内容是最新的（通常在60天内更新过的/能看出网站在正常运营的）
• 文章数量和内容在10篇以上
• 开始放置商品链接后，需在隐私政策页面刊登亚马逊关联账户的运营说明
• 注册后180天内需要有3件销售实绩（同一账户或家族成员不算）
• 输入的URL没有错误且网站能被确认

等等。

180天内完成3件销售实绩后就会开始审查，通过后就能在关联账户中获得报酬。

审查标准不予公开，即便提问也无法获得回答。看起来比其他联盟计划的审查要严格呢！

亚马逊关联账户也成功通过了㊗️
销售额的主力是我妈妈和公司老板的购物联盟网站诞生了💥

*注：家人购买不太合适...如果因为这个被 Amazon 联盟除名就抱歉了m(_ _;)m

目前销售额虽然增长缓慢，但看摘要和转化率的话还是挺有意思的呢！

下一步指令@2024

闲置了一段时间后，工作出现了空档。就在这个时候，新的指令来了...

需求

• 页面的索引优化不够彻底？
• 办公空间也加上吧
• 顺便把它改用 Next.js 重写怎么样？

又来强人所难了。

技术栈

我将Pannellum的js、css文件放在public中使用，但从npm导入好像是主流做法。
最近似乎出现了Next.js专用库，实现时要是有就好了，会方便得多。

同时也意识到了web无障碍访问的重要性，实现了键盘操作功能。

模态框通过在/item/{num}参数上实现，确保其被Google SEO索引，并使用Next.js的Parallel Routes功能将其作为单个页面进行计数。

从 CSR 改为 ISR 后，这样能改善 SEO 吗？

指令继续进行

需求

• 抱歉，因为安全问题被批评了，所以把办公室空间删除了！（完成：虽然好不容易才添加的，但已标记为禁用🈲。）
• 感觉太卡了....渲染有问题吧？（基本完成）
• 既然有LLM了，那么为什么不自动化一些东西呢？我想引入一些全新的概念！（现在的位置：什么意思？）
• 可以添加商品什么的~

经过多次不起眼的版本更新，如今已成为实验性附加收入网站 Liberogic office green！

我特别喜欢像小店铺一样的开场画面中的彩带效果和公司负责人插图弹窗！像这样的小改进，我有时会在闲暇时随意添加一些"这样的话会不会很有趣呢！"的想法。这个产品可能还会继续进化下去！

总结？

最初用 Vanilla JS 开发时，我大部分是自己实现的。但随着不断修订，函数的嵌套变得越来越复杂。要是在重做 Next.js 的那个时期就有现在这样发达的 AI 就好了，可能会轻松很多。不过正是因为这样，我积累了不少知识，现在能够做到"在理解的基础上利用 AI"吧。

这是我个人很喜欢的网站，大家觉得怎么样？

欢迎来办公室转一圈，看一看吧！