动手写一个hexo主题（下）

这个太长了，一篇文章整理不完，另开一篇

Home主页面

tag随机颜色

这个效果主要是tag标签随机一种颜色，然后每次打开它都是这种颜色。那么怎么实现这种效果呢？

首先，我是想使用js获取随机颜色然后用js把颜色给加上。那么问题来了，颜色是随机了，但是每次打开颜色都不一样，这样体验感觉很不好。因此，我们要找一个关系来让他赋予相应的颜色。

首先我想的是根据首字母来划分一定区域，比如说选5种颜色，然后0-26均匀划分5段，但是，这样还有一个问题，英文字母自然没有问题，但是汉字呢，判断起来就很困难，网上也有一些插件，但是我觉得为了实现这么一个小功能就引入这么大的文件，感觉没有必要。

那么第二种就想到了根据长度，这个就简单很多了，代码如下：

//================tag-icon颜色==========================

var tagIcons = [
  {
    "id": 0,
    "color": "#fd0f02"    //红色
  },
  {
    "id": 1,
    "color": "#42ba01"    //绿色

  },
  {
    "id": 2,
    "color": "#8a1eff"    //紫色

  },
  {
    "id": 3,
    "color": "#fe9402"    //橙色
  },
  {
    "id": 4,
    "color": "#0136fe"    //深蓝
  }
]


var getTagIcon = function(str) {
  var tagLength = str.length;

  if(tagLength <= 4) {
    return tagIcons[tagLength - 1].color;
  } else {
    return tagIcons[4].color;
  }
}

var TagBackgroundColor = function() {

  var tagsAll = $(".article-tag-list-link");
  // console.log(tagsAll);
  tagsAll.each(function() {
    $(this).css("background-color", getTagIcon($(this).text()));
  })
}

post文章页面

由于hexo把markdown的相应部分都渲染成了一定的class，那么直接定义class的样式就能显示出相应的markdown效果，比如说代码块、引用之类的。

代码高亮问题

写这一部分真的心酸，我以为hexo的highlight功能开启了就能自己高亮了，实际上，凉凉。找了半天解决方法，也没找到，本来看到一篇博客引入了prettify高亮插件，但是想了想自己写一个拉到了。于是我本着自己动手的原则写了一套代码高亮的css（抄SegmentFault的代码颜色）。其实也没有想象中的艰难，hexo把一些关键字都取了类名，直接自己定一个颜色，字体大小什么的就ok了。

按照一般情况，代码高亮的原理是highlight.js这个插件（还有别的插件），这个插件什么用呢，【源码没仔细看】，分了很多语言，里面应该是用正则判断相应的语句，比如说#这个注释符号。获取到之后会赋予一定的class类名。

然后怎么高亮呢，很简单一个css文件就行了，相应的类名给予一定的css代码就可以了。

缩进问题

还有一个部分就是缩进问题了，众所周知，空格是不会显示的，所以代码缩进在页面上预览的时候是不会出现的。这时候就要用一个white-space: pre-wrap;自动换行并且保留空格就行了。

图片过大问题

有时候用markdown插入图片的时候没有指定宽度，这样太大会把页面撑开，如何解决呢？

1
2
3

img {
  max-width: 100%;
}

解决方案很简单对吧。是的，但是不读别人的代码，我还真没有想到过。

Archives归档页面

ejs结构

这个页面参照了next主题的时间线效果，感觉这个效果很漂亮。这一部分实现起来有点小绕，为什么呢？

如果直接与后端交互直接获取想要的数据自然没有这些问题，但是这次使用的是hexo，提供了很多便利的同时也有很多限制，本来hexo在archives提供的有一个插入函数就是list_archives这个函数，这个函数会直接插入按时间归档好的一推信息，那么我不仅想显示时间，还想显示文章，这样很明显就不能用这个函数，那么就只能foreach循环，并写一些逻辑来显示。

那么本着尽量少些js的想法（hexo+github不知道为什么有时候js文件在hexo d上传之后会莫名其妙删除），直接用ejs写

<div class="archives-block">
<div class="achives-margin-left">

<% var last; %>
<% page.posts.each(function(article) { %>
  <% var year = article.date.year(); %>

  <% if (last != year) { -%>
    <% if (last != null) { -%>
      </div></section>
    <% } -%>
    <% last = year; %>
      
    <section class="archives-wrap">
      <div class="archives-year-wrap">
        <a href="<% url_for('archives/' + year ) %>" class="archives-year"><%= year %></a>
      </div>
      <div class="archives">

        <% } %>
          <!-- 时间归档模板部分 -->
          <div class="archives-item">
            <span class="archives-item-time"><%= date(article.date,'M-D') %></span>
            <a href="<%= url_for(article.path)%>"><%= article.title %></a>
          </div>
      
<% }); %>

    </div>
    </section>
</div>
</div>

这一段参考了yilia的作者的写法，这一部分如果只看标签的话，那么绝对是不会闭合的，因为这里面为了区分出不同年份一组的效果，使用了if判断一定条件，当满足时会将标签闭合，这样就能让不同年份的一组不在同一个标签组内。

前面的小圆点

这一个效果使用before插入


&:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 50%;
  margin-left: -4px;
  margin-top: -4px;

  width: 6px;
  height: 6px;
  background-color: #bbb;
  border-radius: 50%;
  border: 1px solid #ffffff;
  z-index: 5;
  transition-duration: 0.5s;
}

```    

其实很简单就能实现,注意使用absolute绝对定位，定位好相应的位置即可达成效果,后面的竖线效果同理。

#### 前面的竖线


这一部分本想用border-left实现，但发现会有多余的部分，不如使用absolute定位方便

```css 

&:after {
  content: " ";
  position: absolute;
  top: 42px;
  left: 0;
  margin-left: -2px;

  width: 4px;
  height: 100%;
  background-color: #f5f5f5;
  z-index: 1;
}

Tag标签归档页面

这一部分没什么太多要说的，主要是一个页面布局的问题，由于使用了辅助函数，所以html结构就不是由我来决定，因此css布局上的方案并不是很恰当。这里由于不能使用calc函数计算，所以使用了在父元素使用padding和border-box来定位一个百分比宽度。内部a标签由于是内联元素，要想指定宽度，需要使用display:block来改成块级元素。

自己定义一个新模板

这里我自己定义了一个新页面tags归档页面，本来hexo是没有带这个归档模板的，这里我使用hexo new page tags命令，然后会在hexo根目录下source中生成一个tags文件夹，里面会有一个index.md文件打开后设置相应内容即可，目前由于不需要更多的功能，所以添加一个layout: "tags"即可，这时在建立ejs文件就ok了