Butterfly主题魔改教程，添加百宝箱。


我的博客主题版本为：hexo5.4、Butterfly3.6.2

如果与我的版本不一样可能会有略微差别，届时请自行百度。

本文参考文章：雨中的博客《hexo百宝箱搭建攻略》。

1.说明

在日常生活中我们经常需要收藏许多网址书签来提升我们的办公效率，但是书签的放置，整理和分类的工作总是一言难尽，非常麻烦。因此本次将通过建立一个hexo小站来单独存储我们的所有收藏网址，也就是今天要介绍的百宝箱😛！

首先我需要说明一下，这个百宝箱的搭建你可以理解为是建立一个新的hexo网站，因此很显然他是基于一个主题搭建的，这个主题就是hexo-theme-webstack。但是它区别于我们之前搭建hexo博客，因为他可以不需要再次新建一个github仓库进行部署，我们只需要本地预览生成html即可，如果你没有理解也没有关系，跟着教程一步步来就好了。

2.步骤

2.1搭建教程

  1. 首先我们需要新建一个根目录navigation文件夹，然后进入这个文件夹进行hexo环境的初始化：

    mkdir navigation
    cd navigation
    hexo init

  2. 进行完hexo初始环境的搭建后，我们需要下载hexo-theme-webstack主题，输入如下指令：

    cd themes
    git clone https://github.com/HCLonely/hexo-theme-webstack.git

  3. 下载完成后navigation下的文件应该与下图一致,如果有多余的文件删除即可。

  4. 我们打开当前中的站点配置文件_config.yml文件，修改一下使用的主题:

  5. 然后我们再在站点根目录右键点击git bash here打开命令窗输入hexo cl && hexo g&& heso s后在端口localhost://4000上即可看到本地预览的效果，但是此时我们发现里面的内容还是空的，链接都没有，因为这需要我们自己添加，同时此时的个人信息还不是自己的，关于页面也还没有建立。我们需要参考官方配置文档进行配置即可：

2.2魔改教程

  1. 去除Chinese语言选项，这个东西…没啥用，而且总是跳转到空白界面，很烦所以将它去除，我们打开navigation/themes/layout/index.ejs文件将16-27行注释掉即可：

  2. 夜间模式的选择框增加白色阴影选中样式，我们还是在navigation/themes/webstack/source/css/hclonely.css中加入如下代码：

    body.night .box2:hover {
      box-shadow: 0 26px 40px -24px rgb(255, 255, 255);
      -webkit-box-shadow: 0 26px 40px -24px rgba(130, 130, 130, 0.13);
      -moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
      -webkit-transition: all 0.3s cubic-bezier(0.25, 0.1, 0.14, 1.43);
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease-out;
      background-color: #232323 !important;
    }

2.3部署教程

  1. 那么大体上我们已经把百宝箱小站开发的差不多了，现在我们需要将它部署到我们的博客网站上啦，这里有两种方法：①.新建一个github仓库来存储部署并且使用一个二级域名来解析指向即可但是很麻烦；②.以分站的形式来建立百宝箱子页；

    我就在以更简单直接的方法介绍一下我们怎样将navigation部署为博客的一个子页，我们首先需要修改navigation文件夹下的_config.yml文件中的如下内容,我们需要将url和root改为:

    url: <你的博客域名>/navigation
    root: /navigation

  2. 然后要注意最下方的deploy不需要填写仓库地址或者ip地址，因为我们并不是将它作为另一个新网站重新部署。我们直接在navigation下打开命令窗输入以下指令：

    hexo cl
    hexo g
    hexo s//本地预览一下生成的页面是否正常

  3. 当本地预览没有任何问题后，我们打开navigation下的public文件夹，这个文件夹存储的是生成的html文件，我们将public文件夹下的所有文件复制：

  4. 然后我们打开自己的博客站点文件夹，我这里是myblog（名字可能不同），然后在博客站点文件夹下进入source文件夹并创建一个新的文件夹navigation:

  5. 然后进入这个navigation文件夹将刚刚复制的文件拷贝过来即可。然后我们再打开博客站点文件夹下的_config.yml文件，在如下地方加入- "navigation/**"。意思是hexo博客渲染生成页面时这个文件夹下的内容跳过渲染显示：

  6. 此时我们运行博客本地预览，重新生成博客页面

    hexo cl && hexo g

  7. 输入hexo s打开本地博客预览后输入地址http://localhost:4000/navigation/ 即可看到百宝箱已经加入成功：

  8. 接下来我们只需要为自己的博客顶栏添加一个新的图标链接指向这个子页即可了。最后在博客站点下重新部署即可将导航栏百宝箱部署线上！

如有错误，欢迎评论区留言！