从零开始搭建个人网站

伴随着颈椎疼痛的困扰，此时的我不敢轻易扭动脖子，宛如一只梗着脖子的傻猫。好在个人博客网站基本搭建完毕，尽管下一个任务紧迫，但它没有任何盈利点。现在，只需简单总结一下，就能稍微松口气了。

个人博客网站功能设计

炫酷展示：独特页面展示博客列表，包括标题和发布日期，可通过点击链接阅读完整内容。

分类与标签：文章分类和标签，助力读者按主题或关键词快速筛选和浏览感兴趣的内容。

神奇搜索：强大而快捷的模糊搜索功能，让读者迅速找到心仪文章，关键词轻松搜。

探秘联系：Github的联系方式隐藏在神秘角落，前往解锁更多关于开发者的信息。

响应式布局：兼容各设备，个人主页灵活展示在桌面、平板和手机，畅享极致用户体验。

数据剖析：揭示访问统计与分析报告，文章点击、来源追踪，读者行为一览无余。数据助力个人优化内容、领略读者趣味。

主题风格：提供浅色模式和暗黑模式，页面可一键换装或跟随系统。

为什么是Next.js和vercel？

首先是这样最简单，从基友的劳动成果中扒拉了整个技术架构。在此基础上，我又做了一些页面的功能的扩展，比如全文模糊搜索、继续阅读、文章目录等。【叉腰】

服务器渲染（SSR）可以给博客带来超棒的性能和超棒的SEO优化。它会让页面加载速度变得超快，还能让搜索引擎更好地抓取和索引博客内容。（但现在还不能搜到我的文章ε=(´ο｀*)))）

Vercel作为部署平台。它简单易用，超快速而且靠谱。最重要的是，它能跟Next.js完美结合，让我轻轻松松地将我的应用程序部署到全球分布式网络上。它还提供自动化的CI/CD流程，让我可以专注于撰写博客内容，而不用花费太多时间和精力在繁琐的部署和服务器配置上。

赞美基友！

UI设计的灵感来源

页面布局

首页的布局模仿nextjs框架的样本页，它本身拥有响应式布局。

首页的内容并不需要太多，所以保留了样本页的单屏设计，页面不需要滚动就能展示完整的内容。页面分为三个模块：顶部为面包屑按钮区，中间区域面积最大，突出博主猫奴本色，底部则包含了三个菜单，分别作为专栏文章和其他项目的链接入口。

对于专栏文章列表页的布局，首先需要考虑两个主要模块：专栏标题和描述，文章列表的标题和发布时间。在PC端，按2:3比例左右分栏，移动端按2:8比例上下分栏。顶部和首页类似有漂亮的手绘按钮点缀页面，还有一只正在认真工作的猫猫作为背景，增添趣味。

文章内容页的布局设计采用主流的设计，基本上在每个教程文档都能看见这样的布局方式。布局是类似的，但怎样才能做得好看点呢？如何用颜色+透明度、字号+行高的奇妙组合创造美的魔术？对于个人网站，这很大程度依赖于个人的审美喜好，以及最重要的、很容易被个人开发者忽略的一点：考虑读者的阅读体验。

关于颜色

浅色模式的颜色来源于我的=月白色的瓷碗，和瓷碗里的黄米汤圆。降低一点饱和度，调成目前主流的莫兰迪色系，给人一种温柔的感觉。我喜欢性格温和的人，希望自己也变得温柔一些。

深色模式中，很多网站都呈现出超棒的视觉效果，我个人最喜欢tailwind的配色。这种模式下的背景傻猫露出了其暗黑的一面，似乎正在谋划消灭人类，重建一个有吃不完的小鱼干和虾虾的新世界。

图标和图片

小图标采用阿里iconfont的手绘风格系列，给页面增添了一抹生动与活泼。

背景图由网图和两个手绘Icon图标巧妙拼合而成，似乎在讲述一个工作猫的故事。在图中，你可以看到一只憨憨的小猫专注地盯着电脑屏幕，右爪按住鼠标，而鼠标线的末端却连接着一个毛线团，给人一种不太聪明的印象。

问题和解决方案

1. 浅色和深色模式转换的解决方案，哪个最方便快捷？

项目使用的组件库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官网，这里不做赘述。

2. 老大难useEffect。

当需要使用useEffect监听事件时，有时候只想在组件 mounted 前执行某些操作，而不希望随着状态的变化而不停地更新。对于那个状态，我会创建一个ref值，就像是一块“不会变形的金属”。这样，我可以在useEffect中使用这个ref值作为判断依据，而不会受到状态的干扰。

然而，还有一种情况无法绕开。由Context上下文提供的value值 和 updateValue方法，updateValue需要在某个子组件的useEffect中监听事件而触发。

3. 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属性，反而继承了更上一级的颜色。既然如此，那解决方案就是在引用这些图标的组件中指定颜色。

4. 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 overflow is hidden, scroll, auto, or overlay), 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终于能按预期触发了。

5. 模糊查询算法和匹配文本标记

前文提到，贴心而又温柔的笔者为网站提供了搜索功能。搜索功能的界面和常见开发文档的Spotlight看起来基本上一样，不同的是细节的模糊查询功能。

一个具备模糊查询的Spotlight看起来像这样：

(好吧，截图的时候又发现自己漏了个细节，搜索文章内容节选的前后省略号。烦)

关于模糊查询算法，可以看这里探秘Fuse.js：模糊查询算法的学习笔记，这里不做赘述。

而匹配文本颜色标记，这个功能需要自己来实现，大致需求是，找出最佳匹配的文章内容节选展示在Spotlight的搜索结果列表里。解析md文档，去掉那些不想要的md文档标记符号，再循环找出最佳匹配区间作为节选内容，节选内容不超过30个字。

以上。