欢迎各位网友,来到我亲手打造的网站!
这个网站是我从零开始、以项目为导向,边学边制作的成果。
作为一个编程新手,我从7月27日开始学习编程,每天的业余时间有限(通常3到9小时)。在前28天里,我重做并完善了 iOS 版和 Apple Watch 版的「随机提示音」。而这个月,开始尝试制作这个网站。
开发网站的编程语言与 iOS 完全不同,但我通过搜索引擎、各大开放平台、各路大神的技术博客以及 AI 工具,一步步将它打造成现在的样子。大多数代码都是完全原创的,我还添加了各种互动元素和(或许没那么必要的)细节。
由于能力和时间有限,很多功能目前还未完善。加上,在细节方面投入了太多精力,导致整体进度有些缓慢——例如,这个网站在手机、电脑和平板上的页面布局都有所不同,还有不少小互动。制作过程中,我常常过度沉溺于自己的作品中,我只能安慰自己说,这是我学习编程并打发时间的个人项目。
(如果你要创业之类的,千万别学我。大多数人应该尽快拼凑出4个能跑的轮子,做个能用的项目就能快点上线。)
在设计上,我参考了大量优秀平台,同时融入了自己的创意:
- 最新视频:
- 画面比例和左上角标识参考了 B 站。
- 桌面端采用 16:9 比例
- 移动端则为 4:3
- 在桌面端,鼠标移动到封面上方,会悬浮出几个平台的播放按钮(这是我自己的想法);
- 移动端由于手机屏幕小,就改为点击弹出气泡,避免视觉干扰。
- 画面比例和左上角标识参考了 B 站。
- 文章详情部分:
- 文章列表参考了知乎和传统博客的风格;
- 文章详情页面的布局,模仿了开源的 Halo 框架,并添加了面包屑导航栏等小细节;
- 分享按钮支持一键分享到 8 个主流平台;
- 文章正文部分的字体大小、字重、间距、行间距、缩进、项目符号等,是我自己一点点调的(现在还没有调好,例如段落和项目之间的间隔太大了,但调太久了导致审美疲劳,我现在完全看不出美丑,所以要过段时间再来调了)
- 工具与 APP:主体框架由 AI 生成,我在此基础上添加了鼠标悬浮在卡片上显示“更多详情”的交互。
- 商品详情:参考了桌面端的淘宝(它让我想到,无论用户怎么滑动页面,购买按钮都应该始终保持在视野内),但整体布局主要还是我自己设计的,力求简洁实用。
除了上述设计外,为了确保用户的数据安全:网站的账户管理对接腾讯的CloudBase,注册用户的敏感信息完全存储在腾讯云上,不用担心被破解(用户密码之类的,作为网站管理员都是不能看的)。
为了提升页面的访问速度:网站采用了SSG(Static Site Generation,静态站点生成)技术。传统动态加载方式(打开页面 → 内容加载中 → 显示内容),而这个网站在后台发布或修改文章后,服务器会预先生成静态页面,用户只需点击链接,就能直接访问到完整的内容。
在 SEO(让各大搜索引擎上面,更容易搜索到网站相关内容)方面,也做了一些基础优化:各个页面都添加了合适的元标签(如标题、描述和关键词),优化了 URL 结构,,便于各大搜索引擎发现新页面,提高网站的可见度,让更多人通过搜索找到这里。当然,作为初学者,我还在学习中,未来会进一步完善这些方面。
现在,网站每天都在更新。相信过段时间,就能够正式运行了。