Paperbox主题改造1-主题背景与Cube

对我的paperbox（现在这个主题，landscape plus基础修改而来的，我引用了）做基于自己喜好的改造；

Part1: 主题图片替换~

原版

原版本身就是一个改版啦，具体介绍如下https://github.com/sun11/hexo-theme-paperbox

关于作者的贡献：https://www.sun11.me/blog/2016/hexo-theme-paperbox/

原版图片

要改的地方还挺多的，这边列一下，要改的地方还不少；比如这个时间表示、特别是，我觉得背景太难看了;其次那个小方块也是太难看了，怎么做一个自己喜欢的呢

前端知识太少；方法蠢笨，Orz。但是原版作者啥也没写，所以还是记录下吧

如果遇到啥问题，其实都可以通过看别人的代码结构来得到，具有非常相似的结构

hexo-theme-paperbox

hexo-theme-landscape-f

hexo-theme-landscape

Hexo官方主题landscape-plus优化

计划

速度

加速访问 [见hexo博客搭建优化，这个和paperbox没有关系，所以不放在这里写]

主题图变化

修改成自己喜欢的图片

cube优化

cube改版！

cube不会自动滚动了

添加时间

有个Update比较好~

标签改一下

太丑了；太小了

字体问题

同上

代码高亮

感觉代码不是很好看，说不定就会改了

加上search框

主题基础架构

由于我刚接触hexo不久，所以呢~不是特别了解，我是多了解一点就多写一点

_config.yml

就像是全局变量，访问方便；也可以理解为全局配置；里面所有配置的意思我还没吃透，用哪个写哪个

source/

资源文件，图片，css，js都在里面吧，比如你要修改啥啥的样式，就在这里操作的比较多

layout/

后缀基本就是.ejs，这文件，emmmm，以前没好好学js，当事人表示现在非常后悔；我理解的就是模板文件，如果你要修改你的网站模样，肯定要涉及的

language/

这个主要是不同语言文件使用的不同语言；可以用<%= __('updated') %>来访问其值

别的不懂了，用到的也少

主题图变化

图片存放位置：/source/css/images

修改样式位置：source/css/_variables.styl这个文件，就是css的全局变量文件

修改选项：banner-url = "images/firefly.jpg"

背景图片默认居中；所以基本上就是图片的正中位置会被显示；注意剪裁一下；为了防止图片加载时间过长，建议参考yelee的gitbook进行压缩和渐进式调整；

http://moxfive.xyz/2016/05/17/image-compression/

前面看到图片放在images下，直接引用全局变量就行啦~然后加载是这样的，在source/css/_partial/header.styl里面，

#banner
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  background: url(banner-url) center color-grey
  background-size: cover
  z-index: -1

cube优化

原版感觉有点不搭

修改之后

哈哈哈，是不是感觉有点花哨；但是我觉得还是比较契合这个背景图；另外，六面都有含义的~~不管聪不聪明你肯定知道含义23333；P图P得太烂了，好惨Orz

这里主要记录下修改的地方和过程

（啊，我这个主题cube不会自动滚动了，后期排查一下）

样式修改

每个面的透明程度和边框颜色修改位置：source/css/_partial/header.styl建议在chrome上调试颜色之后再修改，方便些

//133行左右
// CSS Animated Cube
#contenedor
...
  ul
    ...
    li
      box-sizing: border-box
      background: rgba(240, 240, 240, 0.06) //最后一个是透明程度，值越小越透明
      border: 1px solid rgba(255, 250, 66, 0.38) //边框颜色
      //display: block
      display: flex;
      justify-content: center;
      align-items: center;
      list-style-type: none
      position: absolute
      width: 100%
      height: 100%
      font-size: 1.5em
      color: rgba(0,0,0,0.5) //这个是字体颜色
      letter-spacing: 1px
      text-align: center
      line-height: 100px
      user-select: none

填充图片

为了填充图片居中，我在上面代码中修改了几个字段，一个是li的display属性改成了flex，还有添加了justify-content: center; align-items: center;

图片参数放在主题下的_config.yml下

layout模板修改

cube的代码在layout/_partial/header.ejs

<div id="contenedor">
  <ul class="cube">
    <li class="cara"><img src="<%= theme.logo_time %>" style="height:50%; width:50%;opacity:0.8" /></li>
    <li class="cara">也可以填充文字</li>
    <li class="cara">啥都行</li>
    <li class="cara">...</li>
    <li class="cara">...</li>
    <li class="cara">...</li>
  </ul>

所以我把图片放在imgs下，并在主题的_config.yml下，加入了路径；<%= _config_variables %>可以直接访问_config.yml的定义

1	logo_time: /img/cube/time.png

其实你也可以修改每个面的background，但是这样的话6个面要区分开来

cube加载时转动

cube不会自己转了，不知道为什么，现在也不知道，但是我翻了翻原博客发现我们的style好像有一些些不一样，所以，我就copy了以下，修改如下，其实就是让它适配多个浏览器并且配置了spincube，也就是旋转方式；

source/css/_partial/header.styl

