vitepress里使用gitalk（图文教程）

最新推荐文章于 2025-10-09 17:59:20 发布
原创 最新推荐文章于 2025-10-09 17:59:20 发布 · 826 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vitepress #gitalk

vitepress里使用gitalk

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件

生成client配置

创建OAuth application

填写完毕，点击 Register application 即可

image-20240311093820670

生成client secrets

一开始没有自动生成 Client secrets，需要手动生成，点击 Generate a new client secret，输入密码即可生成

image-20240311093958965

粘贴配置

把 Client ID 和 Client secret 配置进行粘贴即可

image-20240311094343117

创建评论仓库

点击 New repository

最低0.47元/天 解锁文章
雪急飞绪
关注
个人博客搭建—使用 Gitalk
HelloWorldZTR的博客
04-09 603
title: 个人博客搭建—使用 Gitalk categories: Develop tags: Website toc: true date: 2020-04-09 07:16:44 上一篇说了基本的静态博客搭建，这里补充一下评论系统的使用方法。 为什么 上一篇文章说过，静态博客就只是一堆 html 页面，并没有后台，自然也不能响应动态请求。而评论需要有存储、响应请求……自然是不能实...
评论工具Gitalk不会用？详解Hexo博客中Gitalk的使用方式
Copanko的博客
04-10 1127
Hexo做出来的博客一般属于静态网页 所以一般要借助其他工具完成评论功能的实现 gitalk的原理是引出github内评论 当然与此同时也必须使用github账号才可以使用 而gitalk的描述十分难以理解 这里是一篇比较完整的教程 教程 首先对于单个网页 我们可以直接在md文件中添加如下代码 <div id="gitalk-container" style="padding: 0px 30...
blog:使用vitepress+vue3来创作的一个博客，带有 Gitalk 评论，暗黑模式，局部打印等功能
05-26
page date title describe true 2021-01-03 项目概述 项目概述 :rocket: 基于「VitePress」搭建的极简博客 现已完成: :check_mark_button: 渲染文章列表 :check_mark_button: 使用Vue 3 :check_mark_button: 文章目录 :check_mark_button: 文章按时间轴归档 :check_mark_button: 文章分类 2021-12-31 :check_mark_button: Gitalk 评论 2020-01-05 更新 :check_mark_button: 文章列表分页 2021-01-16 更新 :check_mark_button: 文章图片放大 :check_mark_button: 切换黑暗模式 :check_mark_button: 局部打印 准备开发~ :white_large_square: 文章上下页 效果预览 在线地址: 国内访问: 地址已经换了 还是因为懒，直接把 githubpages 的评论回调地址给换成了 所以 GitHubpag
搭建评论系统，Gittalk插件踩坑指南｜玩转GitHub Pages三部曲（三）
Daniel的博客
02-23 1656
本文详细讲解了如何利用 Gittalk 为你的博客或者 GitHub Pages 快速增加评论插件，并且详细讲解了其中可能遇到的问题，非常易于上手！点击上方“后端开发技术”，选择“设为星标” ，优质资源及时送达使用GitHub Page 或者 Gitee Page搭建好静态网页博客之后，只有文章没有互动会显得很枯燥，但是需要评论功能就需要去撸业务代码，这样的成本未免太高。（如何搭建Pages请查看...
Gitalk 安装及使用教程
gitblog_00172的博客
08-10 531
Gitalk 是一款基于 Github Issue 及 Preact 技术开发的现代化评论插件。它允许用户在网页上添加互动式的评论系统，评论数据存储于指定的 Github 仓库中，提供了一种简洁而现代的界面风格。 ## 2. 项目快速启动 ### 步骤一：准备 Github 应用 首先，你需要在 Github 上创建一个新的公开仓库（或者选用已有仓库）来存储评论。接着，创建或使用已有的 Gi...
[gitalk+vitepress]在vitepress中集成gitalk评论功能的步骤与坑
言辰寸心博客
08-22 1069
给你用vitepress框架搭建的博客，不需要任何后端与服务器，加上一个评论功能吧。
全面且详细的 VitePress 教程文档学习指南
09-08
VitePress 的使用并不限于技术文档，它也可以被用来快速搭建博客和其他类型的静态网站。这得益于它的灵活性和对各种静态内容的原生支持，使得开发人员能够利用熟悉的 Vue 开发模式来创建各种静态网站。此外，...
harlanzw.com:我的个人博客使用VitePress和TailwindCSS构建
05-22
它是使用VitePress（Vite + Vue3）和带有TailwindCSS的自定义模板构建的。 如果您想设置自己的个人网站，请随时克隆它。 设置 环境 受到推崇的： 指示 安装副yarn 运行应用程序yarn dev 用法 部署方式 仅针对S3 +...
Vue3 + VitePress 搭建部署组件库文档平台（结合 Element Plus 与 Arco Design Vue）—— 超详细图文教程
最新发布
前端开发工程师
10-09 975
由于前端组件数量较多，如果没有一个固定的组件库平台进行统一管理，很容易导致组件被遗忘或不清楚如何使用的情况。为了解决这一问题，我将结合自己在企业项目中的实战经验，分享如何利用 `Vue3` 和 `VitePress` 搭建专属的文档站点，打造个性化的知识库平台，并实现对组件库的二次开发与定制化。该方案不仅结构清晰、维护便捷，还能随着组件库的持续演进，同步更新文档内容，真正做到文档与代码协同发展，提升团队协作效率与项目可维护性。
在VuePress中添加Gitalk评论
HermitSun的博客
06-25 1077
本来博客是没有评论功能的，后来经imwxz提醒，觉得还是搞个评论区比较好，就花了几个小时弄了一下。中间遇到一些小问题，就稍微记录一下。 在此之前，要先创建一个GitHub Application。里面Homepage URL和Authorization callback URL写上博客的域名，别的随便写。比如我的是这样： 需要注意两点： 域名结尾的/要加上，否则在后面使用时可能会出现重定向错误。 在这里填的域名是博客的直接域名，否则在后面使用时也可能会出现重定向错误。 啥意思呢，比如我的博客是基于
gitalk
乘梦碧溪的博客
04-11 566
https://www.cnblogs.com/quanxiaoha/p/10925401.html
Gitalk评论配置-详解
测量老覃 的博客
09-07 1416
Gitalk 是一个基于 Github Issue 和 Preact 开发的评论插件。为什么我要写这篇博文，是因我用Github搭建我的博客页面，在安装Gitalk插件时按网上文章介绍进行配置，在运行时总是出现错误： 每篇文章都只突出解释了某一条设置，如有文章在说到“repo”变量时提到是库名，有一篇文章更是说是博客地址，这几种说法貌似也对，但严格来说却并不正确，而正确的设置是类似于“qin...
【网站搭建】Docsify+Gittalk的配置过程记录分享。原创！
萌狼蓝天の技术栈
10-08 558
Gittalk 配置 这个不一定最先配置，我也不建议你最先配置这个，这个最好最后配置。 我把这个的配置写在第一条，是因为我在这折腾了很久，就是因为网上抄来抄去的答案，除了迷惑我难以给我提供帮助。 摆脱，缺斤少两的答案为什么抄来抄去？我也不喜欢别人转载我的文章，如果我日后那天发现了Bug更新了，转载我文章的人肯定不会跟着更新……然后…… 我的配置经验是根据自己情况写的，受时间(不同时间来配置，也许...
Fluid主题的Gitalk评论配置
wcisns的博客
02-12 274
创建一个叫的仓库，仓库类型一定要是public评论插件切换到文件的gitalk配置在github的Settings->->OAuth Apps点击创建应用和都填写博客地址，随便写点击生成密钥，把Client ID和复制到文件的gitalk配置里使用部署到github上，查看效果。
一款超好用的第三方评论插件--Gitalk
weixin_34419321的博客
06-03 843
一，使用Gitalk的背景： 　　　　1.最近在做一个基于Java的个人博客系统，已经基本完工了，突然发现怎么没有评论的操作，如果再从头开始从数据库开始写的话，花费的代价有点大，于是乎我就在网上寻找一款适合我的第三方评论插件，第一次我找到了“畅言”，结果很令人失望，因为我的网站没有备案，所以无法使用“畅言”。于是Gitalk就映入了我的眼帘。 　　　　2.Gitalk 最初推出来，应该是想配合...
Docusaurus配置Gitalk评论插件
kuizuo12的博客
01-22 1430
原文链接:Docusaurus配置Gitalk评论插件 - 愧怍的小站 (kuizuo.cn) 之前使用 vuepress 的时候，使用的评论系统是Valine，可是匿名用户也能直接评论，虽说会过滤垃圾信息，但是后台查看评论与通知总感觉没有那么实在。 然后换到了 docusaurus，并没有内置评论相关的，原本是打算自己写一个评论系统，MongoDB 存储评论数据相对方便些。然后这一拖就是拖到了过年前。。。无意间发现有一个插件Gitalk，基于 Github Issue 的，而我平常又经常刷 gith.
Gitalk 评论组件安装和配置指南
gitblog_09066的博客
09-13 569
### 项目介绍 Gitalk 是一个基于 GitHub Issue 和 Preact 开发的现代评论组件。它允许用户通过 GitHub 账号进行身份验证，并将评论存储为 GitHub Issue。Gitalk 支持多种语言，并提供类似 Facebook 的无干扰模式。 ### 主要编程语言 Gitalk 项目主要使用以下编程语言和工具： - JavaScript - HTML - Stylus...
Docsify + Gitalk详细配置过程讲解
Zeeland的博客
08-29 910
这几天在给我的开源项目文档搭建评论系统，在docsify中发现了gitalk，并分享一下自己的采坑经验。gitalk。国内也有很多易于集成的评论插件，如多说、友言等。国外，用的比较多的是 Disqus。Disqus, 由于服务器架设在国外，访问速度首先是个问题，第二个就是注册比较麻烦，界面全英文，对一些小白想要快速集成评论功能的，也是相当不友好的；另外，Dispus 仅支持国外一些社交账号登录，如 Fackbook, Google, Twritter 等。
next配置gitalk评论系统
zyz's blog
08-21 1712
博客一直没有来得及添加评论系统，主要是考虑添加哪一个评论系统。最终选择gittalk，看了许多网上的文章发现都是旧版本的，本文适用next7.3版本。 原文： https://zyz-1998.github.io/2019/08/21/next%E6%B7%BB%E5%8A%A0gittalk%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F/#more Gitalk是利...
在vscode里面使用Vitepress
01-04
### 配置和使用 VitePress 进行开发 #### 安装必要的软件环境 为了顺利在 Visual Studio Code (VSCode) 中使用 VitePress 开发，需确保已安装 Node.js 版本 18 或更高版本以及拥有一个支持 Markdown 语法的文本编辑器，如推荐的 VSCode 并安装官方 Vue 扩展[^1]。 #### 创建并初始化项目 启动终端，在目标文件夹下执行如下命令来创建新的 VitePress 项目： ```bash npm init vitepress docs my-vitepress-site cd my-vitepress-site npm install ``` 此过程会设置好基础结构以便后续操作[^2]。 #### 编辑配置文件 进入项目的根目录，找到 `docs` 文件夹内的 `.vitepress/config.js` 文件。利用 VSCode 的强大功能修改该配置文件以满足特定需求，比如自定义主题颜色、导航栏链接等选项。由于 VSCode 支持丰富的插件生态，可以进一步增强体验，例如通过 Prettier 插件自动格式化代码片段[^3]。 #### 启动本地服务器预览效果 回到终端输入以下指令开启实时编译服务： ```bash npm run dev ``` 这一步骤允许开发者即时查看更改后的页面样式与布局调整情况，极大地提高了工作效率。 #### 发布至生产环境 当完成全部内容撰写后，可以通过构建命令将静态资源打包成可部署的形式： ```bash npm run build ``` 之后按照托管平台的要求上传生成的内容即可发布到互联网上供他人访问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值