双节前把我的网站重构了一遍

赶在中秋国庆假期前，终于将我的网站（https://spacexcode.com/^\[1\]^）结构定好了，如之前所说，这个网站的定位就是作为自己的前端知识沉淀。内容大致从：前端涉及的基础知识分类汇总（知识库），实战类的代码演练（代码片段），特定技术的深度使用总结（专题），零散知识点的领悟总结（博客）这四个方面展开。还有最重要的一点就是这个网站不仅仅是给自己看的，我希望它像一个产品，面向的是整个互联网受众，在学习上给大家一点点灵感。

首页

首页就如同一个人的脸面，起到第一印象的作用。好看的页面足够引起别人的注意，简洁的外观而且要能突出整个网站的重点。

首页往往是用户进入网站的第一道门槛，最重要的是轻、快、有亮点、有主题。所以我在 Banner 栏放置了网站的主题和描述，快速了解前端知识体系的一个快捷入口。相信进入该网站的大多是和我一样想学好前端的人，对于他们学习之前先了解知识体系是很有必要的。
spacexcode

另外，文字下面还有个醒目的搜索框，为了避免进入网站就加载额外的搜索资源，这里搜索的实现是在另外的页面实现（https://spacexcode.com/search^\[2\]^），不过它可以将你当前输入内容直接从 URL 带过去。这个搜索功能做到了本地，虽然以牺牲首次加载时间，但是后期的检索非常快。

为了能引起陌生访客的注意，在网站的中间部分加入了一个代码显示区域，并且以实时输入的动画形式展开。并且这段代码做了线上征集，它可以从现有的代码库中做了随机显示，有效地增加了网站的互动性。

知识库

知识库中包含了下面几个大的方面，下面又有各自的子节点文档，对于前端基础知识 JavaScript、CSS 和 NodeJs 下面知识网络该怎么展开目前还没想好，可能后面还要修改。如果网友有什么好的想法，可以评论区给我意见。

go 复制代码

- 介绍       // 概述了自己对前端的理解和学习路径图 
- JavaScript // 包含核心知识点和学习资源分享
- CSS        // 包含核心知识点和学习资源分享
- NodeJS     // 包含核心知识点和学习资源分享
- TypeScript // 包含核心知识点和学习资源分享
- Framework  // 核心概念讲解
- Vue        // 包含核心知识点、常见问题解决方案和学习资源分享
- React      // 包含核心知识点和学习资源分享、项目中常见问题
- 工程化      // 日常项目开发涉及的工程化处理
  - 代码规范
  - 常见安装包及命令
  - Shell 脚本编写指南
- 服务器      // 以自己目前管理的阿里云 CentOS 服务器为例
  - Linux 学习资料
  - Nginx Web 相关配置
- 整理合集    // 各种好玩的品类的收集
  - 前端 UI 组件库
  - 富文本和 Markdown 编辑器
  - 开源网页图标
  - 优质开源项目汇总
  - 静态网站生成技术
  - 网页特殊表情和字符
  - 项目脚手架 
- 在线演示
  - 用 CSS 实现树状视图
  - 用 CSS 实现的各种加载动画
  - A 标签有趣的样式
  - 导航栏透视背景设置
- 资源
  - 在线资源
  - 常用工具
  - AI 相关
  - 能力提升

代码片段

正如我的介绍页说的"如果我只能给其他程序员一个建议，那就是编写小的代码块，你要多写小方法、小功能、小程序"。可以说这句话成了我现在学习新技术的指导方针。我自己从中已经受益，反复强调都不为过。

go 复制代码

- 介绍
- 小功能            // 实现了一些常用的功能函数
- 小组件            // 网上看到一些有趣的、有启发意义的组件就用代码实现了
- 钩子函数（Hooks）  // Hooks 对于代码抽象能力的培养
- 小程序            // 选择一些小型工具类的项目进行实战

小功能主要实现一些常用的功能函数，比如："通过 a 标签下载文件"，"实现网页全屏"，"获取当前执行环境的全局对象"，"将 URL 中参数转成对象"；

小组件就是网上看到一些有趣的、有启发意义的组件我就立即用代码实现了，有一些已经在网站中使用了。

钩子函数也就是 Hooks，最近出来的概念，让函数组件具有了状态特性。

小程序作为实战的一次小考验，真正地去面对一个小型的工具型的项目去检验自己开发产品要面对的方方面面。有一定的挑战能力。但是同样收获不少。需要拓展了解一些产品、推广营销方面的知识。

专题

针对自己比较感兴趣，并且想深入的技术和领域，将相关的知识整理成册，有点类似掘金小册^[3]^，如果打磨的好，可以作为线上课程。

go 复制代码

- 介绍
- Docusaurus // 静态网站生成工具
- Next.js    // 目前比较流行的全栈技术

Docusaurus 作为 Facebook 开源的静态网站生成工具，也是本站使用的技术方案，深度使用后，被它的强大的功能和灵活性所折服。以后纯静态网站就选用它实现了，还要啥自行车啊！

如果网站要频繁与数据库打交道，那 Docusaurus 就无能为力了。这个时候就要选择全栈技术了，如果是 React 的话就选择 Next.js^[4]^，熟悉 Vue 可以选择Nuxt^[5]^ 。

目前的精力暂时把这两个专题做好做精吧。

博客

博客就比较随意了，平时的灵感都可以作为写作的题材。从网站正式上线，已经了十几篇的产出了。频率一般以一个月更新两三篇。文风尽量轻松、诙谐幽默一点，虽然这个目前还比较难，但是尽量往这方面努力靠吧。多从别人的写作方法中去学去练。

我发现国外的博主在文章中都喜欢插入表情字符，这样显得文章比较生动可爱。如今我也刻意地去锻炼这一点，没写完一段话，就想这里能不能插入一个合适的表情字符，为此我还特意收集了看到的一些表情字符，做了整理【网页特殊表情和字符^[6]^】。

还有一个重要的认识就是一篇文章尽量把相关的知识点做到串联起来，关联的文章之间相互引用。你所掌握的知识结构到最后一定是网状的。

总结

网站正式上线将近四五个月了，已经产出这么多的内容算得上高产了。截止此刻网站的访问统计：PV：27345，UV：14861，期间也只在其它平台发布的文章中稍微推广了下。希望持续保持热情，将这个站点维护下去。

参考资料

[1]

https://spacexcode.com/: https://spacexcode.com
[2]

https://spacexcode.com/search: https://spacexcode.com/search
[3]

掘金小册: https://juejin.cn/
[4]

Next.js: https://nextjs.org/
[5]

Nuxt: https://nuxt.com/
[6]

网页特殊表情和字符: https://spacexcode.com/docs/collection/charactor

END -