[Hexo] Customize hexo-cactus theme using .ejs

Example Picture

1. Change ‘Writing’ to ‘Recent Posts’

index.articles indicates “writing”.
Need to change variable index.articles to “Recent Post”

#path: themes>cactus>layout>index.ejs
<section id="writing">
  <span class="h1"><a href="<%- url_for("archives") %>"><%= __('index.articles') %></a></span>
  <% if (theme.tags_overview && site.tags.length) { %>

default.yml save variables.
modified code:

#path: themes>cactus>languages>default.yml
 index:
   find_me_on: Find me on
   enum_comma: ','
   enum_and: and
   articles: wrting # change to -> Recent Posts
   projects: Projects
   topics: Topics
   most_recent: Most recent

2. Display Categories on the first page

Note. prerequisite: categories page

$ hexo new page categories

and adding type:categories to source>categories>index.md

Need to insert following code:

#path: themes>cactus>layout>index.ejs
<section id="categories" class="left">
  <div class="category-list-title">
      <span class="h1"><a href="<%- url_for("categories") %>"><%= __('nav.category') %></a></span>
      <% var visibleCategories = 0 %>
      <% site.categories.each(function(cat){ %>
        <% if (cat.length) { %>
          <% visibleCategories += 1 %>
        <% } %>
      <% }) %>
      <%- _p('counter.categories', visibleCategories) %>
  </div>
  <div class="category-list">
    <%- list_categories() %>
  </div>
</section>

after the code below:

<section id="writing">
  <span class="h1"><a href="<%- url_for("archives") %>"><%= __('index.articles') %></a></span>
  <% if (theme.tags_overview && site.tags.length) { %>
  <span class="h2"><%= __('index.topics') %></span>
  <span class="widget tagcloud">
    <%- tagcloud(theme.tags_overview) %>
  </span>
  <span class="h2"><%= __('index.most_recent') %></span>
  <% } %>
  <ul class="post-list">
    <% var field_sort = theme.posts_overview.sort_updated ? 'updated' : 'date' %>
    <% if (theme.posts_overview.show_all_posts) { %>
      <% var show_posts = page.posts.sort(field_sort, 'desc') %>
    <% } else { %>
      <% var show_posts = site.posts.sort(field_sort, 'desc').limit(theme.posts_overview.post_count || 5) %>
    <% } %>
    <% show_posts.each(function(post, i){ %>
      <li class="post-item">
        <%- partial('_partial/post/date', { post: post, class_name: 'meta' }) %>
        <span><%- partial('_partial/post/title', { post: post, index: true, class_name: '' }) %></span>
      </li>
    <% }); %>
  </ul>
  <% if (theme.posts_overview.show_all_posts) { %>
    <%- partial('_partial/pagination') %>
  <% } %>
</section>

3. Make the logo stay bright

Corret the code as below

#path: theme>cactus>source>css>_partial>header.styl
#logo
  display: inline-block
  float: left
  margin-right: 20px
  width: $logo-width
  height: $logo-height
  border-radius: 5px
  # delete -> filter: grayscale(100%)
  background-size: $logo-width $logo-height
  background-repeat: no-repeat
  # delete -> -webkit-filter: grayscale(100%)

and delete the code below:

#header:hover
  #logo
    filter: none
    -webkit-filter: none

4. Place Categoy & Recent Posts side by side

prerequisite: add class ‘.left’, ‘right’ to each section</br>
Correct the code .content as below:

#path: themes>cactus>source>CSS>style.styl
.content
  position: relative
  flex-wrap: wrap
  flex-direction: row
  min-height: 100%
.left
  float: left
.right
  float: right

5. Mange font color

path: themes>cactus>source>css>style.styl