1. 1. 主题文件结构
  2. 2. 汉化
  3. 3. 去掉作者和更新日期
  4. 4. 侧边栏优化
  5. 5. 去footer
  6. 6. 遗憾与教训

本博基本搭起来后，自我感觉Tinny这个主题的一些体验还不太好，于是这几天修修补补地搞得自己头都大了。当然这里面自己强迫症发作不明就里地到处修补也做了不少无用功；所以还是拿出来share一下，做个作死的经验总结。

主题文件结构

Tinny是基于pacman的一个主题，基本的设置与其他主题一样都在主题的_config.yml里；其他分别为文件夹

  1. language很明显嘛
  2. layout主要的样式设置都在这里啦
  3. scripts存放诸如fancybox的工具组件
  4. sources图片、js、css等

了解总体情况还是很有必要的，当然如果修改时还迷糊就hexo s直接上浏览器调试咯。接下来说说我搞的几样修改，我js学的渣，里面槽点多多，请各位（如果有人看得到的话）轻拍。

汉化

一开始不知道language里中文文件为zh-CN,以为和默认主题一样是zh-cn，填进_config.yml后发现汉化很差，半中不洋地巨讨厌。但一着手改就有点蛋疼了，因为网页的加载不同于直接的html和js、css。layout里的那一堆.ejs文件看了看才知道是html和js的杂合体，一个个点开后对着浏览器抠出要替换的文字所在地,然后代之以中文；后来在发现中文文件原来为zh-CN并且.ejs文件里有的替换代码为__('文字在language文件夹内对应名称')后，又改回设置，才知道自己白忙了。但是强迫症让我一发不可收拾了，于是在pagination.ejs、archive.ejs、head.ejs···里如法炮制，基本能改的都实现语言可替换了。

去掉作者和更新日期

作者还能有谁？没又有人会关心什么时候更新。_config.yml里改不了，so用同样的手法找出代码位置Tinny\layout\_partial\post\header.ejs，还是删删删。

##去掉导航栏里的按钮##
pacman里的侧边栏按钮改造而来，但是太高端了，一点就让侧边栏先卡在底部一会再归位，所以在Tinny\layout\_partial\header.ejs里把它干掉了。

侧边栏优化

最蛋疼的一步，一开始想让侧边栏只在首页出现，而文章页只有随鼠标滚动的标题导航。还是找代码位置，找了好久发现侧边栏和标题导航都在sidebar.ejs里，这回可就不只是一个删字了；还得回到上层去理解layout里的调用关系，又弄了半天才搞懂Tinny\layout\layout.ejs是分配样式的大总管，同位于layout的各页面.ejs文件去_partial或_widget文件夹里认领组件来组成页面主体部分，最后到layout.ejs组装成一个个页面。在layout里发现了文章页为page.layout=='post'，于是将sidebar.ejs里的

1
2
3
4
5
6
<% if( table&&(item.toc !== false) && theme.toc.aside){ %>
  <div id="toc" class="toc-aside">
  <strong class="toc-title"><%= __('contents') %></strong>
  <%- toc(item.content) %>
  </div>
<% } %>

拿出来另外建立个toc.ejs;并在layout.ejs中将post样式的<%- partial('_partial/sidebar',{item: page,table: true}) %>换为<%- partial('_partial/toc',{item: page,table: true}) %>。

但是侧边栏是消掉了，文章却还是卡在右边没到中间，标题导航也没有出来；我傻眼了，好在还有个about页面文章是在中间的；此时我又逗逼了，没在chrome调试器里找问题却在layout.ejs一通乱改，浪费不少时间，后来将两者的css两相对比一下就知道问题了；about页面多了这个

.page
@media tablet
margin-left 10% !important

所以去找css的源头Tinny\source\css\_partial\index.styl加了个 

div.post
@media tablet
margin-left 10% !important

而之所以写div.post是因为还有些section元素也是post样式，以此防止它们也改变为居中使样式打乱。

好了，文章顺利居中，标题导航却还有出来；想再对比一下css，于是傻傻把导航栏里的按钮请出来，其实代码里很明显就有个display属性了。在helper.styl改了改，又嫌它在手机端太难看，还是最终关了它，算是白忙了。

至此，侧边栏终于合我心意了···

去footer

Tinny改了pacman那个信息量比较大的footer后，如果没有被container撑到底下footer就会停在中间；嗯，一开始我是想保留它的，但改样式却没有使他沉底的效果，一怒之下还是在layout.ejs中把它砍了。注意footer-later不要砍，要不然文章加载不了。

遗憾与教训

以上的折腾终于装修出一个还算可以的界面了，当然也有几处强迫症看来的遗憾，比如归档页侧边栏的月份列表就没有实现汉化、多说评论框在手机端会挡住返回顶部按钮，这些都是因为代码够不到而改不了。或许还有其他坑，就待我以后慢慢补了。

这几天忙乱中也有不少教训，首先强迫症是罪魁祸首，搞的自己活受罪；其次基本没有看清调用关系就乱改大体样式，越改越乱；还有不好好用网页调试器找代码位置白白浪费时间。嗯，就这样咯，接下来再继续完成装修吧！