Skip to content

Plugin System

Jump to bottom
AZIRAR Mhamed (SNCF / DGA NUMERIQUE / e.SNCF Sol.D2D DDSP IDFCE) edited this page Apr 22, 2026 · 3 revisions

Nodify Headless CMS Plugin System

Extend your content functionality with a modular, reusable plugin architecture

Introduction

Nodify Headless CMS (an open source, Java-based platform with native i18n support and a powerful API) provides an easy and flexible system to extend the functionality of your content by adding plugins. These plugins are pre-configured for use with Nodify but can also be customized and expanded upon for your specific needs.

Whether you need to add CSS frameworks like Bootstrap, JavaScript libraries like jQuery, or custom functionality, the plugin system makes it simple and reusable across all your content.

Why Use Plugins in Nodify?

Benefit Description
Modularity Add functionality only where needed — no bloated global assets
Reusability Create a plugin once, use it across multiple content nodes
Maintainability Update a plugin in one place — changes apply everywhere
Performance Plugins load only on content that explicitly requests them
Flexibility Combine multiple plugins in the same content
Inheritance Plugins applied to a parent node affect all child content

Default Plugins

By default, Nodify comes with a set of plugins that are readily available to be used in your content:

Plugin Name Version Description
jquery3.7.1 3.7.1 jQuery JavaScript library for DOM manipulation and events
bootstrap5.0.2 5.0.2 Bootstrap CSS framework for responsive design and components

More plugins can be added via the admin interface or by creating custom plugins.

Using Plugins in Your Content

To apply a plugin to a content node of type HTML, simply include the plugin in the HTML code using the following syntax:

$with(pluginName)

This will ensure that the specified plugin is applied to the content and all of its child content nodes (inheritance).

Syntax Rules

Rule Example
Single plugin $with(jquery3.7.1)
Multiple plugins $with(jquery3.7.1) followed by $with(bootstrap5.0.2)
Placement Anywhere in the HTML body (typically before closing </body>)

Example Usage of Plugins

Here's a complete example of how to use plugins in your content:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>$translate(SITE_NAME)</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>
    $content(SCRIPT-DEV-6715564032)
  </script>

  <style>
    $content(STYLE-DEV-1197085634)
  </style>
</head>

<body>

<div class="container">

  $content(HTML-DEV-8563828892)

  <br>
  <img src="$value(BASE_URL)/contents/code/PICTURE-DEV-3107502736/file" class="img-fluid">
  <div id="posts" name="posts" class="limited-width">
  </div>
</div>

$content(HTML-DEV-5800451466)

$with(jquery3.7.1)
$with(bootstrap5.0.2)
</body>
</html>

In the above example:

  • The plugins jquery3.7.1 and bootstrap5.0.2 are applied to the content
  • These plugins will be loaded and executed automatically when the content is rendered
  • The necessary JavaScript and CSS resources are injected into the page

Waiting for Plugin Resources

Once a plugin is included in your content using $with(pluginName), it is important to wait for the plugin's resources to be fully loaded before calling any functions that depend on them. This is especially true for libraries like jQuery.

Safe Usage Pattern

Here is an example of how to safely use jQuery in your custom script after including the plugin:

window.addEventListener('load', function () {
  console.log('✅ Page fully loaded (HTML, CSS, images, scripts)');
  
  if (window.jQuery) {
    mySuperFunction();  // Replace with your actual function that uses jQuery
  } else {
    console.warn('❌ jQuery not available');
  }
});

Why This Pattern Works

Step Description
1 The page is fully loaded (including all plugin scripts)
2 jQuery is checked for in the global scope (window.jQuery)
3 Your function is only executed if jQuery has been successfully loaded

This pattern helps avoid runtime errors caused by trying to use a plugin library before it is ready.

Creating a Plugin

To create a new plugin, follow these steps:

Step 1: Navigate to the Plugins Section

  • Go to the "Plugins" section in the Nodify admin panel
  • Click on "Create Plugin"
  • Give your plugin a unique name (e.g., my-custom-plugin)

Step 2: Attach Resources

Attach the necessary resources to the plugin. These resources can be:

Resource Type File Extensions Purpose
JavaScript .js Functionality, interactivity, DOM manipulation
CSS .css Styling, responsive design, animations
Other static files .json, .map, etc. Configuration, source maps

Step 3: Write the Plugin Code

After attaching the resources, write the JavaScript code for the plugin. This code will define how the plugin interacts with the content.

Example: Bootstrap 5.0.2 Plugin

function insertBootstrap5_0_2CSS() {
  var baseUrl = `${window.location.protocol}//${window.location.host}`;
  var url = baseUrl + '/plugins/name/bootstrap5.0.2/file/bootstrap.min.css';

  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.media = 'all';
  link.href = url;
  document.head.appendChild(link);
}

