Hugo PaperMod

A fast, clean, and responsive theme for Hugo.

Based on hugo-paper, with additional features and customization options.

Live Demo	adityatelange.github.io/hugo-PaperMod
Documentation 📚	Github Wiki
Example Site Source	exampleSite branch

---

Features 💥

☄️ Fast | ☁️ Fluent | 🌙 Smooth | 📱 Responsive

• Asset pipeline -- Hugo's built-in asset generator with fingerprinting, bundling, and minification.
• Three layout modes -- Regular, Home-Info, and Profile.
• Light and dark themes -- Automatic switching based on browser preference, plus a manual toggle.
• Multilingual support -- Includes a built-in language selector.
• Search -- Client-side search powered by Fuse.js.
• SEO optimized -- Open Graph, Twitter Cards, and Schema.org structured data out of the box.
• Cover images -- Per-post cover images with responsive image support.
• Table of contents -- Auto-generated from heading structure.
• Multiple authors -- Native support for multi-author sites.
• Social icons and share buttons -- Configurable social links and per-post sharing.
• Breadcrumb navigation
• Post archives and taxonomies
• Code block copy buttons -- One-click copying with Chroma syntax highlighting.
• Related post suggestions
• Zero JS build dependencies -- No webpack, Node.js, or other tooling required.

---

Extended Features (from PaperModX Fork)

This version includes additional features merged from the PaperModX fork:

Floating Table of Contents (TocSide)

Display a floating Table of Contents on the side of your content.

params:
  TocSide: right    # or 'left'

The ToC will be fixed to the side of the screen on wide screens (1440px+) and collapse into an inline details element on smaller screens.

InstantClick (SPA Navigation)

Enable InstantClick for faster page transitions with preloading.

params:
  EnableInstantClick: true

This makes navigation behave like a Single Page Application (SPA):

• Preloads pages on hover/click
• Shows a progress bar during navigation
• Excludes /search page by default

Telegram Comments Widget

Add Telegram Comments widget to your posts.

{{ partial "telegram_widget.html" (dict "channel" "your_channel" "limit" 10) }}

Or in Markdown with a partial call:

{{< partial "telegram_widget.html" (dict "channel" "my_channel" "limit" 10 "accentColor" "#573eaa") >}}

Parameters:

• channel (required): Your Telegram channel username
• limit (optional): Number of comments to show (default: 10)
• accentColor (optional): Accent color for the widget

New Shortcodes

Blockquote with Author

{{< blockquote author="Author Name" source="Source Name" link="https://example.com" >}}
Your quote text here.
{{< /blockquote >}}

All parameters are optional.

Standout

Highlights a paragraph with special styling:

{{< standout >}}
This is an important point that needs to stand out from the rest of the content.
{{< /standalone >}}

Figure with Custom Size

{{< figure-img-size "Caption text" "500px" "300px" >}}
![Image alt](/path/to/image.jpg)
{{< /figure-img-size >}}

Custom Link Colors (CSS Variables)

Customize link colors using CSS variables in your custom CSS or extended styles:

:root {
    --link-color: rgb(30, 30, 30);
    --link-hover-color: #573eaa;
    --link-background-color: #e8e3f7;
    --link-underline-shadow: 0 1px 0 var(--link-color);
    --link-hover-underline-shadow: 0 2px 0 var(--link-hover-color);
}

[data-theme="dark"] {
    --link-color: rgb(218, 218, 219);
    --link-hover-color: #876fd6;
    --link-background-color: #5242746d;
}

Simple Icons (svg.toml)

The theme now includes a comprehensive set of SVG icons from Simple Icons. You can use them via the data/svg.toml file:

# In your config
[social]
  - name: "GitHub"
    url: "https://github.com/username"

Or access any icon directly from the data file:

{{ index site.Data.svg "github" | safeHTML }}

This provides 1500+ brand icons ready to use.

---

Installation 📖

Topic	Description
Installation guide	Detailed installation and update instructions
Features wiki page	In-depth explanations of all features
FAQ wiki	Common questions and configuration walkthroughs
Icons wiki	Documentation for social icons and share icons
Variables wiki	List of all available template variables
Overiding templates	Guide to customizing templates without forking
Releases	Detailed history of releases

---

Performance ☄️

PaperMod consistently scores near-perfect results on Pagespeed Insights.

---

Support 🫶

• Star this repository to show your support.
• Share PaperMod with others who might find it useful.
• Sponsor the project on GitHub Sponsors or Ko-Fi.

---

Special Thanks 🌟

• Highlight.js
• Fuse.js
• Feather Icons
• Simple Icons
• InstantClick
• All contributors and supporters

---

Stargazers 📈