Showing posts as titles only in Hexo

  1. Create your own theme
  2. Understanding the layout

Now I’m running this blog with Hexo 5.2, it works fine, just an annoying problem there. Hexo displays a posts list on the home page, both titles and contents are shown by default, which gives a poor performance when loading the page, especially if there are third party iframes in them; and besides, site visitors might not interested in posts contents at the first glance, what they want to known is what topics your blog is talking about.

So, I am going to modify the default Hexo theme, to show post titles only on the home page.

Create your own theme

In fact, I am not going to modify the default theme directly. It’s always a best practice not to modify the official theme, creating your own one base on the default one could be a good idea.

Here, I am creating a new theme called liyuan. You can do this just by copying the landscape directory to a new liyuan directory in the same directory.

Then use it as the current theme, edit _config.yml:

1
theme: liyuan

Understanding the layout

All pages use the default layout.ejs as a base template. For the home page, the index.ejs template file is used to describe the appearance of it:

1
<%- partial('_partial/archive', {pagination: 2, index: true}) %>

_partial/archive.ejs is used to render what a post looks like:

1
2
3
4
5
<% if (pagination == 2){ %>
  <% page.posts.each(function(post){ %>
    <%- partial('article', {post: post, index: true}) %>
  <% }) %>
<% }%>

Now we’ve got the actual template for rendering a post - _partial/article.ejs.

We can’t modify this file, because it’s the template file used by both the home page and post pages. We can create a duplicate and rename to article-homepage.ejs.

Remove the div.article-entry tag from the source code of article-homepage.ejs.

Finally, edit _partial/archive.ejs to use our new article-homepage.ejs template:

1
2
3
4
5
<% if (pagination == 2){ %>
  <% page.posts.each(function(post){ %>
    <%- partial('article-homepage', {post: post, index: true}) %>
  <% }) %>
<% }%>