青南的小世界

给时光以生命。

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

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,也就选择了折腾。

生命不息,折腾不止。

posted on 2014-12-15 20:22  青南  阅读(657)  评论(0编辑  收藏  举报