组件库

拾码的一些界面积木。

让文章更好读，也让页面保持一致。

导航栏 (Navigation)

从这里找到文章、分类和作者介绍，当前位置用深色文字标记。

文章卡片 (Article Card)

把分类、时间和摘要放在一起，快速了解一篇笔记在讲什么。

TypeScript2026-09-255 min

TypeScript 类型收窄入门

使用 typeof 和条件判断缩小联合类型的范围，让后续代码更安全。

React2026-09-186 min

React 受控表单：从一个输入框开始

用一个简单的姓名输入框，理解 value、onChange 与 React state 之间的关系。

标签与徽章 (Badge)

给分类、技术和状态提供轻量的标记。

文章分类 / OUTLINE

React TypeScript 页面与样式

技术标签 / STANDARD

JavaScriptCSSVite

状态标记 / PRIMARY

全部New

按钮 (Button)

页面跳转和列表展开，按操作的重要程度使用不同样式。

浏览文章关于作者返回首页

代码块 (Code Block)

文件名、语法高亮和一键复制，让代码更容易读，也方便动手试。

Note.tsx

type NoteProps = {
  title: string
}

export function Note({ title }: NoteProps) {
  return (
    <article>
      <h2>{title}</h2>
    </article>
  )
}

页脚 (Footer)

为每一页放上简单的落款和常用入口。