伴随着颈椎痛苦的困扰，此刻的我不敢轻易扭动脖子，宛如一只梗着脖子的傻猫。好在个人博客网站基本搭建结束，虽然下一个使命急迫，但它没有任何盈利点。现在，只需简单总结一下，就能略微松口气了。

个人博客网站功用规划

炫酷展现：共同页面展现博客列表，包含标题和发布日期，可通过点击链接阅览完好内容。

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

奇特搜索：强壮而便利的模糊搜索功用，让读者迅速找到心仪文章，关键词轻松搜。

探秘联络：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官网，这里不做赘述。

  1. 老大难useEffect。

当需求运用useEffect监听事件时，有时候只想在组件 mounted 前执行某些操作，而不期望随着状况的变化而不停地更新。关于那个状况，我会创立一个ref值，就像是一块“不会变形的金属”。这样，我能够在useEffect中运用这个ref值作为判别依据，而不会受到状况的干扰。

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

  1. 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特点，反而承继了更上一级的色彩。既然如此，那解决方案便是在引证这些图标的组件中指定色彩。

  1. sticky不粘了。
    一般，咱们知道，英文文档的中文翻译总有一些令人困惑的小问题。但这一次，是mdn的中文文档略胜一筹。例如，在stick相关文档中：

This value always creates a newstacking context. Note that a sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created whenoverflowishidden,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总算能按预期触发了。

以上。