当前位置: 首页 > news >正文

【vitePress】基于github快速添加评论功能(giscus)

一.添加评论插件

使用giscus来做vitepress 的评论模块,使用也非常的简单,具体可以参考:giscus 文档,首先安装giscus

npm i @giscus/vue

二.giscus操作

打开giscus 文档,如下图所示,填入你的 github 用户名 + 仓库名,勾选你需要的配置

如果显示不成功看是否满足上面三个条件:

1.公开仓库

2.在github安装giscuss app插件

3.打开discussion功能

找到setting

往下翻打开discussion

这样之后就会满足条件,giscus找到下面位置内容,后面要用

三.vitePress配置

.vitepress/theme/目录下创建myLayout.vue组件,添加 giscus 评论组件,

<!--Layout.vue-->
<template><Layout><template #doc-footer-before> </template><template #doc-after><div style="margin-top: 24px"><Giscus:key="page.filePath"repo="*"repo-id="*"category="*"category-id="*"mapping="pathname"strict="0"reactions-enabled="1"emit-metadata="0"input-position="bottom"lang="zh-CN"crossorigin="anonymous":theme="isDark ? 'dark' : 'light'"/></div></template></Layout>
</template><script lang="ts" setup>
import Giscus from "@giscus/vue";
import DefaultTheme from "vitepress/theme";
import { watch } from "vue";
import { inBrowser, useData } from "vitepress";const { isDark, page } = useData();const { Layout } = DefaultTheme;watch(isDark, (dark) => {if (!inBrowser) return;const iframe = document.querySelector("giscus-widget")?.shadowRoot?.querySelector("iframe");iframe?.contentWindow?.postMessage({ giscus: { setConfig: { theme: dark ? "dark" : "light" } } },"https://giscus.app");
});
</script>

.vitepress/index.js配置文件中使用自定义布局。

import DefaultTheme from 'vitepress/theme'
import Layout from './myLayout.vue' 
// import Layout from './Layout.vue'export default {Layout,extends: DefaultTheme,enhanceApp({ app }) {//app.component('confetti', confetti)},}

四、效果

相关文章:

【vitePress】基于github快速添加评论功能(giscus)

一.添加评论插件 使用giscus来做vitepress 的评论模块&#xff0c;使用也非常的简单&#xff0c;具体可以参考&#xff1a;giscus 文档&#xff0c;首先安装giscus npm i giscus/vue 二.giscus操作 打开giscus 文档&#xff0c;如下图所示&#xff0c;填入你的 github 用户…...

论文笔记(六十二)Diffusion Reward Learning Rewards via Conditional Video Diffusion

Diffusion Reward Learning Rewards via Conditional Video Diffusion 文章概括摘要1 引言2 相关工作3 前言4 方法4.1 基于扩散模型的专家视频建模4.2 条件熵作为奖励4.3 训练细节 5 实验5.1 实验设置5.2 主要结果5.3 零样本奖励泛化5.4 真实机器人评估5.5 消融研究 6 结论 文章…...

电梯系统的UML文档07

从这个类中得到的类图&#xff0c;构划出了软件的大部分设计。 系统结构视图提供软件和整个系统结构最复杂的也是最优雅的描述。和通常的软件系统相比&#xff0c;在分布式嵌入系统中了解系统组件如何协同工作是非常重要的。毕竟&#xff0c;每个类图仅仅是一个系统的静态设计…...

【Python】综合案例--人生重开模拟器

