趁着周末，搭建了一下 NightTeam 的官方博客和官方主页，耗时数个小时，两个站点终于完工了。 由于 NightTeam 的域名是 nightteam.cn，所以这里官方博客使用了二级域名 blog.nightteam.cn，官方主页使用了根域名 nightteam.cn，现在两个站点都已经稳定运行在 GitHub Pages 上面了，大家如果感兴趣可以去看一下。
- NightTeam HomePage：https://nightteam.cn/
- NightTeam Blog: https://blog.nightteam.cn/
这里的主页就是用一个基本的静态页面搭建了，没有什么技术含量。博客相对复杂一点，使用了 Hexo 框架，采用了 Next 主题，在搭建的过程中我就顺手把搭建的流程大致记录下来了，在这里扩充一下形成一篇记录，毕竟好记性不如烂笔头。 
于是，这篇《利用 GitHub 从零开始搭建一个博客》的文章就诞生了。
准备条件
在这里先跟大家说一些准备条件，有些同学可能一听到搭建博客就望而却步。弄个博客网站，不得有台服务器吗？不得搞数据库吗？不得注册域名吗？没事，如果都没有，那照样是能搭建一个博客的。 GitHub 是个好东西啊，它提供了 GitHub Pages 帮助我们来架设一个静态网站，这就解决了服务器的问题。 Hexo 这个博客框架没有那么重量级，它是 MarkDown 直接写文章的，然后 Hexo 可以直接将文章编译成静态网页文件并发布，所以这样文章的内容、标题、标签等信息就没必要存数据库里面了，是直接纯静态页面了，这就解决了数据库的问题。 GitHub Pages 允许每个账户创建一个名为 {username}.github.io 的仓库，另外它还会自动为这个仓库分配一个 github.io 的二级域名，这就解决了域名的问题，当然如果想要自定义域名的话，也可以支持。 所以说，基本上，先注册个 GitHub 账号就能搞了，下面我们来正式开始吧。
新建项目
首先在 GitHub 新建一个仓库（Repository），名称为 {username}.github.io，注意这个名比较特殊，必须要是 github.io 为后缀结尾的。比如 NightTeam 的 GitHub 用户名就叫 NightTeam，那我就新建一个 nightteam.github.io，新建完成之后就可以进行后续操作了。 另外如果 GitHub 没有配置 SSH 连接的建议配置一下，这样后面在部署博客的时候会更方便。
安装环境
安装 Node.js
首先在自己的电脑上安装 Node.js，下载地址：https://nodejs.org/zh-cn/download/，可以安装 Stable 版本。 安装完毕之后，确保环境变量配置好，能正常使用 npm 命令。
安装 Hexo
接下来就需要安装 Hexo 了，这是一个博客框架，Hexo 官方还提供了一个命令行工具，用于快速创建项目、页面、编译、部署 Hexo 博客，所以在这之前我们需要先安装 Hexo 的命令行工具。 命令如下：
1 |
npm install -g hexo-cli |
安装完毕之后，确保环境变量配置好，能正常使用 hexo 命令。
初始化项目
接下来我们使用 Hexo 的命令行创建一个项目，并将其在本地跑起来，整体跑通看看。 首先使用如下命令创建项目：
1 |
hexo init {name} |
这里的 name 就是项目名，我这里要创建 NightTeam 的博客，我就把项目取名为 nightteam 了，用了纯小写，命令如下：
1 |
hexo init nightteam |
这样 nightteam 文件夹下就会出现 Hexo 的初始化文件，包括 themes、scaffolds、source 等文件夹，这些内容暂且先不用管是做什么的，我们先知道有什么，然后一步步走下去看看都发生了什么变化。 接下来我们首先进入新生成的文件夹里面，然后调用 Hexo 的 generate 命令，将 Hexo 编译生成 HTML 代码，命令如下：
1 |
hexo generate |
可以看到输出结果里面包含了 js、css、font 等内容，并发现他们都处在了项目根目录下的 public 文件夹下面了。 然后我们利用 Hexo 提供的 server 命令把博客在本地运行起来，命令如下：
1 |
hexo server |
运行之后命令行输出如下：
1 |
INFO Start processing |
它告诉我们在本地 4000 端口上就可以查看博客站点了，如图所示： 
这样一个博客的架子就出来了，我们只用了三个命令就完成了。
部署
接下来我们来将这个初始化的博客进行一下部署，放到 GitHub Pages 上面验证一下其可用性。成功之后我们可以再进行后续的修改，比如修改主题、修改页面配置等等。 那么怎么把这个页面部署到 GitHub Pages 上面呢，其实 Hexo 已经给我们提供一个命令，利用它我们可以直接将博客一键部署，不需要手动去配置服务器或进行其他的各项配置。 部署命令如下：
1 |
hexo deploy |
在部署之前，我们需要先知道博客的部署地址，它需要对应 GitHub 的一个 Repository 的地址，这个信息需要我们来配置一下。 打开根目录下的 _config.yml 文件，找到 Deployment 这个地方，把刚才新建的 Repository 的地址贴过来，然后指定分支为 master 分支，最终修改为如下内容：
1 |
|
我的就修改为如下内容：
1 |
|
另外我们还需要额外安装一个支持 Git 的部署插件，名字叫做 hexo-deployer-git，有了它我们才可以顺利将其部署到 GitHub 上面，如果不安装的话，在执行部署命令时会报如下错误：
1 |
Deployer not found: git |
好，那就让我们安装下这个插件，在项目目录下执行安装命令如下：
1 |
npm install hexo-deployer-git --save |
安装成功之后，执行部署命令：
1 |
hexo deploy |
运行结果类似如下：
1 |
INFO Deploying: git |
如果出现类似上面的内容，就证明我们的博客已经成功部署到 GitHub Pages 上面了，这时候我们访问一下 GitHub Repository 同名的链接，比如我的 NightTeam 博客的 Repository 名称取的是 nightteam.github.io，那我就访问 http://nightteam.github.io，这时候我们就可以看到跟本地一模一样的博客内容了。 
这时候我们去 GitHub 上面看看 Hexo 上传了什么内容，打开之后可以看到 master 分支有了这样的内容： 
仔细看看，这实际上是博客文件夹下面的 public 文件夹下的所有内容，Hexo 把编译之后的静态页面内容上传到 GitHub 的 master 分支上面去了。 这时候可能就有人有疑问了，那我博客的源码也想放到 GitHub 上面怎么办呢？其实很简单，新建一个其他的分支就好了，比如我这边就新建了一个 source 分支，代表博客源码的意思。 具体的添加过程就很简单了，参加如下命令：
1 |
git init |
成功之后，可以到 GitHub 上再切换下默认分支，比如我就把默认的分支设置为了 source，当然不换也可以。
配置站点信息
完成如上内容之后，实际上我们只完成了博客搭建的一小步，因为我们仅仅是把初始化的页面部署成功了，博客里面还没有设置任何有效的信息。下面就让我们来进行一下博客的基本配置，另外换一个好看的主题，配置一些其他的内容，让博客真正变成属于我们自己的博客吧。 下面我就以自己的站点 NightTeam 为例，修改一些基本的配置，比如站点名、站点描述等等。 修改根目录下的 _config.yml 文件，找到 Site 区域，这里面可以配置站点标题 title、副标题 subtitle 等内容、关键字 keywords 等内容，比如我的就修改为如下内容：
1 |
|
这里大家可以参照格式把内容改成自己的。 另外还可以设置一下语言，如果要设置为汉语的话可以将 language 的字段设置为 zh-CN，修改如下：
1 |
language: zh-CN |
这样就完成了站点基本信息的配置，完成之后可以看到一些基本信息就修改过来了，页面效果如下： 
修改主题
目前来看，整个页面的样式个人感觉并不是那么好看，想换一个风格，这就涉及到主题的配置了。目前 Hexo 里面应用最多的主题基本就是 Next 主题了，个人感觉这个主题还是挺好看的，另外它支持的插件和功能也极为丰富，配置了这个主题，我们的博客可以支持更多的扩展功能，比如阅览进度条、中英文空格排版、图片懒加载等等。 那么首先就让我们来安装下 Next 这个主题吧，目前 Next 主题已经更新到 7.x 版本了，我们可以直接到 Next 主题的 GitHub Repository 上把这个主题下载下来。 主题的 GitHub 地址是：https://github.com/theme-next/hexo-theme-next，我们可以直接把 master 分支 Clone 下来。 首先命令行进入到项目的根目录，执行如下命令即可：
1 |
git clone https://github.com/theme-next/hexo-theme-next themes/next |
执行完毕之后 Next 主题的源码就会出现在项目的 themes/next 文件夹下。 然后我们需要修改下博客所用的主题名称，修改项目根目录下的 _config.yml 文件，找到 theme 字段，修改为 next 即可，修改如下：
1 |
theme: next |
然后本地重新开启服务，访问刷新下页面，就可以看到 next 主题就切换成功了，预览效果如下： 
主题配置
现在我们已经成功切换到 next 主题上面了，接下来我们就对主题进行进一步地详细配置吧，比如修改样式、增加其他各项功能的支持，下面逐项道来。 Next 主题内部也提供了一个配置文件，名字同样叫做 _config.yml，只不过位置不一样，它在 themes/next 文件夹下，Next 主题里面所有的功能都可以通过这个配置文件来控制，下文所述的内容都是修改的 themes/next/_config.yml 文件。
样式
Next 主题还提供了多种样式，风格都是类似黑白的搭配，但整个布局位置不太一样，通过修改配置文件的 scheme 字段即可，我选了 Pisces 样式，修改 _config.yml （注意是 themes/next/_config.yml 文件）如下：
1 |
scheme: Pisces |
刷新页面之后就会变成这种样式，如图所示： 
另外还有几个可选项，比如：
1 |
|
大家可以自行根据喜好选择。
favicon
favicon 就是站点标签栏的小图标，默认是用的 Hexo 的小图标，如果我们有站点 Logo 的图片的话，我们可以自己定制小图标。 但这并不意味着我们需要自己用 PS 自己来设计，已经有一个网站可以直接将图片转化为站点小图标，站点链接为：https://realfavicongenerator.net，到这里上传一张图，便可以直接打包下载各种尺寸和适配不同设备的小图标。 图标下载下来之后把它放在 themes/next/source/images 目录下面。 然后在配置文件里面找到 favicon 配置项，把一些相关路径配置进去即可，示例如下：
1 |
favicon: |
配置完成之后刷新页面，整个页面的标签图标就被更新了。
avatar
avatar 这个就类似站点的头像，如果设置了这个，会在站点的作者信息旁边额外显示一个头像，比如我这边有一张 avatar.png 图片： 
将其放置到 themes/next/source/images/avatar.png 路径，然后在主题 _config.yml 文件下编辑 avatar 的配置，修改为正确的路径即可。
1 |
# Sidebar Avatar |
这里有 rounded 选项是是否显示圆形，rotated 是是否带有旋转效果，大家可以根据喜好选择是否开启。 效果如下： 
配置完成之后就会显示头像。
rss
博客一般是需要 RSS 订阅的，如果要开启 RSS 订阅，这里需要安装一个插件，叫做 hexo-generator-feed，安装完成之后，站点会自动生成 RSS Feed 文件，安装命令如下：
1 |
npm install hexo-generator-feed --save |
在项目根目录下运行这个命令，安装完成之后不需要其他的配置，以后每次编译生成站点的时候就会自动生成 RSS Feed 文件了。
code
作为程序猿，代码块的显示还是需要很讲究的，默认的代码块我个人不是特别喜欢，因此我把代码的颜色修改为黑色，并把复制按钮的样式修改为类似 Mac 的样式，修改 _config.yml 文件的 codeblock 区块如下：
1 |
codeblock: |
修改前的代码样式： 
修改后的代码样式： 
嗯，个人觉得整体看起来逼格高了不少。
top
我们在浏览网页的时候，如果已经看完了想快速返回到网站的上端，一般都是有一个按钮来辅助的，这里也支持它的配置，修改 _config.yml 的 back2top 字段即可，我的设置如下：
1 |
back2top: |
enable 默认为 true，即默认显示。sidebar 如果设置为 true，按钮会出现在侧栏下方，个人觉得并不是很好看，就取消了，scrollpercent 就是显示阅读百分比，个人觉得还不错，就将其设置为 true。 具体的效果大家可以设置后根据喜好选择。
reading_process
reading_process，阅读进度。大家可能注意到有些站点的最上侧会出现一个细细的进度条，代表页面加载进度和阅读进度，如果大家想设置的话也可以试试，我将其打开了，修改 _config.yml 如下：
1 |
reading_progress: |
设置之后显示效果如下： 
bookmark
书签，可以根据阅读历史记录，在下次打开页面的时候快速帮助我们定位到上次的位置，大家可以根据喜好开启和关闭，我的配置如下：
1 |
bookmark: |
github_banner
在一些技术博客上，大家可能注意到在页面的右上角有个 GitHub 图标，点击之后可以跳转到其源码页面，可以为 GitHub Repository 引流，大家如果想显示的话可以自行选择打开，我的配置如下：
1 |
# `Follow me on GitHub` banner in the top-right corner. |
记得修改下链接 permalink 和标题 title，显示效果如下： 
可以看到在页面右上角显示了 GitHub 的图标，点击可以进去到 Repository 页面。
gitalk
由于 Hexo 的博客是静态博客，而且也没有连接数据库的功能，所以它的评论功能是不能自行集成的，但可以集成第三方的服务。 Next 主题里面提供了多种评论插件的集成，有 changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte 这些。 作为一名程序员，我个人比较喜欢 gitalk，它是利用 GitHub 的 Issue 来当评论，样式也比较不错。 首先需要在 GitHub 上面注册一个 OAuth Application，链接为：https://github.com/settings/applications/new，注册完毕之后拿到 Client ID、Client Secret 就可以了。 首先需要在 _config.yml 文件的 comments 区域配置使用 gitalk：
1 |
# Multiple Comment System Support |
主要是 comments.active 字段选择对应的名称即可。 然后找打 gitalk 配置，添加它的各项配置：
1 |
# Gitalk |
配置完成之后 gitalk 就可以使用了，点击进入文章页面，就会出现如下页面： 
GitHub 授权登录之后就可以使用了，评论的内容会自动出现在 Issue 里面。
pangu
我个人有个强迫症，那就是写中文和英文的时候中间必须要留有间距，一个简单直接的方法就是中间加个空格，但某些情况下可能习惯性不加或者忘记加了，这就导致中英文混排并不是那么美观。 pangu 就是来解决这个问题的，我们只需要在主题里面开启这个选项，在编译生成页面的时候，中英文之间就会自动添加空格，看起来更加美观。 具体的修改如下：
1 |
pangu: true |
math
可能在一些情况下我们需要写一个公式，比如演示一个算法推导过程，MarkDown 是支持公式显示的，Hexo 的 Next 主题同样是支持的。 Next 主题提供了两个渲染引擎，分别是 mathjax 和 katex，后者相对前者来说渲染速度更快，而且不需要 JavaScript 的额外支持，但后者支持的功能现在还不如前者丰富，具体的对比可以看官方文档：https://theme-next.org/docs/third-party-services/math-equations。 所以我这里选择了 mathjax，通过修改配置即可启用：
1 |
math: |
mathjax 的使用需要我们额外安装一个插件，叫做 hexo-renderer-kramed，另外也可以安装 hexo-renderer-pandoc，命令如下：
1 |
npm un hexo-renderer-marked --save |
另外还有其他的插件支持，大家可以到官方文档查看。
pjax
可能大家听说过 Ajax，没听说过 pjax，这个技术实际上就是利用 Ajax 技术实现了局部页面刷新，既可以实现 URL 的更换，有可以做到无刷新加载。 要开启这个功能需要先将 pjax 功能开启，然后安装对应的 pjax 依赖库，首先修改 _config.yml 修改如下：
1 |
pjax: true |
然后安装依赖库，切换到 next 主题下，然后安装依赖库：
1 |
$ cd themes/next |
这样 pjax 就开启了，页面就可以实现无刷新加载了。 另外关于 Next 主题的设置还有挺多的，这里就介绍到这里了，更多的主题设置大家可以参考官方文档：https://theme-next.org/docs/。
文章
现在整个站点只有一篇文章，那么我们怎样来增加其他的文章呢？ 这个很简单，只需要调用 Hexo 提供的命令即可，比如我们要新建一篇「HelloWorld」的文章，命令如下：
1 |
hexo new hello-world |
创建的文章会出现在 source/_posts 文件夹下，是 MarkDown 格式。 在文章开头通过如下格式添加必要信息：
1 |
\--- |
开头下方撰写正文，MarkDown 格式书写即可。 这样在下次编译的时候就会自动识别标题、时间、类别等等，另外还有其他的一些参数设置，可以参考文档：https://hexo.io/zh-cn/docs/writing.html。
标签页
现在我们的博客只有首页、文章页，如果我们想要增加标签页，可以自行添加，这里 Hexo 也给我们提供了这个功能，在根目录执行命令如下：
1 |
hexo new page tags |
执行这个命令之后会自动帮我们生成一个 source/tags/index.md 文件，内容就只有这样子的：
1 |
\--- |
我们可以自行添加一个 type 字段来指定页面的类型：
1 |
type: tags |
然后再在主题的 _config.yml 文件将这个页面的链接添加到主菜单里面，修改 menu 字段如下：
1 |
menu: |
这样重新本地启动看下页面状态，效果如下： 
可以看到左侧导航也出现了标签，点击之后右侧会显示标签的列表。
分类页
分类功能和标签类似，一个文章可以对应某个分类，如果要增加分类页面可以使用如下命令创建：
1 |
hexo new page categories |
然后同样地，会生成一个 source/categories/index.md 文件。 我们可以自行添加一个 type 字段来指定页面的类型：
1 |
type: categories |
然后再在主题的 _config.yml 文件将这个页面的链接添加到主菜单里面，修改 menu 字段如下：
1 |
menu: |
这样页面就会增加分类的支持，效果如下： 
搜索页
很多情况下我们需要搜索全站的内容，所以一个搜索功能的支持也是很有必要的。 如果要添加搜索的支持，需要先安装一个插件，叫做 hexo-generator-searchdb，命令如下：
1 |
npm install hexo-generator-searchdb --save |
然后在项目的 _config.yml 里面添加搜索设置如下：
1 |
search: |
然后在主题的 _config.yml 里面修改如下：
1 |
# Local search |
这里用的是 Local Search，如果想启用其他是 Search Service 的话可以参考官方文档：https://theme-next.org/docs/third-party-services/search-services。
404 页面
另外还需要添加一个 404 页面，直接在根目录 source 文件夹新建一个 404.md 文件即可，内容可以仿照如下：
1 |
\--- |
这里面的一些相关信息和链接可以替换成自己的。 增加了这个 404 页面之后就可以 完成了上面的配置基本就完成了大半了，其实 Hexo 还有很多很多功能，这里就介绍不过来了，大家可以直接参考官方文档：https://hexo.io/zh-cn/docs/ 查看更多的配置。
部署脚本
最后我这边还增加了一个简易版的部署脚本，其实就是重新 gererate 下文件，然后重新部署。在根目录下新建一个 deploy.sh 的脚本文件，内容如下：
1 |
hexo clean |
这样我们在部署发布的时候只需要执行：
1 |
sh deploy.sh |
就可以完成博客的更新了，非常简单。
自定义域名
将页面修改之后可以用上面的脚本重新部署下博客，其内容便会跟着更新。 另外我们也可以在 GitHub 的 Repository 里面设置域名，找到 Settings，拉到下面，可以看到有个 GitHub Pages 的配置项，如图所示： 
下面有个 custom domain 的选项，输入你想自定义的域名地址，然后添加 CNAME 解析就好了。 另外下面还有一个 Enforce HTTPS 的选项，GitHub Pages 会在我们配置自定义域名之后自动帮我们配置 HTTPS 服务。刚配置完自定义域名的时候可能这个选项是不可用的，一段时间后等到其可以勾选了，直接勾选即可，这样整个博客就会变成 HTTPS 的协议的了。 另外有一个值得注意的地方，如果配置了自定义域名，在目前的情况下，每次部署的时候这个自定义域名的设置是会被自动清除的。所以为了避免这个情况，我们需要在项目目录下面新建一个 CNAME 文件，路径为 source/CNAME，内容就是自定义域名。 比如我就在 source 目录下新建了一个 CNAME 文件，内容为：
1 |
blog.nightteam.cn |
这样避免了每次部署的时候自定义域名被清除的情况了。 以上就是从零搭建一个 Hexo 博客的流程，希望对大家有帮助。
这时候，我想到了一个东西——Docker，它可以用来解决这个问题！ 因为 Docker 容器被创建后，不管外界的网卡有多少个，容器内部的网卡都只会有一个Docker自己的虚拟网卡（容器间通信用的）和一个本地环回接口（不用管它），而且我们在容器内进行拨号操作时，产生的那个新的虚拟网卡也不会影响到外界或其他容器，这样的话，代理服务器就不需要指定网卡了，直接启动就能跑！ 那么现在整个流程就跑通了，进入实际操作环节看看吧！
可以看到，如前文所述，现在有三个网卡，一个是 Docker 自己的、一个是本地环回接口（这个不用管）、一个是拨号产生的虚拟网卡。
文章在某个位置会渐变隐藏，同时浮现一个公众号的样子，需要扫码才能解锁。这时候读者扫码自动关注了公号，博客文章也自然而然地解锁，这样博客的读者就自然关注到公号上面来了。
好，既然隐藏了，那么下面就加个提示吧，把公众号的二维码先放上，然后把那个 Session ID 放上，提示用户关注公众号后发送这个 ID 就能解锁了，但这个 ID 又不能太长，多少呢？六位吧那就。 类似做成这样的样子： 
好，那么这个 ID 怎么获取的呢？ 刚才说了，从 Cookies 里面获取就行了，找那个能够标识 Session ID 的一个 Cookies 字段，然后摘取其值的其中几位就行了，摘取的位置也有讲究，前几位仿佛重复率很高的样子，后面几位几乎不重复，那就截取最后六位数字吧。 好，然后我就在博客里面加了这么一点 JavaScript 代码来实现这个 ID 的提取：
然后关注了公号，发送了代码： 
发送完毕之后，大约一两秒之后，抬头看看博客，就是这个样子了： 
这已经就完成了解锁和转化，读者可以全站永久解锁我的博客文章，我也增长了粉丝。 现在过一段时间就会有读者发来代码解锁，同时成为了我的粉丝，订阅号助手看到消息如下： 
以上便是这个博客转化的思路分享和实现，大家也可以到我的博客体验一下，谢谢！
我们的目的就是它的正文、标题等内容。下面我们用 Readability 试一下，示例如下：
下面用一个实例来感受一下：
看看运行结果：
视频换脸技术大家应该早有耳闻，但这个软件有点意思，它抓住了几个点使得它一炮而红。 第一是这个软件的效果确实不错，我拿自己也做了实验，发现确实它渲染的一些结果几乎毫无违和感，毕竟这个软件核心拼的就是技术。 第二这个软件贴近于日常生活，我们可以把自己的照片上传，让我们真正成为视频里的主角。另外视频选材很有讲究，都是一些剪辑过的明星精彩镜头，这样我们生成的视频镜头会让我们有变成明星的感觉，非常有代入感。
一般来说一张脸会用 68 个点来标记出来，每识别的模型接收一张人脸图像，输出这 68 个点的坐标，这样我们就可以实现人脸定位了。 现在现成的模型也很多了，比如 dlib，opencv 等开源工具包可以直接拿来使用了，如果要更精准地话可以使用更复杂的卷积神经网络模型来实现，大家可以了解下相关论文。
这时候我自然而然想到，既然用的是 3D 结构光摄像头，那么如果用了 3D 打印技术把一个人的肖像打印出来，或者用一个非常逼真的蜡像来进行刷脸识别，能不能通过呢？我看了一些报道，发现不少案例的确通过了刷脸测试，比如解开了 iPhone 面部识别锁等等。但要通过 3D 打印技术来模拟一个人的肖像成本还是蛮高的，所以基本上也不太会有人来搞这些。 如果对此还心有余悸的话，支付宝还回应称，即便是真的被盗刷了，支付宝也会通过保险公司进行全额赔付。 所以基本上是不用担心其安全性的，尤其是 Zao 这个软件的出现是没有对刷脸支付的风险造成大的影响的，其就是增加了一个活体视频模拟的实现，对刷脸支付的安全性没有出现大的突破性威胁。
我们通过几个例子来看看 MySQL 与 MongoDB 的差异。 与 MySQL 数据库不同的是，MongoDB 不需要预先定义表和字段，这正是它灵活性的体现。MongoDB 可以拥有多个数据库，每个数据库可以拥有多个集合，每个集合可以存储多份文档，这种关系与 SQL 数据库中的“数据库、表、数据”相当。下图描述了 MongoDB 中数据库、集合和文档的关系： 
数据库 
描述节主点掉线，重新选举主节点的图 
如果你觉得有学习 MongoDB 的需要，且这篇文章规划的内容是你想要的内容，那么请长按下方图片识别二维码，前往订阅文章吧！ 
图 9-5 讯代理官网 有多种类别的代理可供选购，摘抄其官网的各类别代理介绍如下：
图 9-6 提取页面 比如在这里我的提取 API 为：
图 9-7 提取结果 接下来我们要做的就是解析这个 Json，然后将其放入我们的代理池中。 当然如果信赖讯代理的话也可以不做代理池筛选，直接使用，不过我个人还是推荐再使用代理池筛选一遍，提高可用几率。 根据上一节代理池的写法，我们只需要在 Crawler 中再加入一个 crawl 开头的方法即可。 方法实现如下：
图 9-8 阿布云官网 阿布云的代理主要分为两种，专业版和动态版，另外还有定制版，摘抄官网的介绍如下：
图 9-9 阿布云代理后台 可以发现整个代理的连接域名为 proxy.abuyun.com，端口为 9020，均是固定的，但是使用之后每次的 IP 都会更改，这其实就是利用了代理隧道实现。 其官网原理介绍如下：
图 9-1 代理池架构 代理池分为四个部分，获取模块、存储模块、检测模块、接口模块。
图 9-2 运行结果 以上是代理池的控制台输出，可以看到可用代理设置为 100，不可用代理分数减 1。 接下来我们再打开浏览器，当前配置了运行在 5555 端口，所以打开：
图 9-3 首页页面 再访问：
图 9-4 获取代理页面 所以后面我们只需要访问此接口即可获取一个随机可用代理，非常方便。 获取代理的代码如下：
图 8-24 验证码示例 鼠标滑动后的轨迹会以黄色的连线来标识，如图 8-25 所示： 
图 8-25 滑动过程 我们可以访问新浪微博移动版登录页面就可以看到如上验证码，链接为：
图 8-26 C 型 
图 8-27 Z 型 
图 8-28 X 型 而同时我们发现同一种类型它的连线轨迹是相同的，唯一不同的就是连线的方向，如图 8-29、8-30 所示： 
图 8-29 反向连线 
图 8-30 正向连线 这两种验证码的连线轨迹是相同的，但是由于连线上面的指示箭头不同导致滑动的宫格顺序就有所不同。 所以要完全识别滑动宫格顺序的话就需要具体识别出箭头的朝向，而观察一下整个验证码箭头朝向一共可能有 8 种，而且会出现在不同的位置，如果要写一个箭头方向识别算法的话需要都考虑到不同箭头所在的位置，我们需要找出各个位置的箭头的像素点坐标，同时识别算法还需要计算其像素点变化规律，这个工作量就变得比较大。 这时我们可以考虑用模板匹配的方法，模板匹配的意思就是将一些识别目标提前保存下来并做好标记，称作模板，在这里我们就可以获取验证码图片并做好拖动顺序的标记当做模板。在匹配的时候来对比要新识别的目标和每一个模板哪个是匹配的，如果找到匹配的模板，则被匹配到的模板就和新识别的目标是相同的，这样就成功识别出了要新识别的目标了。模板匹配在图像识别中也是非常常用的一种方法，实现简单而且易用性好。 模板匹配方法如果要效果好的话，我们必须要收集到足够多的模板才可以，而对于微博宫格验证码来说，宫格就 4 个，验证码的样式最多就是 4 3 2 * 1 = 24 种，所以我们可以直接将所有模板都收集下来。 所以接下来我们需要考虑的就是用何种模板来进行匹配，是只匹配箭头还是匹配整个验证码全图呢？我们来权衡一下这两种方式的匹配精度和工作量：
图 8-31 获取结果 在这里我们只需要挑选出不同的 24 张验证码图片并命名保存就好了，名称可以直接取作宫格的滑动的顺序，如某张验证码图片如图 8-32 所示： 
图 8-32 验证码示例 我们将其命名为 4132.png 即可，也就是代表滑动顺序为 4-1-3-2，按照这样的规则，我们将验证码整理为如下 24 张图，如图 8-33 所示： 
图 8-33 整理结果 如上的 24 张图就是我们的模板，接下来我们在识别的时候只需要遍历模板进行匹配即可。
图 8-34 运行效果 鼠标会慢慢的从起始位置移动到终止位置，最后一个宫格松开之后便完成了验证码的识别。 至此，微博宫格验证码的识别就全部完成了。 识别完成之后验证码窗口会自动关闭，接下来直接点击登录按钮即可完成微博登录。
图 8-18 12306 验证码 我们需要直接点击图中符合要求的图，如果所有答案均正确才会验证成功，如果有一个答案错误，验证就会失败，这种验证码就可以称之为点触验证码。 另外还有一个专门提供点触验证码服务的站点，叫做 TouClick，其官方网站为：
图 8-19 验证码样式 和 12306 站点有相似之处，不过这次是点击图片中的文字，不是图片了，另外还有各种形形色色的点触验证码，其交互形式可能略有不同，但基本原理都是类似的。 接下来我们就来统一实现一下此类点触验证码的识别过程。
图 8-20 12306 验证码 如点击图中所有的漏斗，“漏斗”二字其实都经过变形、放缩、模糊处理了，如果要借助于前面我们讲的 OCR 技术来识别，识别的精准度会大打折扣，甚至得不到任何结果。第二点是图像的识别，我们需要将图像重新转化文字，可以借助于各种识图接口，可经我测试识别正确结果的准确率非常低，经常会出现匹配不正确或匹配不出结果的情况，而且图片本身的的清晰度也不够，所以识别难度会更大，更何况需要同时识别出八张图片的结果，且其中几个答案需要完全匹配正确才能验证通过，综合来看，此种方法基本是不可行的。 再拿 TouClick 来说，如图 8-21 所示： 
图 8-21 验证码示例 我们需要从这幅图片中识别出植株二字，但是图片的背景或多或少会有干扰，导致 OCR 几乎不会识别出结果，有人会说，直接识别白色的文字不就好了吗？但是如果换一张验证码呢？如图 8-22 所示： 
图 8-22 验证码示例 这张验证码图片的文字又变成了蓝色，而且还又有白色阴影，识别的难度又会大大增加。 那么此类验证码就没法解了吗？答案当然是有，靠什么？靠人。 靠人解决？那还要程序做什么？不要急，这里说的人并不是我们自己去解，在互联网上存在非常多的验证码服务平台，平台 7x24 小时提供验证码识别服务，一张图片几秒就会获得识别结果，准确率可达 90% 以上，但是就需要花点钱来购买服务了，毕竟平台都是需要盈利的，不过不用担心，识别一个验证码只需要几分钱。 在这里我个人比较推荐的一个平台是超级鹰，其官网为：
图 8-23 点选效果 最后我们需要做的就是点击提交验证的按钮等待验证通过，再点击登录按钮即可成功登录，后续实现在此不再赘述。 这样我们就借助于在线验证码平台完成了点触验证码的识别，此种方法也是一种通用方法，用此方法来识别 12306 等验证码也是完全相同的原理。
图 8-5 验证码示例 
图 8-6 验证码示例 现在极验验证码已经更新到了 3.0 版本，截至 2017 年 7 月全球已有十六万家企业正在使用极验，每天服务响应超过四亿次，广泛应用于直播视频、金融服务、电子商务、游戏娱乐、政府企业等各大类型网站，下面是斗鱼、魅族的登录页面，可以看到其都对接了极验验证码，如图 8-7 和 8-8 所示： 
图 8-8 魅族登录页面
图 8-9 验证按钮 此按钮为智能验证按钮，点击一下即可智能验证，一般来说如果是同一个 Session，一小段时间内第二次登录便会直接通过验证，如果智能识别不通过，则会弹出滑动验证窗口，我们便需要拖动滑块来拼合图像完成二步验证，如图 8-10 所示： 
图 8-10 拖动示例 验证成功后验证按钮便会变成如下状态，如图 8-11 所示： 
图 8-11 验证成功结果 接下来我们便可以进行表单提交了。 所以在这里我们要识别验证需要做的有三步：
图 8-12 缺口示例 
图 8-13 缺口示例 可以看到缺口的四周边缘有明显的断裂边缘，而且边缘和边缘周围有明显的区别，我们可以实现一个边缘检测算法来找出缺口的位置。对于极验来说，我们可以利用和原图对比检测的方式来识别缺口的位置，因为在没有滑动滑块之前，缺口其实是没有呈现的，如图 8-14 所示： 
图 8-14 初始状态 所以我们可以同时获取两张图片，设定一个对比阈值，然后遍历两张图片找出相同位置像素 RGB 差距超过此阈值的像素点位置，那么此位置就是缺口的位置。 第三步操作看似简单，但是其中的坑比较多，极验验证码增加了机器轨迹识别，匀速移动、随机速度移动等方法都是不行的，只有完全模拟人的移动轨迹才可以通过验证，而人的移动轨迹一般是先加速后减速的，这又涉及到物理学中加速度的相关问题，我们需要模拟这个过程才能成功。 有了基本的思路之后就让我们用程序来实现一下它的识别过程吧。
图 8-15 初始状态 
图 8-16 后续状态 两张图片其实有两处明显不同的地方，一个就是待拼合的滑块，一个就是缺口，但是滑块的位置会出现在左边位置，缺口会出现在与滑块同一水平线的位置，所以缺口一般会在滑块的右侧，所以要寻找缺口的话，我们直接从滑块右侧寻找即可，所以在遍历的时候我们直接设置了遍历的起始横坐标为 60，也就是在滑块的右侧开始识别，这样识别出的结果就是缺口的位置了。 到现在为止，我们就可以获取缺口的位置了，剩下最后一步模拟拖动就可以完成验证了。
图 8-17 识别成功结果 最后，我们只需要将表单完善，模拟点击登录按钮即可完成登录，成功登录后即跳转到后台。 至此，极验验证码的识别工作即全部完成，此识别方法同样适用于其他使用极验 3.0 的网站，原理都是相同的。
图 8-1 知网注册页面 表单的最后一项就是图形验证码，我们必须完全输入正确图中的字符才可以完成注册。
图 8-2 验证码 这样我们就可以得到一张验证码图片供下面测试识别使用了。
图 8-3 验证码 重新用下面的代码测试一下：
图 8-4 处理结果 经过处理之后我们发现原来的验证码中的线条已经被去除了，而且整个验证码变得黑白分明，这时重新识别验证码，代码如下：
总的来说，两款浏览器的内核是一样的，实现方式也是一样的，可以认为是开发版和正式版的区别，功能上基本是没有太大区别的。 Pyppeteer 就是依赖于 Chromium 这个浏览器来运行的。那么有了 Pyppeteer 之后，我们就可以免去那些繁琐的环境配置等问题。如果第一次运行的时候，Chromium 浏览器没有安全，那么程序会帮我们自动安装和配置，就免去了繁琐的环境配置等工作。另外 Pyppeteer 是基于 Python 的新特性 async 实现的，所以它的一些执行也支持异步操作，效率相对于 Selenium 来说也提高了。 那么下面就让我们来一起了解下 Pyppeteer 的相关用法吧。
可以看到它返回的就是 JavaScript 渲染后的页面。 pdf 方法也是类似的，只不过页面保存格式不一样，最后得到一个多页的 pdf 文件，样例如下： 
可见其内容也是 JavaScript 渲染后的内容，另外这个方法还可以指定放缩大小 scale、页码范围 pageRanges、宽高 width 和 height、方向 landscape 等等参数，导出定制化的 pdf 用这个方法就十分方便。 最后我们又调用了 evaluate 方法执行了一些 JavaScript，JavaScript 传入的是一个函数，使用 return 方法返回了网页的宽高、像素大小比率三个值，最后得到的是一个 JSON 格式的对象，内容如下：
但是可以看到这就是一个光秃秃的浏览器而已，看一下相关信息： 
看到了，这就是 Chromium，上面还写了开发者内部版本，可以认为是开发版的 Chrome 浏览器就好。 另外我们还可以开启调试模式，比如在写爬虫的时候会经常需要分析网页结构还有网络请求，所以开启调试工具还是很有必要的，我们可以将 devtools 参数设置为 True，这样每开启一个界面就会弹出一个调试窗口，非常方便，示例如下：
这时候我们可以看到上面的一条提示：”Chrome 正受到自动测试软件的控制”，这个提示条有点烦，那咋关闭呢？这时候就需要用到 args 参数了，禁用操作如下：
爬虫的时候看到这界面是很让人崩溃的吧，而且这时候我们还发现了页面的 bug，整个浏览器窗口比显示的内容窗口要大，这个是某些页面会出现的情况，让人看起来很不爽。 我们可以先解决一下这个显示的 bug，需要设置下 window-size 还有 viewport，代码如下：
OK，那刚才所说的 webdriver 检测问题怎样来解决呢？其实淘宝主要通过 window.navigator.webdriver 来对 webdriver 进行检测，所以我们只需要使用 JavaScript 将它设置为 false 即可，代码如下：
OK，这样的话我们就成功规避了 webdriver 的检测，使用鼠标拖动模拟就可以完成淘宝的登录了。 还有另一种方法可以进一步免去淘宝登录的烦恼，那就是设置用户目录。平时我们已经注意到，当我们登录淘宝之后，如果下次再次打开浏览器发现还是登录的状态。这是因为淘宝的一些关键 Cookies 已经保存到本地了，下次登录的时候可以直接读取并保持登录状态。 那么这些信息保存在哪里了呢？其实就是保存在用户目录下了，里面不仅包含了浏览器的基本配置信息，还有一些 Cache、Cookies 等各种信息都在里面，如果我们能在浏览器启动的时候读取这些信息，那么启动的时候就可以恢复一些历史记录甚至一些登录状态信息了。 这也就解决了一个问题：很多朋友在每次启动 Selenium 或 Pyppeteer 的时候总是是一个全新的浏览器，那就是没有设置用户目录，如果设置了它，每次打开就不再是一个全新的浏览器了，它可以恢复之前的历史记录，也可以恢复很多网站的登录信息。 那么这个怎么来做呢？很简单，在启动的时候设置 userDataDir 就好了，示例如下：
具体的介绍可以看官方的一些说明，如：
根据我学爬虫并不久的经验，通常只要把年月日之类的参数附加到 url 里面去，然后用
那个大表格的数据就是目标数据了，好像没什么了不起的—— 有点不对劲 目标数据所在网页的网址是这样的：
实话说，这是我第一次遇到要提交表单的活儿。以前可能是上天眷顾我，统统
不管三七二十一，
和 
这三处。 第一处那里的下一行的
Yeah，数据都在！说明我的猜想是对的！那一会再试试我从没用过的
Yeah！拿到了，确实比自己手写提取方便，而且数值字符串自动转成数值，优秀！
州名、县名根据之前发现的两个 js 函数，要用
然后把程序开着过了一个周末，命令行里终于打出了
卤煮在此也推荐几个在线编辑的网站。诸君可自行前往练习使用。 
现代人都普遍比较焦虑，越来越多的人感到生活压力很大，在一二线城市不少白领人士更是已是患上“知识焦虑症”：这年头知识信息迭代太快，学习跟不上，别人懂的自己都不懂，总感觉自己欠缺的很多，没有技术和专长不知未来靠什么生存，担心自己长期落后他人从而被社会淘汰，从而产生了一种对未来不确定的心理恐惧。 于是，他们就急于渴求，希望能在短时间内学习大量知识希望从根本上解决自己的实际问题，拼命利用碎片化时间学习补充欠缺知识，不断完善自己的知识体系。这时知识付费的出现，正好满足了他们这些刚性需求。 再加上2018年前以逻辑思维为主一批内容供应商到处鼓吹和贩卖知识焦虑，在这种风气影响下连身边的很多小伙伴都购买了大量知识付费产品，但一年下来却发现这些知识根本没有学会几个，内容良莠不齐，服务跟不上，就算能坚持学完下来还是什么都不会，焦虑依然存在 。甚至更多人觉得其实知识付费就是一场骗局，从本质上来说知识付费并没有解决任何的问题，表面上只是缓解了一些焦虑，在短时间内让一些人自我感觉良好，实则上只是自欺欺人而已。 于是，一些感觉被欺骗的用户纷纷发声，对某些知识付费大号和机构更是愤怒抨击，在这些负面影响下这两年知识付费其实已逐渐降温并遭遇爆冷，甚至还有一些负面声音在说： 在线知识付费的寒冬是不是要来临了？ 其实不然，纵观当下市场发展态势知识付费的前景仍然是广阔的，竞争激烈程度仍方兴未艾，当人们对知识的盲目消费退烧后，知识付费更多的是回归服务价值， 核心需求有两方面 ： 一方面是为了提升欠缺的知识让自己具有更多的市场竞争力，另一方面也希望自己花钱买的知识付费产品是一些真正有帮助的东西，可帮自己迎来一个不错的未来。所以，知识付费的下一阶段必然聚焦于如何让学习用户获得真正有效的学习效果。 那么，知识付费下半场风口到底会吹去哪？ 好学豚认为这一领域的大方向以后的发展趋势大致有如下特征：
▲ 图片来自：「伯爵旅拍」广告截图 广告的形式不断在变化，从广播、平面、视频，到 H5、直播，部分广告会以新颖的形式和优质的内容取胜，但人们看广告一直都是被动接受的过程。 上周蜘蛛侠上映，索尼在 Snapchat 上 
▲图片来自：mobilemarketingmagazine 它让人们愿意看蜘蛛侠的广告，同时也让广告成了一种主动参与的过程。 接下来要讲的，就是未来这一种我们会主动点开的——VR 广告。
宜家是首批尝试购买 AR 技术并以此宣传的公司之一。 在 
随后苹果发布了 ARkit 技术，Google、Facebook、亚马逊等大公司也在 2017 年和 2018 年期间发布了自己 AR 软件开发套件，以支持日后 AR 技术的发展。 Facebook 去年就为广告商提供了 
除了家居服饰，美容时尚等行业也开始尝试利用 AR 营销，主要是为了弥补线上和线下的差距。 两周前，人们已经能在 YouTube 上一边看美妆博主的化妆教程，一边在分屏之下跟着博主一起涂口红试色，这个名为 
甚至当你逛淘宝店，在前几周 
这种自然而直观的方式，不仅让人们和品牌建立起更真实的关系，与以往广告最大的不同就是，人们还能随时参与、持续互动，并响应内容。
▲ 图片来自：unsplash 另外，AR 广告已经不再是单独的一个内容，而是进入我们的真实生活，或者进入其它我们沉浸的内容之中——广告本身就是商品的展示位，不会再有其它如美化特效、夸张视觉等因素插入和干扰。 而且这些 AR 广告最初打开的阀门，就掌握在消费者手上。 因为 AR 广告现在都需要申请对其相机／设备的访问，在非相机优先的应用中，也需要申请特定权限，因此你完全可以选择你需要的内容，并与之开始进一步互动。 
▲ 图片来自： 
▲ Google 推出名为 Swirl 的沉浸式显示，消费者可以 360 度查看、旋转、放大、缩小商品 在这个背景之下，市场研究公司 
▲ 图片来自：unsplash 因为在高速运行的网络下，开发者不仅能够创造更高质量的 3D 可视化技术，消费者也能获得更多形式的沉浸式体验，品牌也能将其购物平台更多扩展到商店和传统网站之外的移动设备上，而且广告也不会再只限于移动设备的小屏幕。 还可以预见的是，5G 网络之下数据信息密度也会迅速加大，除了文本，还有图像、视频，人们接受的购物信息无疑更广、更深、更繁杂，而 AR 能够降低广告的感知成本，让人们消费数字内容将更简便和直观。 
▲ 图片来自：unsplash 但现在 AR 广告还未普及的主要问题，就在于它的成本和技术。 比起其他广告形式来说，其实它的投入成本并不低。Digiday 指出 
▲ 图片来自：unsplash AR 热潮刚刚开始真正起飞，我们现在看到的只是关于 AR 能带来什么以及它能做些什么的一瞥。不过苹果 2017 年推出 ARKit 时，首席执行官蒂姆・库克在 
▲ 图片来自： 
△ 官网： 
△ 附上链接： 
可以看到图中有一个初始滑块，有一个目标滑块，如果把初始滑块拖动到目标滑块上才能校验成功，然后下方再打印拖动的轨迹，包含它的 x、y 坐标。 有了这些内容之后，就可以放到表单里面进行提交了，轨迹数据可以自行加密处理并校验来判断其是否合法。
可以看到训练和验证的 Loss 都被记录下来，并化成了图表展示。而这些东西我们配置过吗？没有，因为框架封装好了。 好，现在模型有了，我们要拿来做预测咋做呢？又得构建一边图，又得重新加载模型，又得准备数据，又得切分数据等等，还是麻烦，并没有，这里只需要这么定义就好了，定义 infer.py 如下：
模型便可以输出对应的情绪类型和情绪分布：