转载自:http://orzcss.com/posts/5a207d64/
概述
默认安装的 hexo 本身是没有分类和标签首页的,
例如:http://orzcss.com/categories/
页面打开后,总是显示 Cannot GET /categories/
尝试了很多方法还是无效。
找了很多资料,都没有人提供解决方案,更多的是没有答案的问题,也许是这个问题太简单了,没人愿意记录笔记。
现在告诉大家怎么实现。
步骤一
新建一个页面,命名为 ‘categories’ | ‘tags’。命令如下:
1 2 3
|
hexo new page "categories"
hexo new page "tags"
|
步骤二
编辑刚新建的页面,将页面的类型设置为 categories | tags ,主题将自动为这个页面显示 分类|标签云。页面内容如下:
1 2 3 4 5
|
--- title: 分类 date: 2016-10-21 11:59:10 type: "categories" ---
|
1 2 3 4 5
|
--- title: 标签 date: 2016-10-21 11:59:10 type: "tags" ---
|
注意:如果有启用多说 或者 Disqus 评论,默认页面也会带有评论。需要关闭的话,请添加字段 comments 并将值设置为 false,如:
1 2 3 4 5 6
|
--- title: 分类 date: 2016-10-21 11:59:10 type: "categories" comments: false ---
|
1 2 3 4 5 6
|
--- title: 标签 date: 2016-10-21 11:59:10 type: "tags" comments: false ---
|
步骤三
在菜单中添加链接。编辑 yilia/_config.yml
(我用的是 yilia 主题),添加 categories | tags 到 menu 中,如下:
1 2 3 4 5
|
menu: home: / archives: /archives categories: /categories tags: /tags
|
步骤四 【这一步非常重要!!!】
找到 layout/_partial/article.ejs
(我用的是 yilia 主题)
然后找到 <div class="article-entry" itemprop="articleBody">
这一行
这个 div 里面的内容全部替换为:
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
|
<% 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 代码
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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106
|
/*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; 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: ' 篇文章'; } }
|
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步