Jump to content
Boost up your community
  • Plugin for side menu

    Now we are ready to create a block (plugin) that we will use as side menu. The side menu displays categories and the pages hierarchically. This block is created in AdminCP and we are going to use a custom template for it.

    Block with page menu

    In your AdminCP go to Pages -> Page management -> Blocks and click on Create new block.

    Create new block

    Click on Next. On the tab Details enter the name for the block and template key docs_side_menu.

    Create Block, tab Details

    In the tab Feed Configuration set the following:

    Create Block - tab Feed Configuration

    You define here the number of records in the block. In earlier versions of IPS it was possible to enter a 0 for unlimited. Starting with IPS version 4.4.10 it does not work anymore, so you have to enter a large positive number, e.g. 100. This number should be greater than the number of all categories and all pages in the categories together, otherwise the menu will be cut off.

    The sorting in the block is only valid for the order of the pages within a category. The categories themselves are sorted as specified in AdminCP. You can change their order by drag and drop.

    Template for side menu

    The "magic" happens on the tab Content. Here you select the option Use as base for a custom template. A template editor will appear below this option where you enter the following code:

    Spoiler
    
    {{$recordClass = null;}}
    {{$catClass = null;}}
    
    {{if count($records)}}
    {{$recordClass = get_class($records[0]);}}
    {{$catClass    = '\IPS\cms\Categories' . $recordClass::database()->_id;}}
    {{endif}}
    
    {{$firstRecord = null;}}
    {{$currentUrlPath = \IPS\Request::i()->url()->data['path'];}}
    
    {{if count($records) and $catClass and count($catClass::roots())}}
    <ul class="ipsList_reset cDocs" data-controller="docs.front.devDocs.main">
        {{foreach $catClass::roots() as $root}}
        <li>
            <h2>{$root->_title}</h2>
            {{if count($root->children())}}
            <ul class="ipsList_reset">
                {{foreach $root->children() as $child}}
                <li class="cDocs_closed">
                    <h3 data-action="expandSection">{$child->_title}</h3>
                    {{foreach $records as $record}}
                    {{if $record->container()->_id == $child->_id}}
                    <ul class="ipsList_reset">
                        {{if $firstRecord == null}}
                        {{$firstRecord = $record;}}
                        {{endif}}
                        <li>
                            <a {{if $currentUrlPath === $record->url()->data['path']}}class="cDocs_active"{{endif}} href="{$record->url()}">
                                {{if $record->customFieldDisplayByKey('shortened_title', 'raw')}}{$record->customFieldDisplayByKey('shortened_title', 'raw')}{{else}}{$record->_title}{{endif}}
                            </a>
                        </li>
                    </ul>
                    {{endif}}
                    {{endforeach}}
                </li>
                {{endforeach}}
            </ul>
            {{endif}}
            <ul class="ipsList_reset">
                {{foreach $records as $record}}
                {{if $record->container()->_id == $root->_id}}
                {{if $firstRecord == null}}
                {{$firstRecord = $record;}}
                {{endif}}
                <li>
                    <a {{if $currentUrlPath === $record->url()->data['path']}}class="cDocs_active"{{endif}} href="{$record->url()}">
                        {{if $record->customFieldDisplayByKey('shortened_title', 'raw')}}{$record->customFieldDisplayByKey('shortened_title', 'raw')}{{else}}{$record->_title}{{endif}}
                    </a>
                </li>
                {{endif}}
                {{endforeach}}
            </ul>
        </li>
        {{endforeach}}
    </ul>
    {{endif}}
    
    {{if $recordClass and \IPS\cms\Pages\Page::$currentPage and (string) \IPS\cms\Pages\Page::$currentPage->url() == (string) \IPS\Request::i()->url()}}
    {{if $firstRecord}}
    {{\IPS\Output::i()->redirect($firstRecord->url(), '', 302);}}
    {{else}}
    {{\IPS\Output::i()->redirect(\IPS\Http\Url::internal(''), '', 302);}}
    {{endif}}
    {{endif}}

     

    Save the block and give all user groups the permission to see the block. If you would exclude the groups here, the menu will not be displayed for them. You can already see the rough structure of the menu in the preview of the block. We will add the CSS styles and JavaScript later to make it a bit smarter. Some CSS classes are already built into templates above.

    The last lines in the block redirects from category listing to the first record in the category if you navigate through the side menu. 

    Insert menu into the page

    To add the block into the page, go to Pages -> Page Management -> Pages in AdminCP and click on the pencil icon to edit the page docs. Go to the tab Content. Here you can see that the database has already been added to the page via the database ID. This happened automatically when we created the page during database creation.

    Replace the content of the page with the following code:

    Spoiler
    
    <div class="ipsBox ipsPad">
    <div class="ipsColumns ipsColumns_collapsePhone" id="elDocs_columns">
      {{if \IPS\Request::i()->do !='edit' and \IPS\Request::i()->do !='form'}}
    	<div class="ipsColumn ipsColumn_wide">
    		{block="docs_side_menu"}
    	</div>
      {{endif}}
    	<div class="ipsColumn ipsColumn_fluid">
    		<div class="ipsPad ipsSpacer_top">
              <div class="ipsSpacer_top">
    			{database="docs"}
              </div>
    		</div>
    	</div>
    </div>
    </div>

     

    Take time and look at this simple HTML for the page. Here we use the keys for database and the block with the menu. These are inserted in two columns using the IPS CSS framework. The IF-query makes sure that the menu disappears when you edit the page, otherwise you would not have enough space to edit the content. 

    See your documentation in the frontend now. The only things we miss here are CSS and JavaScript.




  • Sign In and Stay Uptodate

    New articles and tutorials on how to monetize your community are on the way. To stay update sign in and subscribe to our newsletter. 

×
×
  • Create New...