cs-self-learning 如何配置 Giscus 页面评论并使评论框跟随站点明暗主题?
发布时间:2026/9/10 8:52:18 锦皓数字建站

cs-self-learning 如何配置 Giscus 页面评论并使评论框跟随站点明暗主题【免费下载链接】cs-self-learning计算机自学指南项目地址: https://gitcode.com/GitHub_Trending/cs/cs-self-learningcs-self-learningCS 自学指南用 MkDocs Material 构建站点部署后的站点在每个课程页面下方提供 Giscus 评论区且评论框配色会跟随站点明暗主题切换。本文以该仓库中的真实配置文件为准说明如何在 MkDocs Material 站点里配置 Giscus 页面评论并让评论框主题跟随站点明暗切换。准备条件项目依赖在 requirements.txt 中锁定版本与评论功能直接相关的是 Material 主题版本mkdocs-material9.5.2站点主题配置集中在 mkdocs.yml。评论功能依赖其中两样东西Material 主题的明暗 palette 切换以及主题覆盖目录overrides。第一步在 mkdocs.yml 中配置明暗 palettemkdocs.yml 的theme段节选如下完整配置中还包含 favicon、features、font 等与本文无关的项theme: name: material language: zh palette: - media: (prefers-color-scheme: light) scheme: default primary: light blue accent: deep purple toggle: icon: material/weather-sunny name: Switch to dark mode - media: (prefers-color-scheme: dark) scheme: slate primary: cyan accent: deep purple toggle: icon: material/weather-night name: Switch to light mode custom_dir: overrides两个要点palette配置了两套方案亮色为scheme: default暗色为scheme: slate各带一个toggle开关图标分别为material/weather-sunny与material/weather-night。后面的评论主题同步脚本正是由这个开关触发且暗色方案名固定为slate与脚本中的判断逻辑联动。custom_dir: overrides让 Material 从overrides目录加载覆盖模板Giscus 评论片段就放在该目录的partials子目录下。同一文件的plugins列表只配置了 i18n、search、git-revision-date、minify、open-in-new-tab没有单独配置 comments 插件评论功能是通过覆盖主题 partial 实现的。第二步把 Giscus 片段放入 overrides/partials/comments.html新建overrides/partials/comments.html全文与本仓库中的 overrides/partials/comments.html 相同!-- Insert generated snippet here -- script srchttps://giscus.app/client.js contenteditable="false">【免费下载链接】cs-self-learning计算机自学指南项目地址: https://gitcode.com/GitHub_Trending/cs/cs-self-learning创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
锦
锦皓数字建站
深耕本土企业品牌数字化升级,专注原创端正雅致商务官网,从视觉设计到稳定运维全程保驾护航。