PaperModY

PaperModY is a conversion-focused fork of PaperModX, designed specifically for experts, consultants, and content creators who want to optimize their Hugo sites for lead generation and audience building.

Work in Progress

Key Features:

• Expert Profile Mode: Complete conversion-focused homepage layout
• Conversion Shortcodes: CTA buttons, testimonials, problem-solution blocks
• Latest Hugo Features: Word count, reading time, code copy buttons, reading progress
• Enhanced Social Icons: Bluesky, Threads, Substack, Signal, LinkedIn support
• Multilingual Support: Full internationalization capabilities
• Table of Contents (ToC) floating on the side
• InstantClick integration
• Social icons from Simple Icons
• Opinionated UI enhancements

Getting started

You can use the included exampleSite as a starting point to create a new Hugo site with PaperModY theme.

Expert Profile Mode

PaperModY introduces a powerful Expert Profile Mode designed for conversion optimization. This mode replaces the standard homepage with a conversion-focused layout perfect for experts, consultants, and content creators.

Configuration

Add the following to your hugo.yaml config file:

params:
  mode: "expert"
  ShowWordCount: true
  ShowReadingTime: true
  ShowCodeCopyButtons: true
  ShowReadingProgress: true
  
  expertProfile:
    image: "/images/author.jpg"
    name: "John Doe"
    valueProposition: "I help X achieve Y by Z"
    ctaText: "Get Daily Tips"
    ctaUrl: "/newsletter"
    ctaCount: "Join 1K readers"
    
    testimonial:
      image: "/images/testimonial.jpg"
      quote: "Amazing insights that transformed my business!"
      author: "Jane Smith"
      role: "CEO, Tech Startup"
    
    problem:
      title: "Here's the problem"
    
    painSection:
      title: "The Pain"
      content: "Your audience struggles with X and can't figure out Y..."
    
    dreamSection:
      title: "The Dream"
      content: "Imagine if you could easily Z without any hassle..."
    
    fixSection:
      title: "The Fix"
      content: "My proven system helps you achieve this by..."
    
    newsletter:
      placeholder: "Enter your email"
      buttonText: "Subscribe"
    
    getStarted:
      text: "Get Started"
      url: "/start"

  # Newsletter configuration (compatible with Kit.com/ConvertKit, Mailchimp, etc.)
  newsletter:
    action: "https://subscribepage.io/yourusername" # Kit.com landing page
    # Or for ConvertKit forms: "https://convertkit.com/forms/your-form-id"
    # Or for Mailchimp: "https://your-domain.us1.list-manage.com/subscribe/post"

Multilingual Expert Mode

PaperModY supports multiple languages for expert profiles:

languages:
  en:
    params:
      expertProfile:
        name: "John Doe"
        valueProposition: "I help entrepreneurs scale their businesses"
  de:
    params:
      expertProfile:
        name: "Max Mustermann"
        valueProposition: "Ich helfe Unternehmern beim Skalieren ihrer Geschäfte"
  nl:
    params:
      expertProfile:
        name: "Jan Jansen"
        valueProposition: "Ik help ondernemers hun bedrijf te laten groeien"

Conversion Shortcodes

PaperModY includes three powerful shortcodes for conversion optimization:

CTA Button

{{< cta-button text="Get Started Today" url="/signup" count="Join 1,000+ users" style="primary" >}}

Parameters:

• text: Button text (default: "Get Started")
• url: Target URL (default: "#")
• count: Social proof text (optional)
• style: "primary" or "secondary" (default: "primary")

Testimonial

{{< testimonial image="/images/customer.jpg" quote="This changed everything!" author="Sarah Johnson" role="Marketing Director" >}}

Parameters:

• image: Avatar image (optional)
• quote: Testimonial text (required)
• author: Person's name (required)
• role: Their title/role (optional)

Problem-Solution

{{< problem-solution 
    problem="Businesses struggle with low conversion rates and unclear messaging."
    dream="Imagine having crystal-clear messaging that converts visitors into customers."
    solution="My proven framework helps you craft compelling copy that drives results." >}}

Parameters:

• problem: The pain point description
• dream: The desired outcome
• solution: Your solution/approach

Latest Hugo Features

PaperModY includes the latest Hugo features for enhanced user experience:

Word Count & Reading Time

params:
  ShowWordCount: true
  ShowReadingTime: true

Code Copy Buttons

params:
  ShowCodeCopyButtons: true

Reading Progress Bar

params:
  ShowReadingProgress: true

Enhanced Social Icons

PaperModY includes additional social icons for modern platforms:

