在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

yangshun/tech-interview-handbook

菜单

内容结构

相关源文件

目的与范围

本文档概述了 Tech Interview Handbook 仓库内的内容组织方式。它涵盖了内容架构、文件组织以及使用 Docusaurus 构建的文档网站的导航结构。理解内容结构对于希望在仓库中添加或修改内容的贡献者至关重要。

有关 Portal Application 架构的信息，请参阅 Portal Application Architecture。

来源：README.md21-37 apps/website/docusaurus.config.js1-213 apps/website/sidebars.js1-119

整体内容组织

Tech Interview Handbook 的内容主要被组织成一个使用 Docusaurus 构建的文档网站，其中包含技术面试准备的教育资源。内容遵循一种结构化的方法，指导用户完成从准备到薪资谈判的整个面试过程。

内容层级图

来源：apps/website/sidebars.js1-119 apps/website/docusaurus.config.js77-102

内容文件组织

Tech Interview Handbook 的内容主要以 Markdown 文件形式存储在仓库中。这些文件按照特定的目录结构进行组织，该结构与网站的导航相对应。

文件结构图

来源：apps/website/contents/resume.md1-421 apps/website/contents/system-design.md1-70 apps/website/src/pages/index.js1-848

内容类别和类型

Tech Interview Handbook 中的内容按几个主要类别组织，每个类别在技术面试准备过程中都有特定的目的。

主要内容类别

类别目的关键内容文件
介绍关于手册的概述以及如何使用它software-engineering-interview-guide.md
简历准备关于创建有效简历的指导resume.md
编码面试编码面试的准备资源coding-interview-prep.md, coding-interview-cheatsheet.md
系统设计系统设计面试资源system-design.md
行为面试行为面试技巧behavioral-interview.md, behavioral-interview-questions.md
算法常见算法的参考资料algorithms/*.md
职业发展职业晋升资源career-growth.md

来源：README.md26-35 apps/website/sidebars.js1-119 apps/website/contents/career-growth.md1-67

内容渲染和显示

Tech Interview Handbook 使用 Docusaurus 将 Markdown 内容转换为结构化的网站。渲染过程涉及几个关键组件，将原始内容转化为用户友好的界面。

内容渲染流程

来源：apps/website/docusaurus.config.js1-213 apps/website/src/theme/DocItem/Content/index.js1-59 apps/website/src/css/custom.css1-188

渲染中的关键组件

  1. DocItem Component：渲染每个文档页面的主要内容

    • 添加 GitHub 点赞按钮
    • 添加作者简介
    • 渲染 Markdown 内容

  2. SidebarAd Component：根据当前页面显示上下文相关的广告

    • 为不同内容部分提供不同的广告
    • 在广告类型之间随机轮播

  3. Custom CSS：提供 Tech Interview Handbook 的特定样式

    • 字体定义
    • 配色方案
    • 不同标题级别的字体样式

来源：apps/website/src/theme/DocItem/Content/index.js1-59 apps/website/src/components/SidebarAd/index.js1-204 apps/website/src/components/SidebarAd/styles.module.css1-84

Markdown 内容格式

Tech Interview Handbook 中的内容遵循一致的 Markdown 文件结构

标准内容文件结构

---
id: [unique-identifier]
title: [page-title]
description: [page-description]
keywords: [SEO-keywords]
sidebar_label: [sidebar-text]
---

[Content body with Markdown formatting]

frontmatter（位于 --- 标记之间）提供了页面的元数据，包括：

  • id：用于路由的唯一标识符
  • title：在浏览器中显示的页面标题
  • description：用于 SEO 的元描述
  • keywords：SEO 关键词
  • sidebar_label：在侧边栏中显示的文本

来源：apps/website/contents/system-design.md1-15 apps/website/contents/resume.md1-16 apps/website/contents/mock-interviews.md1-17

侧边栏导航定义在 sidebars.js 文件中，该文件将内容组织成逻辑类别，并创建了在网站上可见的导航层级。

侧边栏被配置为一个 JSON 对象，包含类别和项目

每个类别可以包含

  • 单独的文档项目（通过 ID 引用）
  • 嵌套的子类别及其项目
  • 配置选项，如 collapsible

来源： apps/website/sidebars.js1-119

特殊内容组件

《技术面试宝典》包含一些增强文档的特殊内容组件。

文档内组件

  1. InDocAd：在文档内容中插入上下文广告。

    • 用法示例：先导入 import InDocAd from './\_components/InDocAd';，然后是 <InDocAd />。

  2. 信息提示框：突出显示重要信息。

    • 示例：使用 :::info 块进行标注。
    • 示例：使用 :::tip 块提供专家提示。

  3. 图片和图表：带有说明文字的视觉组件。

    • 在具有特定样式的 div 元素中使用。

来源： apps/website/contents/resume.md22-23 apps/website/contents/resume.md96 apps/website/contents/resume.md40-53

内容更新流程

《技术面试宝典》的内容会定期更新以保持其时效性。更新流程包括：

  1. 内容创建/修改：添加或修改 Markdown 文件。
  2. 侧边栏更新：如果添加新页面，则更新侧边栏配置。
  3. 构建与部署：构建更改并将其部署到网站。

对于贡献者来说，理解内容结构对于确保新内容能够与现有文档无缝集成至关重要。

来源： README.md99-101 README.md37-38

总结

《技术面试宝典》的内容结构旨在为技术面试准备提供全面、易于导航的资源。其组织方式遵循从初步准备到各种面试类型再到面试后流程的逻辑顺序。内容以 Markdown 文件形式存储，通过 Docusaurus 渲染，并通过结构化的侧边栏进行组织，便于导航。

理解这种内容结构对于浏览手册的用户和希望改进现有内容的贡献者都非常重要。