TOC组件
最后更新: | 浏览次数: 9|组件调用与开发
使用
TOC组件默认存放在：/views/components/_toc.cshtml，可以自动生成内容目录列表，在文章和商品详情页可用。
方法:
@Model.Toc(string viewPath=null)
| 参数 | 类型 | 说明 |
|---|---|---|
| viewpath | string | 组件调用路径 |
如果不指定viewPath参数，则调用默认组件位置，如：@Model.Toc(),
如果组件有其它特殊需求，也可以指定路径，如：@Model.Toc("module/_toc"),系统将在您当前站点模板的module目标寻找_toc.cshtml组件
开发
| 属性名 | 类型 | 说明 |
|---|---|---|
| AnchorId | string | 当前Id |
| Name | string | 锚文本 |
| HasChild | bool | 是否有子级 |
| ParentId | int | 父级Id,没有父级值为：0 |
CSS变量
| 变量名 | 默认值 | 说明 | 作用范围 |
|---|---|---|---|
--toc-indent |
0.875rem |
多级目录缩进基准值 | 控制 TOC 层级缩进 |
--toc-padding-x |
0.35rem |
水平内边距 | 控制条目左右间距 |
--toc-padding-y |
0.35rem |
垂直内边距 | 控制条目上下间距 |
--body-font-size |
— | 基础字体大小 | 继承全局排版体系 |
--body-line-height |
与全局行高一致 | 行高 | 控制行距一致性 |
--toc-link-active-color |
— | 当前激活项文字颜色 | active 状态高亮 |
--toc-link-hover-bg |
— | 悬停背景颜色 | hover 背景反馈 |
--toc-link-hover-color |
— | 悬停文字颜色 | hover 文字强调 |
--drop-ico |
"\f10b" |
折叠图标字符 | 展开/收起按钮图标 |