DokuWiki

It's better when it's simple

User Tools

Site Tools


template:readthedokus

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
template:readthedokus [2021-06-24 10:05] – [Sites using this Template] my17560template:readthedokus [2024-01-29 17:57] (current) – [Adding a Fixed Header/Footer] coldscientist
Line 2: Line 2:
  
 ---- template ---- ---- template ----
-description   : "Read the Docsflavored theme.+description   : Read the Docs” flavored theme
 author        : my17560 author        : my17560
 email         : my17560@gmail.com email         : my17560@gmail.com
-lastupdate_dt : 2021-06-24 +lastupdate_dt : 2023-08-22 
-compatible    : 2020-07-29+compatible    : Hogfather, Igor, Jack Jackrum
 depends       : depends       :
 conflicts     :  conflicts     : 
Line 19: Line 19:
 ---- ----
  
-This is a theme that mimics [[https://readthedocs.org/|"Read the Docs"]]. Featuring+This is a DokuWiki theme that imitates [[https://readthedocs.org/|"Read the Docs"]].
  
 +===== Featuring =====
   * "Read the Docs" appearance   * "Read the Docs" appearance
   * Embedded foldable TOC in the sidebar   * Embedded foldable TOC in the sidebar
Line 31: Line 32:
   * [[https://github.com/my17560/dokuwiki-template-readthedokus/archive/refs/heads/main.zip|Download]]   * [[https://github.com/my17560/dokuwiki-template-readthedokus/archive/refs/heads/main.zip|Download]]
  
-Refer to [[:template]] on how to install and use templates in Dokuwiki.+Refer to [[:template]] on how to install and use templates in DokuWiki.
  
-===== Sites using this Template =====+===== Sites Using This Template =====
  
-  * [[https://bitsmist.com|Bitsmist]]+Please feel free to add your sites here or ask me via e-mail or GitHub issues.
  
-===== Template settings =====+  * Web Components Based Javascript Framework [[https://bitsmist.com/doku.php?id=en:bitsmist-js-core:general:overview|BitsmistJS Core]] (Customized) 
 + 
 +===== Template Settings =====
  
 These are template settings for this theme. These are template settings for this theme.
  
 ^Option^Description^ ^Option^Description^
-|Sidebar position|"left" for left sidebar, "right" for right sidebar. | +|Sidebar position|Choose "left" for the left sidebar, "right" for the right sidebar. | 
- +|Use DokuWiki breadcrumbs|Check to use DokuWiki style breadcrumbs.| 
 +|Show toolbox even when logged out|Check to show the Toolbox always. By default, it is not shown unless you log in.| 
 +|Start Page|Set start page URL. This page is shown when the "previous" button is pressed on the first page.| 
 +|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.| 
 +|Specify a tag to include Font Awesome|Specify tags to include FontAwesome.The tags specified here are put in the head tag.| 
 +|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.| 
 +|Specify tags to include Google Fonts|Specify tags to include Google Fonts.  The tags specified here are put in the head tag.| 
 +===== Template Variables =====
  
-===== Template variables ===== +These are some of the options on "Template Style Settings". Other options are available to change various colors used in this template.
- +
-These are some of the options on "Template Style Settings".+
  
 ^Option^Description^ ^Option^Description^
Line 55: Line 62:
 |Side bar width|Sidebar width.| |Side bar width|Sidebar width.|
 |Header height|Header height. The theme puts padding on the top of the page according to this value.| |Header height|Header height. The theme puts padding on the top of the page according to this value.|
-|Footer height|Footer height. the theme puts padding on the bottom of the page according to this value.| +|Footer height|Footer height. The theme puts padding on the bottom of the page according to this value.| 
-|CSS breakpoint for smart phones|Screen size less than this value will be treated as a smartphone.|+|CSS breakpoint for smartphones |Screen size less than this value will be treated as a smartphone.|
 |CSS breakpoint for tablets|Screen size less than this value will be treated as a tablet. | |CSS breakpoint for tablets|Screen size less than this value will be treated as a tablet. |
  
 ===== Notes ===== ===== Notes =====
  
-==== Sidebar format ====+==== Sidebar Format ====
  
-Use strong for captions, lists of links for items. Anything other than that won't be styled, so use your own styles for them.+Use strong for captions, and lists for items. Anything other than that won't be styled, so use your own styles for them.
  
 E.g. E.g.
Line 71: Line 78:
   * [[page2]]   * [[page2]]
 ** Caption2 ** ** Caption2 **
-  * [[page3]] +  * page3 
-  * [[page4]]+  * page4
 </code> </code>
-==== Previous/Next buttons ==== 
  
-Previous/Next buttons follow ** Level1** links on the sidebar, picked up by using querySelector(".aside > #sidebar > ul .level1 a"). The previous button on the first page will jump to root(/). +Some index plugins are supported by this template and can be used in the sidebar.
-==== No link to login page === +
  
-This theme doesn't have any links to the login page. Go directly to the login page by appending "&do=login" to the current URL.+  * [[doku>plugin:acmenu|AcMenu]] Plugin 
 +  * [[doku>plugin:indexmenu|IndexMenu]] Plugin 
 +  * [[doku>plugin:nspages|nspages]] Plugin 
 +  * [[doku>plugin:simplenavi|simplenavi]] Plugin
  
-==== Recommended options ===+==== Previous/Next Buttons ====
  
-^Option^Value^Description^ +Previous/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 defaultYou can change this in "Start Page" option in the settings. 
-|useheading|on|Breadcrumbs on the page header looks nicer.|+==== Link to Login Page === 
  
 +This 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.
 +==== Admonitions ====
 +
 +This theme has "Read The Docs" style admonitions. To use them, wrap a content with a div that has a class "admonition" and a type.
 +
 +E.g.
 +<code>
 +<html><div class="admonition note">
 +<p>Note!</p>
 +</div></html>
 +</code>
 +
 +Types are:
 +  * danger
 +  * caution
 +  * note
 +  * tip
 +
 +You can use "[[doku>plugin:wrap|Wrap]] Plugin" to make it a bit simpler.
 +
 +<code>
 +<WRAP admonition note>
 +Note!
 +</WRAP>
 +</code>
 +
 +If 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.
  
 ===== Customization ===== ===== Customization =====
Line 91: Line 126:
 ==== Using Font Awesome ==== ==== Using Font Awesome ====
  
-This theme uses Font Awesome. The file is not includedso you need to include it in meta.html to make them visible.+Even 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 itDo not forget to set the correct tag in the following option.
  
-=== Hide substitusions ===+A home icon will appear beside the title, and +/- buttons on TOC, a mobile menu button will be replaced by Font Awesome.
  
-The theme has minimum substitutions (for +/- buttons on TOC and a mobile menu button) and they are visible by default. To make them invisible, you need to add CSS below to userall.css. Otherwise, both Font Awesome and substitutions are shown at the same time.+==== Using Google Fonts ====
  
-<code css+Also, you can use google fonts for better looking. 'Lato' and 'Roboto Slab' 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. 
-#dw__toc .btn-expand img + 
-    displaynone;+==== Adding a Fixed Header/Footer ==== 
 + 
 +This 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/tpl/readthedokus/" directory.  
 + 
 +=== 1. Set header/footer height in "Template Style Settings" === 
 + 
 +These values must be valid CSS values. 
 + 
 +e.g. "50px" 
 + 
 +=== 2. Create header.html/footer.html === 
 + 
 +Create a file "header.html"/"footer.html" under (DokuWiki folder)/lib/tpl/readthedokus/
 + 
 +Here is a sample header.html. This example also shows how to toggle a sidebar. Clicking the string "Header" toggles the sidebar. 
 + 
 +<code> 
 +<div onclick="toggleMenu();">Header</div> 
 +<style> 
 +header > div 
 + background-color: khaki; 
 + position: fixed; 
 + height: 50px; 
 + left: 0; 
 + top: 0; 
 + right0;
 } }
 +</style>
 +<script>
 +function toggleMenu()
 +{
 + dokus.toggleSidebar();
 +}
 +</script>
 +</code>
  
-#btn-mobilemenu .icon-menu { +You might want to hide a mobile menu since both the sticky header and the mobile menu are displayed at the same time on mobile devicesTo hide the mobile menu add below to the CSS file (DokuWiki folder)/conf/userall.css 
-    display: none;+ 
 +<code> 
 +#mobileheader 
 +display: none;
 } }
 </code> </code>
  
-==== Using Google Fonts ====+==== Centering the Content ====
  
-Since the original "Read the Docstheme uses Lato and Robot fonts, this theme also specifies them in font-family in the theme CSS. If you want to use these fonts, you can use Google Fonts. To use them, you need to import them in your meta.html.+To center the content, enter the content width in the "Site width" option on the "Template Style Settings".
  
-<code html+==== Include Hooks ==== 
-<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'> + 
-<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet'>+The theme has some include-hooks. 
 + 
 +<code> 
 ++--------------------------------------------------+ 
 +|                       [1]                        | 
 ++-------------+------------------------------------+ 
 +|    Title    | Docs > Page Title                  | 
 +|(           )|                [6]                 | 
 +|     [2]     | ---------------------------------- | 
 ++-------------+                                    | 
 +|     [3]                                        | 
 +|                                                | 
 +|                                                | 
 +|                                                | 
 +|                                                | 
 +|                                                | 
 +|                                                | 
 +|                                                | 
 +|                                                | 
 +|     [4]     <Previous                    Next> | 
 ++-------------+                                    | 
 +|     [5]                    [7]                 | 
 ++-------------+------------------------------------+ 
 +|                       [8]                        | 
 ++--------------------------------------------------+ 
 + 
 + 
 +[1] ... header.html 
 +[2] ... sidebarheader.html 
 +[3] ... sidebartop.html 
 +[4] ... sidebarbottom.html 
 +[5] ... sidebarfooter.html 
 +[6] ... pageheader.html 
 +[7] ... pagefooter.html 
 +[8] ... footer.html
 </code> </code>
-==== Adding a header/footer ==== 
  
-This 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. +===== Releases ======
  
-==== Centering the content ====+{{rss>https://github.com/my17560/dokuwiki-template-readthedokus/releases.atom}} 
 +==== 20221122 ====
  
-To center the content, enter the content width in the "Site width" option on the "Template Style Settings".+  * Refactored sidebar styles. Now <li> elements without links are indented properly. 
 +  * Modified to support the nspages plugin. 
 + 
 +==== 20220913 ==== 
 + 
 +  * Fixed "editable" link is shown even when the user is logged out. 
 +  * Added "Show toolbox even when logged out" option. 
 + 
 +==== 20220817 ==== 
 + 
 +  * Fixed a sidebar style. 
 +  * Modified to select a corresponding sidebar item when a hash is specified in the URL. 
 +  
 +==== 20220813 ==== 
 + 
 +  * Added styles to links to non-existent pages. 
 +  * Fixed warnings when index key doesn't exist in PHP8. 
 + 
 +==== 20220511 ==== 
 + 
 +  * Modified to support the simplenavi plugin. 
 + 
 +==== 20220413 ==== 
 + 
 +  * Modified the way to handle same page jump. 
 + 
 +==== 20220228 ==== 
 + 
 +  * Modified to make "Table of Contents" localizable in sidebar TOC. 
 +  * Fixed a TOC embedded in the wrong place in some cases. 
 + 
 +==== 20220219 ==== 
 + 
 +  * Modified to be able to render a hierarchical sidebar. 
 +  * Fixed to show "Edit this page" link only when the current user is editable. 
 +  * Modified to make non-admin pages localizable. 
 +  * Added "max-width: 100%to images inserted by Media Manager. 
 + 
 +==== 20220208 ==== 
 + 
 +  * Removed "-webkit-font-smoothing: antialiased;" from CSS to make it look closer to the original Read the Docs. This makes fonts look thicker in some environments. If you prefer former style, just add "-webkit-font-smoothing: antialiased;to your css. 
 + 
 +==== 20220207 ==== 
 + 
 +  * Added "Use DokuWiki breadcrumbs" option to use DokuWiki breadcrumbs.  
 +  * Added "Start Page" option to specify start page. 
 +  * Google Fonts/Font Awesome location now defaults to blank to avoid using them via CDN easily since using CDN could be illegal in some countries. 
 + 
 +==== 20220106 ==== 
 + 
 +  * Added Font Awesome/Google Fonts settings in the configuration manager. 
 + 
 +==== 20211011 ==== 
 + 
 +  * Fixed TOC embedding didn't work when the defer_js option is disabled. 
 + 
 +==== 20210917 ==== 
 + 
 +  * Fixed showing two vertical scrollbars on the mobile pages. 
 + 
 +==== 20210910 ==== 
 + 
 +  * Fixed the dynamic search result didn't show up. 
 +  * Fixed style.ini referencing missing files.
  
  
template/readthedokus.1624521951.txt.gz · Last modified: 2021-06-24 10:05 by my17560

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki