伴随着颈椎疼痛的困扰，此时的我不敢轻易扭动脖子，宛如一只梗着脖子的傻猫。好在个人博客网站基本搭建完毕，尽管下一个任务紧迫，但它没有任何盈利点。现在，只需简单总结一下，就能稍微松口气了。
个人博客网站功能设计
针对只发布某个人的文章的个人主页网站，以下是重新描述的产品功能设计：
炫酷展示：独特页面展示博客列表，包括标题和发布日期，可通过点击链接阅读完整内容。
分类与标签：文章分类和标签，助力读者按主题或关键词快速筛选和浏览感兴趣的内容。
神奇搜索：强大而快捷的模糊搜索功能，让读者迅速找到心仪文章，关键词轻松搜。
探秘联系：Github的联系方式隐藏在神秘角落，前往解锁更多关于开发者的信息。
响应式布局：兼容各设备，个人主页灵活展示在桌面、平板和手机，畅享极致用户体验。
数据剖析：揭示访问统计与分析报告，文章点击、来源追踪，读者行为一览无余。数据助力个人优化内容、领略读者趣味。
主题风格：提供浅色模式和暗黑模式，页面可一键换装或跟随系统。
为什么是Next.js和vercel？
首先是这样最简单，从基友的劳动成果中扒拉了整个技术架构。在此基础上，我又做了一些页面的功能的扩展，比如全文模糊搜索、继续阅读、文章目录等。【叉腰】
服务器渲染（SSR）可以给博客带来超棒的性能和超棒的SEO优化。它会让页面加载速度变得超快，还能让搜索引擎更好地抓取和索引博客内容。（但现在还不能搜到我的文章ε=(´ο｀*)))）
Vercel作为部署平台。它简单易用，超快速而且靠谱。最重要的是，它能跟Next.js完美结合，让我轻轻松松地将我的应用程序部署到全球分布式网络上。它还提供自动化的CI/CD流程，让我可以专注于撰写博客内容，而不用花费太多时间和精力在繁琐的部署和服务器配置上。
赞美基友！
UI设计的灵感来源
页面布局
首页的布局模仿nextjs框架的样本页，它本身拥有响应式布局。
首页的内容并不需要太多，所以保留了样本页的单屏设计，页面不需要滚动就能展示完整的内容。页面分为三个模块：顶部为面包屑按钮区，中间区域面积最大，突出博主猫奴本色，底部则包含了三个菜单，分别作为专栏文章和其他项目的链接入口。
对于专栏文章列表页的布局，首先需要考虑两个主要模块：专栏标题和描述，文章列表的标题和发布时间。在PC端，按2:3比例左右分栏，移动端按2:8比例上下分栏。顶部和首页类似有漂亮的手绘按钮点缀页面，还有一只正在认真工作的猫猫作为背景，增添趣味。
文章内容页的布局设计采用主流的设计，基本上在每个教程文档都能看见这样的布局方式。布局是类似的，但怎样才能做得好看点呢？如何用颜色+透明度、字号+行高的奇妙组合创造美的魔术？对于个人网站，这很大程度依赖于个人的审美喜好，以及最重要的、很容易被个人开发者忽略的一点：考虑读者的阅读体验。
关于颜色
浅色模式的颜色来源于我的=月白色的瓷碗，和瓷碗里的黄米汤圆。降低一点饱和度，调成目前主流的莫兰迪色系，给人一种温柔的感觉。我喜欢性格温和的人，希望自己也变得温柔一些。
深色模式中，很多网站都呈现出超棒的视觉效果，我个人最喜欢tailwind的配色。这种模式下的背景傻猫露出了其暗黑的一面，似乎正在谋划消灭人类，重建一个有吃不完的小鱼干和虾虾的新世界。
图标和图片
小图标采用阿里iconfont的手绘风格系列，给页面增添了一抹生动与活泼。
背景图由网图和两个手绘Icon图标巧妙拼合而成，似乎在讲述一个工作猫的故事。在图中，你可以看到一只憨憨的小猫专注地盯着电脑屏幕，右爪按住鼠标，而鼠标线的末端却连接着一个毛线团，给人一种不太聪明的印象。
问题和解决方案
- 浅色和深色模式转换的解决方案，哪个最方便快捷？
项目使用的组件库mantine提供了MantineProvider组件，可用于更改主题。
import { MantineProvider } from '@mantine/core';
function Demo() {
return (
<MantineProvider theme={{ fontFamily: 'Open Sans' }} withGlobalStyles>
<App />
</MantineProvider>
);
}theme属性可用来传递其它任意风格属性。withGlobalStyles 这个属性可以增加几个样式，其中一个就是深色模式的颜色和浅色模式的颜色。
但我并没有使用这个方案，原因有三：
杀鸡用牛刀既视感，theme提供了很多选项默认值，但除了颜色，其它用不上。 主题色色彩不够多，如果想要更多颜色，需要修改它的css变量。而tailwind的颜色选择范围更多，添加透明度也很方便。 相比于在js中修改样式，我更喜欢在css中完成同样的功能。
比如，使用tailwind，仅需在某个className加上前缀 dark:，比如dark:bg-slate-900, 表示bg-slate-900在深色模式下生效。具体如何使用可以参考tailwind官网，这里不做赘述。
- 老大难useEffect。
当需要使用useEffect监听事件时，有时候只想在组件 mounted 前执行某些操作，而不希望随着状态的变化而不停地更新。对于那个状态，我会创建一个ref值，就像是一块“不会变形的金属”。这样，我可以在useEffect中使用这个ref值作为判断依据，而不会受到状态的干扰。
然而，还有一种情况无法绕开。由Context上下文提供的value值 和 updateValue方法，updateValue需要在某个子组件的useEffect中监听事件而触发。
- Tailwind SVG 样式未生效
tailwind支持处理SVG图标的样式，比如你可以这样写一个svg的颜色：
<svg class="fill-blue-500 ..."> <!-- ... --> </svg>
<svg class="stroke-blue-500 ..."> <!-- ... --> </svg>可是，对于我下载的那些手绘图标，上述方法却不起作用，包括stroke属性也无效。我猜测可能与图标的path路径有关。脑海中浮现出一个解决方案：使用全局provider来传递主题色作为参数，并将其赋值给fill属性。但是，我实在太懒了，不想采用那么繁琐的方式，也不想依赖市面上已有的状态管理方案。
而fill属性接受的值是颜色，同样可以使用currentColor，它会继承最近祖先元素的颜色，类似于inherit的效果。当fill属性不存在或为空字符串时，默认会被填充为黑色。然而，这些手绘图标似乎并不理会tailwind针对svg的className属性，反而继承了更上一级的颜色。既然如此，那解决方案就是在引用这些图标的组件中指定颜色。
- position: sticky未按预期生效。 通常，我们知道，英文文档的中文翻译总有一些令人困惑的小问题。但这一次，是mdn的中文文档略胜一筹。例如，在stick相关文档中：
This value always creates a new stacking context. Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when
overflowishidden,scroll,auto, oroverlay), even if that ancestor isn't the nearest actually scrolling ancestor.
注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的
overflow是hidden、scroll、auto或overlay时），即便这个祖先不是最近的真实可滚动祖先。
中文文档明确多了这一句话：
这有效地抑制了任何“sticky”行为（详情见 Github issue on W3C CSSWG）。
如果不看这句话，中英文文档都会让人以为是要在overflow有这些值的时候才生效。然而事实却完全相反。在我去掉藏在 body 中的overflow-x:hidden后, sticky终于能按预期触发了。
以上。