#freelocalcms
What is DelShift Inline?
It is a simple Node based Content Management System to be used by Web-designer, Content Developer to edit content in their static sites.
It can run locally without use of any Internet connection and all the contents are saved locally in the User's system.
With this one can reduce dependencies to have frameworks to edit simple contents.
It is open source and it is available in MIT License.
How it Works?
It is an Express based application which carefully utilizes power of Routing and File handlers to update and modify content.
It injects DelShift Libraries to act as middleware to have interaction between the page in edit mode and DelShift Inline backend which runs when app initializes.
Installation
Being a command line node based application, one needs to have Node installed.
In your terminal execute:
npm i -g delshift-inline-cms
Usage
Step 1: Please go to the Target folder and open Terminal. And execute 'delcms'
Upon executing 'delcms', it will open your default browser with a localhost URL. This page will show list of html files present in the root folder of the target folder.
The screen will look as follows:
Step 2: Select the page you wish to edit. It will navigate to the page in edit mode.
In Edit Mode
In live mode
As one can see there are clear differences between the page in edit mode and in live mode. in edit mode, User gets option to navigate to the home page and live page. Moreover in edit mode all the anchors will not be working which includes any pop-ups and dialog boxes.
Step 3: Editing Content
Editing Text: Upon hovering on the Editable contents, it will highlight the element with dashed borders around it. Upon clicking on the element, you would be able to edit content in the style which is already having. For now WYSWYG editor needs to be added for having multiple styling options.
Editing Anchor Links: Upon clicking on any anchor, it will enable the edit mode. But in-order to change the location its pointing, we need to select a small portion of the text and a pop-up action button will appear as shown below:
Upon clicking the link icon displayed, it will open a pop-up, This pop-up will list down list of all the local html pages present in the target folder as well as the option for entering any custom external URL.
Screenshot:
Editing Images:
In order to change images, click any image and it shall open a dialog box with list of images to select. Select any image and it will reflect in the page itself.
Step 4: Saving
For saving content, there a button in bottom right. Clicking that it will ask User to confirm about the changes. Once confirmed, it will store the updated content in the files.
