Prerequisites: This page assumes that you have already set up your Moxie.Build server and logged in as an admin user. This page covers some of the basics that are involved in using the Content Management aspects of the Moxie.Build system.

Categories & Posts

Categories: Think of a Category like a page on your website. A Category can either be a standalone page, or a page that umbrellas one or more other pages (or "Posts").

Posts: A Post is another type of page on your website, but it is not a standalone page. A Post is a page that belongs to a Category.

IMPORTANT NOTE: Please do not give a post and a category the same alias as each other, Moxie will look for one and find the first one and assume that is the correct one which may not be true.

The ~ + p = links

Navigate to the component (this could be a page, a section of a page, or the footer) you wish to interact with. At the bottom of this component, you should see these links. Hovering over any of these links will give a brief description of what that link does. You may see some or all of these links, depending on your logged in user permissions and the context.

These links are defined as follows:

• ~ (Tilde) Edit this Category/Post
• + (Plus) Add a new Post (Content.Post record)
• [ ] (Brackets) Add a new Other block (Content.Other record. See notes below re Template Insertion Points)
• p (Lowercase "p") Purge CloudFlare Cache
• = (Equals) Edit the Procedure for this Category/Post

Editing a Category/Post

As per the above section, clicking the ~ (tilde) icon will open a new tab or window in your browser, where you can edit the Intro. This is the short (1-3 lines, ideally) blurb that will appear on search results within your website. Below the Editor, below the  Update button, there are a few more links:

• Switch to Body
  • This will switch the editor to edit the Body instead of the Intro. The Body is the main bulk of what you want on that page.
• Open Files
  • This is a link to the root of your file structure, to use as a reference in case you want to insert an image or file into that page – in which case you will need to know the source path to that file.
• View Page
  • This opens up the page you are editing in a new tab or window.
• Use Full Detail Editor Page
  • This opens up the Admin interface for editing the Category.

Template Insertion Points in CMS Content

The Category/Post Name/Title, Intro, and Body may use [ ? Name ? ] (without spaces between the [ ] and the ?s) in order to include a template insertion point for other content to be loaded into, typically from either a Content.Other record or added by a MOX procedure. Bootstrap Glyph icons can be referenced this way using [ ? i name ? ] (again, without the spaces between the [ ] and the ?s) where the name is something like "ok" e.g. [ ? i ok ? ] 

Important Things to Know in the Editor

When editing a Category or Post, there are some important features to note.

The button is used to insert or edit hyperlinks. To use this, select the text you want to turn into a link, and click the button. This will bring up a menu asking for a couple of things:

• URL: This will be the URL you want the link to open up.
• Text to display: This will be the clickable link text.
• Title: This is the text that shows up when you hover your cursor on the link.
• Target: This specifies whether you want the link to open in the same window/tab, or in a new window/tab.

The button is used to insert images. To use this, put your text cursor where you want to insert the image, and click the button. This will bring up a menu asking for a couple of things:

• Source: This is the URL location of the image you want to insert.
  • This is where the Open Files link below the Editor comes in handy, so you can view your folder structure to find or upload an image to use in your Category/Post. Once you have the image found or uploaded, right click on its link and choose Copy link location, then return to this Source field and paste the link.
• Alternative Description: This specifies alternate text for the image for screen readers and SEO.
• Dimensions: You can force a specific size other than the original image size. Typically, to accommodate modern high DPI displays, your source image should be about twice the size as the display size. In order to make images responsive, to fill the available space and shrink on smaller displays, set the width to 100% and leave the height blank
• Wrap Text: Place an image at the start of a paragraph, and then with the image selected, click on left or right align toolbar icons to place the image on the left or right with the paragraph text wrapping the image. Use the Vertial Space and Horizontal Space values on the Advanced tab of the Insert Image popup to add margin to the image