Blist Hugo Theme

To control where a blog post excerpt ends in list views, insert the <!--more--> HTML comment within your markdown content. Content appearing before this tag will be used as the summary/excerpt, while content after it will be part of the full post body.

Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina...

The theme expects a specific directory structure for blog posts. You can follow the pattern found in the exampleSite/ folder:

.
├── blog       # Blog Section
│   ├── post1   # Post 1
│   ├── post2   # Post 2
│   └── _index
└── ...

When deploying to platforms like Netlify or Vercel, use the following command to build your site. Setting HUGO_ENVIRONMENT=production enables CSS purging for optimized performance.

npm i && HUGO_ENVIRONMENT=production hugo --gc

The theme includes a fully configured exampleSite. To preview it quickly:

1. Navigate to the example site directory.
2. Copy the package.json from the theme folder to your root (if not already done).
3. Run npm install.
4. Start the Hugo server pointing to the theme directory.

cd themes/blist/exampleSite/
hugo serve --themesDir ../..

The Blist theme supports server-side rendering of math equations using Hugo's built-in KaTeX engine. To use LaTeX expressions in your Markdown content, you must enable and configure the Hugo Goldmark passthrough extension in your hugo.yaml configuration file. This allows the Markdown parser to recognize specific delimiters for inline and block math.

markup:
  goldmark:
    extensions:
      passthrough:
        delimiters:
          block: [['\[', '\]'], ['$$', '$$']]
          inline: [['\(', '\)']]
        enable: true

Follow these steps to integrate the theme into your existing Hugo project:

1. Copy package.json and package-lock.json from the theme folder to your website's root folder.
2. Run npm install to install the required dependencies.
3. Install postcss-cli globally to enable PostCSS support: npm i -g postcss-cli.
4. In your hugo.toml file, set theme = 'blist'.
5. Start your local development server using npm start.

npm install
npm i -g postcss-cli
# Then in hugo.toml:
theme = 'blist'
# To run:
npm start

To use the Blist theme, you must have Hugo version 0.110.0 or higher installed. You can install the theme by cloning the repository directly into your Hugo site's themes/ directory or by adding it as a git submodule.

# Option 1: Clone directly
git clone https://github.com/apvarun/blist-hugo-theme.git themes/blist

# Option 2: Add as a git submodule
git submodule add https://github.com/apvarun/blist-hugo-theme.git themes/blist

When creating blog posts in the Blist theme, use Hugo front matter to define metadata. Key fields include author, title, date, description, tags, and thumbnail. The thumbnail field accepts a path to an image file used for post previews.

---
author: "Hugo Authors"
title: "Placeholder Text"
date: 2021-07-13
description: "Lorem Ipsum Dolor Si Amet"
tags: ["markdown", "text"]
thumbnail: /blog-post.jpg
---

The Blist theme supports standard Markdown syntax and basic HTML elements for content creation. This includes:

• Headings: # through ###### for H1 to H6.
• Blockquotes: Standard > syntax, including support for citations using <cite> and footnotes.
• Tables: Standard Markdown table syntax (supported out-of-the-box by Hugo).
• Lists: Ordered (1.), Unordered (-), and nested lists.
• Inline HTML Elements: The theme provides CSS decoration for:
  • <abbr> (Abbreviations)
  • <sub> (Subscript)
  • <sup> (Superscript)
  • <kbd> (Keyboard input)
  • <mark> (Highlighted text)

Once the passthrough extension is configured, you can use LaTeX syntax directly in your Markdown files.

• Inline math: Use \( and \) delimiters to include math within a sentence.
• Block math: Use $$ or \[ and \] delimiters to render math on its own separate paragraph/block.

# Inline math
Inline math: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\)

# Block math
$$\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }$$

To activate the embedded Google Analytics template, set your ID in the hugo.toml file using the services.googleAnalytics.ID key.

[services]
  [services.googleAnalytics]
    ID = 'YOUR_ID'