为Mkdocs网站添加评论系统(以giscus为例)

官方文档:Adding a comment system

这里我同样推荐giscus

利用 GitHub Discussions 实现的评论系统,让访客借助 GitHub 在你的网站上留下评论和反应吧!本项目深受 utterances 的启发。

  • 开源。🌏
  • 无跟踪,无广告,永久免费。📡 🚫
  • 无需数据库。所有数据均储存在 GitHub Discussions 中。:octocat:
  • 支持自定义主题!🌗
  • 支持多种语言。🌐
  • 高可配置性。🔧
  • 自动从 GitHub 拉取新评论与编辑。🔃
  • 可自建服务!🤳

言归正传

第一步

mkdocs.yml中添加

theme:name: materialcustom_dir: overrides  #主要是这一行

参考下图新建overrides文件,在此文件下参考下图新建覆盖html文件
树状结构如下

我们评论只针对comments.html

{% if page.meta.comments %}<h2 id="__comments">{{ lang.t("meta.comments") }}</h2><!-- Insert generated snippet here --><script src="https://giscus.app/client.js"data-repo="你的仓库名称(如Wcowin/hexo-site-comments)"data-repo-id=" "data-category=" "data-category-id=" "data-mapping="pathname"data-strict="0"data-reactions-enabled="1"data-emit-metadata="0"data-input-position="bottom"data-theme="preferred_color_scheme"data-lang="zh-CN"crossorigin="anonymous"async>
</script><!-- Synchronize Giscus theme with palette --><script>var giscus = document.querySelector("script[src*=giscus]")// Set palette on initial loadvar palette = __md_get("__palette")if (palette && typeof palette.color === "object") {var theme = palette.color.scheme === "slate"? "transparent_dark": "light"// Instruct Giscus to set themegiscus.setAttribute("data-theme", theme) }// Register event handlers after documented loadeddocument.addEventListener("DOMContentLoaded", function() {var ref = document.querySelector("[data-md-component=palette]")ref.addEventListener("change", function() {var palette = __md_get("__palette")if (palette && typeof palette.color === "object") {var theme = palette.color.scheme === "slate"? "transparent_dark": "light"// Instruct Giscus to change themevar frame = document.querySelector(".giscus-frame")frame.contentWindow.postMessage({ giscus: { setConfig: { theme } } },"https://giscus.app")}})})</script>
{% endif %}

第二步

打开https://giscus.app/zh-CN 走完这个页面的流程就会得到(这会在你的Github创建新的仓库,建议自己先去新建个 Discussions)

<script src="https://giscus.app/client.js"data-repo="[在此输入仓库]"data-repo-id="[在此输入仓库 ID]"data-category="[在此输入分类名]"data-category-id="[在此输入分类 ID]"data-mapping="pathname"data-strict="0"data-reactions-enabled="1"data-emit-metadata="0"data-input-position="bottom"data-theme="preferred_color_scheme"data-lang="zh-CN"crossorigin="anonymous"async>
</script>

复制将此代码,替换comments.html中41~55的代码

mkdocs server一下

最后

在你想插入评论的地方的元数据:comments: true

---
title: 留言板
hide:#  - navigation # 显示右#  - toc #显示左#  - footer#  - feedback  
comments: true  #默认不开启评论
---

效果

完美!快速相应

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/157661.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

虚拟机安装Docker

安装Docker Docker 分为 CE 和 EE 两大版本。CE 即社区版&#xff08;免费&#xff0c;支持周期 7 个月&#xff09;&#xff0c;EE 即企业版&#xff0c;强调安全&#xff0c;付费使用&#xff0c;支持周期 24 个月。 Docker CE 分为 stable test 和 nightly 三个更新频道。…

交通 | python网络爬虫:“多线程并行 + 多线程异步协程

推文作者&#xff1a;Amiee 编者按&#xff1a; 常规爬虫都是爬完一个网页接着爬下一个网页&#xff0c;不适应数据量大的网页&#xff0c;本文介绍了多线程处理同时爬取多个网页的内容&#xff0c;提升爬虫效率。 1.引言​ 一般而言&#xff0c;常规爬虫都是爬完一个网页接着…

如何通过MES系统提高生产计划效率?

导 读 ( 文/ 1730 ) 在现代制造业中&#xff0c;通过制造执行系统&#xff08;MES&#xff09;系统来提高生产计划效率是至关重要的。本文将介绍如何通过MES系统来优化生产计划&#xff0c;包括实时数据分析、智能排程和协同协作。通过这些关键方法&#xff0c;企业可以提高生产…

Flink之窗口聚合算子

1.窗口聚合算子 在Flink中窗口聚合算子主要分类两类 滚动聚合算子(增量聚合)全窗口聚合算子(全量聚合) 1.1 滚动聚合算子 滚动聚合算子一次只处理一条数据,通过算子中的累加器对聚合结果进行更新,当窗口触发时再从累加器中取结果数据,一般使用算子如下: aggregatemaxmaxBy…

如何通过 NFTScan API 按照 NFT 合约地址检索数据?

在当前 NFT 市场还在不断扩张的背景下&#xff0c;各种 NFT 项目依旧是井喷式涌现&#xff0c;投资者和开发者都面临获取项目全貌数据的困境。公链上提取和处理大量的数据既费时又费力&#xff0c;缺乏全面的信息支持&#xff0c;将难以深入判断一个 NFT 项目的真实情况&#x…

react中ant.design框架配置动态路由

目录 什么是动态路由&#xff1f; 应用场景&#xff1a; ant.design动态路由如何配置&#xff1a; 首先&#xff1a;找到app.tsx文件 然后&#xff1a;找到menuHeaderRender 其次&#xff1a;修改menuHeaderRender为menuDataRender​编辑 最后&#xff1a;在箭头函数里re…

