Skip to content

Plugin System

Jump to bottom
MammothDevelopper edited this page Apr 6, 2025 · 1 revision

Nodify Headless CMS Plugin System

Nodify Headless CMS 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.

Default Plugins

By default, Nodify comes with a set of plugins that are readily available to be used in your content. To apply a plugin to a content node (ContentNode) 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.

Example Usage of Plugins

Here’s an 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, ensuring that the necessary JavaScript and CSS resources are included.

Creating a Plugin

To create a new plugin, follow these steps:

  1. Go to the Plugins Section:

    • Navigate to the "Plugins" section in the Nodify admin panel.
    • Click on "Create Plugin" and give your plugin a unique name.

  2. Attach Resources:

    • You need to attach the necessary resources to the plugin. These resources can be JavaScript files, CSS files, or other types of static files.

  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. For example, to integrate Bootstrap, you would write the following code:
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, the Bootstrap resources (bootstrap.min.css and bootstrap.bundle.min.js) are attached to the plugin, and the necessary HTML <link> and <script> tags are injected into the header of the content page.

How It Works

When the content is rendered, any plugins referenced in the content using the $with(pluginName) syntax will automatically load and apply their resources (CSS, JavaScript) to the page. These resources are inserted into the <head> section of the HTML by the plugin’s code.

Summary of Key Points

  • $with(pluginName): Use this syntax to include a plugin in the content. It ensures the plugin is applied to the current and any child content.
  • Creating Plugins: Navigate to the "Plugins" section to create a new plugin, attach resources, and write custom JavaScript code.
  • Resource Injection: The plugin’s JavaScript code is responsible for injecting the necessary CSS and JS resources into the content’s HTML.

With this plugin system, Nodify Headless CMS allows you to extend the functionality of your content in a modular and reusable way. Whether it's adding CSS frameworks like Bootstrap or JavaScript libraries like jQuery, the process is simple and flexible.

This documentation explains the plugin system of Nodify Headless CMS, how to use plugins in HTML content, how to create plugins, and provides an example of integrating Bootstrap. It also describes the syntax and how the resources are injected into the content.

Tags

#NodifyHeadlessCMS #PluginSystem #CMSPlugins #ContentManagementSystem #HTMLContentPlugins #NodifyCMS #BootstrapIntegration #jQueryIntegration #ContentNodePlugins #AddCSSandJSToContent #ModularCMSPlugins #NodifyCMSTutorial #HeadlessCMS #DynamicContentWithPlugins #ExtendCMSFunctionality #JavaScriptPlugins #CSSPlugins #PluginDevelopment #NodifyCMSIntegration

Clone this wiki locally