A pseudo-CMS written in JavaScript, JSON, HTML5 and CSS3 which is rendered in the client's browser (hence the name: client-side CMS).
Warning
This is not to be used as an alternative to a full-fledged CMS and is, by no means, secure or production-ready!
I've written this software because I needed a fast CMS-like software for my website and installing Plone or Drupal or something else was not suitable to me.
There's one file in the main folder, called index.html. It links to four JavaScript files. The file "onload.js" gets the configuration file, a .json file, lets the "parser.json" parse the initial file set in the configuration onto the HTML-Element "body" and the navigation from "navigation.page" onto the Element "nav". Every link that should be parsed by the CMS should have an onclick-event which links to the CMS' javascript function "openPage(page)", where "page" should be replaced with the page's name without the *.page extension.
Webfont "BebasNeue.otf" was made by Dharma Type, downloaded form 1001fonts.com (Licensed under SIL Open Font License)
Webfont "Roboto-Regular.ttf" and "RobotoCondensed-Regular.ttf" downloaded from google.com/fonts (Licensed under Apache 2.0)
Since this CMS is fully written in JavaScript, the only thing you need is a browser.
- Clone this repository into the folder you set in Apache's Configuration as the document root.
- Open .../assets/json/conf.json in your preferred editor (e.g. VisualStudio Code, Brackets, etc.)
- Edit the tags as you like, for example:
(see assets/json/conf.json)
title
=> The Name of your webpage.
headerbgcolour
=> The CSS-Colour value of the background of the header (does NOT work with cscms-modern.css).
headerimg
=> Your logo.
headerbgimg
=> Your hero image.
initialpagetoparse
=> The welcome page displayed when first rendering the CMS.
navigationfile
=> The *.page file used for the navigation. - Open index.html and choose a CSS-Stylesheet (cscms.css, cscms-standard.css or cscms-modern.css), put it into the "link" tag in the head-section.
- Open .../assets/pages/index.page in your editor and edit it that it fits to your requirements.
- Open .../assets/pages/navigation.page and edit that it fits to your links. When linking to a CMS page,
please remember that the a-elements have to look like
< a href="#" onclick="openPage('PAGE')" >My super link</ a >
!
(1) Add an a-element to your index.page
Open index.page from assets/pages/, add a simple a-element from html source.
(2) Remove href
attribute
Use an onclick event instead: onclick="openPage(href)"
(3) Replace openPage(href)
with openPage(yourPageNameWithoutExtension)