How To Show Post Excerpts on Blogger when Writing with Markdown, Pandoc and Minify

Table of Contents

• The Problem
• How to Add a Read More Link in Blogger
• How to Keep the Jump Break(Read More) block in Minify
• Add Read More Block Automatically After TOC
• Fix the Relative Toc Link in Index Page
• Bonus: Blogger Conditional Tags for different page types

Awesome Tips Series about Blogger

The Problem

I want to show partial posts in homepage, label page, search page or index pages.

I write posts with Markdown using Atom Editor, then use Pandoc to convert it to HTML, then use minify to remove commented draft content and minified the html and CSS to reduce the html size.

How to Add a Read More Link in Blogger

We can do this by add insert jump break button in Blogger:

It’s equivalent to add <!--more--> in the html code in the Markdown file.

How to Keep the Jump Break(Read More) block in Minify

By default minify removes all comments, so it will also remove the <!--more-->.

Luckily, we can use minify’s –html-keep-conditional-comments feature to keep the <!--more-->.

We can create the following conditional comments that will actually exist in all browser:(if browser’s type is not XYZ)

<!--[if !XYZ]><!--more-->
<!--<![endif]-->

Bonus: Add a Snippet in Atom Editor

CLICK ME to EXPAND

To add this easily in Atom Editor, we can define the following snippet by Applications: Open Your Snippets in the command palette (cmd+shift+p):

'read more':
  'prefix': 'l_read_more'
  'body': '<!--[if !XYZ]><!--more--><!--<![endif]-->'

---

Add Read More Block Automatically After TOC

It’s a good place to add Read More after TOC(table of contents).

We can use pandoc --toc --toc-depth=4 to generate TOC for all h1, h2, h3 and h4 headers.
We can add toc:true(false) in the Markdown yaml-meta-block to control whether add TOC or not.

---
toc: true
---

To make it Pandoc automatically Read More after TOC, we can generate our own template based on default template: pandoc -D html >$HOME/.pandoc/templates/default.html.
Then update default.html to change the if(toc) block like below:

$if(toc)$
<nav id="$idprefix$TOC" role="doc-toc">
<h4>Table of Contents</h4>
$table-of-contents$
</nav>
<!--[if !XYZ]><!--more-->
<!--<![endif]-->
$endif$

Fix the Relative Toc Link in Index Page

Last but not least, there is one problem in the generate TOC, it uses relative url: <a href=#the_anchor_id>the_text</a>, but it will not work when it shows in label page, search page etc, as the base url is (for example https://lifelongprogrammer.blogspot.com/2019/07), not the url of the post.

Base tag would not work: as only the first base tag works, and it affects all relative links.

We can use javascript to iterate all TOC links: find its post title, and change tTOC link’s base to the post title’s url.

// index page
if (!window.location.pathname.endsWith(".html")) {
  var links = document.querySelectorAll("#TOC a")
  links.forEach(function (link) {
    var post = link.closest(".post.hentry.uncustomized-post-template")
    var base = post.querySelector("h3>a").href;
    var parts = link.href.split('#');
    var anchor = parts[parts.length-1];
    link.href= base+'#'+anchor
  });
}

Bonus: Blogger Conditional Tags for different page types

<b:if cond='data:blog.pageType == "item"'>
</b:if>

Minifier

• Online Html Minifier
  • Minify HTML and any CSS or JS included in your markup
• Command Line: HTML minifier