teedoc 主题插件

teedoc-plugin-theme-default: 默认主题插件

插件配置

在site_config.json中配置插件

    "plugins": {
        "teedoc-plugin-theme-default":{
            "from": "pypi",
            "config": {
                "dark": true,
                "default_dark": false,
                "mobile_navbar_collapsed": true,
                "toc_depth": 4,
                "show_print_page": true,
                "heading_no_counter": false,
                "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"
            }
        }
    }
  • dark: 支持黑暗模式切换
  • default_dark: 是否默认为黑暗模式
  • mobile_navbar_collapsed: 移动设备导航栏默认折叠
  • toc_depth: 文章目录显示的层级，默认为4，即显示H1~H4
  • show_print_page: 显示打印页面按钮， 用户点击或者使用Ctrl+P可以打印页面
  • heading_no_counter: 取消标题自动编号， 如果设置为true，则文档所有标题都不会自动编号，如果你要单独取消某篇文档标题自动编号，则在文档头部添加
---
class: heading_no_counter
---
  • main_color: 主题主颜色
  • sidebar_width: 侧边目录栏默认宽度, 可以是"300px", 300, "30%" 这样的格式
  • css: css文件 URL，可以覆盖默认的样式，会被插入到页面的head标签中
  • js： js文件 URL，可以写js程序，会被放在页面的末尾加载

默认代码高亮使用了prismjs, 默认勾选了部分常用语言的支持，js文件 + css文件共100KiB左右，如果你需要的代码无法高亮，或者想节约流量或缩减加载时间，可以到这里查看默认勾选的以及勾选自己需要的语言和功能， 最后获得一个css文件和一个js文件放到static/js/目录下，然后需要在 site_config.json 中设置URL比如：

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

这会将static目录下所有文件拷贝到输出文件夹static目录下面

  • code_highlight_css: code高亮css文件 URL，会取代默认的高亮css文件，会被插入到页面的head标签中
  • code_highlight_js： code高亮js文件 URL，会取代默认的高亮js文件，会被放在页面的末尾加载

支持 白天 和 夜间 模式， 夜间模式会在body加一个dark类， 如果要该夜间模式的css样式，可以基于这个类名修改

class 支持

主题支持几个常用的class 和 id， 可以在config.json(/config.yaml) 或者或者.md文件的class和id关键字中设置，就可以直接使用这个样式了

比如在config.json中设置

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

或者在md文件头添加

---
title: title
class: heading_no_counter
---

则这个文档下面所有生成的页面的html标签都会包含这个类， 比如md_page普通 markdown 文件渲染成 html 页面，可以加上这个类，会居中显示而不是左对齐

class有：

  • md_page: 普通 markdown 文件渲染成 html 页面，可以加上这个类，会居中显示而不是左对齐
  • heading_no_counter: 取消标题自动编号