litten / hexo-theme-yilia

一个简洁优雅的hexo主题 A simple and elegant theme for hexo.
http://litten.me/
8.36k stars 2.41k forks source link

添加标签页面无效 #835

Closed yansheng836 closed 5 years ago

yansheng836 commented 5 years ago

添加标签页面hexo new page tags,会在生成\source\tags\index.md文件,编辑的内容为:

---
title: tags
date: 2019-07-30 10:11:45
type: tags
comments: false
---

同时在配置文件\themes\yilia\_config.yml中设置:

menu:
  主页: /
  #随笔: /tags/随笔/
  分类: /categories
  归档: /archives
  相册: /photos
  标签: /tags

但是在执行hexo g后生成的\public\tags\index.html文件中却没有标签的相关内容(注:已有文章中存在有tag属性),所以显示的压根就只是一个空白页(如下图): image

和tags页面一样,categories页面也显示不出来。


但是归档: /archives页面好像只需要在配置文件中开启设置就可以了(这个功能好像内置了),查看了下source目录是没有/archives目录,而public\archives\index.html里面却是有归档内容,所以归档页面可以显示归档信息。 image

网上很多都说这样就可以直接生成有标签的页面,而我的却不行;我不知道是不是我在配置的时候删除了什么文件造成的?想问下有没有人遇到过同样的问题?

Cqh-i commented 5 years ago

添加标签页面hexo new page tags,会在生成\source\tags\index.md文件,编辑的内容为:

---
title: tags
date: 2019-07-30 10:11:45
type: tags
comments: false
---

同时在配置文件\themes\yilia\_config.yml中设置:

menu:
  主页: /
  #随笔: /tags/随笔/
  分类: /categories
  归档: /archives
  相册: /photos
  标签: /tags

但是在执行hexo g后生成的\public\tags\index.html文件中却没有标签的相关内容(注:已有文章中存在有tag属性),所以显示的压根就只是一个空白页(如下图): image

和tags页面一样,categories页面也显示不出来。

但是归档: /archives页面好像只需要在配置文件中开启设置就可以了(这个功能好像内置了),查看了下source目录是没有/archives目录,而public\archives\index.html里面却是有归档内容,所以归档页面可以显示归档信息。 image

网上很多都说这样就可以直接生成有标签的页面,而我的却不行;我不知道是不是我在配置的时候删除了什么文件造成的?想问下有没有人遇到过同样的问题?

你还需要指定它的布局文件,例如

---
title: 文章分类
date: 2019-08-19 11:48:35
toc: false
comments: false
layout: categories
---

然后在你的博客路径下(如\Blog\themes\yilia\layout)新建一个categories.ejs文件(用原来的category.ejs生成静态文件时会报错),内容如下:

<article class="article">
  <h3 class="category-count">共计 <%= site.categories.length %> 个分类, <%= site.tags.length %> 个标签</h3>
  <% if (site.categories.length){ %>
  <ul class="category-list">
    <% site.categories.sort('name').each(function(item){ %>
      <% if(item.posts.length){ %>
        <li class="category-list-item">
          <a href="<%- config.root %><%- item.path %>" class="category-list-link" title="<%= item.name %>">
            <%= item.name %>
            <span class="category-list-count"><%= item.posts.length %></span>
          </a>
        </li>
      <% } %>
    <% }) %>
  </ul>
  <% } %>
  <div class="tag-cloud">
    <%- tagcloud({
      min_font: 20, 
      max_font: 35, 
      amount: 999
    }) %>
  </div>
</article>

部署即可。你可以根据需要更改它的样式,具体效果如下: image 可以看我的博客分类标签页 样式可以参考我的,在main.0cf68a.css中添加

.category-count {
    text-align:center;
    line-height:3;
    font-size:18px;
    font-weight:bold;
}
.category-list {
    text-align:center;
    padding:20px
}
.category-list li.category-list-item {
    display:inline-block;
    margin:0 1em .5em 0;
    padding:4px;
    border:1px solid #aaaaaa;
    font-size:1.2rem
}
.category-list li.category-list-item:hover {
    background:rgba(204,204,204,0.3)
}
.tag-cloud {
    text-align:center;
    padding:20px
}
.tag-cloud a {
    margin:0 20px;
    word-break:keep-all;
    position:relative
}
.tag-cloud a:hover::before {
    width:100%;
    left:0;
    right:auto
}
.tag-cloud a::before {
    content:"";
    position:absolute;
    width:0;
    right:0;
    bottom:0;
    height:2px;
    background:#08c;
    -webkit-transition:width .3s ease;
    transition:width .3s ease
}
yansheng836 commented 5 years ago

有效,非常感谢。

coin-mwk commented 4 years ago

追加css内容后没有反应是怎么回事

yansheng836 commented 4 years ago

追加css内容后没有反应是怎么回事

额,这个问题问得太“大”了,具体原因未知,不过你可以尝试下面几种方法:

handsomeBin11 commented 7 months ago

感谢!🙏