Documentation

Getting Started

Logging In

In order to log into your organization's dashboard, proceed to the slickcms domain with your organization's slug as the subdomain:

https://myorg.slickcms.com

Creating Content

Creating any type of content in slickcms happens the exact same way:

  • Click on the Content link in the main nav
  • Directly below the Content link, click on the Content Type dropdown and select the type of content you wish to create
  • In the upper right of the main window, click on "Add New"
  • Fill out the content form and click Save / Publish

Step 1: Create a Theme

  • Create new Theme content, giving it a title and slug
  • The slug must match the folder name of the theme in your organization's /themes folder:
    /myorg/themes/[theme-slug]/

Step 2: Create a Template

  • Create new Template content, giving it a title and path
  • The path must start with a / and will represent the folder path relative to your theme's templates folder
  • If your template file lives here: /myorg/themes/[theme-slug]/templates/homepage.ejs, your path will just be /homepage. Do not include the .ejs extension in the path.

Step 3: Create a Site

  • Create new Site content, giving it a title, domain, theme, default language, default site status, etc.
  • For sites not yet intended to be live, the testing domain format is as follows: mysitedomain.prod.slickcms.com
  • Do not include https:// in the domain field
  • When saved, the new site will appear in the sites dropdown in the left hand panel

Step 4: Create a Page

  • Create new Page content, giving it a title, slug, template, body, etc.
  • When saved, the new page will appear in the site tree in the left hand panel

Rendering

Rendering content on a page can be achieved in one of three ways:

Server Side

Using .ejs (Embedded Javascript) templates, stored in your theme's folder under /templates

/myorg/themes/[theme-slug]/templates/index.ejs

SlickCMS will always default to an index.ejs file if a template has not been assigned to a page or not does exist.

To add an editable container to your template, simply add:

<%- await getContainer('[your-container-slug]'); %>

A container with a slug of "main" is available by default

The await keyword tells the container not to render until all content has been fetched and sorted.

There are multiple functions available to your ejs templates. Each one must be preceded by the await keyword:

  • head(options)

    Generates the head of the html document including page title, charset, viewport, seo content, social sharing content, etc.

  • footer()

    Generates necessary scripts to run things like analytics for your live site, and other actions within your site's iframe preview in the dashboard.

  • menu(menuClasses = '', exclude = [])

    Generates a menu based on your website's pages

    • menuClasses: a string of classes added to your menu ul (Ex: 'nav main-nav')
    • exclude: an array of content_group_ids not to include in the menu (Ex: ['3cff9c66-f617-4dee-a691-a6c030187bae', 'ee261e56-54f8-4232-9ad1-4fc47be0122a'])
  • getContainer(containerSlug = '')

    Returns an html string of all content within a cms container

    <%- await getContainer('sidebar'); %>
  • getContent(contentType = '', filters = {}, sort = {}, limit = 20)

    Returns an array of content from the slick api

    <%- await getContent('members', {}, {last_name: -1}, 0); %>
  • getOne(contentType = '', filters = {})

    Returns one object of content from the slick api based on the filters

    <%- await getOne('pages', {slug: 'our-services'}); %>
  • getContentById(contentType = '', contentId = '')

    Returns one object of content from the slick api based on the content's id

    <%- await getContentById('page_content', 'fa92b7b6-67ab-498c-9a84-ca8f26252f48'); %>

Client Side Integrated

Using your front-end javascript framework of choice, you can interact with containers just as you would rendering server-side.

Anywhere you'd like an editable container to appear in your template, simply add:

<div data-slick-container="[your-container-id]"></div>

This div will be completely replaced by any content added to the container.

Headless

Your application is hosted on a different platform, and simply uses SlickCMS's APIs to supply your content.

Creating Content Types

The flexibility of SlickCMS lies in the ability to create your own content types. To create a new standard content type or widget content type:

  • Click on Content Types in the main nav
  • Click New Content Type in the top right of the main window
  • Complete the form, assigning your new content type a title, slug
  • The Widget checkbox indicates if this content type will be used to store widget configurations
  • The Shared checkbox indicated whether this content will be seen by all websites in the organization, or just the one it was created on
  • Save and Publish the new content type. You will be automatically taken to the field creation view.

Creating Content Type Fields

  • Click Add New to start creating new fields.
  • Complete the new field form, assigning your field a title, slug, type, data type, etc.

Field Options:

Title
The title of the field as it will appear when creating new content

Slug
The lowercase and underscore-separated version of the title that will represent the field in the database

Type
How the field will appear in the dashboard

  • Text
  • Textarea
  • Select
  • Radio
  • Checkbox
  • Relationship
  • Wysiwyg/Code
  • Media
  • Tags
  • Date

Data Type
How the value will be stored in the database

  • String
  • Boolean
  • Integer
  • Float

Regex Pattern
Restrictions on what can be entered in the field

Content Type
Prepopulated with the current content type

Required
Whethere the field is required to be filled out for each content item

Show In Listing
Whether the field will be shown in the dashboard's content listing

Searchable
Whether a dashboard user can search for the particular field

API

https://yourdomain.com/s/api/[contentType]?[filters]

By default, the SlickCMS APIs will pull all content within your organization. This is useful for companies who share content across multiple channels, so that content does not need to be duplicated for each website or application. In order to pull content that lives only on your website, you will need to pass the site parameter.

For example, to pull all pages on a particular site:

https://yourdomain.com/s/api/pages?site=ecafdd04-1e0d-4f0c-b0f5-0befc9d72093

For multi-lingual sites, you would want to pull all pages with the language code that a user has requested:

https://yourdomain.com/s/api/pages?site=ecafdd04-1e0d-4f0c-b0f5-0befc9d72093&language_code=es_ES

For wildcard searches, simply add asterisks around the search term to find the term anywhere in the value, or at the end of the search term to find values that start with the term:

https://yourdomain.com/s/api/page_content?site=ecafdd04-1e0d-4f0c-b0f5-0befc9d72093&body=*services*
https://yourdomain.com/s/api/members?first_name=Jen* // will return Jen, Jenny, Jennifer, etc.

Languages

SlickCMS comes pre-installed with English (US) as the core language, but unlimited languages can be added.

To add a new language:

  • Create new Language content
  • Assign it a title, native title, and language code (Ex: Spanish, Español, and es_ES)
  • Once published, the language will be available in any piece of content's language dropdown

Creating Content in Multiple Languages

  • Content must first be created in the site's default language
  • Once created, navigate to the content to edit
  • From the language dropdown located above the content form, select the language you'd like to create
  • An alert will inform you if the content has already been created in that language. If not, click ok to create it
  • You will be taken to a new content form with the new language pre-selected
  • Complete the form in the new language and Save / Publish
  • This translated content will now appear in place of the default language content, whenever a page is rendered in the same language

Media Hub

Media content works the same as any other content within SlickCMS, but gets a special grid view to make it easier to view image thumbnails.

All media hub content can with be linked to with a simple and uniform url pattern:

https://yourdomain.com/s/media/[media-id]

For example:

https://yourdomain.com/s/media/c32183d1-9b95-4033-b619-e4a9f3e83f37

Or via its real path in file system:

https://yourdomain.com/orgs/[org-slug]/media/[first-two-chars-of-media-id]/[media-id].[media-extension]

For example:

https://yourdomain.com/orgs/myorg/media/c3/c32183d1-9b95-4033-b619-e4a9f3e83f37.jpg

©2022 SlickCMS