params:
  socialIcons:
    - name: "bluesky-simple"
      url: "https://bsky.app/profile/yourhandle"
    - name: "threads-simple"
      url: "https://threads.net/@yourhandle"
    - name: "substack-simple"
      url: "https://yourname.substack.com"
    - name: "signal-simple"
      url: "https://signal.group/your-group"
    - name: "linkedin-simple"
      url: "https://linkedin.com/in/yourname"

Logo (Light/Dark)

Add a light and dark logo that switches with theme:

params:
  logo:
    iconLight: "/images/icon-blue.png"
    iconDark: "/images/icon-white.png"
    iconHeight: 30
    iconWidth: 30

Place these in your site's assets/images/. For the exampleSite, run the server with config.expert.yml to see them in action.

Available new icons:

• bluesky-simple
• threads-simple
• substack-simple
• signal-simple
• Plus all existing PaperModX icons

Newsletter Integration

PaperModY includes a comprehensive newsletter system perfect for building your email list:

Newsletter Pages

• Dedicated newsletter section with branded styling
• Newsletter archive pages
• Individual newsletter issue pages
• Built-in subscription forms

Newsletter Forms

The newsletter opt-in form appears in both:

1. Expert Profile Mode: Integrated into the conversion flow
2. Newsletter Pages: Standard newsletter subscription pages

Email Service Integration

Works with all major email services:

Kit.com (ConvertKit):

params:
  newsletter:
    action: "https://subscribepage.io/yourusername"

Mailchimp:

params:
  newsletter:
    action: "https://your-domain.us1.list-manage.com/subscribe/post"

Other Services: Replace the action URL with your email service's form endpoint.

Newsletter Content

Create newsletter issues in /content/newsletter/ with frontmatter:

---
title: "Your Newsletter: Issue Title"
date: 2024-01-01
issueno: "001"
---

Table of Contents (ToC) floating on the side

By adding config:

params:
  TocSide: 'left'  # or 'right'

ToC will float on the left/right side of the page. You can take a look at how 'right' feels like in Installation | Update.

The ToC box is responsive, it only shows on the side when minimum screen size is 1440px.

This feature is enabled on this site.

InstantClick integration

By adding config:

params:
  EnableInstantClick: true

InstantClick will be enabled, making navigation behaves like Single Page Application.

Note that /search pages are omitted from InstantClick to prevent conflicts from search's JavaScript, this may be changed in the future after refactoring those scripts.

Another thing to notice is smooth scrolling will be disabled if InstantClick is enabled, because they both listen click event on every <a> tags. IMO smooth scrolling is not very useful so it has to give way to InstantCllick.

This feature is enabled on this site.

Give links an accent color.

Though PaperModX is designed to be minimal, accent color is still essential. It's a good way to show personality and make your site feels more delightful.

The default color is a purple vibe, you can customize the colors of link, link underline and their hover variants by override the following css variables in assets/css/extended/custom.css of your site.

:root {
  --link-color: var(--primary);
  --link-hover-color: #573eaa;
  --link-underline-shadow: 0 1px 0 var(--link-color);
  --link-hover-underline-color: #573eaa;
  --link-hover-underline-shadow: 0 2px 0 var(--link-hover-underline-color);
}

Customize pagniator size

In section pages, if you want the paginator size be different from the global config, you can add paginate in the frontmatter to customize.

---
paginate: 10
---

Menus external link

You can add external: true to a menu item's params to mark it as an external link, this will add a small icon to the end, and make the link open in new tab when clicked.

menu:
  main:
    - name: "@Author"
      url: "https://reorx.com"
      params:
        external: true

Highlight code with Chroma, no bullshit

PaperMod uses highlight.js to highlight code blocks. In PaperModX, we use Chroma which is the recommended way in Hugo's official docs, thus changing theme is easily supported.

By default the themes are github for light and dracula for dark, you can change it by adding chroma-light.css and chroma-dark.css in site's assets/css/lib directory.

Social icons from Simple Icons

Add social icons with -simple suffix from Simple Icons.

Available icons:

• github-simple
• rss-simple
• telegram-simple
• twitter-simple
• pinboard-simple

The icons are moved from layouts/partials/svg.html to data/svg.toml, makes it easier to maintain, it's now possible to have an index page to show all the icons, check it out at: Icons Preview

Opinionated UI enhancements

• Distinguish home page width and post page width, post page is wider (800px) for better readability, you can change it by --post-width in theme-vars.css.
• Menu links are always bold, this feels more consistent when clicking around. Active links have deeper color.