🏆本文收录于《CSDN问答解惑-专业版》专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&订阅!持续更新中,up!up!up!!
问题描述
github-page静态网页将字符串写入github库中文本文档。本人初中刚毕业,试着学学HTML给班级写个简单的 回忆网站(准备用github-page)。现在网站表白墙的开发出现问题,需要一项技术:使用JavaScript、HTML或者CSS(只有这三种语言,静态网页,不支持ActiveX插件)需要将一个JavaScript字符串追加到一个本地文本文件里,直接用原字符串追加。并且在另一个HTML+JavaScript文档要求能要可以逐行读取这个文档的信息。以下是从表单输入内容抓取信息的JavaScript代码
补充:这个githubpages只支持HTML、CSS和JavaScript,没有php等后端支持;
同时,提交的网页会存储在githubpages上,所有人要都能浏览到表白墙上的信息。在githubpages上使用JS,只需要修改在github库中的一个文本文件就可以了。
友情提示:
如上问题有的来自我自身项目开发,有的收集网站,有的来自读者…如有侵权,立马删除。再者,针对此专栏中部分问题及其问题的解答思路或步骤等,存在少部分搜集于全网社区及人工智能问答等渠道,若最后实在是没能帮助到你,还望见谅!并非所有的解答都能解决每个人的问题,在此希望屏幕前的你能够给予宝贵的理解,而不是立刻指责或者抱怨!如果你有更优解,那建议你出教程写方案,一同学习!共同进步。
解决方案
如下是上述问题的解决方案,仅供参考:
GitHub Pages 主要用于托管静态网页,这意味着它不支持服务器端语言如 PHP 或 Python,也不支持执行服务器端脚本。因此,使用 JavaScript 直接在客户端修改 GitHub 仓库中的文件是不可能的,因为这种操作需要服务器端的权限。
不过,你可以使用 GitHub API 来实现这个功能,但请注意,这需要一定的后端支持。以下是实现这个功能的一种可能方法:
-
创建 GitHub Token:
- 首先,你需要在 GitHub 上创建一个访问令牌(Personal Access Token),这个令牌将用于身份验证,以便你的 JavaScript 代码能够通过 GitHub API 访问你的仓库。
-
使用 GitHub API:
- 使用 JavaScript 发送 HTTP 请求到 GitHub API,使用你的访问令牌进行身份验证。
-
创建和更新文件:
- 通过 GitHub API 的
PUT
请求,你可以创建或更新仓库中的文件。
- 通过 GitHub API 的
-
读取文件:
- 使用 GitHub API 的
GET
请求,你可以读取仓库中的文件内容。
- 使用 GitHub API 的
以下是一个简单的示例,展示如何使用 JavaScript 发送请求到 GitHub API 来更新文件:
// 假设你已经有了 GitHub 的访问令牌
const githubToken = '你的GitHub访问令牌';
const repoOwner = '你的GitHub用户名';
const repoName = '你的仓库名';
const filePath = '仓库中的文件路径';
const branch = '分支名,默认是main';// 要写入的字符串
const contentToWrite = '这是要追加的内容';// 使用 fetch API 发送请求到 GitHub API
fetch(`https://api.github.com/repos/${repoOwner}/${repoName}/contents/${filePath}`, {method: 'PUT',headers: {'Authorization': `token ${githubToken}`,'Content-Type': 'application/json'},body: JSON.stringify({message: 'Update file via GitHub API',content: btoa(contentToWrite), // base64 编码branch: branch})
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch((error) => console.error('Error:', error));
请注意,这个示例只是一个基本的示例,实际使用时需要根据你的具体需求进行调整。而且,由于 GitHub Pages 只支持静态内容,这个操作需要在服务器端执行,或者使用第三方服务来间接实现。
对于读取文件,你可以使用类似的方式发送 GET 请求到 GitHub API,然后解析返回的 JSON 数据来获取文件内容。
最后,由于你还是初中生,可能需要在老师或有经验的开发者的指导下进行这些操作,以确保你理解了整个过程,并能够安全地使用 GitHub API 和你的访问令牌。
希望如上措施及解决方案能够帮到有需要的你。
PS:如若遇到采纳如下方案还是未解决的同学,希望不要抱怨&&急躁,毕竟影响因素众多,我写出来也是希望能够尽最大努力帮助到同类似问题的小伙伴,即把你未解决或者产生新Bug黏贴在评论区,我们大家一起来努力,一起帮你看看,可以不咯。
若有对当前Bug有与如下提供的方法不一致,有个不情之请,希望你能把你的新思路或新方法分享到评论区,一起学习,目的就是帮助更多所需要的同学,正所谓「赠人玫瑰,手留余香」。
☀️写在最后
ok,以上就是我这期的Bug修复内容啦,如果还想查找更多解决方案,你可以看看我专门收集Bug及提供解决方案的专栏《CSDN问答解惑-专业版》,都是实战中碰到的Bug,希望对你有所帮助。到此,咱们下期拜拜。
码字不易,如果这篇文章对你有所帮助,帮忙给 bug菌 来个一键三连(关注、点赞、收藏) ,您的支持就是我坚持写作分享知识点传播技术的最大动力。
同时也推荐大家关注我的硬核公众号:「猿圈奇妙屋」 ;以第一手学习bug菌的首发干货,不仅能学习更多技术硬货,还可白嫖最新BAT大厂面试真题、4000G Pdf技术书籍、万份简历/PPT模板、技术文章Markdown文档等海量资料,你想要的我都有!
📣关于我
我是bug菌,CSDN | 掘金 | InfoQ | 51CTO | 华为云 | 阿里云 | 腾讯云 等社区博客专家,C站博客之星Top30,华为云2023年度十佳博主,掘金多年度人气作者Top40,掘金等各大社区平台签约作者,51CTO年度博主Top12,掘金/InfoQ/51CTO等社区优质创作者;全网粉丝合计 30w+;硬核微信公众号「猿圈奇妙屋」,欢迎你的加入!免费白嫖最新BAT互联网公司面试真题、4000G PDF电子书籍、简历模板等海量资料,你想要的我都有,关键是你不来拿哇。