Functionality of Category, layout of Category page

[ladychili]

Categorizing and tagging are different functionalities. But apparently, Category page is using exactly the same layout as Tag page, which is not reasonable. i.e. It's hard to skim the posts under a certain category, especially when there are a lot of articles under that category.

Possible solution:

1. It would be better to just list post titles and omit the content when selecting a particular category, or
2. Show more information (i.e. lists of post titles) on the category page, instead of treating it as the tag page.

[vanducng]

Hi @ladychili and @ppoffice, I did try to customize a bit the css and layout as below. Hope it can be used in the master branch.

• Add block of css code to source/css/style.scss

.category-wrap {
    margin: 1em 0;
    font-size: .9rem;

    a {
        color: black;
        margin: 0.2em;

        &:before {
            font-family: "FontAwesome";
            content: "\f0da";
            margin-right: 0.5em;
        }

        &:hover {
            color: darkgray;
        }
    }

    .category-list-child {
        padding-left: 2em;
    }
}

.category-list-count{
    &:before {
        content: "(";
    }
    &:after {
        content: ")";
    }
}

• Update the layout/categories.ejs as following using list_categories helper function.

  <section class="section section-heading">
  <div class="container">
      <div class="content">
          <h5><i class="far fa-folder"></i><%= __('common.categories') %></h5>
      </div>
  </div>
  <div class="container">
      <div class="category-wrap">
          <% if(site.categories.length) { %>
          <%- list_categories(site.categories) %>
          <% } %>
      </div>
  </div>
  </section>

• Result looks as below:

• Reference: hexo-theme-hiero theme