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,
"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
可以打印页面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
: 取消标题自动编号