主要步骤

• 添加站点地图 sitemap.xml文件和搜索机器人文件robots.txt
• 提交站点到搜索引擎(百度和谷歌)
• hexo针对搜索的优化

添加站点地图

添加站点地图 sitemap.xml

1. 添加hexo插件

   1 2	npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save

2. 修改_config.yml配置

1
2
3
4

sitemap: 
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

搜索机器人文件robots.txt

在source目录下新建robots.txt文件，文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /tags/ 
Allow: /resources/ 
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: https://hoxis.github.io/sitemap.xml
Sitemap: https://hoxis.github.io/baidusitemap.xml

主要以下几方面去收集？

• 八股文，主要针对理论基础知识
• 框架类，主要针对React/Vue等
• 编程题，主要针对各种常用方法进行手动编写
• 算法题，主要是各类算法题进行汇总

简介

由于在面试经常会遇到问题null，undefined，NaN之间的区别，因此想要深入且系统了解一下这些代表空之间的区别，以及它们底层的原理——原型链，同时还要搞明白__proto__和prototype分别是什么。

为了更好系统的理解null，undefined，NaN之间的区别和关系，我们需要从Javascript语言设计底层去理解，为什么一个空值需要设计这么多个。为什么不能像Java，一个null就可以满足？

我们先简单认识三者：

• undefined 表示原始值undefined。它是一个 JavaScript 的 原始数据类型
• null 特指对象的值未设置。它是 JavaScript 基本类型 之一。
• NaN 是一个表示非数字的值

接下来主要从以下两个点去认识null，undefined，NaN之间的区别和关系：

• 数据类型 typeof
• === 判断
• 原型 prototype

背景

最近从网上看到一个有趣的CSS应用，就是纯用CSS也能是父子树展示，具体效果如下：

• 目录节点1

  • 节点1

    • 子节点1-1
    • 子节点1-2
  • 节点2

    • 子节点2-1
    • 子节点2-2

然后里面关联到一篇新闻，就是:has伪元素的出现会给CSS带来极大的变动，这是为什么，不就是一个CSS伪元素吗？因此去了解一下，才发现这个伪元素确实不一样，主要有以下几点：

• 可以选择父级元素， a:has(> img)，包含img元素的a元素
• 可以选择兄弟元素， h1:has(+ p)，后面为p元素的h1元素

为什么有了它之后，CSS会有大变动，因为以往我们的样式都是直接选择 元素 或者 子元素 或者 后面的元素，如果要选择父元素或前面的元素只能通过命名规范去确定，比如上述两个例子：

• a:has(> img)，我们只能通过a.has-img类似样式去命名
• h1:has(+ p)，只能通过h1.next-p类似样式去命名

大概清楚它能带来的变化，接下来我们来详细了解一下它。

背景

之前研究过一篇《移动端适配总结》，里面主要通过布局不变，改变布局组件元素的大小去适应移动端。但是这种方式对于PC端或者Pad等大屏幕并不适合，所以从想找找看是否有新的方案能否满足跨端自适应布局方式。

目前同时解决PC端和移动端的响应式布局的解决方案以下几种：

• 通过@media媒体查询去设置不同尺寸的样式
• 通过Flexbox Grid等现代化布局去做响应式布局

介绍

当hexo的文章越来越多，依靠标题和tag去搜索有点不够用，因此需要支持搜索功能，hexo查询主要依赖本地索引文件生成，具体步骤如下：

• 安装插件: npm install --save hexo-generator-search
• 根目录下的_config.yml中添加如下配置即可

背景

从上一篇《从egg.js转到nest.js》，想对其再深入了解一下，尤其比较好奇Typescript是如何实现IoC和DI，因为在Java的是通过的反射(Spring IoC实现原理)去创建对应的类。因此下文将详细讲解Nest.js中IoC和DI的实现原理。

前置知识

在了解实现原理之前有几个知识概念，需要了解一下：

• IoC和DI
• JavaScript的Reflect
• TypeScript的装饰器

Deprank js重要性排名

一个 JS 工具，按照重要性对本项目的所有脚本进行排序。原理是计算依赖关系，被依赖最多的脚本最重要。

官网：Deprank

例子如下：

1
2
3
4
5
6
7
8
9

| Filename               | Lines | Dependents | PageRank |
----------------------------------------------------------
| fixtures/core.js       | 3     | 1          | 0.284098 |
| fixtures/utils.js      | 4     | 3          | 0.268437 |
| fixtures/user/user.js  | 4     | 1          | 0.132253 |
| fixtures/todo.js       | 6     | 1          | 0.089796 |
| fixtures/user/index.js | 1     | 1          | 0.089796 |
| fixtures/concepts.js   | 4     | 1          | 0.079694 |
| fixtures/index.js      | 4     | 0          | 0.055926 |

背景

自从组内开发架构采用Monorepo大仓项目后，了解一些Monorepo的常用技术，主要采用了lerna框架去做多个子项目统一package.json命令脚本，因此想要了解一下lerna框架，同时也查到lerna的公司同步开发Nx项目，尝试一下它的应用。

想了解Monorepo大仓项目如何设计的可以翻到前往阅读 《从npm版本依赖到Monorepo大仓项目》。

背景

自从React16版本更新了Hook用法，同时引入了新的Fiber架构去重构整个渲染和事件处理过程，React团队引入Hook是为了更好剥离业务代码，让开发能更加友好的抽象代码，达到低耦合的函数组件目的，那么重构Diff算法，引入Fiber架构是为了什么呢？ 其实只是为了能够一个目标快速响应，原先Diff算法时间复杂度为$$ O(n^3)$$ ，最后经过Fiber重构达到了$$ O(n) $$，这里面具体有什么门道，值得我们去深入研究一下。