Preface
Goal: What Hexo can do in this article series
Making theme consist of these steps:
-
Preparing general layout
-
Making necessary custom pages
-
Adding stylesheet for content
-
Optional feature, such as pagination
1: Layout
Minimal Theme
In my early attempt with static site, it is always trying to understand how the theme works. The easiest thing to do this is to make a minimal theme, and modified later. Our minimal theme only need two artefacts. It is layout.ejs and index.ejs
Of course you need better than these two. From header, footer, to nice looks stylesheet.
article: Hexo - Minimal
Layout Template
Your typical layout would contain header and footer This is an example of typical layout in a theme.
- themes/tutor-01/layout/layout.ejs
<html>
<%- partial('site/head') %>
<body>
<%- partial('site/header') %>
<div id="content">
<%- body %>
</div>
<%- partial('site/footer') %>
</body>
</html>
And your typical content would be, a markdown file (or html file) with frontmatter on top.
- source/index.html
---
title: Welcome to Heartbeat
---
<p>Every journey begins with a single step.</p>
With very humble result as:
article: Hexo - Layout
Adding Assets
You can add any necessary assets such as: images, css frameworks, and javascript frameworks.
And see the result in action:
article: Hexo - Bulma - CSS - Part One
CSS Frameworks
Using CSS framework such as Bulma or Bootstrap, can make your life easier. Here is an example of Bulma top navigation in Hexo:
article: Hexo - Bulma - CSS - Part Two
Using SASS
SASS is a must have skill for theme maker. Every CSS frameworks built on CSS preprocessor. Long code tends to get messy. You need to get organized.
Now you can have a nicer looks in browser:
With your own colourshceme, to match your company logo, or your personal portfolio.
article: Hexo - Bulma - SASS - Part One
More Layout
Or further, you can utilize stylesheet, to control your responsive space, such as padding and margin. Then custom component, such as box effect that control: border, shadow, rounded.
article: Hexo - Bulma - SASS - Part Two
Now we are done with Hexo’s layout.
2: Custom Pages
Hexo has this four special page sections:
-
Index
-
Archive
-
Category
-
Tag
Default Pages
The URL looks like these below:
For example, this is a tag page:
article: Hexo - EJS - Section List - Part One
Custom Layouts Pages
However you still have to make your own page for summary:
Or even landing Page
Styling Layout
Instead of plain looks, you can style custom layout.
With any looks, as creative as you can.
article: Hexo - EJS - Section List - Part Two
Simple Summary Page
Your attempt to make summary page should be just a simple loop.
And then you can make a nice looks, from that simple loop above, using bulma’s button class.
article: Hexo - EJS - Custom Page - Part One
Complex Summary Page
You can go further by showing tree of pages in this summary page.
article: Hexo - EJS - Custom Page - Part Two
Custom Output
Without adding any plugin, Hexo cannot generate custom output. But we can render any content to .html, or .js, as shown in local json file below:
- file:///home/username/…/archives_local.json
This is useful when you need to generate data.
article: Hexo - EJS - Custom Output
Widget
Hexo is not just about page and post, you can put anything in your layout as creative as you are. For example is this archive tree below:
article: Hexo - EJS - Widget
Data
You can also utilize data to generate content, such as backlink, internal link, or other stuff.
# Helper for related links
# Archives by Date
...
- id: 15010108
title: "Dead Poet Society"
url: 2015/01/01/quotes/dead-poets-society/
- id: 15100308
title: "Every Day"
url: 2015/10/03/quotes/every-day/
...
Now consider link the data from this content below:
---
title : Susan Wong - I Wish You Love
date : 2015/05/15 07:35:05
tags : [pop, 70s]
category : [lyric]
related_link_ids:
- 15051515 # The Way We Were
---
I wish you bluebirds in the spring
To give your heart a song to sing
<!-- more -->
I wish you health
And more than wealth
I wish you love
With that article, now we can see one or more links in a widget:
article: Hexo - EJS - Data
3: Content
After you are done with basic layout and cutom pages, now you can work in detail with content.
Layout: EJS Post
Your typical post.ejs should contain header, and optionally footer (such as license) and navigation. Or even more, services such as google adsense and disqus comment.
- themes/tutor-04/layout/post.ejs
<main role="main"
class="column is-two-thirds has-background-white
blog-column box-deco">
<div class="blog-post">
<%- partial('post/header') %>
<article>
<%- page.content %>
</article>
<br/>
<%- partial('post/navigation') %>
</div><!-- /.blog-post -->
<%- partial('post/footer') %>
</main>
<aside class="sidebar column is-one-thirds is-paddingless">
<%- partial('widget/related-posts') %>
...
</aside>
A complete post can be seen in preview below:
article: Hexo - Content - Blog Post
Markdown
Be aware of markdown configuration, as it takes tweak to make it follow standard practice.
- _config.yml
# Markdown
marked:
gfm: true
breaks: false
Your typical markdown is shown as below:
---
layout : page
...
---
# Header 1
My content
[My Link][my-image]
-- -- --
## Header 1.1
My sub content
![My Image][mylink]
-- -- --
## Header 1.2
My other sub content
[//]: <> ( -- -- -- links below -- -- -- )
[my-image]: http://some.site/an-image.jpg
[my-link]: http://some.site/an-article.html
There is also hexo admin to help you work with markdown.
Just be aware for Bulma user, that you need to make an adjustment, to make heading works in Hexo.
article: Hexo - Content - Markdown
Layout: Raw HTML
You can also add raw html layout instead of EJS. This is useful when you want to add service, or just plain html such as TOC in figure below:
article: Hexo - Content - Raw HTML
Syntax Highlighting
Syntax highlighting in Hexo is using figure tag. Sometimes you need to fix the stylesheet. It is an easy task. Then later you can add color and stuff to make it looks nicer. After all it depends on your creativity.
article: Hexo - Content - Syntax Highlighting
Meta SEO
Content is not just for human, but also for machine that read this page. Especially search engine and social media. Opengraph is a must nowadays. Your article should have preview as shown in telegram chat below.
article: Hexo - Meta - SEO
4: Pagination
Sometimes you need a special feature that require algorithm. Yes, this pagination is common, but a complex task to do. Luckily I have made a step by step guidance, on how to achieve it with Hexo.
Numbering
Using EJS and Bulma stylesheet, a common pagination could be achieved.
article: Hexo - Pagination - Indicator
Responsive
Using EJS custom stylesheet, a responsive pagination also could be achieved.
article: Hexo - Pagination - Responsive
Handling URL
There are sections, that we can put pagination inside it. We need to handle these URL correctly with EJS function.
-
Index: http://localhost:4000/blog/
-
Archives (root): http://localhost:4000/archives/
-
Archives (year): http://localhost:4000/archives/2018/
-
Archives (month): http://localhost:4000/archives/2018/09/
-
Categories: http://localhost:4000/categories/lyric/
Pagination can be placed in many places.
article: Hexo - Pagination - Handling URL
Conclusion
I think that is all.
This media can also be read in a nice web presentation. Consider continue reading [ Hexo - Presentation Slide ].
What do you think ?