Hexo-创建分类（categories）和标签（tags）首页

概述

默认安装的 hexo 本身是没有分类和标签首页的，
例如：http://orzcss.com/categories/
页面打开后，总是显示 Cannot GET /categories/
尝试了很多方法还是无效。

找了很多资料，都没有人提供解决方案，更多的是没有答案的问题，也许是这个问题太简单了，没人愿意记录笔记。

现在告诉大家怎么实现。

步骤一

新建一个页面，命名为 ‘categories’ | ‘tags’。命令如下：

hexo new page "categories"

hexo new page "tags"

步骤二

编辑刚新建的页面，将页面的类型设置为 categories | tags ，主题将自动为这个页面显示 分类|标签云。页面内容如下：

---
title: 分类
date: 2016-10-21 11:59:10
type: "categories"
---

---
title: 标签
date: 2016-10-21 11:59:10
type: "tags"
---

注意：如果有启用多说 或者 Disqus 评论，默认页面也会带有评论。需要关闭的话，请添加字段 comments 并将值设置为 false，如：

---
title: 分类
date: 2016-10-21 11:59:10
type: "categories"
comments: false
---

---
title: 标签
date: 2016-10-21 11:59:10
type: "tags"
comments: false
---

步骤三

在菜单中添加链接。编辑 yilia/_config.yml（我用的是 yilia 主题），添加 categories | tags 到 menu 中，如下:

menu:
  home: /
  archives: /archives
  categories: /categories
  tags: /tags

步骤四 【这一步非常重要!!!】

找到 layout/_partial/article.ejs （我用的是 yilia 主题）

然后找到 <div class="article-entry" itemprop="articleBody"> 这一行

这个 div 里面的内容全部替换为：

<% if (page.type === "tags") { %>
<div class="tag-cloud">
	<div class="tag-cloud-title">
	<%- _p('counter.tag_cloud', site.tags.length) %>
	</div>

	<div class="tag-cloud-tags">
	<%- tagcloud({
		min_font: 12,
		max_font: 30,
		amount: 200,
		color: true,
		start_color: '#ccc',
		end_color: '#111'
		}) %>
	</div>
</div>

<% } else if (page.type === 'categories') { %>

<div class="category-all-page">
	<div class="category-all-title">
	<%- _p('counter.categories', site.categories.length) %>
	</div>
	
	<div class="category-all">
	<%- list_categories() %>
	</div>
	
</div>

<% } else { %>

	<% if (post.excerpt && index){ %>		<%- post.excerpt %>
	<% } else { %>
		<%- post.content %>
	<% } %>
<% } %>

步骤五

修改样式，如果觉得不好看，自己改喜欢的样式

找到 yilia/source/css/_partial/article.styl 在最后面添加下面的 css 代码

/*tag-cloud*/
.tag-cloud {
  text-align: center;
  margin-top: 50px;
}
.tag-cloud a {
  display: inline-block;
  margin: 10px;
}
.tag-cloud-title {
  font-weight: 700;
  font-size: 24px;
}
.tag-cloud-tags {
  margin-top: 15px;
  a {
    display: inline-block;
    text-decoration: none;
    font-weight: normal;
    font-size: 10px;
    color: #fff;
    line-height: normal;
    padding: 5px 5px 5px 10px;
    position: relative;
    border-radius: 0 5px 5px 0;
    font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
    &:hover {
      opacity: 0.8;
    }
    &:before {
      content: " ";
      width: 0;
      height: 0;
      position: absolute;
      top: 0;
      left: -18px;
      border: 9px solid transparent;
    }
    &:after {
      content: " ";
      width: 4px;
      height: 4px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
      position: absolute;
      top: 7px;
      left: 2px;
    }
  }
  a.color1 {
    background: #FF945C;
    &:before {
      border-right-color: #FF945C;
    }
  }
  a.color2 {
    background: #F5C7B7;
    &:before {
      border-right-color: #F5C7B7;
    }
  }
  a.color3 {
    background: #BA8F6C;
    &:before {
      border-right-color: #BA8F6C;
    }
  }
  a.color4 {
    background: #CFB7C4;
    &:before {
      border-right-color: #CFB7C4;
    }
  }
  a.color5 {
    background: #7B5D5F;
    &:before {
      border-right-color: #7B5D5F;
    }
  }
}

/*category-all-page*/
.category-all-page {
  margin-top: 50px;
  .category-all-title {
    font-weight: 700;
    font-size: 24px;
    text-align: center;
  }
  .category-list-item:after {
    content: '';
    clear: both;
    display: table;
  }
  .category-list-count {
    float: right;
    margin-left: 5px;
  }
  .category-list-count:before {
    content: '一共 ';
  }
  .category-list-count:after {
    content: ' 篇文章';
  }
}

最后打包发布完结！

---

关注 web翎云阁，定时推送，互动精彩多，若你有更好的见解，欢迎留言探讨！

本作品采用 知识共享署名 3.0 中国大陆许可协议 进行许可，分享、演绎需署名且使用相同方式共享。转载请务必保留本页网址和作者信息，否则即为侵权。

赏

谢谢你请我吃糖果