![\"Finding](\"https://getpublii.com/docs/media/posts/90/finding-target-selector-2.webp\")
\nThe Content Counter plugin adds shortcodes that display content counts anywhere on your Publii site. Posts, pages, tags, authors - drop a shortcode into your content or template, and it gets replaced with the actual number during rendering.
\nThis happens at build time. The plugin scans your site's content structure, counts the relevant items, and replaces every shortcode in the final HTML. Your visitors see static numbers - no JavaScript, no API calls, no extra requests.
\nYou get control over what gets counted, how labels are formatted, and how the output is styled. The plugin handles meta tags and JSON-LD separately from visible content, so your SEO stays clean regardless of how you use the shortcodes.
\nOpen Publii and head to the Tools & Plugins section. Find Content Counter in your plugin list and flip the switch at the bottom-left corner of its tile to turn it on.
\nOnce enabled, you'll see configuration options and a reference card listing all available shortcodes. The plugin works immediately with default settings - just start adding shortcodes to your content.
\nThese shortcodes output a single number - the count of the specified content type.
\n[pcc=posts] - total number of published posts. This is the most common shortcode. Use it in footers, about pages, or anywhere you want to show how much content your site has.
[pcc=pages] - total number of published pages. Counts static pages like About, Contact, or any custom pages you've created.
[pcc=total] - combined count of posts and pages. Useful when you want a single number representing all content on the site.
[pcc=featured] - number of posts marked as featured. Only counts posts, not pages.
These shortcodes count posts belonging to a specific tag or written by a specific author. You can reference tags and authors by their slug (the URL-friendly name) or by their numeric ID.
\n[pcc=tag name=tutorials] - number of posts in the tag \"tutorials\" (by slug). The slug is the URL-friendly version of the tag name - lowercase, hyphens instead of spaces. You can find it in the tag's URL on your site.
[pcc=tag id=5] - same thing, but using the tag's numeric ID. IDs are stable - if you rename a tag, the ID stays the same. Slugs are more readable but change when you rename a tag.
[pcc=author name=olivia-reynolds] - number of posts by the author \"olivia-reynolds\" (by slug).
[pcc=author id=3] - same thing, using the author's numeric ID.
If a tag or author doesn't exist (wrong slug or ID), the shortcode is left as-is in the output. This makes it easy to spot typos - you'll see the raw shortcode on your page instead of a number.
\nAdding label to a tag or author shortcode includes the tag or author name alongside the count. The position of label in the shortcode controls the output order.
Label before the name/id parameter - name first:
\n[pcc=tag label name=tutorials] → Tutorials: 5[pcc=author label id=3] → Olivia Reynolds: 12This format works well for headings, sidebar widgets, and data labels. The separator between the name and the count (colon by default) is configurable in the plugin settings.
\nLabel after the name/id parameter - count first:
\n[pcc=tag name=tutorials label] → 5 Tutorials[pcc=author id=3 label] → 12 Olivia ReynoldsThis format reads naturally in sentences. No separator is used - just a space between the count and the name. For example:
\nThis site has [pcc=tag name=tutorials label] available.\n→ This site has 5 Tutorials available.All shortcodes support three separator formats between pcc and the type:
[pcc=posts] - equals sign (recommended)[pcc-posts] - hyphen (alternative)[pcc=posts] - HTML entity (generated automatically by Publii's WYSIWYG editor)You don't need to worry about the third format. Publii's editor sometimes encodes the = character as = behind the scenes. The plugin handles this automatically - just type [pcc=posts] in the editor and it works.
These settings control what gets counted and how labels are formatted.
\nInclude hidden posts and pages - when enabled, posts and pages with \"hidden\" status are included in all counts. Off by default. Most sites want to count only published, visible content. Turn this on if your hidden posts are still meaningful for your total count - for example, if you use \"hidden\" to keep posts out of listings but they're still accessible via direct link.
\nLabel separator - the character placed between the name and the count when using label-before mode (e.g., [pcc=tag label name=tutorials]). A space is always added after the separator, before the count. Choose from built-in presets:
: (colon) - Tutorials: 5 (default)- (dash) - Tutorials - 5| (pipe) - Tutorials | 5→ (arrow) - Tutorials → 5This setting only affects label-before mode. Label-after mode always uses a simple space between the count and the name.
\nCustom separator - your own separator character(s). Only appears when \"Label separator\" is set to \"Custom.\" You can enter anything here - a single character, a word, an emoji, whatever fits your design.
\nThese settings control the HTML structure of the generated output.
\nWrap output in <span> tags - when enabled, every shortcode output gets wrapped in <span> elements with CSS classes for styling. Off by default. With this disabled, shortcodes are replaced with plain text - just numbers and names, no HTML.
When enabled, the output structure depends on the shortcode type:
\nBasic shortcode:
\n<span class=\"pcc pcc-posts\">42</span>Tag/author shortcode with label before:
\n<span class=\"pcc pcc-tag\"><span class=\"pcc pcc-label\">Tutorials:</span> 5</span>Tag/author shortcode with label after:
\n<span class=\"pcc pcc-tag\">5 <span class=\"pcc pcc-label\">Tutorials</span></span>Custom CSS class - the base class applied to all generated <span> elements. Default is pcc. Only appears when \"Wrap output in <span> tags\" is enabled. The plugin automatically adds type-specific modifiers:
pcc-posts, pcc-pages, pcc-total, pcc-featured - for basic countspcc-tag, pcc-author - for tag and author countspcc-label - for the name portion inside label shortcodesIf you change the base class to, say, counter, the modifiers follow: counter-posts, counter-tag, etc.
Just type the shortcode directly in your content. Works in both the WYSIWYG editor and the source code editor.
\nWe have published [pcc=posts] articles and [pcc=pages] pages so far.After rendering, your visitors see:
\nWe have published 56 articles and 14 pages so far.Shortcodes work in any .hbs file in your theme. Place them wherever you need dynamic counts - headers, footers, sidebars, post templates.
<div class=\"site-stats\">\n <p>[pcc=posts] articles published</p>\n <p>Browse our [pcc=tag label name=tutorials]</p>\n</div>Enable \"Wrap output in <span> tags\" in the plugin settings, then add CSS rules targeting the generated classes. You can add styles via Publii's built-in Custom CSS tool (found in Tools & Plugins):
\n.pcc {\n font-weight: bold;\n color: #2563eb;\n}\n\n.pcc-label {\n font-weight: normal;\n color: #666;\n}If you place a shortcode in post content that Publii also uses to generate meta descriptions or JSON-LD structured data, the plugin handles it correctly. Shortcodes inside <head> are always replaced with plain numbers - no <span> tags, no HTML. Only shortcodes inside <body> get the optional HTML wrapping.
This means you can safely use shortcodes at the beginning of a post without worrying about HTML markup leaking into your Open Graph descriptions, meta tags, or search engine previews.
\nSimple site counter in footer - add [pcc=total] articles and counting to your footer template or a page that serves as your homepage. Leave all settings at default. Done.
Tag page with labeled count - use [pcc=tag label name=your-tag] in a heading or intro paragraph. The colon separator works well for this. Result: \"Photography: 23\".
Natural sentence with count - use label-after: Browse our [pcc=tag name=tutorials label] articles. Set the label separator to \"(none)\" if you're only using label-after mode. Result: \"Browse our 12 Tutorials articles\".
Author bio with post count - in your author template or bio section, use [pcc=author name=your-slug label] to show something like \"23 Olivia Reynolds\" - or flip it to [pcc=author label name=your-slug] for \"Olivia Reynolds: 23\".
Styled counters with custom classes - enable span wrapping, set a custom class like stats, and style with CSS. Each count type gets its own modifier (stats-posts, stats-tag, etc.), so you can color-code different counters or add different font sizes.
Including hidden content - if you use \"hidden\" status for draft-like posts that are still accessible via direct link, enable \"Include hidden posts and pages\" so your counts reflect the full library.
\nCheck these:
\n[pcc - case-sensitive, no spaces before the equals sign.Verify:
\nThis shouldn't happen - the plugin replaces shortcodes in <head> with plain numbers only. If you're seeing HTML in meta descriptions, make sure you're using the latest version of the plugin. Earlier versions didn't separate head and body processing.
The separator only applies to label-before mode ([pcc=tag label name=...]). Label-after mode ([pcc=tag name=... label]) always uses a simple space. If you've changed the separator and don't see the change, try disabling and re-enabling the plugin, or re-select the separator in plugin settings and generate again.
The Content Counter plugin gives you dynamic numbers on a static site without touching theme code or adding client-side scripts. Configure it once, add shortcodes where you need them, and the numbers update every time you build.
\nMost users only need the basic shortcodes - [pcc=posts] and [pcc=total] cover the majority of use cases. Tag and author counts with labels are there when you need more detail, and the HTML wrapping option is available when you want precise styling control.
The plugin never stores data. Everything is calculated fresh during each build, so you can experiment with settings freely. Change a separator, toggle hidden content, switch CSS classes - just generate again and see the result.
", "image": "https://getpublii.com/docs/media/posts/93/content-counter-plugin.png", "author": { "name": "Publii Team" }, "tags": [ "plugins" ], "date_published": "2026-03-16T08:37:06+01:00", "date_modified": "2026-03-16T08:40:45+01:00" }, { "id": "https://getpublii.com/docs/llms-txt-generator.html", "url": "https://getpublii.com/docs/llms-txt-generator.html", "title": "LLMS.txt Generator", "summary": "Introduction The LLMS.txt Generator plugin creates a standardized llms.txt file in your site's root directory. This file helps large language models - like ChatGPT, Claude,…", "content_html": "The LLMS.txt Generator plugin creates a standardized llms.txt file in your site's root directory. This file helps large language models - like ChatGPT, Claude, or Gemini - understand your site's structure and find your most important content.
\nThe plugin works during site generation. It scans your posts and pages, organizes them based on your priorities, and outputs a clean markdown file with links and descriptions. No runtime overhead. No JavaScript. Just a static file that AI models can read instantly.
\nYou control what gets included, in what order, and how it's labeled. The plugin handles duplicate prevention automatically, supports manual curation of key resources, and lets you customize section headings to match your site's language.
\nOpen Publii and navigate to Tools & Plugins. Find LLMS.txt Generator in your plugin list and activate it using the toggle at the bottom-left corner of its tile.
\nOnce enabled, the plugin reveals its configuration panel. Default settings work right away, but you'll likely want to customize which content appears and in what order.
\nUnderstanding the plugin's data flow helps you configure it effectively. Here's what happens during site generation:
\nThe plugin hooks into Publii's rendering process through the beforeRender event. At this point, Publii has already prepared your full content structure - all posts, pages, tags, and metadata - but hasn't written HTML files yet.
The plugin grabs this content structure and starts building the llms.txt file. It pulls from several sources:
\nThe plugin builds llms.txt section by section, always following the same sequence. This matters because later sections skip content that already appeared earlier. No duplicates.
\nHere's the exact order:
\nThis top-to-bottom processing means your manual selections always win. If you add a post to Key Resources, it won't appear again in Featured Articles or Latest Articles. The plugin tracks every post and page ID as it goes, maintaining a \"processed\" set that prevents repeats.
\nFor each entry, the plugin needs a description. It follows a priority chain to pick the best available text:
\nThe plugin also cleans descriptions before output. It converts HTML entities (like and …) to plain text equivalents, removes line breaks, and collapses multiple spaces. This ensures clean, readable markdown.
The final llms.txt file uses straightforward markdown:
\n# Your Site Name\n> Your site description\n\n## Important Notes\nThis site covers web development tutorials and best practices.\nFor support, contact us at support@example.com\n\n## Key Resources\n- [Important Guide](https://example.com/guide): Complete guide to getting started\n\n## Featured Articles\n- [How to Use Feature X](https://example.com/feature-x): Step-by-step tutorial\n\n## Main Topic: Tutorials\n- [Tutorial One](https://example.com/tutorial-1): Learn the basics\n- [Tutorial Two](https://example.com/tutorial-2): Advanced techniques\n\n## Latest Articles\n- [Recent Post](https://example.com/recent): What's new this week\n\n## Pages\n- [Contact](https://example.com/contact): Get in touch with our team\nClean. Scannable. Perfect for AI parsing.
\nThese control your llms.txt file's header and optional introductory sections.
\nSite Name - The main heading of your llms.txt file. If left empty, the plugin follows this priority chain: first it checks Publii's Page title (found in Site Settings → Advanced Options → SEO), then falls back to the regular Site name (Site Settings → Basic Options → Site Name). This field is useful if you want your llms.txt to show a different name than what appears on your actual website.
\nSite Description - A brief summary of what your site covers, displayed as a markdown quote block under the site name. Leave empty to use Publii's global meta description (found in Site Settings → Advanced Options → SEO). This description helps AI models understand your site's purpose before diving into individual posts.
\nOptional Notes - A repeater field where you can add custom sections at the top of the file, before any automatic content. Each note has two parts: a heading and content. Use these for things like:
\nYou can add as many notes as you need. If you want to create lists in the note content, start each entry with a hyphen, e.g.,
\n- JavaScript tutorials and guides\n- For support contact hello@example.com\n- Updated weekly with new contentThis section gives you complete control over your highest-priority content. Anything you add here appears in the \"Key Resources\" section at the top of your content listings, before any automatic sections.
\nKey Resources - Posts - Select specific posts to feature. For each post:
\nUse this for evergreen guides, your most important tutorials, or cornerstone content that defines your site.
\nKey Resources - Pages - Works exactly like posts, but for pages. Select a page, optionally override its title and description. If you don't provide a custom description, the plugin uses the page's individual meta description (from the SEO tab in the page editor), then its automatically generated excerpt. Useful for highlighting pages like \"Start Here,\" \"About,\" or \"How It Works.\"
\nKey Resources - Custom Links - Add links to external resources or internal content not managed by Publii. Each entry has three fields:
\nThis is perfect for linking to GitHub repositories, documentation hosted elsewhere, downloadable resources, or partner sites.
\nSkip duplicates in automatic sections - When enabled (default), any post or page you manually select won't appear again in Featured Articles, Latest Articles, or other automatic sections. This keeps your llms.txt file clean and prevents repetition. Disable this only if you deliberately want content to appear multiple times.
\nThese checkboxes control which sections the plugin automatically generates. The plugin processes content top-to-bottom and tracks what it's already included, so posts appearing in earlier sections never repeat in later ones.
\nInclude all 'Featured' posts - Disabled by default. Adds a \"Featured Articles\" section with every post you've marked as featured in Publii. Featured posts appear after Key Resources but before topic-grouped content. If you've already added a featured post to Key Resources manually, it gets skipped here.
\nUse featured posts for seasonally important content, recent highlights, or posts you want to promote temporarily without manual management.
\nGroup posts by their 'Main Tag' - Disabled by default. Creates separate sections for each main tag you've assigned to posts. The heading format is \"Main Topic: TagName\" (customizable in Localization settings).
\nEach post in Publii can have one main tag. If you don't explicitly set a main tag, Publii automatically uses the first assigned tag as the main one. Only posts without any tags at all don't appear in these sections.
\nThis organization helps AI models understand your content structure. A tech blog might have sections like \"Main Topic: JavaScript,\" \"Main Topic: Python,\" and \"Main Topic: DevOps.\" Posts already shown in Key Resources or Featured Articles won't duplicate here.
\nInclude Latest posts - Enabled by default. Adds a \"Latest Articles\" section with your most recent posts, in chronological order. Only posts not yet listed elsewhere appear here. You control the quantity with the next setting.
\nSkip 'hidden' posts in Latest - Enabled by default. When turned on, posts marked as hidden are excluded from the \"Latest Posts\" list.
\nNumber of Latest posts to include - Controls how many recent posts appear in the Latest Articles section. Accepts values from -1 upward. Set to -1 to include all remaining posts (every post on your site that hasn't appeared in earlier sections). Set to 0 to disable this section entirely despite having \"Include latest posts\" checked.
\nThink about your site's update frequency. A blog publishing daily might want 15-20 posts here. A site posting weekly might need fewer.
\nInclude all Pages - Disabled by default. When enabled, adds a final \"Pages\" section with links to all your published pages. Pages manually added to Key Resources get skipped here. Useful for ensuring AI models can find your Contact, About, Privacy Policy, and similar pages.
\nOverride default section headings to match your site's language. All fields show the English default but accept any text you want.
\nOnce configured, the plugin runs automatically every time you generate your site. No manual steps. No additional actions.
\nAfter site generation completes, check your site's root directory. You'll find llms.txt sitting alongside index.html and other root files. Upload this with your normal site sync.
The file will be accessible at https://yoursite.com/llms.txt. You can check it yourself by visiting that URL after uploading your site.
Example: Publii’s homepage exposes its file at https://getpublii.com/llms.txt.
\nLook at your configuration:
\nThe Reading Time plugin calculates how long it takes to read your posts and pages, then adds that estimate right into your HTML. No JavaScript. No client-side processing. Just clean, fast-loading pages with reading time already baked in.
\nThis happens during site generation. The plugin scans your content, counts words based on your reading speed settings, optionally factors in images and videos, then injects a formatted label wherever you want it. Your visitors see the final result - no waiting, no extra requests.
\nYou get control over what gets counted, how the math works, and where the label shows up. The plugin handles complex HTML structure, works with nested elements, and includes smart fallbacks so it keeps working even if your theme changes.
\nOpen Publii and head to the Tools & Plugins section. Find Reading Time in your plugin list and flip the switch at the bottom-left corner of its tile to turn it on.
\nOnce enabled, you'll see configuration options. The plugin ships with sensible defaults that work out of the box, but you can adjust everything to match your needs.
\nThis section controls where the plugin looks for content and where it places the reading time label.
\nContent container selector - This is one of the most important settings in the plugin. Here you tell the plugin which part of your HTML contains the actual post content that should be counted. Without pointing to the correct container, the plugin will count everything - including menus, sidebars, and comments - which ruins your reading time estimates.
\nThe default is .content__entry, which works with many Publii themes. You can list multiple selectors separated by commas. The plugin only counts words inside these containers. If your theme uses a different class - like .post-content or .entry-wrapper - update this field. You can combine multiple classes in one selector, like .entry-wrapper.content__entry.
If nothing matches, the plugin falls back to common HTML5 elements: article, then main, then body. This keeps things working even if your theme structure is unusual.
Exclude selector - Sometimes you don't want to count certain sections. Table of contents, sidebars, author bios - these add HTML bulk but aren't part of the reading experience. List any selectors you want ignored, separated by commas. The default excludes .post__toc and .content__footer. You can use HTML tags (blockquote, figure, figcaption), classes (.sidebar), or IDs (#comments). The plugin removes entire nested structures matching these selectors before counting anything.
Target selector - This is where the reading time label gets inserted. The default is .content__meta, which typically sits near post titles in Publii themes. You can use multiple selectors here too. The plugin tries each one in order and uses the first match it finds. Common alternatives include h1, .content__title, or .content__header.
Need help finding the right selector? Jump to Finding the Right Target Selector.
\nIf no target selector matches, the plugin skips injection entirely and logs a warning to the render log. This prevents the reading time label from appearing in unexpected locations.
\nInsert mode - Once the plugin finds your target element, this setting controls label placement. Four options:
\nafter - places the label right after the target element (outside it)before - places the label right before the target element (outside it)append - places the label inside the target, at the endprepend - places the label inside the target, at the beginningThe plugin is smart about inline vs. block elements. If your target is an inline element like <a> or <span> and your wrapper (see below) is a block element like <div>, the plugin automatically switches append to after and prepend to before. This prevents broken layouts.
Wrapper tag - The HTML tag that wraps your reading time label. Default is span, which works well for inline placement. Use div if you want block-level styling, or any other valid HTML tag that fits your design.
For security reasons, certain HTML tags are not allowed as wrappers: script, style, iframe, object, embed, form, input, button, select, textarea. If you specify one of these, the plugin defaults to div.
CSS class - A custom class applied to the inserted label, so you can style it however you like in your theme. Default is reading-time. You can specify multiple classes separated by spaces (up to 10). Class names are sanitized to include only letters, numbers, hyphens, and underscores.
These settings control how reading time is calculated.
\nWords per minute - Average reading speed. Default is 210 words per minute, which research suggests is typical for English readers. The field accepts values from 60 to 600. If your audience reads different languages or you want more conservative estimates, adjust this. Slower speeds (180–200) work well for technical content. Faster speeds (240–260) fit lighter material.
\nCount images - When enabled, each image adds a few seconds to the total time. Off by default. Turn this on if your posts include meaningful images that readers will pause to look at. Leave it off if images are purely decorative.
\nSeconds per image - How much time each image adds. Default is 12 seconds. Only appears when \"Count images\" is enabled. Research on image viewing varies widely. Twelve seconds works for most content. Increase it for infographics or complex diagrams. Decrease it for simple icons or decorative photos.
\nCount videos - Similar to images - adds time for video elements in your posts. Off by default.
\nSeconds per video - Time added per video element. Default is 20 seconds. Only appears when \"Count videos\" is enabled. Twenty seconds gives readers time to decide whether to play the video. If you embed full-length videos, you might want to increase this significantly - or leave video counting off entirely, since actual viewing time varies so much.
\nCount iframes as video - Treats <iframe> elements (YouTube embeds, Vimeo, etc.) as videos for time calculation. Uses the \"Seconds per video\" value. Off by default. Enable this if you embed videos via iframe. Keep it off if you use iframes for other purposes like interactive maps or widgets.
Count image alt text - Includes words from image alt attributes in the word count. Off by default. Turn this on if you write detailed alt text that readers with screen readers would actually \"read.\" Skip it if your alt text is minimal.
Rounding - Controls how fractional minutes are rounded. Three options:
\nceil (default) - always round up (2.1 becomes 3)round - round to nearest (2.4 becomes 2; 2.5 becomes 3)floor - always round down (2.9 becomes 2)Most blogs use ceil because readers prefer slight overestimates to underestimates. But round gives the most accurate feel.
Minimum minutes - The lowest number of minutes displayed. Default is 1. Set to 0 to disable. This prevents showing \"0 min read\" for very short posts. With a minimum of 1, anything under a minute rounds to 1.
\nMaximum minutes - The highest number of minutes displayed. Default is 0 (disabled). Set any positive number to cap the maximum. Useful if you have occasional very long posts and don't want to display \"73 min read.\" Setting a max of 30 or 60 keeps estimates reasonable.
\nThese templates control what readers actually see. The plugin selects templates based on the rounded minute value using simple rules:
\nThis system works well for languages with complex plural forms, like Polish or Czech. Even if you're writing in English, you get complete control over label text.
\nAll templates support three placeholders:
\n{m} — rounded whole minutes (e.g., 3){exact} — exact minutes with one decimal (e.g., 2.7){sec} — total seconds, rounded (e.g., 162)Available template options:
\n{sec} or {exact} here: \"about {sec} seconds\" or \"just {exact} minutes.\"{m} minute read (singular feel){m}-minute read (hyphenated)About {exact} minutes (shows decimal precision){m} min (minimal)Reading time: {m} minutes (explicit)Controls where the plugin runs and whether it logs debug information.
\nEnable on posts - Shows reading time on single post pages. Enabled by default.
\nEnable on pages - Shows reading time on static pages like About or Contact. Disabled by default. Most sites want reading time on blog posts but not on standalone pages. Adjust these checkboxes to match your needs.
\nDebug logs - When enabled, the plugin writes detailed information to Publii's Log Viewer (specifically rendering-process.log). For each page, you'll see:
Turn this on if the plugin isn't working as expected or if you want to verify calculations. Leave it off for normal operation.
\nOnce configured, the plugin works automatically. Every time you generate your site, it scans posts and pages (based on your enable settings), calculates reading time, and injects the label.
\nThe label appears wrapped in your chosen tag with your specified class. For example, with default settings:
\n<span class=\"reading-time\" aria-label=\"5 min read\">5 min read</span>The aria-label ensures screen readers announce the reading time properly. The class lets you style the label with CSS in your theme.
Add CSS rules targeting the class you configured. With the default reading-time class, you can add styles via Publii's built-in Custom CSS tool (found in Tools & Plugins):
.reading-time {\n color: #666;\n font-size: 0.9em;\n font-style: italic;\n}You can style it however you like - change color, size, spacing, add icons, whatever fits your design.
\nThe default .content__meta works with most Publii themes right out of the box. But if you're using a custom theme or want to place the reading time somewhere specific, here's how to find the right selector.
\nOpen your published site in Chrome (or any browser with developer tools). Right-click on the element where you want the reading time to appear - maybe near your post title, in the meta section, or in the header. Select Inspect or Inspect Element from the menu.
\nThe browser will open developer tools and highlight the HTML for that element. Look for:
\nclass=\"...\"id=\"...\"<h1>, <div>, <header>Pick the most specific selector that identifies your target element. For classes, add a dot before the name (like .post-meta). For IDs, add a hash (like #article-header). For HTML tags, just use the tag name (like h1).
Copy that selector into the \"Target selector\" field in plugin settings. Generate your site and check if the reading time appears where you wanted. If not, try a different selector or adjust the \"Insert mode\" setting.
\nMinimal setup - just word count - Leave images and videos unchecked. Set \"Words per minute\" to 210. Use default selectors if they match your theme. Done.
\nInclude images - Check \"Count images.\" Set \"Seconds per image\" to 12 (or adjust based on your content). If you embed YouTube videos via iframe, check \"Count iframes as video\" too.
\nTechnical blog with slower reading speed - Set \"Words per minute\" to 180–200. Technical content often includes code, diagrams, and dense explanations that slow reading.
\nMagazine-style with exact placement - Change \"Target selector\" to your specific element (maybe .article-header or .post-meta). Set \"Insert mode\" to prepend to place the label at the start of that element.
Multilingual label - Customize the plural templates to match your language. For example, in Polish:
\n{m} minuta czytania{m} minuty czytania{m} minut czytaniaHide very short posts - Set \"Minimum minutes\" to 2. Anything under 2 minutes displays as \"2 min read.\" Or customize \"< 1 minute text\" to \"Quick read\" for better feel.
\nCheck these:
\nrendering-process.log in Publii's Log Viewer to see what the plugin is doing.Enable debug logs to see word counts and calculations. Verify:
\nAdjust \"Target selector\" to a different element, or change \"Insert mode\" to before, after, append, or prepend until it looks right.
Make sure your \"Wrapper tag\" choice makes sense with your \"Insert mode.\" If you're inserting inside an inline element, use span as the wrapper, not div.
The Reading Time plugin gives you complete control over reading time estimates without touching your theme code or slowing down your site. Configure it once, generate your site, and it just works.
\nIf you need to adjust settings later, change the config and sync your site. The plugin never stores data - everything happens fresh during each build, so you can experiment freely.
\nMost users find the defaults work well. But if you want precise control over every detail - from content selection to plural forms to debug output - all the options are there.
", "image": "https://getpublii.com/docs/media/posts/90/reading-time-plugin-cms.png", "author": { "name": "Publii Team" }, "tags": [ "plugins" ], "date_published": "2025-10-16T07:45:14+02:00", "date_modified": "2025-12-01T09:05:09+01:00" }, { "id": "https://getpublii.com/docs/tabler-icons.html", "url": "https://getpublii.com/docs/tabler-icons.html", "title": "Tabler Icons Plugin", "summary": "Introduction The Tabler Icons Plugin provides an extensive and flexible system for integrating high-quality SVG icons from the Tabler library into your website. With thousands…", "content_html": "The Tabler Icons Plugin provides an extensive and flexible system for integrating high-quality SVG icons from the Tabler library into your website. With thousands of modern outline icons available, this plugin makes it easy to enhance your site’s interface and branding through clean, scalable visuals.
\nImportant: This plugin supports only outline-style icons from the Tabler collection. Filled icons are currently not supported and will not render via the shortcode.
\nTo explore the full list of available icons and their names, visit the Tabler Icons page. Hovering over or clicking an icon will reveal its name, which can be used directly in the shortcode.
\nAfter activation, you can adjust a variety of options that control how Tabler icons appear across your site.
\nCustomize the default appearance of icons using these core settings:
\nAccess extended controls for accessibility and icon rendering:
\nRecommendation: Due to the large size of the Tabler sprite file, inline SVG loading is strongly recommended. It avoids unnecessary network overhead and ensures optimal performance on all device types.
\nTabler icons can be inserted into post content, navigation menus, footers, or any HTML-enabled area. You may rely on default plugin settings or override them via shortcode attributes for precise control.
\nTo get icon names, visit the Tabler Icons page. Each icon's name appears on hover or after selection, which you can copy for use in shortcodes.
\nThe correct shortcode format must follow a specific attribute order for the icon to render properly on the frontend.
\n[ti=icon_name size=value_unit color=color_value class=class_names aria-hidden=true_or_false stroke-width=value]Use this exact order: icon name, size, color (in HEX format), class, aria-hidden, stroke width. This structure ensures proper icon rendering and styling.
\nExamples
\n<!-- Default Usage -->\n[ti=activity]\n\n<!-- Example with Size and Color -->\n[ti=activity size=30px color=#ff0000]\n\n<!-- Example with Size and Stroke Width -->\n[ti=activity size=4rem stroke-width=3]\n\n<!-- Example with Full Customization -->\n[ti=activity size=4rem color=#00ff00 class=icon aria-hidden=false stroke-width=4]\nSVG files are widely popular for logos and icons due to their scalability and small file size. However, a common issue arises when a dark-colored logo becomes invisible or hardly visible in dark mode, as its color remains unchanged. Fortunately, it's easy to set up your SVG file to automatically adapt colors based on the user's system preference (light or dark mode). Below you'll find detailed instructions on how to achieve this effectively.
\nThe first step is to include a dedicated <defs> section with embedded CSS styles, allowing the SVG to respond dynamically to color mode changes:
<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\">\n <defs>\n <style>\n .color {\n fill: #141416;\n }\n\n @media (prefers-color-scheme: dark) {\n .color {\n fill: #ffffff;\n }\n }\n </style>\n </defs>\n\n <!-- Your SVG content -->\n <path class=\"color\" d=\"...\" />\n</svg>In the above example:
\n#141416 (light mode).#ffffff).In some cases, SVG files may contain inline styles such as fill=\"#fff\". To ensure automatic adaptation to color mode, replace inline styles with CSS classes.
Example before adjustments:
\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\">\n <path fill=\"#fff\" d=\"...\" />\n</svg>fill attributes.<defs>:<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\">\n <defs>\n <style>\n .color {\n fill: #141416;\n }\n\n @media (prefers-color-scheme: dark) {\n .color {\n fill: #ffffff;\n }\n }\n </style>\n </defs>\n\n <path class=\"color\" d=\"...\" />\n</svg>If your SVG logo includes multiple colors, each color should be assigned to a distinct CSS class within the <defs> section. This allows precise control over color variations for both light and dark modes:
<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\">\n <defs>\n <style>\n .color-primary {\n fill: #141416;\n }\n .color-secondary {\n fill: #f00;\n }\n\n @media (prefers-color-scheme: dark) {\n .color-primary {\n fill: #ffffff;\n }\n .color-secondary {\n fill: #ffcc00;\n }\n }\n </style>\n </defs>\n\n <path class=\"color-primary\" d=\"...\" />\n <path class=\"color-secondary\" d=\"...\" />\n</svg>If your SVG is monochromatic, you can utilize currentColor even when embedding your SVG using the <img> tag. In this case, define the color explicitly within the SVG’s <defs> section:
Example with a single path element:
\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\">\n <defs>\n <style>\n path {\n color: #141416;\n }\n\n @media (prefers-color-scheme: dark) {\n path {\n color: #eeeeee;\n }\n }\n </style>\n </defs>\n\n <path fill=\"currentColor\" d=\"...\" />\n</svg>Example with multiple SVG elements (path, circle, etc.):
\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\">\n <defs>\n <style>\n * {\n color: #141416;\n }\n\n @media (prefers-color-scheme: dark) {\n * {\n color: #eeeeee;\n }\n }\n </style>\n </defs>\n\n <path fill=\"currentColor\" d=\"...\" />\n <circle fill=\"currentColor\" cx=\"50\" cy=\"50\" r=\"40\" />\n</svg>By applying one of the methods described above, you can easily create a logo or icon SVG file that automatically adapts to the user's preferred color mode. Defining classes within your SVG provides the most flexibility and full control, making it suitable for a wide variety of use-cases.
\nTo help you quickly implement these techniques, you can download specially prepared SVG versions of the Publii logo below. These files are already optimized for both light and dark modes, making them ideal for testing and preview purposes.
\nDownload: publii_logo.svg
", "author": { "name": "Publii Team" }, "tags": [ "Tutorials" ], "date_published": "2025-03-26T06:45:33+01:00", "date_modified": "2025-03-29T08:18:07+01:00" }, { "id": "https://getpublii.com/docs/fixing-asset-loading-issues-publii-websites.html", "url": "https://getpublii.com/docs/fixing-asset-loading-issues-publii-websites.html", "title": "Fixing asset loading issues in Publii websites", "summary": "Having trouble with broken icons, photos, and other assets not loading correctly on your Publii website? This common issue stems from inconsistent use of website…", "content_html": "Having trouble with broken icons, photos, and other assets not loading correctly on your Publii website? This common issue stems from inconsistent use of website address prefixes (like http:// vs https:// or with/without www) during the deployment configuration in Publii. This tutorial will guide you through the steps to ensure all your website assets load correctly by enforcing a consistent URL structure across your site using techniques like .htaccess redirects and platform-specific configuration for services like Netlify, Google Cloud, and S3.
When setting up your Publii deployment server settings, you must provide the website address. Users occasionally enter various versions of the address, for instance:
\nLater, when visitors access the website using a different URL prefix than the one configured in Publii (for example, visiting https://www.yourdomain.com when the deployment was set with http://yourdomain.com), the paths to the assets generated by Publii become incorrect. This is because the generated HTML includes absolute URLs for assets based on the configured deployment address.
Let's say you configured your Publii deployment with http://yourdomain.com. Publii will generate asset links like:
![publii_logo.svg](\"https://getpublii.com/docs/media/files/publii_logo.svg\"){kind=link}
<img src=\"http://yourdomain.com/assets/images/logo.png\"></code>If a user visits your website via https://www.yourdomain.com, their browser will attempt to load the image from http://yourdomain.com/assets/images/logo.png. Due to the different protocol and the presence of \"www\", this request might fail or trigger browser security warnings.
To prevent this, you must ensure that all website traffic consistently uses the same URL prefix (e.g., always using https://www.yourdomain.com). Here are solutions based on different deployment environments:
If your website is hosted on a traditional Apache server, you can use the .htaccess file to enforce specific URL redirects. Here are some common rules:
Force www and https:
RewriteEngine On\nRewriteCond %{HTTPS} off [OR]\nRewriteCond %{HTTP_HOST} !^www\\. [NC]\nRewriteRule ^ https://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]\nForce non-www and https:
RewriteEngine On\nRewriteCond %{HTTPS} off [OR]\nRewriteCond %{HTTP_HOST} ^www\\.(.+)$ [NC]\nRewriteRule ^ https://%1%{REQUEST_URI} [L,R=301]\nForce https only (assuming you have an SSL certificate):
RewriteEngine On\nRewriteCond %{HTTPS} off\nRewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]\nThis rule only redirects HTTP traffic to HTTPS, leaving the \"www\" prefix as it is.
\nImportant: Place these rules in the .htaccess file located in the root directory of your website on the server.
While .htaccess is specific to Apache servers, similar redirection logic can be configured on platforms like Netlify, Google Cloud, and S3.
Netlify provides a netlify.toml file for configuration, including redirects. You can add rules like:
[[redirects]]\n from = \"http://yourdomain.com/*\"\n to = \"https://www.yourdomain.com/:splat\"\n status = 301\n force = true\n\n[[redirects]]\n from = \"http://www.yourdomain.com/*\"\n to = \"https://www.yourdomain.com/:splat\"\n status = 301\n force = true\n\n[[redirects]]\n from = \"https://yourdomain.com/*\"\n to = \"https://www.yourdomain.com/:splat\"\n status = 301\n force = trueYou can similarly create rules to enforce non-www or only https.
Google Cloud Storage supports URL redirects for static websites. To configure, enable \"Static Website Hosting\" in the bucket settings and upload a website-config.json file with redirection rules. For example:
[\n {\n \"condition\": {\n \"httpErrorCodeReturnedEquals\": \"404\",\n \"keyPrefixEquals\": \"\"\n },\n \"redirect\": {\n \"protocol\": \"https\",\n \"hostName\": \"www.yourdomain.com\",\n \"replaceKeyPrefixWith\": \"\"\n }\n }\n]Upload the file using: gsutil web set website-config.json gs://your-bucket-name. Refer to the official documentation for details.
Amazon S3 allows URL redirects for static websites via bucket properties. Enable \"Static Website Hosting\" in the bucket settings and define redirect rules. For example, to redirect HTTP to HTTPS or manage www prefixes, configure a routing-rules.json file:
[\n {\n \"Condition\": {\n \"KeyPrefixEquals\": \"\"\n },\n \"Redirect\": {\n \"Protocol\": \"https\",\n \"HostName\": \"www.yourdomain.com\",\n \"ReplaceKeyPrefixWith\": \"\"\n }\n }\n]Upload the file through the AWS Management Console or CLI. Refer to the official documentation for details.
\nGitHub Pages doesn't directly support .htaccess-style redirections, but you can still manage redirects for custom domains using DNS settings and specific repository configurations.
www.yourdomain.com), use a CNAME record pointing to your GitHub Pages site (e.g., username.github.io).CNAME file to your repository, specifying your custom domain (e.g., www.yourdomain.com). This informs GitHub Pages about the domain to use when serving your site.GitHub Pages doesn't natively support .htaccess redirects, but you can still enforce the correct domain format with these methods:
index.html:index.html file:<!DOCTYPE html>\n<html>\n<head>\n <meta http-equiv=\"refresh\" content=\"0; URL=https://www.yourdomain.com\">\n</head>\n<body>\n <p>If you are not redirected, click <a href=\"https://www.yourdomain.com\">here</a>.</p>\n</body>\n</html>\nFor more detailed troubleshooting, consult the official GitHub Pages documentation on custom domains.
\nSometimes everything looks right - the CSS file exists, the path in the HTML is correct, and there are no mixed-content issues - but your styles still refuse to load. If you've ruled out the URL prefix problem described above, there's another common culprit: your server is sending the wrong MIME type for your CSS (or JavaScript) files.
\nEvery time a browser requests a file from a server, the server includes a Content-Type header in the response. This header tells the browser what kind of file it's receiving. For CSS files, the correct value is text/css. For JavaScript, it should be application/javascript.
Some hosting providers - especially basic or budget shared hosting plans - don't always send the right Content-Type for static files. Instead of text/css, the server might respond with text/plain or even application/octet-stream. When the browser sees this, it treats the file as plain text rather than a stylesheet and simply ignores all the CSS rules inside it.
The result? Your page loads with no styling at all - just raw, unstyled HTML - even though the CSS file is clearly there and contains valid rules.
\nOpen your website in Chrome (or any Chromium-based browser), then:
\nstyle.css file in the list of requests and click on it.If the Content-Type header says text/plain instead of text/css, you've found the problem. You may also see a warning in the Console tab that looks something like this:
Refused to apply style from 'https://yourdomain.com/assets/css/style.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.Add the following lines to your .htaccess file in the root directory of your website:
AddType text/css .css\nAddType application/javascript .js\nThis explicitly tells Apache to serve .css files with the correct text/css MIME type and .js files as application/javascript.
If your hosting runs Nginx, make sure the mime.types file includes the correct entries. In most cases, the default Nginx configuration already handles this correctly. If it doesn't, you can add the following inside your server block:
location ~* \\.css$ {\n add_header Content-Type text/css;\n}\nlocation ~* \\.js$ {\n add_header Content-Type application/javascript;\n}\nThese platforms handle MIME types automatically and correctly out of the box. If you're hosting on one of them and still experiencing this issue, the problem is almost certainly the URL prefix mismatch described earlier in this article, not a MIME type issue.
\nTip: After making changes to your .htaccess or server configuration, always do a hard refresh (Ctrl+Shift+R) in your browser. Cached responses with the old Content-Type may persist until you clear them.
The key solution is to enforce a consistent URL structure for your website. By implementing redirect rules either in .htaccess or through the configuration settings of your chosen hosting platform, you ensure that users are always directed to the correct version of your website, eliminating the inconsistencies that cause asset loading issues. Remember to choose a preferred URL format (e.g., https://www.yourdomain.com) and consistently redirect all other variations to it. This fixes the asset loading problem and improves your website's SEO and user experience.
Starting from version 0.46, Publii CMS includes a feature for creating pages, which serve as static subpages on your website. The process for creating and editing pages is almost identical to that of posts, so you'll feel right at home! You can choose any editor you like, whether the versatile Block Editor, the powerful Markdown Editor, or the user-friendly WYSIWYG Editor, to add your content to the page.
\nWhen editing a page, in addition to the standard options available for post editing, you have a crucial option, the 'Parent page' dropdown menu in the right sidebar. This menu allows you to designate whether a page will be a parent or child of another page. By selecting any existing page as the parent for the current page, you can create a hierarchical structure for your site, which helps organize complex navigation systems.
\n![\"Editing](\"https://getpublii.com/docs/media/posts/86/page-hierarchy-ui.svg\")
A new feature available in the Pages listing is the EDIT HIERARCHY button, located on the right side of the screen, opposite the filter options. After clicking this button, a Move button will appear under each item on the list. Clicking the Move button will display options that allow you to reposition the page in the hierarchy:
\nThese options allow you to easily manage the hierarchy of your pages, enabling you to create more complex and organized navigation structures for your website.
\nIn summary, creating and editing pages in Publii CMS is very similar to working with posts, making the process intuitive and consistent. The key difference lies in the ability to manage page hierarchy, which allows you to build more complex and organized navigation structures on your website.
", "image": "https://getpublii.com/docs/media/posts/86/page-hierarchy-ui-2.svg", "author": { "name": "Publii Team" }, "tags": [ "post", "pages", "editor" ], "date_published": "2024-08-17T08:54:36+02:00", "date_modified": "2024-08-17T09:44:31+02:00" }, { "id": "https://getpublii.com/docs/lucide-icons.html", "url": "https://getpublii.com/docs/lucide-icons.html", "title": "Lucide Icons Plugin", "summary": "Introduction The Lucide Icons Plugin offers a robust and flexible solution for incorporating Lucide icons into your website. This guide will walk you through leveraging…", "content_html": "The Lucide Icons Plugin offers a robust and flexible solution for incorporating Lucide icons into your website. This guide will walk you through leveraging the plugin to enhance your site's visual aesthetics with these meticulously designed icons.
\nFor a comprehensive list of available icons and their corresponding names, please visit the Lucide Icons website. On the Lucide Icons site, clicking on any icon will display a popup at the bottom of the page where you can easily copy the icon's name for use in your project.
\nOnce the plugin is activated, various configuration options will be available to customize the appearance and behavior of the Lucide icons on your site.
\nThis section covers settings to customize the default properties of the icons.
\nThese settings provide additional customization and accessibility options.
\nNote: Inline SVG code is generally preferred for faster loading on websites with a small number of icons because it embeds only the requested icons directly into the HTML. Using an SVG map file for websites with numerous icons can help maintain cleaner and more organized HTML, although it might result in slightly longer load times since it loads the entire file containing all the icons.
\nLucide Icons can be incorporated into various parts of your site, including posts, menus, and footers. You can use the default settings configured in the plugin or override them with specific attributes in the shortcode. The plugin allows you to customize each icon's appearance directly within the shortcode, including size, color, stroke width, and aria-hidden attributes, or add your own CSS to match your design requirements.
\nFor a comprehensive list of available icons and their corresponding names, please visit the Lucide Icons website. Clicking on any icon on the Lucide Icons site will display a popup at the bottom of the page. From there, you can easily copy the icon's name for use in the shortcode.
\nWhen using the custom shortcode for icons, ensure you follow the specific order of attributes as outlined below. This sequence is crucial for the correct rendering of icons.
\nThe shortcode format is as follows:
\n[li=icon_name size=value_unit color=color_value class=class_names aria-hidden=true_or_false stroke-width=value]\nEnsure you include the elements in this exact order: icon name, size, color (in HEX format), class, aria-hidden, and stroke width. The color should be specified in HEX format for proper interpretation and display by the plugin.
\nExamples:
\n<!-- Default Usage -->\n[li=bell]\n\n<!-- Example with Size and Color -->\n[li=bell size=30px color=#ff0000]\n\n<!-- Example with Size and Stroke Width -->\n[li=bell size=4rem stroke-width=3]\n\n<!-- Example with Full Customization -->\n[li=bell size=4rem color=#00ff00 class=icon aria-hidden=false stroke-width=4]\nThe External Links plugin is a powerful tool for enhancing and managing external links on your Publii website. This plugin offers extensive customization options, allowing you to add icons, rel attributes, and additional CSS classes to external links, ensuring they seamlessly integrate with your site's design and functionality.
\nThe External Links plugin works dynamically during the rendering of your site, meaning it does not directly alter the input content but modifies the output during the rendering process. This ensures that the enhancements are seamlessly integrated without affecting the raw content in your CMS.
\nIt scans for external links starting with http:// or https:// and applies the specified customizations to them. Internal links, identified based on the domain defined in Server Settings, are excluded from these modifications. This ensures that only external links are enhanced without affecting your site's internal navigation.
The plugin uses SVG icons to provide high-quality, scalable graphics that look great on all devices. Each icon was chosen for its clarity and ability to convey the nature of the link.
\nOnce the External Links plugin is enabled, you can access its settings screen. The settings are divided into three main categories: \"General Settings\", \"Link Attributes\", and \"Styling Settings\".
\nThis section allows you to configure the core behavior and appearance of external links.
\nEnhance the security, SEO, and usability of your external links by configuring their attributes.
\nwindow.opener property.rel attributes with the selected ones.\nrel attribute will appear in the code, allowing you to remove the rel attribute from the link completely.Customize the visual presentation of your external links to match your site's design.
\nThis section provides options for excluding specific links from the plugin's modifications.
\nbtn\nmyButtonThe Feather Icons Plugin is an elegant and versatile solution for integrating Feather icons into your website. This guide will help you understand how to effectively utilize the plugin to enhance your site's visual appeal with these beautifully designed icons.
\nFor a complete list of available icons and their respective names, please scroll through this documentation or visit the Feather Icons website.
\nAfter activating the plugin, you will find various configuration options that allow you to customize the appearance and behavior of the Feather icons on your website.
\nThis section provides settings for customizing the default properties of the icons.
\nThese options provide additional settings for accessibility and advanced customization.
\nPlease note: For websites with a few icons, inline SVG code is generally the best choice for faster page loading and easier implementation. However, for websites with many icons, an SVG map file can be a better option to maintain cleaner and more organized HTML, even though it may slightly increase page load times.
\nFeather Icons can be used in various parts of your site, including posts, menus, footers, etc. You can either use the default settings configured in the plugin or override them with specific attributes in the shortcode. The plugin allows customization of each icon's appearance directly within the shortcode. You can modify the size, color, stroke width, and aria-hidden attributes or add your own CSS to suit your design needs.
\nWhen using our custom shortcode for icons, please follow the specific order of attributes outlined below. This order is essential for the correct rendering of icons.
\nThe shortcode should be structured as follows:
\n[fi=icon_name size=value_unit color=color_value class=class_names aria-hidden=true_or_false stroke-width=value]\nPlease make sure to include the elements in this exact sequence: icon name, size, color (in HEX format), class, aria-hidden, and stroke-width. The color should be specified using HEX format. This format is necessary for the plugin to correctly interpret and display the icons as intended.
\nExamples:
\n<!-- Default Usage -->\n[fi=bell]\n\n<!-- Example with Size and Color -->\n[fi=bell size=30px color=#ff0000]\n\n<!-- Example with Size and Stroke Width -->\n[fi=bell size=4rem stroke-width=3]\n\n<!-- Example with Full Customization -->\n[fi=bell size=4rem color=#00ff00 class=icon aria-hidden=false stroke-width=4]\n\nBelow you can find a comprehensive list of all available Feather Icons. This list is designed to make finding and selecting the perfect icon for your needs easier. Browse through the list, and when you find an icon you wish to use, click on it. Upon clicking, the shortcode for that specific icon will be automatically copied to your clipboard in the format [fi=icon-name].
\nThe Feather Icons Plugin is a powerful and easy-to-use tool for adding and customizing icons on your Publii site. With its wide range of settings and customization options, you can easily enhance the visual appeal of your website while maintaining accessibility standards.
", "image": "https://getpublii.com/docs/media/posts/82/feather-icons-static-plugin.png", "author": { "name": "Publii Team" }, "tags": [ "plugins" ], "date_published": "2024-01-14T15:28:44+01:00", "date_modified": "2025-06-09T07:25:59+02:00" } ] }