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.
-
- themes/tutor-05/layout/post.ejs
- gitlab.com/…/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>
<%- 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
-
- themes/tutor-05/layout/layout.ejs
- gitlab.com/…/layout/kind/default.ejs
<!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.
-
- themes/tutor-05/layout/post.ejs
- gitlab.com/…/layout/post.ejs
<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.
-
- source/_posts/lyrics/natalie-cole-i-wish-you-love.md
- gitlab.com/…/…i-wish-you-love.md
---
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.
-
- themes/tutor-05/layout/toc/2015-05-susan-wong.html
- gitlab.com/…/layout/toc/2015-05-susan-wong.html
<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.
What is Next ?
Consider continue reading [ Hexo - Syntax Highlighting ]. There are, some interesting topic about Syntax Highlighting in Hexo Content.
Thank you for reading.