每年的金三銀四，都將迎來求職面試的一個高峰期，為什麼會有那麼多的求職需求？
多是因為以下幾個來源：
已拿 offer 等年終獎的：年前已經找到機會，領了年終獎辭職要到新公司報到的臨時起意要辭及裸辭的：考慮到領了年終獎再走，節後裸辭或者迅速找到工作機會，完成辭職的因職業發展而辭職的：節後發現老闆沒有提拔自己到目標職位，自己發展受阻，離職尋找新工作工作計劃新誕生的職位：許多企業因決策流程長，常在年後確定來年工作計劃，包含新業務的新職位公司人才盤點後的 backup：許多公司不喜歡年底裁人，會在來年春天把與職位不匹配的人員解除勞動合同，會做好備份如果是因為以上任意一個想跳槽的，趕緊準備起來了。
把前端知識做一個整體的回顧，疑難困惑點及時查漏補缺，這樣才能從容面對接下來的面試。
根據以往面試的經歷，結合網友的分享，常見的面試題經常覆蓋這樣幾個方面：
JavaScript、CSS、React / Vue、Node等基礎知識前端工具篇（常用Git命令或者自動化工具的使用等）於是我將網站進行了以下的設計：
根據分類對應到頂部導航欄如下
首頁是品牌意識的一個介紹（https://spacexcode.com/）
點擊中間按鈕，進入引導頁（https://spacexcode.com/guide/）
左側導航和頂部導航一致，默認二級菜單展開狀態。右邊內容區域可編寫一些自己的詳細信息，引導關注類或者網站總體內容的概述。
每個分類知識通過二級三級標題索引展開
下面簡單講解下如何通過 vuepress 程序實現這樣一個站點，源碼目錄如下：
src：//網站根目錄
├─.vuepress //程序主目錄
│ ├─components //組件代碼目錄
│ ├─dist //打包生成代碼目錄
│ ├─public //和主題相關靜態資源
│ ├─styles //主題樣式代碼
│ ├─components //組件代碼目錄
│ ├─config.js //配置文件
│ ├─enhanceApp.js //應用級別的配置
├─assets //網站靜態資源目錄
├─concept //概念詳解目錄
│ ├─README.md //目錄主頁
├─css //CSS目錄
│ ├─README.md //目錄主頁
├─electron //Electron目錄
│ ├─README.md //目錄主頁
├─css //CSS目錄
│ ├─README.md //目錄主頁
├─guide //引導頁
│ ├─README.md //目錄主頁
├─javascript //javascript目錄
│ ├─README.md //目錄主頁
├─node //node目錄
│ ├─README.md //目錄主頁
├─performance //performance目錄
│ ├─README.md //目錄主頁
├─principle //principle目錄
│ ├─README.md //目錄主頁
├─problem //problem目錄
│ ├─README.md //目錄主頁
├─react //react目錄
│ ├─README.md //目錄主頁
├─source //source目錄
│ ├─README.md //目錄主頁
├─tool //開發工具目錄
│ ├─git.md //Git命令
│ ├─github.md //Github技巧
├─vue //vue目錄
│ ├─README.md //目錄主頁
├─index.md //主頁
├─package.json詳細配置 src/.vuepress/config.js
module.exports = {
/**
* Ref：https://v1.vuepress.vuejs.org/config/#title
*/
title: '太空編程',
/**
* Ref：https://v1.vuepress.vuejs.org/config/#description
*/
description: description,
/**
* Extra tags to be injected to the page HTML `<head>`
*
* ref：https://v1.vuepress.vuejs.org/config/#head
*/
head: [
['meta', { name: 'theme-color', content: '#3eaf7c' }],
['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
['link', { rel: 'shortcut icon', type: "image/x-icon", href: '/favicon.ico' }]
],
/**
* Theme configuration, here is the default theme configuration for VuePress.
*
* ref：https://v1.vuepress.vuejs.org/theme/default-theme-config.html
*/
themeConfig: {
logo: '/logo.png',
repo: '',
editLinks: false,
docsDir: '',
editLinkText: '',
lastUpdated: false,
nav: [
{
text: 'JavaScript',
link: '/javascript/'
},
{
text: 'CSS',
link: '/css/'
},
//
{
text: '疑難雜症',
link: '/problem/'
},
{
text: '手寫源碼',
link: '/source/'
},
{
text: '開發工具',
items: [
{
text: 'Git命令',
link: '/tool/git'
},
// .
]
},
{
text: '聯繫',
ariaLabel: '更多聯繫',
items: [
{
text: 'Github',
link: 'https://www.github.com/fantingsheng'
},
// ...
{
text: '開發筆記',
link: 'http://wiki.i-fanr.com'
}
]
}
],
sidebar: [
{
title: 'JavaScript', // 必要的
path: '/javascript/', // 可選的, 標題的跳轉連結，應為絕對路徑且必須存在
collapsable: false, // 可選的, 默認值是 true
},
{
title: 'CSS', // 必要的
path: '/css/', // 可選的, 標題的跳轉連結，應為絕對路徑且必須存在
collapsable: false, // 可選的, 默認值是 true
},
// .
{
title: '手寫源碼', // 必要的
path: '/source/', // 可選的, 標題的跳轉連結，應為絕對路徑且必須存在
collapsable: false, // 可選的, 默認值是 true
},
{
title: '開發工具', // 必要的
path: '/tool/', // 可選的, 標題的跳轉連結，應為絕對路徑且必須存在
collapsable: false, // 可選的, 默認值是 true,
children: [
'/tool/git',
'/tool/github',
'/tool/web',
'/tool/run'
]
}
]
},
/**
* Apply plugins，ref：https://v1.vuepress.vuejs.org/zh/plugin/
*/
plugins: [
'@vuepress/plugin-back-to-top',
'@vuepress/plugin-medium-zoom',
'image'
]
}左側菜單除了引導頁面採用自定義，其它頁面均通過配置 sidebar: auto 以標題索引呈現
---
sidebar: auto
---我們都知道知識需要結構化。平時的總結和記憶都是碎片化的，要做到由點到面，需要採用合理的分類將知識串聯起來形成大綱。
通過分類，把平時遇到的問題和總結記錄下來，形成自己的沉澱。
在面試前就有了一份自己的知識回顧清單。這比看網上的任何一份面試題大全都有用，更重要的是記憶會更加深刻。
雖然「面試造火箭，工作擰螺絲」，但是及時地梳理加深自己的專業知識是每個技術人都應該時刻謹記的。有了這份態度，才不至於在突如其來的面試面前手忙腳亂。
Respect !
分享精彩，碼上快樂。JavaScript已然上天，有朝一日實現太空編程！回復【pdf】更有海量的優質電子書供下載。
spacexcode