1# Read the Dokus - DokuWiki Template 2 3This is a DokuWiki theme that imitates "Read the Docs". 4 5 6 7## Featuring 8- “Read the Docs” appearance 9- Embedded foldable TOC in the sidebar 10- Auto generated “Previous”, “Next” buttons to follow the pages on the sidebar 11 12## Installation 13 14Use DokuWiki's Extention Manager to install the template. If you want to install manually, you can download from [here.](https://github.com/my17560/dokuwiki-template-readthedokus/archive/refs/heads/main.zip) 15 16## Settings 17 18### Template Settings ### 19 20These are template settings for this theme. 21 22|Option|Description| 23-------|------------ 24|Sidebar position|Choose “left” for the left sidebar, “right” for the right sidebar.| 25|Use a full path breadcrums|Show a full path breadcrumbs instead of only a page title.| 26|Use DokuWiki breadcrums|Check to use DokuWiki style breadcrumbs.| 27|Show toolbox even when logged out|Check to show the Toolbox always. By default, it is not shown unless you log in.| 28|Start Page|Set start page URL. This page is shown when the “previous” button is pressed on the first page.| 29|Enable Font Awesome|Check if you want to use Font Awesome. Don't forget to put the necessary tags in the option below. Technically, this option only puts the tags specified in the head tag.| 30|Specify a tag to include Font Awesome|Specify tags to include FontAwesome.The tags specified here are put in the head tag.| 31|Enable Google Fonts|Check if you want to use Google Fonts. Don't forget to put the necessary tags in the option below. Technically, this option only puts the tags specified in the head tag.| 32|Specify tags to include Google Fonts|Specify tags to include Google Fonts. The tags specified here are put in the head tag.| 33 34### Template Variables ### 35 36These are some of the options on "Template Style Settings". Other options are available to change various colors used in this template. 37 38|Option|Description| 39-------|------------ 40|Site width|Width of the whole content including the sidebar. By setting this value, the contents will be centered.| 41|Content width|Content width. This is a maximum width so the actual size could be less than this value.| 42|Side bar width|Sidebar width.| 43|Header height|Header height. The theme puts padding on the top of the page according to this value.| 44|Footer height|Footer height. The theme puts padding on the bottom of the page according to this value.| 45|CSS breakpoint for smart phones|Screen size less than this value will be treated as a smartphone.| 46|CSS breakpoint for tablets|Screen size less than this value will be treated as a tablet. | 47 48## Notes 49 50### Sidebar Format ### 51 52Use strong for captions, and lists for items. Anything other than that won't be styled, so use your own styles for them. 53 54E.g. 55``` 56** Caption1 ** 57 * [[page1]] 58 * [[page2]] 59** Caption2 ** 60 * page3 61 * page4 62``` 63 64Some index plugins are supported by this template and can be used in the sidebar. 65 66- AcMenu Plugin 67- IndexMenu Plugin 68- nspages Plugin 69- simplenavi Plugin 70 71### Previous/Next Buttons ### 72 73Previous/Next buttons follow links to DokuWiki on the sidebar, picked up by using querySelector(".aside > #sidebar a[data-wiki-id]"). The previous button on the first page will jump to root(/) by default. You can change this in "Start Page" option in the settings. 74 75### Link to Login Page ### 76 77This theme doesn't have any links to the login page by default. Go directly to the login page by appending “&do=login” to the current URL. Or, check the “Show toolbox even when logged out” option in the settings to show the Toolbox always which has the link to the login page. 78 79### Admonitions ### 80 81This theme has "Read The Docs" style admonitions. To use them, wrap a content with a div that has a class "admonition" and a type. 82 83E.g. 84``` 85<html><div class="admonition note"> 86<p>Note!</p> 87</div></html> 88``` 89 90Types are: 91- danger 92- caution 93- note 94- tip 95 96You can use "Wrap Plugin" to make it a bit simpler. 97 98``` 99<WRAP admonition note> 100Note! 101</WRAP> 102``` 103 104If you use the plugin, do not forget to add classes (admonition,danger,caution,note,tip) to the "noPrefix" in the Wrap plugin option otherwise admonitions will not be styled correctly. 105 106## Customization 107 108### Using Font Awesome ### 109 110Even though this theme works without Font Awesome, you can use Font Awesome for better looking. If you decide to use it, check the option in the configuration manager to enable it. Do not forget to set the correct tag in the following option. 111 112A home icon will appear beside the title, and +/- buttons on TOC, a mobile menu button will be replaced by Font Awesome. 113 114### Using Google Fonts ### 115 116Also, you can use google fonts for better looking. Lato and Robot fonts are set in font-family in this theme CSS. If you decide to use it, check the option in the configuration manager to enable it. Change the tags in the following option. 117 118### Adding a Fixed Header/Footer ### 119 120This theme supports a fixed header and footer. On the "Template Style Setting" page, enter a header height in the "Header height" option, a footer height in the "Footer height" option. The theme will add paddings according to those options on top for header, bottom for footer. You can put your own header/footer in "header.html"/"footer.html" in the "lib/tbl/readthedokus/" directory. 121 122#### 1. Set header/footer height in "Template Style Settings" #### 123 124These values must be valid CSS values. 125 126e.g. "50px" 127 128#### 2. Create header.html/footer.html #### 129 130Create a file "header.html"/"footer.html" under (DokuWiki folder)/lib/tpl/readthedokus/. 131 132Here is a sample header.html. This example also shows how to toggle a sidebar. Clicking the string "Header" toggles the sidebar. 133 134``` 135<div onclick="toggleMenu();">Header</div> 136<style> 137header > div { 138 background-color: khaki; 139 position: fixed; 140 height: 50px; 141 left: 0; 142 top: 0; 143 right: 0; 144} 145</style> 146<script> 147function toggleMenu() 148{ 149 dokus.toggleSidebar(); 150} 151</script> 152``` 153 154You might want to hide a mobile menu since both the sticky header and the mobile menu are displayed at the same time on mobile devices. To hide the mobile menu add below to the CSS file (DokuWiki folder)/conf/userall.css 155 156``` 157#mobileheader { 158display: none; 159} 160``` 161 162### Centering the Content ### 163 164To center the content, enter the content width in the "Site width" option on the "Template Style Settings". 165 166### Include Hooks ### 167 168The theme has some include-hooks. 169 170``` 171+--------------------------------------------------+ 172| [1] | 173+-------------+------------------------------------+ 174| Title | Docs > Page Title | 175|( )| [6] | 176| [2] | ---------------------------------- | 177+-------------+ | 178| [3] | | 179| | | 180| | | 181| | | 182| | | 183| | | 184| | | 185| | | 186| | | 187| [4] | <Previous Next> | 188+-------------+ | 189| [5] | [7] | 190+-------------+------------------------------------+ 191| [8] | 192+--------------------------------------------------+ 193 194 195[1] ... header.html 196[2] ... sidebarheader.html 197[3] ... sidebartop.html 198[4] ... sidebarbottom.html 199[5] ... sidebarfooter.html 200[6] ... pageheader.html 201[7] ... pagefooter.html 202[8] ... footer.html 203``` 204
){kind=link}