DokuWiki setup

This page summarises specifics of DokuWiki setup and outlines development of templates that are used for Workcraft website.

The default dokuwiki-template has some elements that feel a bit heavy and redundant. We derived dokuwiki-light from the default dokuwiki template and simplified it as follows:

1. In inc/lang/en/lang.php shorten the following button text:
   

   $lang['btn_recent']            = 'Changes';
   $lang['btn_profile']           = 'Profile';
   $lang['btn_media']             = 'Manager';
   $lang['lastmod']               = 'Modified';

2. Copy dokuwiki template into dokuwiki-light and go inside this new template directory.
3. Modify main.php
   • Tweak the title, so it is in the form current:page:path - Workcraft:
     

     <title><?php tpl_pagetitle() ?> - <?php echo strip_tags($conf['title']) ?></title>

   • Make tpl_pageinfo() output and login details visible only to logged-in users; show copyright otherwise:
     

     <div class="docInfo">
         <?php
             if (!$conf['useacl'] || !empty($_SERVER['REMOTE_USER'])) {
                 echo $INPUT->server->str('REMOTE_USER').' @ ';
                 tpl_pageinfo();
             } else {
                 echo $conf['copyright'];
             }
         ?>
     </div>

   • Make the content of <!– PAGE ACTIONS –> section visible only to logged-in users:
     

     <?php if (!$conf['useacl'] || !empty($_SERVER['REMOTE_USER'])): ?>
         <h3 class="a11y"><?php echo $lang['page_tools']; ?></h3>
         <div class="tools">
         ...
         </div>
     <?php endif ?>

4. Modify tpl_header.php
   • Remove the following lines (this is to get rid of skip to content link on top of the mobile page view):
     

     <ul class="a11y skip">
         <li><a href="#dokuwiki__content"><?php echo $lang['skip_to_content']; ?></a></li>
     </ul>

   • Adjust parameters of tpl_link call:
     

     tpl_link(
         wl(),
         '<img src="'.$logo.'" '.$logoSize[3].' alt="" />',
         'accesskey="" title=""'
     );

   • Remove the following code in <!-- USER TOOLS --> section:
     

     if (!empty($_SERVER['REMOTE_USER'])) {
         echo '<li class="user">';
         tpl_userinfo(); /* 'Logged in as ...' */
         echo '</li>';
     }

   • Alter <!-- SITE TOOLS --> section as follows:
     

     <div id="dokuwiki__sitetools">
         <h3 class="a11y"><?php echo $lang['site_tools']; ?></h3>
         <?php tpl_searchform(); ?>
         <div class="mobileTools">
             <?php
                 if (!empty($_SERVER['REMOTE_USER'])) {
                     echo (new \dokuwiki\Menu\MobileMenu())->getDropdown($lang['tools']);
                 } else {
                     echo (new \dokuwiki\Menu\UserMenu())->getListItems('action ');
                 }
             ?>
         </div>
         <ul>
             <?php
                 if (!empty($_SERVER['REMOTE_USER'])) {
                     echo (new \dokuwiki\Menu\SiteMenu())->getListItems('action ', false);
                 }
             ?>
         </ul>
     </div>

5. Modify css/basic.less:
   • Set table img width restriction to 100% instead of 50vw:
     

     table img {
         max-width: 100%;
     }

6. Modify css/design.less:
   • Change logo height attribute to max-height:
     

         .logo {
             ...
             img {
                 float: left;
                 margin-right: .5em;
                 max-height: 64px;
                 width: auto;
             }

   • Change paddings and margins of dokuwiki__header:
     

     #dokuwiki__header {
         padding: 0.5em 0.0em 0.5em;
      
         .headings  {
             margin-top: 0.2em;
             margin-bottom: .2em;
             width: 59%;
         }
      
         .tools {
             margin-top: .2em;
             margin-bottom: .2em;
             width: 39%;
         }
     ...

   • Adjust margins and paddings of the search form:
     

     form.search {
         display: block;
         position: relative;
         margin-top: 1.5em;
         margin-bottom: .0em;
      
         input {
             width: 20em;
             height: 2.4em;
             padding: .35em 22px .35em .35em;
         }
     ...

   • Hide elements of .pageID class:
     

     .dokuwiki .pageId {
         display: none;
     ...

   • Align .docInfo to the left:
     

     .dokuwiki .docInfo {
         font-size: 0.875em;
         text-align: left;
     }

   • Hide div.buttons in dokuwiki__footer section:
     

     div.buttons a {
         display: none;
         ...

7. Modify css/mobile.less:
   • Increase the width of search form:
     

     #dokuwiki__sitetools form.search {
         float: left;
         margin: 0 .2em .2em 0;
         width: 77%;
     }

   • Decrease the width of mobile tools dropdown and login link:
     

     #dokuwiki__header .mobileTools {
         display: block;
         font-size: 0.875em;
         margin: 0 0 .2em 0;
         float: right;
         width: 21%;
     }

This template removes decoration elements that are redundant in the offline version of documents. Here is an instruction of how to produce dokuwiki-light-export template from dokuwiki-light template.

1. Copy dokuwiki-light template into dokuwiki-light-export and go inside this new template directory.
2. In main.php:
   • Modify section<nav class="docInfo"> to exclude login user details, as follows:
     

     <div class="docInfo">
         <?php echo $conf['copyright']; ?>
     </div>

   • Remove section <div id="dokuwiki__pagetools"> just after <!-- PAGE ACTIONS --> comment
3. In tpl_header.php:
   • Remove PHP block after <!-- USER TOOLS --> comment
   • Remove section <div id="dokuwiki__sitetools"> just after <!-- SITE TOOLS --> comment
   • Remove PHP block after <!-- BREADCRUMBS -->