修改Coney主题之侧边栏移位

title: 修改Coney主题之侧边栏移位

date: 2014-12-15 18:09:54

categories: Hexo

tags: [hexo,css]

Coney是一个非常漂亮的Hexo主题，作者的博客请戳->http://gengbiao.me/ 我的独立博客博客的主题是基于Coney修改而成。

我个人比较喜欢侧边栏在左边，于是我希望能将右侧的侧边栏整体移动到左边去。大家对比我的独立博客首页http://kingname.info/首页和主题作者的博客首页就可以看出不同。

在修改之前，需要解释一下div标签。不讲定义，只举例子。大家注意这篇文章的配图。设想有这样一个场景，你要搬家，从成都搬到北京。你可以一件一件的把家里的东西搬出来，然后运到北京，再放进新的家。也可以，把你的整个房子连根撬起来，用超人或者热气球直接运送到北京去。这么做的好处是，你只需要搬房子，而房子里面的东西完全不受影响。div标签就可是实现这样的功能。

使用Chrome的审查元素功能，可以发现这个主题首页的正文部分的布局是这样的：

其中A，B分别是控制侧边栏开启和关闭的开关，A是openaside, B是closeaside，在侧边栏开启的时候，A是隐藏的。

当然实际的布局里还有其他div，但是当我只需要知道你有一个房子，房子里有几间房间的时候，我是没有必要去关心你卫生间里是马桶还是痰盂的。

那么现在目标就是，把asidepart，openaside这两个东西移动到左边，把main移动到右边。我这里没有说closeaside，不是笔误，而是因为closeaside是在asidepart里面的，因此移动asidepart的时候，closeaside跟着就移动了。

打开themes\coney\source\css_partial文件夹，发现有一个aside.styl文件，根据名字猜测，这个东西应该就是关于侧边栏的布局了。

打开aside.styl文件，发现这其实就是一个css文件。首先看到前面几段代码：

//button
.openaside
  display none
  position fixed
  right 7.5%
  top 260px
  a
    display block
    color color-white
    border 1px solid color-white
    border-radius 5px
    background color-theme
    padding 0.2em 0.55em
    &::before
      font-family font-icon-family
      font-smoothing()
      content "\f0c9"

.closeaside
  display none
  a
    color color-theme
    &:hover
      color color-blue
    &::before
      font-family font-icon-family
      font-smoothing()
      content "\f0c9"
  @media tablet
    display block
    position absolute
    right 25px
    top 22px

//sidebar
#asidepart
  background color-section
  margin 1em 0 0
  padding 0.5em 2% 1em
  @media tablet
    position relative
    float left
    width 18%
    margin 2em 0 0 3%

Coney作者的命名方式非常好，于是我们很容易就看到了需要的内容。

在.openaside下面，看到一个

right 7.5%

当我们隐藏了侧边栏以后，看到的小方块，就是箭头指向的这个

如果我把这个right改成left会有什么效果呢？不妨一试

看起来有点效果了。那么继续看下面的.closeaside

right 25px

尝试把right修改为left,对比一下前后效果：

修改前：

修改后:

这个小图标在侧边栏里面的相对位置改变了，这就像是你从家里的卧室走到了厨房。你并不关心房子外面是不是奥特曼在打小怪兽。你只是换了一个房间。

再往下走，发现#asidepart下面有个

position relative
float left

我想把侧边栏从右边移动到左边，那这里应该有个right才对，为什么它竟然是left？而且position的意思是位置，relative是相对，也就是说是相对位置？很奇怪，先不动它。

再来找找main在哪里。在themes\coney\source\css_partial下面的index.styl里发现了它。

#main
  margin 1em 0 0
  line-height line-height+0.3
  @media tablet
    margin 2em 0 0
    width 75%
    position relative
    float left
    transition margin 0.5s ease-out

这里发现了一个left，既然我想把main从左边移动到右边，那就尝试把这个left改成right,然后测试一下效果。

哈哈，成了！

等等，别高兴的太早，点一下关闭侧边栏的按钮试一试。

是不是感觉怪怪的？对比一下作者的博客效果

隐藏侧边栏以后，文章列表应该向右移动，那我把侧边栏移动到左边并隐藏以后，文章列表应该向左移动才对啊！可是它为什么死在那里了？

经过询问作者，我得知这个文章列表的移动的相关javascript代码在after_footer.ejs文件中。

var m = $('#main'),
      a = $('#asidepart'),
      c = $('.closeaside'),
      o = $('.openaside');
...........

c.click(function(){
    a.addClass('fadeOut').css('display', 'none');
    o.css('display', 'block').addClass('fadeIn');
    m.addClass('moveMain');
  });
  o.click(function(){
    o.css('display', 'none').removeClass('beforeFadeIn');
    a.css('display', 'block').removeClass('fadeOut').addClass('fadeIn');
    m.removeClass('moveMain');
  });

虽然我不会javascript，但是根据这段代码，猜一下意思：

当关闭侧边栏(closeaside)按钮被点击，就添加一个叫做moveMain的东西；
当打开侧边栏(openaside)的按钮被点击，就移除这个叫做moveMain的东西。

觉得moveMain很可疑，而且move移动，Main就是文章列表的div的名字，这个解释天衣无缝啊。

我在themes\coney\source\css_partial文件夹下面的index.styl中找到了这个moveMain

.moveMain
  margin-left 10% !important

网上搜索了一下，发现margin-left的意思是：

margin-left 属性设置元素的左外边距。

就是距离左侧10%的距离，假设原来的距离小于10%，当我点了关闭侧边栏以后，为了让main距离左侧的距离达到10%，不就正好的是向右移动吗？

既然这个解释天衣无缝，那就把left改成right试一试效果。

这样看起来似乎已经达到效果了，但是感觉有些地方不太和谐。

侧边栏距离文章列表太近了。

这个时候就要用到Chrome的强大功能了，启动审查元素功能，定位到侧边栏

注意右侧

margin 2em 0 0 3%

margin是边界的意思，那么右边四个数据应该就是控制侧边栏上下左右距离的了。尝试修改，发现吧3%改成0的时候，出现了我希望的效果

这个数据是在aside.styl中，修改以后生成页面，完美实现了需求的功能。在独立博客首页可以看到最终效果。

需要说明的是，虽然我写了这么长一篇，但是我实际上因为我没有CSS基础的，这些大部分是自己摸索的过程，所以你也可以做出自己的主题。

既然选择了Hexo，也就选择了折腾。

生命不息，折腾不止。