.cara:nth-child(1) {
  -webkit-transform: translateZ(50px);
  -moz-transform: translateZ(50px);
  -o-transform: translateZ(50px);
  -ms-transform: translateZ(50px);
  transform: translateZ(50px);
}
.cara:nth-child(2) {
  -webkit-transform: rotateX(-90deg) translateZ(50px);
  -moz-transform: rotateX(-90deg) translateZ(50px);
  -o-transform: rotateX(-90deg) translateZ(50px);
  -ms-transform: rotateX(-90deg) translateZ(50px);
  transform: rotateX(-90deg) translateZ(50px);
}
.cara:nth-child(3) {
  -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(50px);
  -moz-transform: rotateX(90deg) rotateZ(-90deg) translateZ(50px);
  -o-transform: rotateX(90deg) rotateZ(-90deg) translateZ(50px);
  -ms-transform: rotateX(90deg) rotateZ(-90deg) translateZ(50px);
  transform: rotateX(90deg) rotateZ(-90deg) translateZ(50px);
}
.cara:nth-child(4) {
  -webkit-transform: rotateY(-90deg) translateZ(50px);
  -moz-transform: rotateY(-90deg) translateZ(50px);
  -o-transform: rotateY(-90deg) translateZ(50px);
  -ms-transform: rotateY(-90deg) translateZ(50px);
  transform: rotateY(-90deg) translateZ(50px);
}
.cara:nth-child(5) {
  -webkit-transform: rotateY(90deg) rotateZ(90deg) translateZ(50px);
  -moz-transform: rotateY(90deg) rotateZ(90deg) translateZ(50px);
  -o-transform: rotateY(90deg) rotateZ(90deg) translateZ(50px);
  -ms-transform: rotateY(90deg) rotateZ(90deg) translateZ(50px);
  transform: rotateY(90deg) rotateZ(90deg) translateZ(50px);
}
.cara:nth-child(6) {
  -webkit-transform: rotateY(180deg) translateZ(50px);
  -moz-transform: rotateY(180deg) translateZ(50px);
  -o-transform: rotateY(180deg) translateZ(50px);
  -ms-transform: rotateY(180deg) translateZ(50px);
  transform: rotateY(180deg) translateZ(50px);
}
.animar {
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
}

.noanimar {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}
@-moz-keyframes spincube {
  16% {
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
  }
  33% {
    -webkit-transform: rotateY(-90deg) rotateZ(90deg);
    -moz-transform: rotateY(-90deg) rotateZ(90deg);
    -o-transform: rotateY(-90deg) rotateZ(90deg);
    -ms-transform: rotateY(-90deg) rotateZ(90deg);
    transform: rotateY(-90deg) rotateZ(90deg);
  }
  50% {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  66% {
    -webkit-transform: rotateX(-90deg) rotateZ(-90deg);
    -moz-transform: rotateX(-90deg) rotateZ(-90deg);
    -o-transform: rotateX(-90deg) rotateZ(-90deg);
    -ms-transform: rotateX(-90deg) rotateZ(-90deg);
    transform: rotateX(-90deg) rotateZ(-90deg);
  }
  83% {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}
@-webkit-keyframes spincube {
  16% {
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
  }
  33% {
    -webkit-transform: rotateY(-90deg) rotateZ(90deg);
    -moz-transform: rotateY(-90deg) rotateZ(90deg);
    -o-transform: rotateY(-90deg) rotateZ(90deg);
    -ms-transform: rotateY(-90deg) rotateZ(90deg);
    transform: rotateY(-90deg) rotateZ(90deg);
  }
  50% {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  66% {
    -webkit-transform: rotateX(-90deg) rotateZ(-90deg);
    -moz-transform: rotateX(-90deg) rotateZ(-90deg);
    -o-transform: rotateX(-90deg) rotateZ(-90deg);
    -ms-transform: rotateX(-90deg) rotateZ(-90deg);
    transform: rotateX(-90deg) rotateZ(-90deg);
  }
  83% {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}
@-o-keyframes spincube {
  16% {
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
  }
  33% {
    -webkit-transform: rotateY(-90deg) rotateZ(90deg);
    -moz-transform: rotateY(-90deg) rotateZ(90deg);
    -o-transform: rotateY(-90deg) rotateZ(90deg);
    -ms-transform: rotateY(-90deg) rotateZ(90deg);
    transform: rotateY(-90deg) rotateZ(90deg);
  }
  50% {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  66% {
    -webkit-transform: rotateX(-90deg) rotateZ(-90deg);
    -moz-transform: rotateX(-90deg) rotateZ(-90deg);
    -o-transform: rotateX(-90deg) rotateZ(-90deg);
    -ms-transform: rotateX(-90deg) rotateZ(-90deg);
    transform: rotateX(-90deg) rotateZ(-90deg);
  }
  83% {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}
@keyframes spincube {
  16% {
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
  }
  33% {
    -webkit-transform: rotateY(-90deg) rotateZ(90deg);
    -moz-transform: rotateY(-90deg) rotateZ(90deg);
    -o-transform: rotateY(-90deg) rotateZ(90deg);
    -ms-transform: rotateY(-90deg) rotateZ(90deg);
    transform: rotateY(-90deg) rotateZ(90deg);
  }
  50% {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  66% {
    -webkit-transform: rotateX(-90deg) rotateZ(-90deg);
    -moz-transform: rotateX(-90deg) rotateZ(-90deg);
    -o-transform: rotateX(-90deg) rotateZ(-90deg);
    -ms-transform: rotateX(-90deg) rotateZ(-90deg);
    transform: rotateX(-90deg) rotateZ(-90deg);
  }
  83% {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}