Mikio is a Bootstrap 4 style template with a hero element and dark mode support
Compatible with DokuWiki
iconTag
: icon tag to use to engage the icon engine. Default to icon
customTheme
: the mikio theme to use, located in the mikio/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 the navbarUseTitleText
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 the navbarPos
to be set to custom
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 the tools-menu
language valuenavbarPosLeft
: 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 the submenu
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 hiddensearchButton
: show the search button as a icon or textsearchUseTypeahead
: use Typeahead page suggestions in search barheroTitle
: show the hero block on pagesheroImagePropagation
: search for hero images in parent namespaces if none is found in the current namespacetagsConsolidate
: Consolidate tags found in the current page and display it in the hero, content header or sidebarbreadcrumbHideHome
: 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. Requires breadcrumbPrefix
to be enabled. This replaces the default breadcrumb prefixes Trace:
for tracking breadcrumbs and You 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. Requires breadcrumbSep
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 the home
language valuebreadcrumbShowLast
: only show a number of breadcrumbs from the last. Will also show the home item in the list if enabled. Set this to 0
to show all itemssidebarShowLeft
: 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 foundtocFull
: show the table of contents as a full height itempageToolsFloating
: when and if to show the floating page toolspageToolsFooter
: when and if to show page tools in the footerfooterCustomMenuText
: 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 footerlicenseType
: how to show the license in the footerlicenseImageOnly
: show the license in the footer as an image only. Requires licenseType
to at least be enabledincludePageUseACL
: respect ACL when including pagesincludePagePropagate
: search parent namespaces when including pagesThe 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 footerThe 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 elementtitle
: 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 the includePagePropagate
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.
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
to a user set value in the settings/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 should be placed in the themes directory in their own directory. LESS files are supported.
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') { // ... }
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.
sidebar-title
: Text for the collapsable block in the sidebartools-menu
: Text for the combined tools DokuWiki menu titlehome
: Text for the breadcrumb home titleSameSite
requirement.always
to reflect DokuWiki. #58. Thanks schplurtz.You can view older change release notes on the Github project page.
This template uses a modified version of simple_html_dom
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