Difference between revisions of "How to Use HelpWiki Page Layouts"

Latest revision as of 12:37, 5 October 2017

Page layouts and templates provide a format that can be utilized to structure your page.

Page Layouts Using Templates

Templates allow the user to format pages into preexisting layouts without needing to know HTML.

How to set up a template

There are two steps to utilize templates when creating pages in the Evergreen HelpWiki

Step One: Copy and paste template syntax.

Navigate from the home page to the category Web Publishing and click Wiki Admin
From the Wiki Admin catagory, click on the subcategory Page Layouts
Select the page that utilizes the template you want to use for your page
From the template page navigate to the ... icon and select edit source
Highlight the syntax in the editing box included in the curly brackets

Links to templates you can use

Where to click to find the Edit Source button

Copy and paste the text in red to utilize templates in your page

Step Two: Utilize the template to format your page

Navigate back to your page and select Edit Source
Paste the syntax you copied from the template example page into the editing box for your page
Follow the instructions included in the syntax in order to fill in the template with your content

You can contact Academic technologies if you need any help creating a MediaWiki page

Editing pages built using templates

Pages using layout template cannot be edited via visual editor. To enable Visual Editor editing, you'll want to convert your page from template format to HTML using the subst command.

input subst: right before the start of the template and save the page.
The template syntax will be replaced by the html layout tags

Syntax to flatten TwoColumn template would look like

{{subst:TwoColumn ...
}}

When To Use a Template

Basic

A page that uses this template is this page, How to Use HelpWiki Page Layouts

Below is the syntax for the basic template that you can copy and paste into your page.

__NOTOC__
{{Basic
|lead=
Lead text / brief overview of the page content. 
|content=
===Page Content===
====Task heading (optional)====
#
#
#
#
}}

The basic template can be utilized on pages that you want to keep relativly unformatted
The template includes formatting for imputing a block of content but does not include formatting for adding a sidebar or more than one section for content.
If you want to add additional styling to the page see Help:Templates- MediaWiki or Help:Magic words - Media Wiki
Link to the basic layout page/example

Two Column/Sidebar

A page that uses the Two Column or Sidebar template is the I forgot my Username or Password page

Below is the syntax for the TwoColumn or Sidebar template that you can copy and paste into your page.

__NOTOC__
{{TwoColumn|lead= 
Succinct description of what this page is about. Could be two lines but shorter is better.
|content=
===Page Content===
====Task heading (optional)====
#
#
#
#
|sidebar=
====Sidebar information====
*Links to related content
----
{{GetHelp}}
}}

Two Column is the official name of the template that is used within the syntax, but it is also refered to as sidebar becuase it is preformated to include a sidebar
Link to the Two Column/Sidebar layout page/example
This is the most commonly used template within the Evergreen Helpwiki

Landing

A page that uses the Landing template is the Accessibility Help page

Below is the syntax for the landing page template that you can copy and paste into your page.

<pre>
__NOTOC__
{{Landing
|lead=
Lead text or brief overview of the page content. 
|content=
Page content that falls under the main page, and not in a subcolumn.
|col1=
====Bulletted items under column 1====
*
*
*
|col2=
====Bulletted items under column 2==== 
*
*
*
|sidebar=
====Sidebar information====
*Links to related content
----
{{GetHelp}}
}}

Link to the Landing layout page/example
Use the landing page template when creating a hub to list pages that are related
You can Include the 3 Box or 2 Box template to add further structure to your landing page

