谢乾坤 | Kingname

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

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

在修改之前，需要解释一下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文件。首先看到前面几段代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

//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下面，看到一个

1

right 7.5%

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

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

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

1

right 25px

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

修改前：

修改后:

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

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

1
2

position relative
float left

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

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

1
2
3
4
5
6
7
8
9

#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文件中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

1
2

.moveMain
  margin-left 10% !important

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

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

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

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

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

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

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

注意右侧

1

margin 2em 0 0 3%

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

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

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

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

生命不息，折腾不止。

Coney是一个非常优秀的Hexo主题，作者的网站http://gengbiao.me/然而在使用的过程中，我发现作者有一些地方没有说清。因此在这里写一些我使用中发现的问题和解决方法。

标签

作者并未说明多个标签之间应该以何种方式分隔，我尝试使用逗号，空格以及方括号均不能正确分隔标签。后来尝试使用一种笨的方法：

1
2
3

tags: 标签一
tags: 标签二
tags：标签三

还有一种聪明的办法，就是：

1

tags: [标签一,标签二,标签三]

标题

如图，标题显示异常

出现这种问题，是由于title中加了双引号，去掉双引号以后正常。但是不知道这个双引号是怎么加上去的。

页面

模板只有两个页面，如果想添加更多页面,就像这个博客上面一样，可以
在博客根目录下面使用git bash输入：

1

hexo n page About

这条命令新建了一个“关于”页面，在source下会生成一个About文件夹，文件夹里面有一个index.md 通过编辑index.md就可以编写“关于”页面。如图：

接下来要如何将这个页面添加到博客上面呢？

可以修改themes/coney/_config.yml

1
2
3
4
5
6
7

   ##### Menu
menu:
 	首页: /
 	归档: /archives
 	分类: /categories
 	标签: /tags
 	关于: /About

如图是我修改以后的效果：

最后实际显示效果如下：

空格

也许是Hexo优化方面的问题，空格在文件修改的过程中非常重要。还是以上面的添加页面为例：

1
2
3
4
5
6
7

   ##### Menu
menu:
 	首页: /
 	归档: /archives
 	分类: /categories
 	标签: /tags
 	关于:/About #这里少了一个空格

如果写成这样，在使用

1

hexo g

生成静态文件的过程中，就会出错，如下图：

因此，在修改文件的过程中，一定不能漏掉空格。

评论

Coney使用多说的评论系统。主题作者对多说系统提供的官方代码做了一些修改，从而导致了一个隐藏的bug。

在themes\coney\layout_partial下的after_footer.ejs文件的112行代码：

1

var duoshuoQuery = {short_name:"<%= theme.duoshuo.short_name %>"};

主题作者的本意是通过theme.duoshuo.short_name 调用 _config.yml中的short_name。作者的名字是英文，因此不会出问题，但是当short_name的值为中文时，会导致整个评论框消失。

然而，coney作者告诉我，short_name仅仅是一个标记，在评论中并不会显示出来，因此只要随便写个英文上去就好了。

在使用Python做爬虫的过程中，经常遇到字符编码出问题的情况。

1

UnicodeEncodeError: 'ascii' codec can't encode character u'\u6211' in position 0: ordinal not in range(128)

针对这种情况，网上已经有很多原理性的分析了，我在此就不一一列举。然而，我相信很多人，即便看完原理以后也不知道怎么解决。

我自己琢磨出一种快速解决的方法：

1
2
3
4
5
6

def get_page_sourse(url):
req = urllib2.Request(url)
   for key in headers:
       req.add_header(key,headers[key])
       content = urllib2.urlopen(req).read()
       return content

这个函数使用urllib2扒取了一个网页的源代码。并返回了这个源代码。当我们使用文件操作准备把content的内容写到一个txt文件中时，就会出现编码错误。

在这种情况下，如何快速的排除问题？

只需要将最后一行改成下面这样就可以了。

1

return content.decode('A','ingore').encode('B','ignore')

这里，A和B分别可以使gbk, gb2312,utf-8,它们排列组合一下，一共只有6种组合方式

例如：

1
2
3

return content.decode('gbk','ingore').encode('utf-8','ignore')
return content.decode('utf-8','ingore').encode('gb2312','ignore')
...

我使用这种方式，解决了所有的我遇到的Python的编码错误。虽然是一个一个的试，但是也用不了2分钟就能搞定。

至于背后原理什么的，程序跑通了以后再慢慢研究吧。