"Translated" to create a Hexo theme -Part2: other pages

• Original Address: the Create AN HEXO Theme-Part2: Other Pages and the
• Original author: Jonathan Klughertz

In this tutorial series, you'll learn how to make a Hexo theme from scratch. In part1, we have created a home page and start working. In this article, we will apply the completion of the remaining pages.

Article details page

Let us continue to complete the remaining work part1 and creates article details page. As we have seen, in order to generate a details page, Hexo will /layout/find a folder post.ejsfile. This is my post.ejs file:

// layout/post.ejs
<%- partial('_partial/article-full', {item: page}) %>
复制代码

In order to make the code more orderly, we will put the actual code _partial/article-full.ejsin. Now the first to create this file:

// layout/_partial/article-full.ejs

<div class="blog-post">
    <!-- Title -->
    <h2 class="blog-post-title">
        <a href="<%- config.root %><%- item.path %>">
            <%- item.title || item.link%>
        </a>
    </h2>
    <!-- Date and Author -->
    <p class="blog-post-meta">
        <%= item.date.format(config.date_format) %>
        <% if(item.author) { %>
            by <%- item.author %>
        <% } %>
    </p>
    <!-- Content -->
    <%- item.content %>
    <hr />
    <!-- Tags and Categories links -->
    <%- partial('article-tags', {item: item}) %>
    <%- partial('article-categories', {item: item}) %>
</div>
复制代码

This template is almost `` _partial / article-excerpt.ejs`, except:

• We used <%- item.content %>to show full-text content rather than summary
• At the bottom of the new two parts, namely a tag portion and a classification portion. Then they were created.

Article tags

Posts tagged part will generate all labels corresponding article: layout/_partial/article-tags.ejsWe want to create a series of tags and links, each link will be guided to the corresponding tab page, and tab page displays all articles that label.

// layout/_partial/article-tags.ejs

<% if (item.tags && item.tags.length){ %>
<%
    var tags = [];
    item.tags.forEach(function(tag){
        tags.push('<a href="' + config.root + tag.path + '">#' + tag.name + '</a>');
    });
%>
<div class="blog-tags-container">
    <span class="glyphicon glyphicon-tags"></span>
    <%- tags.join(' ') %>
</div>
<% } %>
复制代码

Quite simply, we pass post.tagsall tags traversing the article and let these labels one after the show. I added a # in front of each label, and add an icon in the list of additional front.

Article Categories

layout/_partial/article-categories.ejsThe content above is very similar

// layout/_partial/article-categories.ejs

<% if (item.categories && item.categories.length){ %>
<%
    var categories = [];
    item.categories.forEach(function(category){
        categories.push('<a href="' + config.root + category.path + '">' + category.name + '</a>');
    });
%>
<div class="blog-categories-container">
    <span class="glyphicon glyphicon-folder-open"></span>
    <%- categories.join(' / ') %>
</div>
<% } %>
复制代码

Not repeat them here.

Style article

Some people may have noticed, we were given a classification label portion and a portion of the class name, which is styled as a convenience to them. This is the relevant code, add them into blog.cssthe:

// source/css/blog.css

.blog-tags-container, .blog-categories-container {
    margin-top: 30px;
    font-size: 20px;
}
.blog-tags-container span.glyphicon, .blog-categories-container span.glyphicon {
    margin-right: 20px;
}
复制代码

Page type template details page

This is very simple. "Page type template" and "Article type template" is almost the same. Customize it as an exercise to look like, this is my setup:

// layout/page.ejs
<%- partial('_partial/article-full', {item: page}) %>
复制代码

Archive Page

Home page and archive will be displayed as a list of articles, but it should be more simple --- although infrastructure and home is about the same:

// layout/archive.ejs

<% page.posts.each(function(item){ %>
<%- partial('_partial/article-archive', {item: item}) %>
<% }); %>
<%- partial('_partial/pagination') %>
复制代码

Archives page section

As before, the actual work is article-archive.ejsdone. I'm using article-excerptas a base structure, we made a proper cut, leaving only the title, date and author.

// layout/_partial/article-archive.ejs

<div class="blog-post">
    <!-- Title -->
    <h2 class="blog-post-title-archive">
        <a href="<%- config.root %><%- item.path %>">
            <%- item.title || item.link%>
        </a>
    </h2>
    <!-- Date and Author -->
    <p class="blog-post-meta">
        <%= item.date.format(config.date_format) %>
        <% if(item.author) { %>
            by <%- item.author %>
        <% } %>
    </p>
</div>
复制代码

Careful people may have noticed, I created the title of a new class name (they are too big, I do not like):

// source/css/blog.css
.blog-post-title-archive {
    margin-bottom: 5px;
    font-size: 25px;
}
复制代码

Tabs and category pages

Finally, we also need to create two pages. Tab will include all of the corresponding article a label, category pages empathy. If you remember the words:

template	Spare Template	Page description
archive	index	This is an archive page. It will show in our blog title and details page links to all articles
category	archive	This is the category pages. Similar archive page, but will be screened according to category
tag	archive	This is the tab. Similar category pages, but will be screened according to the label

tag.ejsAnd 'category.ejs' rollback pages are archive.ejs. I think these three pages is not much difference, we just use archive.ejsthe fallback page only. Benefit is to reduce the amount of code, improve code reusability and maintainability.

However, in order to distinguish between these three pages, we add to the archive page title bar:

// layout/archive.ejs

<%
    var title = '';
    if (page.category) title = page.category;
    if (page.tag) title = page.tag;
    if (page.archive){
        if (page.year) title = page.year + (page.month ? '/' + page.month : '');
        else title = "Archives";
    }
%>
<% if(title) { %>
   <h2 class="blog-archive-title"><%- title %></h2>
<% } %>
<% page.posts.each(function(item){ %>
<%- partial('_partial/article-archive', {item: item}) %>
<% }); %>
<%- partial('_partial/pagination') %>
复制代码

Now we have a nice title to describe the types of archive pages. This is the corresponding CSS styles:

// source/css/blog.css
.blog-archive-title {
    margin-bottom: 50px;
}
复制代码

The second article in this tutorial is very simple, you just need to know the first article the concept can be mentioned. I strongly recommend that you try to modify the theme according to your taste.

In the third article, we will add a comments section, section statistics, decorative parts and make some improvements. We look forward to seeing you again!

Reproduced in: https: //juejin.im/post/5cf0b197f265da1b855c3bf8