1. 设置初始属性 在游戏中我们设定四个属性.: 颜值 (face) 体质 (strong) 智力 (iq) 家境 (home)我们约定每个属性的范围为 [1, 10], 并且总和不能超过 20. 如果玩家输入的初始属性不合理, 就提示输入有误, 重新输入. print("-----------------------------------------…...

vue+高德API搭建前端3D交通页面

1. 模板部分 (<template>) <template><div class"content"><div><div id"container"></div></div></div> </template> 功能&#xff1a;定义了组件的HTML结构。分析&#xff1a; div.content 是最…...

2024年博客之星主题创作|猫头虎分享AI技术洞察:2025年AI发展趋势前瞻与展望

2025年AI发展趋势前瞻&#xff1a;猫头虎深度解析未来科技与商业机遇 摘要 2024年&#xff0c;AI技术迎来爆发式增长&#xff0c;AIGC、智能体、AIRPA、AI搜索、推理模型等技术不断突破&#xff0c;AI应用场景持续扩展。2025年&#xff0c;AI将进入全新发展阶段&#xff0c;W…...

算法刷题笔记——图论篇

这里写目录标题 理论基础图的基本概念图的种类度 连通性连通图强连通图连通分量强连通分量 图的构造邻接矩阵邻接表 图的遍历方式 深度优先搜索理论基础dfs 与 bfs 区别dfs 搜索过程深搜三部曲所有可达路径广度优先搜索理论基础广搜的使用场景广搜的过程 岛屿数量孤岛的总面积沉…...

虚幻基础-1:cpu挑选(14600kf)

能帮到你的话&#xff0c;就给个赞吧 &#x1f618; 文章目录 ue非常吃cpu拉满主频打开项目编写蓝图运行原因 时间长 关于压力测试 本文以14600kf为例&#xff0c;双12购入&#xff0c;7月份产。 ue非常吃cpu 经本人测试&#xff0c;ue是非常吃cpu的。 拉满主频 无论任何时间…...

IP地址:127.0.0.1

概述 首先&#xff0c;我们需要明确 127.0.0.1 地址的含义。在网络中&#xff0c;127.0.0.1 地址称为本地回环地址&#xff0c;是一种特殊的网络地址&#xff0c;用于让单独的计算机进行自我回路测试和通信。这个地址在 IP 协议中被定义为环回地址。 在网络设备中&#xff0c…...

深度学习 | pytorch + torchvision + python 版本对应及环境安装

Hi&#xff0c;大家好&#xff0c;我是半亩花海。要让一个基于 torch 框架开发的深度学习模型正确运行起来&#xff0c;配置环境是个重要的问题&#xff0c;本文介绍了 pytorch、torchvision、torchaudio 及 python 的对应版本以及环境安装的相关流程。 目录 一、版本对应 二…...

学习ASP.NET Core的身份认证(基于JwtBearer的身份认证6)

重新创建WebApi项目&#xff0c;安装Microsoft.AspNetCore.Authentication.JwtBearer包&#xff0c;将之前JwtBearer测试项目中的初始化函数&#xff0c;jwt配置类、token生成类全部挪到项目中。   重新编写login函数&#xff0c;之前测试Cookie和Session认证时用的函数适合m…...

企业级流程架构设计思路-基于价值链的流程架构

获取更多企业流程资料 纸上得来终觉浅&#xff0c;绝知此事要躬行 一.企业流程分级规则定义 1.流程分类分级的总体原则 2.完整的流程体系需要体现出流程的分类分级 03.通用的流程分级方法 04.流程分级的标准 二.企业流程架构设计原则 1.流程架构设计原则 流程框架是流程体…...

深度学习 DAY2:Transformer(一部分)

前言 Transformer是一种用于自然语言处理&#xff08;NLP&#xff09;和其他序列到序列&#xff08;sequence-to-sequence&#xff09;任务的深度学习模型架构&#xff0c;它在2017年由Vaswani等人首次提出。Transformer架构引入了自注意力机制&#xff08;self-attention mech…...

【2025】拥抱未来 砥砺前行

2024是怎样的一年 2024在历史画卷上是波澜壮阔的一年&#xff0c;人工智能的浪潮来临&#xff0c;涌现出无数国产大模型。 22年11月ChatGPT发布&#xff0c;它的出现如同在平静湖面上投下一颗巨石&#xff0c;激起了层层波澜&#xff0c;短短五天用户数就达到了100万&#xff0…...

精选100+套HTML可视化大屏模板源码素材

大屏数据可视化以大屏为主要展示载体的数据可视化设计。 “大面积、炫酷动效、丰富色彩”&#xff0c;大屏易在观感上给人留下震撼印象&#xff0c;便于营造某些独特氛围、打造仪式感。 原本看不见的数据可视化后&#xff0c;便能调动人的情绪、引发人的共鸣。 使用方法&…...

欧拉(Euler 22.03)安装ProxySQL

下载离线安装包 proxysql-2.0.8-1-centos7.x86_64.rpm 链接: https://pan.baidu.com/s/1R-SJiVUEu24oNnPFlm9wRw 提取码: sa2w离线安装proxysql yum localinstall -y proxysql-2.0.8-1-centos7.x86_64.rpm 启动proxysql并检查状态 systemctl start proxysql 启动proxysql syste…...

Electron实践继续

文章目录 前言一、知识储备前提二、开发工具集&#xff08;一&#xff09;代码编辑器之选&#xff08;二&#xff09;命令行工具运用&#xff08;三&#xff09;Git 与 GitHub 协作利器&#xff08;四&#xff09;Node.js 与 npm 核心环境 你的第一个Electron应用程序 前言 上…...

【STM32-学习笔记-11-】RTC实时时钟

文章目录 RTC实时时钟一、RTC简介二、RTC框图三、RTC基本结构四、RTC操作注意事项五、RTC函数六、配置RTCMyRTC.c 七、示例&#xff1a;实时时钟①、main.c②、MyRTC.c③、MyRTC.h RTC实时时钟 一、RTC简介 RTC&#xff08;Real Time Clock&#xff09;实时时钟 RTC是一个独立…...

使用ffmpeg提高mp4压缩比,减小文件体积【windows+ffmpeg+batch脚本】

文章目录 关于前情提要FFmpeg是什么使用脚本运行FFmpeg首先&#xff0c;下载ffmpeg.exe然后在视频相同位置写一个bat脚本运行压缩脚本 关于 个人博客&#xff0c;里面偶尔更新&#xff0c;最近比较忙。发一些总结的帖子和思考。 江湖有缘相见&#x1f91d;。如果读者想和我交…...

PostgreSQL-01-入门篇-简介

文章目录 1. PostgreSQL是什么?2. PostgreSQL 历史 2.1. 伯克利 POSTGRES 项目2.2. Postgres952.3. PostgreSQL来了 3. PostgreSQL vs MySQL4. 安装 4.1 Windows 安装4.2 linux 安装4.3 docker安装 1. PostgreSQL是什么 PostgreSQL 是一个基于加州大学伯克利分校计算机系开…...

虚拟专用网VPN的概念及实现VPN的关键技术

虚拟专用网VPN通过建立在公共网络上的重要通道(1分),实现远程用户、分支机构、业务伙伴等与机构总部网络的安全连接&#xff0c;从而构建针对特定组织机构的专用网络&#xff0c;实现与专用网络类似的功能&#xff0c;可以达到PN安全性的目的&#xff0c;同时成本相对要低很多(…...

电脑风扇声音大怎么办? 原因及解决方法

电脑风扇是电脑的重要组件之一&#xff0c;它的作用是为电脑的各个部件提供冷却&#xff0c;防止电脑过热。然而&#xff0c;有时候我们会发现电脑风扇的声音特别大&#xff0c;不仅影响我们的使用体验&#xff0c;也可能是电脑出现了一些问题。那么&#xff0c;电脑风扇声音大…...

【Pytorch】unsqueeze与expand结合使用

示例代码 mask mask.unsqueeze(1).expand(-1, N, -1, -1)unsqueeze(1) 操作 unsqueeze是一个在指定位置增加维度的方法。在这行代码中&#xff0c;mask.unsqueeze(1)的作用是在mask张量的第二个维度&#xff08;索引为1的位置&#xff09;上插入一个新的维度。 例如&#xf…...

基于 Spring Boot 和 Vue.js 的全栈购物平台开发实践

在现代 Web 开发中&#xff0c;前后端分离的架构已经成为主流。本文将分享如何使用 Spring Boot 和 Vue.js构建一个全栈购物平台&#xff0c;涵盖从后端 API 开发到前端页面实现的完整流程。 1. 技术栈介绍 后端技术栈 JDK 1.8&#xff1a;稳定且广泛使用的 Java 版本。 Spring…...

MongoDB单机版安装

MongoDB单机版安装 在CentOS Linux release 7.9.2009 (Core)下安装MongoDB的步骤如下&#xff1a; 1 创建用户和组&#xff08;可选&#xff0c;根据需要&#xff09; 如果您希望以非root用户运行MongoDB服务&#xff0c;可以创建一个专用的用户和组。 groupadd mongodb us…...

HTTP/2 与 HTTP/3 的新特性

一、引言 在互联网蓬勃发展的浪潮中&#xff0c;HTTP 协议作为网络通信的基石&#xff0c;历经多次迭代升级&#xff0c;不断推动着网络传输效率与性能的提升。从最初简单的 HTTP/0.9 版本&#xff0c;仅能实现基本的文本传输&#xff0c;到 HTTP/1.0 引入多种请求方法与头部信…...

【软件开发过程管理规范】需求管理,需求分析,设计开发管理,测试管理(Word)

一、需求管理规程 1 简介 2 过程总体描述 2.1 过程概述 2.2 过程流程图 3 过程元素描述 3.1 准备阶段 3.2 需求调研 3.3 需求分析 软件开发人员及用户往往容易忽略信息沟通&#xff0c;这导致软件开发出来后不能很好地满足用户的需要&#xff0c;从而造成返工。而返工不仅在技术…...

mysql的主从配置

#mysql数据库 #主从 MySQL数据库主从配置 1.MySQL主从介绍 MySQL 主从又叫做 Replication、AB 复制。简单讲就是 A 和 B 两台机器做主 从后&#xff0c;在 A 上写数据&#xff0c;另外一台 B 也会跟着写数据&#xff0c;两者数据实时同步的。 MySQL 主从是基于 binlog 的&…...

debian中apt的配置与解析

引言 在系统使用过程中&#xff0c;我们可能会遭遇 apt update 操作出现问题&#xff0c;或者 apt upgrade 速度迟缓的情况。这往往是由于所使用软件源本身存在诸如服务器性能不佳、维护不及时等质量问题&#xff0c;同时&#xff0c;软件源服务器与我们所处地理位置的距离较远…...

Python Pyside6 加Sqlite3 写一个 通用 进销存 系统 初型

图: 说明: 进销存管理系统说明文档 功能模块 1. 首页 显示关键业务数据商品总数供应商总数本月采购金额本月销售金额显示预警信息库存不足预警待付款采购单待收款销售单2. 商品管理 商品信息维护商品编码(唯一标识)商品名称规格型号单位分类进货价销售价库存数量预警…...

Java工程结构:服务器规约(JVM 碰到 OOM 场景时输出 dump 信息、设置tomcat的 JVM 的内存参数、了解服务平均耗时)

文章目录 I 调用远程操作必须有超时设置。II 推荐了解每个服务大致的平均耗时JVM 的 Xms 和 Xmx 设置一样大小的内存容量让 JVM 碰到 OOM 场景时输出 dump 信息调大服务器所支持的最大文件句柄数(File Descriptor,简写为 fd)高并发服务器建议调小 TCP 协议的 time_wait 超时…...

Spring经典面试题

在Spring的面试中&#xff0c;经常会被问到一些经典的问题&#xff0c;这些问题涵盖了Spring的基本概念、核心特性、工作原理以及在实际项目中的应用。以下是一些Spring面试中最经典的题目&#xff1a; 一、Spring概述 什么是Spring框架&#xff1f;Spring框架有哪些主要模块&…...

以太网实战AD采集上传上位机——FPGA学习笔记27

一、设计目标 使用FPGA实现AD模块驱动采集模拟电压&#xff0c;通过以太网上传到电脑上位机。 二、框架设计 数据位宽转换模块&#xff08;ad_10bit_to_16bit&#xff09;&#xff1a;为了方便数据传输&#xff0c;数据位宽转换模块实现了将十位的 AD 数据转换成十六位&#…...

数据结构与算法整理复习(一):数据结构概念与线性表

目录 第一章&#xff1a;绪论 1.1 数据结构的基本概念 1.2 算法与算法评价 第二章&#xff1a;线性表 2.1 线性表的定义和基本操作 2.2 线性表的顺序表示&#xff08;顺序表&#xff09; 应用题 2.3 线性表的链式表达&#xff08;链表&#xff09; 2.3.1 单链表 2.3.2…...

虚幻商城 Fab 免费资产自动化入库

文章目录 一、背景二、实现效果展示三、实现自动化入库一、背景 上一次写了个这篇文章 虚幻商城 Quixel 免费资产一键入库,根据这个构想,便决定将范围扩大,使 Fab 商城的所有的免费资产自动化入库,是所有!所有! 上一篇文章是根据下图这部分资产一键入库: 而这篇文章则…...

TCP Window Full是怎么来的

wireshark查看包时&#xff0c;会看到TCP Window Full&#xff0c;总结下它的特点&#xff1a; 1. Sender会显示 TCP Window Full 2. “Sender已发出&#xff0c;但&#xff0c;Receiver尚未ack的字节”&#xff0c;即Sender的 bytes in flights 3. Sender的 bytes in fligh…...

高效建站指南:通过Portainer快速搭建自己的在线网站

文章目录 前言1. 安装Portainer1.1 访问Portainer Web界面 2. 使用Portainer创建Nginx容器3. 将Web静态站点实现公网访问4. 配置Web站点公网访问地址4.1公网访问Web站点 5. 固定Web静态站点公网地址6. 固定公网地址访问Web静态站点 前言 Portainer是一个开源的Docker轻量级可视…...

“UniApp的音频播放——点击视频进入空白+解决视频播放器切换视频时一直加载的问题”——video.js、video-js.css

今天&#xff0c;又解决了一个单子“UniApp的音频播放——点击视频进入空白解决视频播放器切换视频时一直加载的问题” 一、问题描述 在开发一个基于 video.js 的视频播放器时&#xff0c;用户通过上下滑动切换视频时&#xff0c;视频一直处于加载状态&#xff0c;无法正常播放…...

如何让openhands始终输出中文?

在本地创建一个文件./user_prompt.j2 添加一行 Always respond in 中文你可以直接&#xff1a; echo "Always respond in 中文" > ./user_prompt.j2使用官方文档的docker命令启动容器时-v挂载一个文件/app/openhands/agenthub/codeact_agent/prompts/user_promp…...

CSS 溢出问题及解决方案:实用案例与技巧

在网页开发中&#xff0c;CSS 的布局和样式起着至关重要的作用&#xff0c;但经常会遇到一个棘手的问题——溢出问题。溢出是指元素内的内容超出了其设定的容器大小&#xff0c;这不仅会影响页面的美观&#xff0c;还可能干扰用户体验。本文将详细探讨 CSS 溢出问题的案例&…...

vue3使用音频audio标签

文章目录 一、背景二、页面三、标签介绍四、代码五、代码说明场景1&#xff1a;针对加载固定格式的比如MP3文件&#xff0c;可直接使用\<audio>标签场景2&#xff1a;针对播放告警内容&#xff0c;比如中文或者英文词条情况 一、背景 项目使用vue3&#xff0c;需求针对告…...

【useCallback Hook】在多次渲染中缓存组件中的函数,避免重复创建函数

文章目录 什么是 useCallback&#xff1f;基本语法 为什么需要 useCallback&#xff1f;示例1. 避免子组件重复创建函数2. 作为 useEffect 的依赖项 注意事项总结 在 React 开发中&#xff0c;性能优化是一个重要的主题。随着应用规模的增长&#xff0c;组件的重新渲染可能会变…...

Vue2+OpenLayers添加缩放、滑块缩放、拾取坐标、鹰眼、全屏控件(提供Gitee源码)

目录 一、案例截图 二、安装OpenLayers库 三、代码实现 四、Gitee源码 一、案例截图 二、安装OpenLayers库 npm install ol 三、代码实现 废话不多说&#xff0c;直接给完整代码&#xff0c;替换成自己的KEY即可运行&#xff1a; <template><div><div i…...

feign调用跳过HTTPS的SSL证书校验配置详解

一、问题抛出 如果不配置跳过SSL证书校验&#xff0c;当Feign客户端尝试连接到一个使用自签名证书的服务器时&#xff0c;可能会抛出类似以下的异常&#xff1a; javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path building faile…...

spring @EnableAspectJAutoProxy @Aspect的使用和源码流程

目录 测试代码EnableAspectJAutoProxyAspectJAutoProxyRegistrarAnnotationAwareAspectJAutoProxyCreatororg.springframework.context.support.AbstractApplicationContext#registerBeanPostProcessors 实例化AnnotationAwareAspectJAutoProxyCreator bean "a"的代理…...

项目实战--网页五子棋(游戏大厅)(3)

我们的游戏大厅界面主要需要包含两个功能&#xff0c;一是显示用户信息&#xff0c;二是匹配游戏按钮 1. 页面实现 hall.html <!DOCTYPE html> <html lang"ch"> <head><meta charset"UTF-8"><meta name"viewport"…...

『 实战项目 』Cloud Backup System - 云备份

文章目录 云备份项目服务端功能服务端功能模块划分客户端功能客户端模块划分 项目条件Jsoncpp第三方库Bundle第三方库httplib第三方库Request类Response类Server类Client类搭建简单服务器搭建简单客户端 服务端工具类实现 - 文件实用工具类服务器配置信息模块实现- 系统配置信息…...

【机器学习实战入门】使用OpenCV和Keras的驾驶员疲劳检测系统

嗜睡驾驶者警报系统 防止司机疲劳驾驶警报系统 中级 Python 项目 - 司机疲劳检测系统 疲劳检测是一种安全技术&#xff0c;能够预防因司机在驾驶过程中入睡而造成的事故。 本中级 Python 项目的目标是建立一个疲劳检测系统&#xff0c;该系统将检测到一个人的眼睛闭合了一段时…...

使用 spring boot 2.5.6 版本时缺少 jvm 配置项

2.5.6我正在使用带有版本和springfox-boot-starter版本的Spring Boot 项目3.0.0。我的项目还包括一个WebSecurityConfig扩展WebSecurityConfigurerAdapter并实现WebMvcConfigurer的类。但是&#xff0c;我面临的问题是指标在端点jvm_memory_usage_after_gc_percent中不可见/act…...

【强化学习】Soft Actor-Critic (SAC) 算法

&#x1f4e2;本篇文章是博主强化学习&#xff08;RL&#xff09;领域学习时&#xff0c;用于个人学习、研究或者欣赏使用&#xff0c;并基于博主对相关等领域的一些理解而记录的学习摘录和笔记&#xff0c;若有不当和侵权之处&#xff0c;指出后将会立即改正&#xff0c;还望谅…...