teedoc theme plugin

teedoc-plugin-theme-default: default theme plugin

Plugin configuration

Configure the plugin in site_config.json

    "plugins": {
        "teedoc-plugin-theme-default":{
            "from": "pypi",
            "config": {
                "dark": true,
                "env":{
                    "main_color": "#4caf7d",
                    "sidebar_width": "300px"
                },
                "css": "/static/css/custom.css",
                "js": "/static/js/custom.js",
                "code_highlight_css":  "/static/css/prism.css",
                "code_highlight_js": "/static/js/prism.js"
            }
        }
    }

• main_color: theme main color
• sidebar_width: sidebar default width, format can be like"300px", 300, "30%"
• css: css file URL, which can override the default style and will be inserted into the head tag of the page
• js: js file URL, can write js program, it will be loaded at the end of the page

The default code highlighting uses prismjs, and the support of some common languages ​​is checked by default. js file + css file totals about 100KiB, if you need the code If you can’t highlight, or want to save traffic or reduce loading time, you can go to here Check the default check and check the language and Function, finally get a css file and a js file in the static/js directory, and then set the URL in site_config.json:

    "route": {
        "assets": {
            "/static/": "static"
        }
    }

this config will due to files in static dir will be copied to static dir of out dir.

• code_highlight_css: code highlighting css file URL, will replace the default highlighting css file, and will be inserted into the head tag of the page
• code_highlight_js: code highlighting js file URL, will replace the default highlighting js file, and will be loaded at the end of the page

Supports day and night modes. The night mode will add a dark class to the body. If you want the css style of the night mode, you can modify it based on this class name

class support

The theme supports several commonly used class and id, which can be set in config.json(/config.yaml) or the class and id keywords in the .md file. You can use this style directly

For example, set in config.json

{
     "class": "language_zh",
     "navbar": {
         ...
     }
}

Then the html tags of all generated pages under this document will contain this class. For example, language_zh will change the title of the page directory on the right from Roman numerals to Chinese one, two, three...

class has:

• language_zh: Change the title of the page directory on the right from Roman numerals to Chinese one, two, three...
• md_page: Ordinary markdown files are rendered into html pages, you can add this class, it will be displayed in the center instead of left-aligned