Table of Contents
Mikio Template
Compatible with DokuWiki
- 2024-02-06 "Kaos" yes
- 2023-04-04 "Jack Jackrum" yes
- 2022-07-31 "Igor" yes
- 2020-07-29 "Hogfather" yes
Note
The 2025-04-24 release includes significant changes to styling and code. While it has been tested, there may be some bugs that I have missed. If you find anything that’s not working right, please file an issue.
Features
- Navbar with dropdown support
- Subnavbar support (using a page named submenu)
- Right sidebar
- Hero element
- Icon support
- Customizable breadcrumbs
- Theming support
- Tags plugin support
- Translate plugin support
- Mobile friendly
- Typeahead search support
- Dark mode
Breadcrumb/You Are Here Change
- Breadcrumbs and You Are Here have now been separated instead of combined. This removed the options `breadcrumbHome` and `breadcrumbShowLast` for the breadcrumbs as it only applies to the you are here bar. Breadcrumbs and You Are Here options may have reset
Configuration
iconTag
: icon tag to use to engage the icon engine. Default toicon
customTheme
: the mikio theme to use, located in themikio/themes
directoryshowNotifications
: where to show site notifications for admin staffuseLESS
: use the LESS compilier or direct CSS for the mikio stylesheet. Requires the ctype PHP extension installed.navbarUseTitleIcon
: show the site logo in the navbarnavbarUseTitleText
: show the site title in the navbarnavbarUseTaglineText
: show the site tagline in the navbar. Requires thenavbarUseTitleText
to be enablednavbarCustomMenuText
: custom menu to use in the navbar. Menu items are in the format of url|title with each item seperated by a semicolon. Requires one of thenavbarPos
to be set tocustom
navbarDWMenuType
: how to show the DokuWiki menu items in the navbar. Can be either icons, text or bothnavbarDWMenuCombine
: how to show the DokuWiki menu in the navbar. Can be either category dropdowns, single items or a combined dropdown. The combined menu title is pulled from thetools-menu
language value
navbarPosLeft
: what menu to show on the left of the navbarnavbarPosMiddle
: what menu to show in the middle of the navbarnavbarPosRight
: what menu to show on the right of the navbarnavbarShowSub
: show the sub navbar. This menu is pulled from thesubmenu
page in the current or parent namespaces. The menu is also shown on child pages. If no page is found, the sub navbar is automatically hidden
searchButton
: show the search button as a icon or textsearchUseTypeahead
: use Typeahead page suggestions in search bar
heroTitle
: show the hero block on pagesheroImagePropagation
: search for hero images in parent namespaces if none is found in the current namespace
tagsConsolidate
: Consolidate tags found in the current page and display it in the hero, content header or sidebartagsShowHero
: Show the tags in the hero element of the page. Can be turned off if using the<tags>
element in the MikioPlugin
breadcrumbHideHome
: hide breadcrumbs in the root namespacebreadcrumbPosition
: where to display the breadcrumbs, either under the navbar, in the hero element or above the page contentbreadcrumbPrefix
: enable changing the breadcrumb prefixbreadcrumbPrefixText
: text to set the breadcrumb prefix. RequiresbreadcrumbPrefix
to be enabled. This replaces the default breadcrumb prefixesTrace:
for tracking breadcrumbs andYou are here:
for hierarchical breadcrumbs (including the punctuation) which as of July 2021 cannot be customized by means of the Configuration Manager but only within the scope of a template.breadcrumbSep
: enable changing the breadcrumb seperatorbreadcrumbSepText
: text to set the breadcrumb seperator. RequiresbreadcrumbSep
to be enabledbreadcrumbHome
: change the breadcrumb home item to none, page title of root page, 'home' or an icon/image. The 'home' text is pulled from thehome
language valuebreadcrumbShowLast
: only show a number of breadcrumbs from the last. Will also show the home item in the list if enabled. Set this to0
to show all items
sidebarShowLeft
: show the left sidebar if content is foundsidebarLeftRow1
: content to show in the first row of the left sidebarsidebarLeftRow2
: content to show in the second row of the left sidebarsidebarLeftRow3
: content to show in the third row of the left sidebarsidebarLeftRow4
: content to show in the forth row of the left sidebarsidebarShowRight
: show the right sidebar if content is found
tocFull
: show the table of contents as a full height item
pageToolsFloating
: when and if to show the floating page toolspageToolsFooter
: when and if to show page tools in the footer
footerCustomMenuText
: custom menu to use in the footer. Menu items are in the format of url|title with each item separated by a semicolonfooterSearch
: show the search bar in the footer
licenseType
: how to show the license in the footerlicenseImageOnly
: show the license in the footer as an image only. RequireslicenseType
to at least be enabled
includePageUseACL
: respect ACL when including pagesincludePagePropagate
: search parent namespaces when including pages
Right Sidebar
The right sidebar can be applied by creating a normal wiki page called “rightsidebar”. Go to http://your-wiki.com/doku.php?id=rightsidebar, click “Create this page”, edit the page, save, and you're done. That's it, your saved changes will appear in your right sidebar.
Include Pages
The following pages can be either html files in the root of the template or a page in the namespace. Namespace pages take priority.
topheader
: content to include above the navbarheader
: content include below the navbar but above the page contentcontentheader
: content to include above the page contentcontentfooter
: content to include below the page contentsidebarheader
: content to include above the left sidebar contentsidebarfooter
: content to include below the left sidebar contentrightsidebarheader
: content to include above the right sidebar contentrightsidebarfooter
: content to include below the right sidebar contentfooter
: content to include in the footerbottomfooter
: content to include below the footer
Include Images
The following images can be used to replace content in the template. Images can be in `TEMPLATE_ROOT/images/`, `TEMPLATE_ROOT/themes/THEME/images/`, or in the namespace. Images can be either png, jpg, gif or svg.
logo
: site logo in the navbarbreadcrumb-prefix
breadcrumb prefixbreadcrumb-sep
breadcrumb seperatorhero
hero image for hero element
Hero Element
title
: The hero title is sourced from the page title. The page title is removed from the page contentsubtitle
: Pages can set the subtitle by inserting ~~hero-subtitle TEXT~~ in the page contentimage
: The hero image is sourced from an image named hero in the current or parental namespace. Namespace searching can be confined by theincludePagePropagate
setting. Pages can also override the image by inserting ~~hero-image URL~~ in the page content. DokuWiki and external URLs are supportedcolors
: Colors can be overridden by including ~~hero-colors BACKGROUND_COLOR HERO_TITLE_COLOR HERO_SUBTITLE_COLOR BREADCRUMB_TEXT_COLOR BREADCRUMB_HOVER_COLOR~~. You do not need to include all the color options. Use 'initial' to skip a color override
Namespaces can also apply the above hero settings in child pages by including the above settings in a page named theme
.
If the page title is not being displayed in the Hero, make sure that you have correctly set the DokuWiki useheading setting.
Hiding Elements
Mikio now supports hiding elements using the ~~hide-parts (parts)~~
macro. Each element within the hide-parts macro is required to be separated by spaces. Currently, the following parts are supported:
topheader
: content above the navbarnavbar
: the main navigation barheader
: content below the navbar but above the page contenthero
: the page hero barcontentheader
: content above the page contentcontentfooter
: content below the page contentsidebarheader
: content above the left sidebar contentsidebarfooter
: content below the left sidebar contentrightsidebarheader
: content above the right sidebar contentrightsidebarfooter
: content below the right sidebar contentfooter
: content in the footerbottomfooter
: content below the footer
To hide the topheader, navbar and hero, you would use the macro ~~hide-parts topheader navbar hero~~
Icon Engine
- Mikio includes an icon engine that allows you to include icons in your pages by using <icon OPTIONS> in your content
- If the icon tag conflicts with another plugin, you can change the tag from
icon
to a user set value in the settings - By default, Mikio enables FontAwesome 4 but also includes FontAwesome 5, Elusive 2 and Bootstrap Icons, which can be enabled by uncommenting their inclusions in
/icons/icons.php
Users can also add their own icon sets to the template. Supported icon sets can either be webfonts or individual files (such as a SVG library). Instructions can be found in the /icons/icons.php
file.
Themes
Themes should be placed in the themes directory in their own directory. LESS files are supported.
Dark Mode
Mikio now supports dark mode! When the user prefers a dark theme, or has selected dark mode, the html tag will set the theme dataset to `theme-dark`; else it will be `theme-light`.
You can detect this in CSS using:
:root[data-theme="theme-dark"] { // CSS selectors here }
or in Javascript using:
const html = document.querySelector('html'); if(html.dataset.theme == 'theme-dark') { // ... }
Mikio Plugin
The Mikio Plugin is also available to add bootstrap 4 style + more elements to DokuWiki pages.
If the plugin is installed, the Template Styles Settings page will be expanded to allow directly editing the plugin element styling.
Languages
sidebar-title
: Text for the collapsable block in the sidebartools-menu
: Text for the combined tools DokuWiki menu titlehome
: Text for the breadcrumb home title
Sites using this Template
- https://darmfalen.nl/ (Uses somewhat modified version of Mikio template)
Releases
2025-04-24
- Fix typo preventing
logged_in_user
from showing #105. Thanks ChaosKid42. - Added support for the Chinese language #91. Thanks Little-data.
navbarTitleIconHeight
andnavbarTitleIconWidth
will now override any automatic navbar logo height and width which fixes non-square SVGs #98. Thanks macin.- Added support for Dark Mode logos in the navbar #98. Requested by macin.
- Fixed table alignments not being applied #86. Thanks aloade.
- Fixed empty menus being shown when all items have been disabled #88. Thanks aloade.
- Fixed styling issues in the Media Manager #85. Thanks aloade.
- Fixed issue with languages other than English not being supported correctly #81. Requested by Little-Data.
- Added support to set the maximum width of the navbar search box #73. Requested by macin.
- Added styling support for footnotes #87. Thanks aloade.
- Fixed missing configuration data.
- Added navbar support for versionswitcher plugin #79. Requested by macin.
- Fixed input backgrounds not rendering colours correctly in some circumstances on the configuration page.
- Fixed styling on input fields in darkmode.
style.ini
now supports separate input options #82. Thanks BioSehnsucht. - Fixed padding on inline code blocks to be smaller.
- Cleaned up the display of the versionswitcher syntax. Thanks macin.
- Fixed incorrect language entries #78. Thanks Little-Data.
- Fixed incorrect padding on code/pre blocks #77. Thanks macin.
2024-06-05
- Fix tag text colouring not applying correctly.
- Allow hiding tags in hero if using <tags> element in the MikioPlugin #70. Requested by garanovich.
2024-05-03
2024-02-09
- Added support for DokuWiki Kaos
- Updated to support PHP 8.2
- Added access key support to page elements #64. Thanks rebeka-catalina.
2023-12-12
- Cookies used in the template now use the upcoming
SameSite
requirement. - Fixed snapshots not being detected and causing script loading issues #57. Thanks schplurtz.
- Updated the typescript library to support jQuery compatibility mode #57. Thanks schplurtz.
- Fixed bug in config for showNotifications not being a dropdown.
- Changed default value of showNotifications to
always
to reflect DokuWiki. #58. Thanks schplurtz. - Fixed z-index bug with the sub navbar. #60. Thanks schplurtz.
2023-12-11
- Fixed bug with tags not correctly coloured. #59. Thanks WetenSchaap.
You can view older change release notes on the Github project page.
Third Party Libraries
This template uses a modified version of simple_html_dom
Support
- If you think you have found a problem, or would like to see a feature, please open an issue
- If you are a coder, feel free to create a pull request, but please be detailed about your changes!
Applause
This is really a modern, complete template, with very high flexibility and customizability. (Look at those options to customize for style.ini!) Also it's the first template I have seen with “Hero element” support. And there are quite a few positions to insert included pages as page/content header/footers. I appreciate the great work of the developer. — milchflasche 2020-07-30 03:42
I have used this template in my two language learning sites: http://taigi123.ga/ http://hakka123.ga/ (written in some East Asian languages and Hanzi script) — milchflasche 2020-09-17 04:58