Hexo - Content - Raw HTML

   
   
 hexo  bulma  sass  
 ssg  frontend  
Article Series

This article series contain few sections.

Related Article Series

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Inserting Raw HTML before content.

Sometimes we need to add raw HTML content. We can do it before or after, the content. And in the middle of content using shortcodes.

Source Code

You can download the source code of this article here.

Extract and run on CLI using $ npm install.

1: Services

Most static site generator has their own function helper to provide internet services such as google analytics, google adsense or discuss comments. This helper, is very useful for beginner. For other case, it is more flexible to render your own service layout.

Layout: EJS Post

Your can put your service anywhere you want. For example this post.ejs artefact.

  <main role="main" 
        class="column is-two-thirds has-background-white
               blog-column box-deco">
    <div class="blog-post">
      <%- partial('post/header') %>

      <article>
        <%- partial('service/google-adsense') %>
        <%- page.content %>
      </article>
      
      <br/>
      <%- partial('post/navigation') %>
    </div><!-- /.blog-post -->
    
    <%- partial('post/footer') %>
    <%- partial('service/disqus-comments') %>
  </main>

  <aside class="sidebar column is-one-thirds is-paddingless">
    <%- partial('widget/related-posts') %>
    ...
  </aside>

Layout: EJS Default

Or layout.ejs artefact, for side wide analytic

<!DOCTYPE html>
<html lang="en">
<%- partial('site/head') %>
<body>
<%- partial('service/google-analytics') %>
<%- partial('site/header') %>

  <div class="columns is-8 layout-base maxwidth">
    <%- body %>
  </div>

<%- partial('site/footer') %>
<%- partial('site/scripts') %>
</body>
</html>

Layout: EJS Services

Now you can have your services here

  • themes/tutor-05/layout/service/disqus-comments.html
<!-- put your disqus code here -->

I do not give example of this service code. There is already examples on the internet.

Service Article

For detail about setting up services, you might want to read my Hugo article service here:

2: Before Content: Table of Content

Sometimes we need to show recurring content, such as table of content in article series. For some article series, we only need one TOC. And we do not want to repeat ourself, writing it over and over again.

To solve this case, we need help form frontmatter.

Layout: EJS Post

We are going to insert TOC, before the content.

        <article class="main-content" itemprop="articleBody">
          <% if (page.toc) {%>
            <%- partial(page.toc) %>
          <% } %>

          <%- partial('service/google-adsense') %>

          <%- page.content %>
        </article>

Content: Example

Now here it is, the toc in frontmatter, as shown in this example below.

---
title     : Susan Wong - I Wish You Love
date      : 2015/05/15 07:35:05
tags      : [pop, 70s]
category  : [lyric]
toc       : "toc/2015-05-susan-wong"

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

Layout: EJS TOC

Now you can have your services here.

<section class="panel is-light">
  <div class="panel-header">
    <p>Table of Content</p>
    <span class="fa fa-archive"></span>
  </div>
  <div class="panel-body has-background-white">
    <ul class="panel-list">
      <li><a href="<%= url_for("/2015/05/15/lyrics/natalie-cole-i-wish-you-love/") %>"
            >Susan Wong - I Wish You Love</a></li>
      <li><a href="<%= url_for("/2015/05/15/lyrics/barbara-streisand-the-way-we-were/") %>"
            >Susan Wong - The Way We Were</a></li>
    </ul>
  </div>
</section>

Notice the .html file extension.

Render: Browser

Now you can see the result in the browser.

Hexo Raw HTML: Table of Content

What is Next ?

Consider continue reading [ Hexo - Syntax Highlighting ]. There are, some interesting topic about Syntax Highlighting in Hexo Content.

Thank you for reading.