Learn and Discover Open Source with Daily Genuine Experience. From Coding, Front End, Back End, Database, and Static Site Generator.
 
 


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.

Table of Content

  • Preface: Table of Content

  • 1: Services

  • 2: Before Content: Table of Content

  • 3: Inside Content: Advertisement

  • What is Next ?

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 soe articel series, we only need one TOC. And we do not want to repeat ourself, wring 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.