关于本站
「墨 · 码」是一个专注于 Web 开发的个人博客,用来记录学习与开发过程中的探索、思考和总结。

建站初衷
对我来说,写作也是学习的一部分。把学到的知识重新梳理,并通过自己的方式表达出来,不仅能够加深理解,也能让原本零散的知识逐渐形成体系。因此,我一直希望有一个属于自己的空间,用来记录学习与开发过程中的思考与实践。
选择自己搭建博客,更多是出于对“自由”的追求。相比第三方平台,自建站点在内容呈现和功能实现上拥有更多自由。对于前端开发者而言,博客本身也可以成为一件不断打磨的作品,无论是视觉设计、交互体验还是功能实现,都可以按照自己的想法进行调整。
在寻找合适的博客风格时,我尝试过不少优秀的 Astro 主题,例如: Astro Wind、Bit Doze、ThoughtLite、Astro Rocket 等。它们各有特点,但用得久了,我总会忍不住尝试新的风格与设计。这个过程难免耗费时间,却也乐在其中。
后来,我发现了 Quiet Pages。它极简、克制,将更多的注意力留给内容本身,这恰好符合我对博客的设想。于是,我决定以它为基础进行二次开发,在保留简约风格的同时,逐步融入自己的设计。
与此同时,我也将过去散落在不同平台中的文章陆续迁移到这里。今后,我会继续更新内容,并根据自己的想法不断完善站点的设计。
视觉设计
相比复杂华丽的视觉效果,我更倾向于简洁、克制的设计风格,将更多的精力放在阅读体验与交互细节上。整个站点尽可能减少不必要的视觉干扰,让内容本身成为页面的重点。
为了让页面不显得过于单调,我引入了 Rough Notation,在部分标题与重点内容中加入手绘标注效果,为页面增添一些轻微的视觉点缀。
同时,本站也提供了一些外观自定义选项,访客可以根据自己的喜好调整页面,目前支持:
- 明暗主题切换
- 主题配色切换
- 首页背景切换
- 背景纹理切换
- 界面字体切换
页面过渡
除了视觉设计,我也比较关注页面切换时的连贯性。
本站使用 Astro 的 ClientRouter 实现客户端导航与页面过渡。相比传统的整页刷新,页面之间的切换更加平滑、连贯,也让站点拥有更接近单页面应用的浏览体验。
内容归档
随着文章逐渐增多,仅依靠分页或时间轴浏览,很难直观地了解过去的内容与更新情况。相比传统的线性排列,日历以网格的方式组织文章,让更新频率与时间分布更加直观,也能从另一个角度呈现博客的写作轨迹。
为此,本站提供了年视图、月视图与列表视图三种 归档 方式:
- 年视图用于回顾全年的文章分布与更新节奏
- 月视图用于查看每个月的文章与更新情况
- 列表视图按照时间顺序展示文章,适合逐篇浏览与回顾
数据统计
除了通过归档页面回顾文章,本站也加入了简单的阅读统计与数据分析功能,用来记录文章的阅读情况,并从不同维度了解站点内容的变化。
在 数据统计 页面中,文章相关数据会通过 ECharts 进行可视化展示,将原本分散的统计信息转换为更加直观的图表。目前主要用于展示文章数量、阅读数据、分类与标签分布等信息,也可以从整体上观察博客内容随时间的积累与变化。
评论交流
本站评论系统基于 Giscus 构建,评论数据存储于 GitHub Discussions,无需额外维护数据库。为了让 评论区 与站点整体风格保持一致,我没有使用 Giscus 的默认主题,而是重新设计了评论样式。
除了评论区,本站还在 联系页面 提供了邮件发送功能。该功能基于 Resend 实现,访客可以直接通过站内表单发送邮件,无需跳转至第三方邮箱客户端。
如果文章中存在错误或遗漏,或者你有更好的想法与实现方式,欢迎在评论区交流讨论。
关于性能
相比传统的动态博客系统,我更倾向于静态优先的实现方式。本站基于 Astro 构建,大部分页面在构建阶段生成静态 HTML,减少运行时不必要的计算与资源开销。
对于需要客户端交互的部分,Astro 采用 Islands Architecture(群岛架构),仅为需要交互的组件加载相应的客户端 JavaScript,而无需让整个页面都运行在客户端,从而在保留交互能力的同时减少不必要的脚本加载。
部署方面,站点运行于 Cloudflare Workers,并借助 Cloudflare 的全球网络进行内容分发,以改善不同网络环境下的访问体验。
版权声明
本站使用的字体、图片与纹理等资源来自开源项目或第三方资源服务,相关资源的版权与许可归原作者所有,具体说明如下:
- 字体资源来自 ZeoSeven Fonts
- 首页 Hero 背景图来源于 Lorem Picsum
- 背景纹理来源于 Transparent Textures
- 文章封面图默认由 AI 工具生成;开启“文章随机封面”后,部分封面可能临时替换为由 Lorem Picsum 按请求提供的随机图片
本站尊重相关资源的版权与使用许可。如有资源存在版权问题或不适宜使用的情况,欢迎 联系我,我会及时核实并处理。
技术栈
本站主要使用以下技术构建,在保证阅读体验的同时,也尽可能追求页面性能与访问速度。
- Astro、React
- TypeScript
- Tailwind CSS
- Lenis
- Rough Notation
- Giscus
- Resend
- ECharts
- Leaflet
- Cloudflare Workers
未来计划
目前还有许多想法正在逐步实现:
- 完善主题与外观系统
- 构建文章关系图谱
- 完善数据统计
- 丰富页面交互
- 持续优化性能
这个站点不会刻意追求文章的内容数量,而是希望持续积累真正有价值的内容。如果某篇文章恰好帮助到了你,那么这个博客就已经实现了它存在的意义。
感谢你的到来,也欢迎以后常来看看。
