Create the Left Navigation SSI Quick Guide

Transcription

1 Create the Left Navigation SSI Quick Guide The WCMS system gives you the flexibility to assemble lists of existing content items manually to create the Left Navigation. The Server Side Include [WYSIWYG] content item will output the HTML in the format that is currently used by the CDC.gov breadcrumbs JavaScript functionality. The templates that have been created for the CDC implementation of WCMS make extensive use of Server Side Includes to reduce the need to republish all pages for changes to sections like the header, footer, etc. Many of the Server Side Includes (localleftnav, localbreadcrumbs, localgovdelivery, etc.) mimic the includes that exist today at CDC.gov. Server Side Includes are initially created within a top-level ~inc~ folder and many of these may be overridden and extended in sub-folders. Server Side Includes also contain the capability to be locked and not overridden. All SSIs can be manually created, or copied from the CDC global ~inc~ folder. Since relationship reporting isn t available for SSIs, it s highly recommended to Publish Now the parent folder for any SSI added or removed from Percussion, to ensure all pages associated with the SSIs are published. Creating the left navigation is as simple as creating a content item. This Quick Guide walks you through creating an unordered list with references (inline templates) to other content items. The system then reads this specific server-side include and generates the left navigation. 1 Right-click on an ~inc~ folder and select New Item Developer Toolbox Server Side Include [WYSIWYG]. TIP 1 Server Side Includes may optionally be copied As New Item from the CDC ~inc~ folder and then edited. 1 2 Enter localleftnav for the System Title and provide a Start Date for the content item. 2 TIP 2 The system title naming convention is important for server side includes. The system title for the left navigation SSI is localleftnav. The system title is CaSe SenSitive. 3 3 Click on the SSI Code field to activate the ephox editor. Department of Health and Human Services Centers for Disease Control and Prevention

2 4 Enter the text to display for the topic homepage, and then highlight. 4 5 Select Heading 3 from the style dropdown ephox control. 6 6 While text is highlighted, select the Insert Rhythmyx Inline Link button. 5 7 In the Content Browser window, browse Sites and Folders for images, or Search for images by various criteria such as metadata, Title, Content ID, Community, or Content Type. Toggle between Simple and Advanced search criteria by clicking the up or down arrow buttons at right. 7 8 Select a topic homepage content item. 8

3 9 Click Select to add the inline link Move the cursor to the next line within the ephox control and click on the unordered list button to begin creating the navigation tree Click the Insert Rhythmyx Inline Template button. 12 In the Content Browser window, browse Sites and Folders for images, or Search for images by various criteria such as metadata, Title, Content ID, Community, or Content Type. Toggle between Simple and Advanced search criteria by clicking the up or down arrow buttons at right Select a content item.

4 14 Choose the Snp Short Title Link template for display. This will allow you to preview the template Click Select to add the inline template. TIP 3 If after adding the inline template, the ephox control creates a line break right after the bulleted item instead of starting the next bulleted item, simply hit the Enter key to clear the line break and start the next bulleted item Repeat steps #11 - #15 for each menu item. TIP 4 The Increase Indent and Decrease Indent buttons may be used to create a nested menu tree. 17 Switch to the Code view using the code tab in the bottom left of the Ephox control. T4 17

5 18 Locate the first menu item in the first level of the menu. This should be the first ul HTML tag in the code view Add the id= nav-primary attribute to the ul tag as follows: ul id= nav-primary Save (insert/update) the content item and close the entry window. 20