butterfly主题添加Volantis主题外挂标签
前言要移植Volantis主题的标签需要在 Butterfly\scripts\tags 添加Volantis主题的外挂标签js由于 butterfly3.0 的note,tabs等有冲突,所以建议不要加入这两个
移植外挂标签传送门： Volantis主题
引入外挂css和js移植Volantis主题标签的样式到butterfly主题，需要在原生butterfly主题适配那么需要对css和js的添加，对主题的修改有以下两个方法：
外部挂件代码（推荐）->原因：稳定性高，可以平滑升级，没到必要时候是不需要修改源码滴
直接修改源代码如何添加Volantis主题css和js
打开主题目录下的配置文件，ctrl+F快速找到以下代码12345inject: head: - <link rel="stylesheet" href="挂载路径以及文件名"> bottom: - <script src="挂载路径以及文件名"></script>
说明：1.一般来讲， 在head处挂载css代码，在bottom处挂载js代码2.css代码放 ...
github图床
前言图床一般是指储存图片的服务器，有国内和国外之分。国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度。国内也分为单线空间、多线空间和cdn加速三种。简单来说就是：在文章中引用指定网址显示图片。blonde_woman
那么我们怎么拥有一个自己的图床呢？这里我只介绍在github上部署自己的创库来创建自己的一个图床注： 需要部署更多的图床等，可以参考小康博客的这篇文章—>传送门
配置教程准备工具：
Github注册 (相信大家部署到github上面的网站都已经有自己的账号了吧)
本地安装PicGo（这个自行百度下载就可以了） 传送门
Typora编辑器 （这个是用来写博客用的，或许在CSDN上写就可以了）
获取Token：1.新建一个仓库（new responository）2.进入设置Setting(1) 选择开发者设置Developer setting(2)选择个人数据帧Personal access tokens，生成新的数据帧 Generate new token(3)命名为picgo（图床），赋予仓库权限
Note 部分随便写即可，下边的权限把 r ...
butterfly主题
butterflt主题前置开始我的主题是matery的，经过不断修改又来到了butterfly这个主题。这里省略 node 和 hexo 的安装，直接在初始化博客开始。相关操作请查看之前的博客搭建。
由于目前主题已更新，此文件中部分配置可能失效。请参考作者博客或文档进行。官方的3.0版本： jerryc
安裝在你的博客根目录下：
1git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
如果想要安装比较新的 dev 分支，可以
1git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
建议选择最新的分支，因为更新一些新的东西优化了还是挺好的
启动主题修改站点配置文件_config.yml，把主题改为 Butterfly（这里的name要与你的主题下的分支一样）
1theme: Butterfly
如果你没有 pug 以及 stylus 的渲染 ...
添加访客地图
前言在此之前得有个 clustrmaps 账号，前往 clustrmaps 网站注册一个帐号
找到 Free Tools 下面的 Website Widget, 点击 Get Map Widget,输入你的博客网址
点击 Next
根据你自己的喜好选择样式 Map widget 或 Globe Widget（建议选第二个）
找到如下代码，记住 src (** 的部分):
1<script type="text/javascript" id="clstr_globe" src="**********************">
添加和修改模板
在 themes\Butterfly\layout\includes\widget文件夹新建card_map.pug 文件，文件内容如下：
123456.card-widget.card-map .card-content .item-headline i.fa.fa-globe-asia(aria-hidden="true") span= _p(' ...
实现三栏布局的三种方式
实现三栏布局的三种方式1.[圣杯布局]、[双飞翼布局]2.绝对定位法左右div设置为绝对定位；左div设置为 left: 0px;右div设置为 right: 0px;
如：
1234567891011121314151617181920212223242526272829303132333435363738394041<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> html,body{ margin: 0px; width: 100%; } h3{ height: 100px; margin: 20px 0 0; } ...
圣杯布局和双飞翼布局
圣杯布局和双飞翼布局圣杯布局&双飞翼布局我们能够发现，其实圣杯布局和双飞翼布局非常相像。因为圣杯布局是阿里巴巴的玉伯（Sea.js的创始人）根据圣杯布局来改造的。用于两边的子面板固定，中间区域自适应的布局。
圣杯布局存在一个缺点：就是当我们的 .middle 设置的宽度比两边小的时候，布局就会乱掉。双飞翼在中间的区域添加了一个子节点，给父节点添加margin属性来左右面板留出空间。用margin来撑开空间。
所以综合起来，双飞翼布局和圣杯布局的区别在于：
双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间。
双飞翼布局不用设置相对布局，以及对应的left和right值。
当然，基于float布局的圣杯布局和双飞翼布局都有自己的缺陷，当前的趋势是flex和grid布局，代码更少更加灵活。圣杯布局对于我们对CSS的理解和布局的理解还是有帮助的。
圣杯布局和双飞翼布局的源码圣杯布局的源码1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484 ...
matery 代码高亮，跳过渲染等问题
代码高亮由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下：
1npm i -S hexo-prism-plugin
然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：
123456789highlight: enable: false#此处要为false,不然会代码高亮，有些不会，但有些会被拉到侧面prism_plugin: mode: 'preprocess' # realtime/preprocess theme: 'tomorrow' #这个是代码块的主题 line_number: false # default false #如果为true就会显示代码号，而且会分两边显示，显得不友好 custom_css:
若enable为true的话会出现下面这种情况：
写博客需要用到的软件：
Typora
或者csdn上用markdown写，且上面 ...
hexo matery 主题优化
Hexo matery 功能个性优化
声明：本文是参考会飞的小戈和·Sky03’s Blog这俩位位大佬的进行优化
一、访问速度优化1、页面加载动画主目录下新建一个文件夹(也就是你的blog目录下)，名为scripts，紧接着在新建的文件夹下新建一个名为loading-pages的js文件，然后再这个js文件填入下面的代码：
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714 ...
搭建hexo个人博客
搭建个人博客网站学习如逆水行舟，不进则退，因此搭建博客网站是一个很不错的选择。选择喜欢的主题，按需进行个性化配置，随时在本地用自己喜欢的工具写文章，然后一键发布到多个博客托管平台,比如github,gitee，使用自己喜欢的图床/CDN来加速…
前题我们需要node.js环境，以及git分布式系统环境
安装NodeJS打开 ：nodejs.cn直接下载安装程序并进行安装，安装完成后打开命令行输入：
12node --versionnpm -v
如果可以查看到版本就说明已经完成安装了
Windows环境配置修改NPM下载存放的全局目录位置，可以参考下面链接来配置https://www.cnblogs.com/liuqiyun/p/8133904.html
Git 下载注意：Git的服务器在国外，所以它的官网下载这个软件会非常慢，几乎是下载不了，建议直接在百度上搜索git下载与安装，各种软件园都能直接快速下载，留意一下版本最好不要太旧就ok。建议：去腾讯软件下载那里下载几分钟就下载好了
Git的搭建教程
如果没有梯子，可以通过下面百度云：
百度云安装包提取码: 2333
下载安装完成后我们 ...
页面加载中动画
butterfly主题前言如果你是 clone 原主题 dev 分支的话，这篇博客可能不需要继续阅读下去，你只需将主题下Butterfly.yml 中 preloader: false 变为 true 即可。但是如果你是 clone 的 master 分支，需要添加加载动画，则得一步步来哦！
开始操作
第一步，在 themes/Butterfly/layout/includes/layout.pug 找到body，在其下面添加如下代码：
12if theme.preloader !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})
在 themes/Butterfly/layout/404.pug 找到body，在其下面添加如下代码：
123if theme.preloader !=partial('includes/loading/loading', ...