@@ Line 1: / Line 1: @@
 {{Basic|lead=
-How to Use Page Layouts to Design your Help Wiki Page.
+Page layouts and templates provide a format that can be utilized to structure your page.
 |content=
+----
-===About Wiki Page Layouts===
-The default Evergreen MediaWiki skin (Chameleon) is a bootstrap-based skin.
-Understanding the [http://getbootstrap.com/css/#grid Bootstrap 3.0 classes available for grid-based] page layouts could help you better understand how the pages are structured.
 ===Page Layouts Using Templates===
 *Templates allow the user to format pages into preexisting layouts without needing to know HTML.
+{{2colrow|col1=
 ====How to set up a template====
-*There are two ways to utilize templates when creating pages in the Evergreen HelpWiki
+*There are two steps to utilize templates when creating pages in the Evergreen HelpWiki
 =====Step One: Copy and paste template syntax.=====
-#'''Navigate from the home page to the category Web Publishing and click Wiki Admin'''
+#Navigate from the home page to the category Web Publishing and click '''Wiki Admin'''
-[[File:Screen Shot 2017-05-16 at 5.14.47 PM.png|240px|thumbnail|center]]
+#From the '''Wiki Admin''' catagory, click on the subcategory '''Page Layouts'''
-#'''From the Wiki Amin Catagory, click on the subcategory Page Layouts'''
+#Select the page that utilizes the template you want to use for your page
-[[File:Screen Shot 2017-05-16 at 5.15.14 PM.png|240px|thumbnail|center]]
+#From the template page navigate to the '''...''' icon and select edit source
-#'''Select the page that utilizes the template you want to use for your page.'''
+#Highlight the syntax in the editing box included in the curly brackets
-[[File:Screen Shot 2017-05-16 at 5.15.28 PM.png|240px|thumbnail|center]]
+=====Links to templates you can use=====
-#'''From the page navigate to the ... icon and select edit source.'''
+*[[Basic_Page_Example_Layout-Template|Basic Page Template ]]
-[[File:Screen Shot 2017-05-16 at 5.16.01 PM.png|240px|thumbnail|center]]
+*[[Landing_Page_Example_Layout_-_Template|Landing Page Template]]
-#'''Highlight the syntax in the editing box included in the curly brackets.'''
+*[[Sidebar_Example_Layout_-_Template|Sidebar (otherwise known as TwoColumn) Template]]
-[[File:Screen Shot 2017-05-16 at 5.17.46 PM.png|240px|thumbnail|center]]
+*[[Sidebar_with_2_Boxes_Layout-Template|Sidebar (TwoColumn) with 2 boxes Template ]]
+|col2=
+[[File:Screen Shot 2017-05-16 at 5.16.01 PM.png|thumbnail|400px|Where to click to find the '''Edit Source''' button]]
+[[File:Screen Shot 2017-05-16 at 5.17.46 PM.png|thumbnail||400px|Copy and paste the text in red to utilize templates in your page]]
+}}
 =====Step Two: Utilize the template to format your page=====
 #Navigate back to your page and select '''Edit Source'''
 #Paste the syntax you copied from the template example page into the editing box for your page
 #Follow the instructions included in the syntax in order to fill in the template with your content
 '''You can contact Academic technologies if you need any help creating a MediaWiki page'''
 ====Editing pages built using templates====
-Pages using layout template cannot be edited via visual editor. To enable Visual Editor editing, you'll want to convert your page from template format to HTML using the "subst" command.
+Pages using layout template cannot be edited via visual editor. To enable Visual Editor editing, you'll want to convert your page from template format to HTML using the '''subst''' command.
-* input "subst:" right before the start of the template and save the page.
+* input '''subst:''' right before the start of the template and save the page.
 * The template syntax will be replaced by the html layout tags
 Syntax to flatten TwoColumn template would look like
-<div class="well">
+<pre>
-<nowiki>
 {{subst:TwoColumn ...
 }}
-</nowiki>
+</pre>
-</div>
+----
+===When To Use a Template===
+====Basic====
+[[File:Screen Shot 2017-10-05 at 1.30.52 PM.png|400px|thumbnail|A page that uses this template is this page, '''How to Use HelpWiki Page Layouts''']]
+'''Below is the syntax for the basic template that you can copy and paste into your page.'''
+<pre>
+__NOTOC__
+{{Basic
+|lead=
+Lead text / brief overview of the page content.
+|content=
+===Page Content===
+====Task heading (optional)====
+#
+#
+#
+#
+}}
+</pre>
+*The basic template can be utilized on pages that you want to keep relativly unformatted
+*The template includes formatting for imputing a block of content but does not include formatting for adding a sidebar or more than one section for content.
+*If you want to add additional styling to the page see [https://www.mediawiki.org/wiki/Help:Templates Help:Templates- MediaWiki] or [https://www.mediawiki.org/wiki/Help:Magic_words Help:Magic words - Media Wiki]
+*[[Basic_Page_Example_Layout-Template|Link to the basic layout page/example]]
-===Page Layouts Using HTML Layouts===
+====Two Column/Sidebar====
-*Use of HTML to build the page allows the user to utilize the visual editor right away when creating a page
+[[File:Screen Shot 2017-10-03 at 1.44.18 PM.png|thumbnail||400px|A page that uses the Two Column or Sidebar template is the '''I forgot my Username or Password''' page]]
+'''Below is the syntax for the TwoColumn or Sidebar template that you can copy and paste into your page.'''
-'''Step One'''
+<pre>
-#Follow Steps 1-2 from '''How to set up a template''' to find sample the HTML Pages
+__NOTOC__
-#Select one of the HTML pages in the Page Layout Category which lists the common HTML formats for wiki pages that the user can copy and paste.
+{{TwoColumn|lead=
-#Navigate to the ... and select Edit Source
+Succinct description of what this page is about. Could be two lines but shorter is better.
-#Copy and paste the HTML layout from other formatted pages to style your page.
+|content=
-====Example HTML format====
+===Page Content===
-Create a main content + sidebar layout
+====Task heading (optional)====
-<pre><div class="container-fluid">
+#
-   <div class="row">
+#
-        <div class="col-md-7 ">
+#
-             <div class="lead">Lead text goes here </div>
+#
-       </div><!-- end col-md-7 -->
+|sidebar=
-<div class="col-md-1"></div>
+====Sidebar information====
-       <div class="col-md-3 sidebar">
+*Links to related content
-               *[[sidebar links can go here]]
+----
-       </div> <!-- end col-md-3-->
+{{GetHelp}}
-    </div> <!-- end row -->
+}}
- </div> <!-- end container-->
 </pre>
+*Two Column is the official name of the template that is used within the syntax, but it is also refered to as sidebar becuase it is preformated to include a sidebar
+*[[Sidebar_with_2_Boxes_Layout-Template|Link to the Two Column/Sidebar layout page/example]]
+*This is the most commonly used template within the Evergreen Helpwiki
+====Landing====
+[[File:Screen Shot 2017-10-03 at 1.41.07 PM.png|thumbnail|400px|A page that uses the Landing template is the '''Accessibility Help''' page]]
+'''Below is the syntax for the landing page template that you can copy and paste into your page.'''
+<pre>
+<pre>
+__NOTOC__
+{{Landing
+|lead=
+Lead text or brief overview of the page content.
+|content=
+Page content that falls under the main page, and not in a subcolumn.
+|col1=
+====Bulletted items under column 1====
+*
+*
+*
+|col2=
+====Bulletted items under column 2====
+*
+*
+*
+|sidebar=
+====Sidebar information====
+*Links to related content
+----
+{{GetHelp}}
 }}
+</pre>
+*[[Landing_Page_Example_Layout_-_Template|Link to the Landing layout page/example]]
+*Use the landing page template when creating a hub to list pages that are related
+*You can Include the 3 Box or 2 Box template to add further structure to your landing page
+}}
 [[Category:Page Layouts]]