Jenkins集成newman

一、Docker环境准备 二、Jenkins环境准备 三、登录Jenkins 安装NodeJs插件 四、Jenkins全局工具配置Nodejs 五、创建Jenkins自由风格项目 构建步骤1&#xff1a;选择Execute NodeJS script构建步骤2&#xff1a;选择执行shell脚本 六、将postman相关的脚本、环境变量数据、全局…

VUE echarts 柱状图、折线图 双Y轴 显示

weekData: [“1周”,“2周”,“3周”,“4周”,“5周”,“6周”,“7周”,“8周”,“9周”,“10周”], //柱状图横轴 jdslData: [150, 220, 430, 360, 450, 680, 100, 450, 680, 200], // 折线图的数据 cyslData: [100, 200, 400, 300, 500, 500, 500, 450, 480, 400], // 柱状图…

python flask接口字段存在性校验函数(http接口字段校验)(返回提示缺少的字段信息)validate_fields()

文章目录 字段存在性校验示例 字段存在性校验 from flask import Flask, request, jsonifyapp Flask(__name__)def validate_fields(data, fields):missing_fields [field for field in fields if field not in data]if missing_fields:return False, f"缺少以下字段: …

算法解析:LeetCode——机器人碰撞和最低票价

摘要&#xff1a;本文由葡萄城技术团队原创并首发。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 机器人碰撞 问题&#xff1a; 现有 n 个机器人&#xff0c;编号从 1 开始&#xff0c;每个…

ubuntu 安装jdk21开发环境

下载 wget https://download.oracle.com/java/21/latest/jdk-21_linux-x64_bin.tar.gz 第二步&#xff1a;解压 tar -zxvf jdk-21_linux-x64_bin.tar.gz 第三步&#xff1a;移动 jdk-21 目录到 /usr/local/jdk21 第四步&#xff1a;配置环境变量 sudovim/etc/profile vim/etc/…

Excel 的单元格内容和单元格格式

文章目录 单元格内容单元格格式常规格式数字格式 单元格内容 文本&#xff1a;只要不是纯数字&#xff0c;Excel 都默认是文本格式。 在 Excel 中&#xff0c;逻辑值只有两个&#xff1a;True 和 False。 全选一片区域&#xff0c;按 Delet 键删除内容时&#xff0c;确实可以删…

VTK编译解决CMake的“could not find any instance of Visual Studio”的问题

1、在配置VTK源码编译的过程中&#xff0c;遇到报错 “CMake的“could not find any instance of Visual Studio””,cmake在编程找不到vs2017路径或者配置不全。 解决方案&#xff1a; 安装“Visual Studio Installer”&#xff1b; 1.检查是否安装 “使用C的桌面开发” 2.检…

ACP.复盘方法

复盘要怎么做的有水准&#xff0c;让领导满意&#xff0c;方式方法很重要。今天给你们安利5种复盘方法&#xff0c;保准你省事&#xff0c;领导还满意。 一、KPT复盘法 7月份年中一直在做和复盘相关的事&#xff0c;像公司的OKR复盘、年中战略规划&#xff0c;不过日常很多生…

力扣刷题 day43:10-13

1.完全平方数 给你一个整数 n &#xff0c;返回 和为 n 的完全平方数的最少数量 。 完全平方数 是一个整数&#xff0c;其值等于另一个整数的平方&#xff1b;换句话说&#xff0c;其值等于一个整数自乘的积。例如&#xff0c;1、4、9 和 16 都是完全平方数&#xff0c;而 3 …

SOLIDWORKS® 2024 新功能 - 3D CAD

1、 先前版本的兼容性 • 利用您订阅的 SOLIDWORKS&#xff0c;可将您的 SOLIDWORKS 设计作品保存为旧版本&#xff0c;与使用旧版本 SOLIDWORKS 的供应商无缝协作。 • 可将零件、装配体和工程图保存为新版本前两年之内的SOLIDWORKS 版本。 优点&#xff1a; 即使其他用户正…

内存空间的分配与回收之连续分配管理方式

1.连续分配管理方式 连续分配:指为用户进程分配的必须是一个连续的内存空间。 1.单一连续分配 在单一连续分配方式中&#xff0c;内存被分为系统区和用户区。系统区通常位于内存的低地址部分&#xff0c;用于存放操作系统相关数据;用户区用于存放用户进程相关数据。内存中只…

多服务器云探针源码(服务器云监控)/多服务器多节点_云监控程序python源码

源码简介&#xff1a; 多服务器云探针源码(服务器云监控),支持python多服务器多节点&#xff0c;云监控程序源码。它是一款很实用的云探针和服务器云监控程序源码。使用它可以帮助管理员能够快速监控和管理各种服务器和节点&#xff0c;实用性强。 源码链接&#xff1a; 网盘…

【机器学习】sklearn特征选择(feature selection)

文章目录 特征工程过滤法&#xff08;Filter&#xff09;方差过滤相关性过滤卡方过滤F验表互信息法小结 嵌入法&#xff08;Embedded&#xff09;包装法&#xff08;Wrapper&#xff09; 特征工程 特征提取(feature extraction)特征创造(feature creation)特征选择(feature se…

lv8 嵌入式开发-网络编程开发 17 套接字属性设置

1 基本概念 设置套接字的选项对套接字进行控制除了设置选项外&#xff0c;还可以获取选项选项的概念相当于属性&#xff0c;所以套接字选项也可说是套接字属性有些选项&#xff08;属性&#xff09;只可获取&#xff0c;不可设置&#xff1b;有些选项既可设置也可获取 2 选项…