Tutorial 3 - Editing Pages

Sitemap View & Folder View

There are two views in the jsHarmony CMS for editing pages:

Sitemap View
    Organized by Information Heirarchy

Folder View
    Organized by Folders on the file system

In addition to providing a user-friendly way to organize pages, the Sitemap View is used to generate sidebars, breadcrumbs, and other navigational components within page templates.

When you right-click to add an item to the sitemap, you will have two options:
  Add Child Page
  Add Child Menu Item

Add Child Menu Item lets you link to any existing page, media item, external URL, or even run JavaScript.
Add Child Page will both create a new page in the Folder View, and add a link to that page from the sitemap.

When you add a child page, you'll see that the URL is automatically generated based on the page title.  If you add a child page to a second-level page, the parent's subfolder is also prefixedin the Page URL.

So far, we've been selecting the template each time we are adding a page.
Let's set a default template in the Site Configuration, so we don't need to manually select it each time.

In the Site Configuration you can also change to a different Default Page URL, if your web server doesn't use index.html.

Add the following pages to the site using the "One Column w/Sidebar" template:

• Services
  • Build
  • Engage Users
  • On-time Delivery

Open up the "On-time Delivery" page to preview the sidebar and breadcrumbs.

There are a variety of Advanced Options on the sitemap to customize how the sidebar and breadcrumbs will be generated.

You can add custom CSS or styles to the menu link, or render the menu link as HTML.

If we want to remove "Home Page" from the breadcrumbs, we will go to Home Page, and click "Exclude from Breadcrumbs".

You can make the "Services" section the root of the sidebar, by selecting the Services page in the Sitemap and clicking "Hide Menu Parents".

Editing Page Content

Double-click on a page to open the editor, or you can select the page and click "Edit Page Content".

One of the great features of the jsHarmony CMS is true WYSIWYG (What you see is what you get) editing.  Your content in the editor should display the same way as the end-user will see it on their screen.

Click on a content area to start editing.  The area will highlight in blue and you can start typing text.

You can change the title by clicking on the title and making in-line changes.  You will also see the title in the top toolbar, as well as under the Page Settings drop-down.

Page Settings

The Page Settings menu contains a variety of tabs for configuring the page.

The Page Properties tab can be customized per template.  For instance you could add a property to the template allowing the user to set a margin or background image.  More information about defining the Page Properties can be found in the Web Designer / Developer tutorials.
  
The SEO tab adds tags to the header for search engine optimization. 

The Custom CSS tab enables adding custom styles to the page, for example:
  * body { border: 10px solid red; }
You need to save the page to see the styles applied.

The Header Code tab lets you add any HTML to the page HEAD tag, from custom JavaScript scripts, to meta tags, to JSON schema data.

Finally, the Footer Code section enables adding code right before the closing body tag.
  
Editing Content

Links can be added by right-clicking on text and selecting "Link" from the popup menu, or by clicking the Link icon in the toolbar.  You can link to either Pages and Media items, or enter an external URL directly in the box.

Images can be added from the Toolbar.  You can drag an image into a Media folder and upload directly in the dialog, as well as create and organize folders.

There are a variety of formatting options in the editor.  If the theme supports Google Material Icons, the Material Icons tab in the Symbols panel will enable inserting a variety of icons.

Spell Check is implemented by the browser.  If the browser notices an error, you'll need to press Ctrl+Right Click to see suggestions.

The "View Source" option lets you see and edit the HTML directly.

Web Snippets

Web Snippets are defined by the Web Designer / Developer in the templates folder - they are pieces of HTML that are inserted directly in the body of the editor, and are turned into editable content.  They are great for call-to-action buttons, or complex layouts you would like to insert into the body of the page.

Components

Components are similar to web snippets, in that they are objects you can add to the page.  However they are data-driven based on fields and settings.

Components may support either one item (ex. banner), or multiple items (ex. slideshow).   Components also have a settings panel for configuration.

As opposed to Web Snippets, components will stay in one piece as they are moved throughout the page.

Components can also be used for anything from basic content layouts to advanced content, like forms, or JavaScript.  For example, the Map component in the "Functional" template integrates with Google Maps.

Components are defined and edited by the Web Designer / Developer as part of the templates folder, and can be customized per-site.

Saving

Click the Save button on top to Save when done making changes.