DokuWiki setup

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

Template dokuwiki-light

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/design.less:
    • 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;
          ...
  6. 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%;
      }

Template dokuwiki-light-export

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 -->

Note that dokuwiki-light-export template has all the management options hidden, therefore the direct link to administration page may become helpful during testing: workcraft.org/start?do=admin