赶在中秋国庆假期前,总算将我的网站(spacexcode.com)结构定好了,如之前所说,这个网站的定位便是作为自己的前端常识沉淀。内容大致从:前端涉及的基础常识分类汇总(常识库),实战类的代码演练(代码片段),特定技能的深度运用总结(专题),零星常识点的领会总结(博客)这四个方面打开。还有最重要的一点便是这个网站不仅仅是给自己看的,我期望它像一个产品,面向的是整个互联网受众,在学习上给大家一点点创意。

主页

主页就如同一个人的脸面,起到第一印象的作用。美观的页面足够引起他人的留意,简洁的外观而且要能突出整个网站的要点。

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

上线四个月,我的网站怎么样了?节前肝了一篇

别的,文字下面还有个夺目的查找框,为了避免进入网站就加载额定的查找资源,这里查找的完成是在别的的页面完成(spacexcode.com/search),不过它能够将你当时输入内容直接从 URL 带过去。这个查找功用做到了本地,尽管以牺牲初次加载时刻,但是后期的检索非常快。

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

常识库

常识库中包括了下面几个大的方面,下面又有各自的子节点文档,关于前端基础常识 JavaScript、CSS 和 NodeJs 下面常识网络该怎样打开现在还没想好,可能后面还要修正。假如网友有什么好的想法,能够评论区给我定见。

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

代码片段

正如我的介绍页说的“假如我只能给其他程序员一个主张,那便是编写小的代码块,你要多写小办法、小功用、小程序”。能够说这句话成了我现在学习新技能的指导方针。我自己从中现已获益,反复强调都不为过。

- 介绍
- 小功用            // 完成了一些常用的功用函数
- 小组件            // 网上看到一些风趣的、有启示含义的组件就用代码完成了
- 钩子函数(Hooks)  // Hooks 关于代码抽象能力的培养
- 小程序            // 挑选一些小型东西类的项目进行实战

小功用首要完成一些常用的功用函数,比方:“通过 a 标签下载文件”,“完成网页全屏”,”获取当时执行环境的全局对象”,“将 URL 中参数转成对象”;

小组件便是网上看到一些风趣的、有启示含义的组件我就立即用代码完成了,有一些现已在网站中运用了。

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

小程序作为实战的一次小考验,真实地去面临一个小型的东西型的项目去查验自己开发产品要面临的方方面面。有一定的挑战能力。但是同样收获不少。需要拓宽了解一些产品、推行营销方面的常识。

专题

针对自己比较感兴趣,并且想深化的技能和领域,将相关的常识收拾成册,有点类似掘金小册,假如打磨的好,能够作为线上课程。

- 介绍
- Docusaurus // 静态网站生成东西
- Next.js    // 现在比较盛行的全栈技能

Docusaurus 作为 Facebook 开源的静态网站生成东西,也是本站运用的技能方案,深度运用后,被它的强壮的功用和灵活性所信服。今后纯静态网站就选用它完成了,还要啥自行车啊!

假如网站要频繁与数据库打交道,那 Docusaurus 就力不从心了。这个时分就要挑选全栈技能了,假如是 React 的话就挑选 Next.js,熟悉 Vue 能够挑选 Nuxt 。 现在的精力暂时把这两个专题做好做精吧。

博客

博客就比较随意了,平时的创意都能够作为写作的体裁。从网站正式上线,现已了十几篇的产出了。频率一般以一个月更新两三篇。文风尽量轻松、诙谐诙谐一点,尽管这个现在还比较难,但是尽量往这方面努力靠吧。多从他人的写作办法中去学去练。

我发现国外的博主在文章中都喜欢刺进表情字符,这样显得文章比较生动可爱。现在我也刻意地去训练这一点,没写完一段话,就想这里能不能刺进一个合适的表情字符,为此我还特意搜集了看到的一些表情字符,做了收拾【网页特别表情和字符】(spacexcode.com/docs/collec…)。

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

总结

网站正式上线将近四五个月了,现已产出这么多的内容算得上高产了。截止此刻网站的访问统计:PV:27345UV:14861,期间也只在其它渠道发布的文章中略微推行了下。期望继续保持热情,将这个站点维护下去。

记:2023-09-28 16:08 周四