function insertBootstrap5_0_2ScriptDefer() {
  var baseUrl = `${window.location.protocol}//${window.location.host}`;
  var url = baseUrl + '/plugins/name/bootstrap5.0.2/file/bootstrap.bundle.min.js';

  var script = document.createElement('script');
  script.src = url;
  script.defer = true;
  document.head.appendChild(script);
}

insertBootstrap5_0_2CSS();
insertBootstrap5_0_2ScriptDefer();

In this example:

  • Bootstrap resources (bootstrap.min.css and bootstrap.bundle.min.js) are attached to the plugin
  • The necessary HTML <link> and <script> tags are injected into the header of the content page
  • The defer attribute ensures the script loads after the HTML is parsed

How the Plugin System Works

When content is rendered, any plugins referenced using the $with(pluginName) syntax will automatically load and apply their resources to the page.

Technical Flow

Content Request
       ↓
Parse HTML for $with() directives
       ↓
Load plugin configuration
       ↓
Execute plugin JavaScript code
       ↓
Inject CSS <link> and JS <script> into <head>
       ↓
Page renders with plugin functionality

Resource Injection

Plugin resources are injected into the <head> section of the HTML by the plugin's code, ensuring they are available before the page content is fully rendered.

Plugin Inheritance

Plugins applied to a parent node are automatically inherited by all child content nodes.

Example

Parent Node (with $with(jquery3.7.1))
    ↓
Child Node 1 (automatically has jQuery available)
    ↓
Child Node 2 (automatically has jQuery available)

This inheritance pattern ensures consistency across your content hierarchy without redundant plugin declarations.

Use Cases for Plugins

Use Case Plugin Example
CSS Framework Bootstrap, Tailwind, Foundation
JavaScript Library jQuery, Lodash, Moment.js
Charting Chart.js, D3.js, Highcharts
Markdown Rendering Markdown parser, code highlighter
Analytics Google Analytics, Plausible, Matomo
Social Media Twitter embeds, Facebook SDK
Maps Leaflet, Google Maps API
Video Players YouTube, Vimeo, Video.js
Form Validation Parsley, Validate.js
Animations GSAP, Anime.js, AOS

Best Practices

1. Use Unique Plugin Names

// Good
$with(my-plugin-utils)
$with(custom-carousel)

// Avoid
$with(plugin1)
$with(plugin2)

2. Check for Existing Resources Before Injection

function insertPluginCSS() {
  if (document.querySelector('link[href*="my-plugin.css"]')) {
    return; // Already loaded
  }
  // Inject CSS
}

3. Use Defer or Async for JavaScript

script.defer = true;  // Wait for HTML parsing
// OR
script.async = true;  // Load asynchronously

4. Handle Dependencies

// Ensure jQuery is loaded before using it
if (typeof jQuery !== 'undefined') {
  // Use jQuery safely
} else {
  console.warn('jQuery dependency not loaded');
}

5. Clean Up Resources (if needed)

For plugins that create global listeners or intervals, provide a cleanup function:

function cleanupMyPlugin() {
  // Remove event listeners
  // Clear intervals
  // Remove injected elements
}

Troubleshooting

Issue Solution
Plugin not loading Verify plugin name spelling in $with(pluginName)
jQuery is not defined Ensure $with(jquery3.7.1) is placed before your custom script
CSS not applying Check browser console for 404 errors on CSS file
Plugin conflicts Load conflicting plugins in the correct order
Script executes too early Wrap code in window.addEventListener('load', function() {...})

Summary of Key Points

Concept Description
$with(pluginName) Syntax to include a plugin in HTML content — applies to current and child nodes
Creating Plugins Navigate to "Plugins" section → Create Plugin → Attach resources → Write JS code
Resource Injection Plugin JavaScript code injects CSS and JS resources into the page <head>
Inheritance Plugins applied to parent nodes affect all child content
Safe Usage Wait for window.addEventListener('load', ...) before using plugin functions

Conclusion

With this plugin system, Nodify Headless CMS allows you to extend the functionality of your content in a modular and reusable way. As an open source, Java-based platform with native i18n support and a powerful API, Nodify makes it simple and flexible to add everything from CSS frameworks like Bootstrap to JavaScript libraries like jQuery.

Whether you're building a simple blog or a complex web application, the plugin system empowers you to add exactly the functionality you need — exactly where you need it.

#NodifyHeadlessCMS #Nodify #HeadlessCMS #OpenSource #Java #API #i18n #PluginSystem #CMSPlugins #ContentManagementSystem #HTMLContentPlugins #NodifyCMS #BootstrapIntegration #jQueryIntegration #ContentNodePlugins #AddCSSandJSToContent #ModularCMSPlugins #NodifyCMSTutorial #DynamicContentWithPlugins #ExtendCMSFunctionality #JavaScriptPlugins #CSSPlugins #PluginDevelopment #NodifyCMSIntegration #WebDevelopment #TemplatingSystem

Clone this wiki locally