Regarding the issues with [nodebb-plugin-markdown-toc], does anyone have any good ideas?

Mr.C

issues

I wanted to implement DOM hook-like functionality for post pages,

so I found this plugin called [nodebb-plugin-markdown-toc]

But issues came up....

Since I don’t know how to write plugins and I’m not very familiar with the Harmony template, I can’t modify the front-end display of this plugin to look the way I want it to.

Does anyone have any good ideas on how to modify it to make it look more appropriate?

my css now

/*********TOC*******/
.toc{background-color:var(--bs-container-background-color);border:1px solid #374646;box-shadow:2px 2px 3px rgba(0,0,0,0.1882352941);font-size:0.8rem !important;margin-bottom:1rem;border:1px solid rgba(0,0,0,0.125);border-radius:0.25rem;position:fixed;top:285px;left:-185px;margin-left:240px;min-width:120px;max-width:260px;padding-bottom:5px;display:inline-block;z-index:100;max-height:640px;overflow-x:hidden;overflow-y:overlay;transition:scrollbar-color 0.3s ease-out}
.toc::before{content:"主题目录：";line-height:20px;text-decoration:none;text-indent:2em;margin-bottom:5px;padding:0px;font-size:12px;background-color:rgba(0,0,0,0.03);border-top:1px solid rgba(0,0,0,0.125);border-bottom:1px solid rgba(0,0,0,0.06);display:block;height:20px}
.toc a{color:var(--bs-body-color-bright,var(--base06,var(--bs-body-color)))}
.toc a{background:none!important;text-decoration:none!important}
.toc ul{padding:0px!important;margin-bottom:0px!important;}
.toc ul ul{padding-left:0.8rem!important}
.toc li{list-style-position:inside;display:block;overflow:hidden;padding-right:6px!important;list-style-type:disc!important}
.toc li{border-bottom:1px solid rgba(0,0,0,0.06)}
.toc li li{border:none!important}
.tocli a{text-decoration:none!important;word-break:break-all;word-break:break-all;overflow:hidden}
.toc::-webkit-scrollbar{width:8px}
.toc::-webkit-scrollbar-track{background:gba(248,249,250,0.8);border-radius:100px}
.toc::-webkit-scrollbar-thumb{background-image:linear-gradient(180deg,#D0368A 0%,#708AD4 99%);box-shadow:inset 2px 2px 5px 0 rgba(#fff,0.5);border-radius:100px}
@media(max-width:600px){.toc{position:unset;margin:3px auto;width:100%;min-width:50%!important;max-width:98%!important;border:1px solid #ddd;font-size:12px!important;font-family:nb,"microsoft yahei light"!important;display:inline-block}
}

Preview

My website Preview

https://bbs.aiink.cn/topic/10
https://bbs.aiink.cn/post/37
https://bbs.aiink.cn/topic/3