解决iframe标签插入视频无法禁止自动播放的问题

发表于 2023-04-19

问题与解决方案

最近发现有瓣音频博客出现多个视频合奏唱戏的问题, 非常影响阅读体验, 于是准备将视频自动播放给禁止了

尝试了几种方案, 不论是加入"allow="autoplay=false""属性还是autoplay=false乃至sandbox都不生效

最后通过在 src 属性的最后面加上&autoplay=no, 问题解决

本文为作者原创转载时请注明出处谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

如何将vscode调教成IntelliJ IDEA风格的编辑器

发表于 2023-04-19

前言

最近项目需要使用到vscode, 对于习惯了Android Studio的我来说, 突然切换开发工具一时间有点难以适应, 主要还是IntelliJIDEA的编辑器太香了

之前本来想将Android Studio武装成兼容各种语言的开发神器, 无奈很多插件不兼容, 只能暂时作罢

所以只能先凑合着用vscode先, 所谓工欲善其事必先利其器, 为了快速进入开发状态, 首先需要将vscode编辑器的风格设置成尽量接近Android Studio

vscode配置剖析

vscode配置主要分为四大块, 每一块的配置都对应一个json文件:

基础设置: 使用setting.json, 主要包含一些编辑器的偏好设置
键盘快捷键设置: 使用keybindings.json
扩展设置: 使用extension.json
UI状态设置: 使用globalState.json, 主要包含一些全局UI状态的设置

对vscode进行改造

第一步对快捷键进行改造

安装插件IntelliJ IDEA Keybindings

我们会发现这个插件附带了一个通过xml文件快速导入的功能, 接下来我们需要用它
将Android Studio的配置进行导出

熟悉IDEA系编辑器的小伙伴应该都知道如何导出配置文件, 这里不过多解释, 直接上图:

导出的配置文件是一个zip压缩包, 我们将其解压, 下一步我们会用到里面keymap目录下的xml文件
将Android Studio导出的快键键配置文件进行格式转换

我们按住ctrl+shift+p打开动作指令面板, 然后输入Import IntelliJ Keybindings执行该动作:

这里可以选择对导入的xml文件中的快捷键进行平台转换,

由于我的AndroidStudio的配置文件是windows平台导出的, 而我目前使用的是Mac平台,我想继续保持windows的快捷键习惯, 也就是依然使用ctrl而不是cmd

所以这里我选择了Windows to Windows

导入xml文件后, 会自动生成已经转换成json格式的快捷键配置:
将转换好的配置导入到vscode中

我们只需要将里面的内容拷贝至vscode的keybindings.json文件中然后保存即可:

此时, 我们的快捷键就基本改造完毕了, 现在只需双击shift就能打开动作指令面板, 和Android Studio一致, 满意😊

第二步对vscode外观进行改造

这一步, 具体改造因人而异, 毕竟每个人的需求和审美不同, 大家只需要了解如何修改即可

这里主要是对setting.json文件进行修改,简单说一下我的配置:

编辑器字体大小调整

首先vscode默认的外观给我的第一印象就是字太小了, 看着特别费眼

那么我们进入设置面板, 输入字体, 然后找到setting中编辑字样点击它可以打开setting.json文件:

在里面我输入editor.fontSize": 14.5, 将代码字体大小调整成14.5:

同理, 如果需要修改字体风格则输入editor.fontFamily

以此类推, 所有配置属性都有代码提示, 操作起来也很方便
工作台字体大小调整

我们会发现, 通过setting.json我们可以调整编辑器的字体大小, 但是工作台的字体没有提供相关属性配置, 只能通过快捷键cmd+=来进行缩放调整, 如果快捷键无法使用那就使用动作指令面板通过关键字 放大 或者Zoom进行搜索调用

记住一点有问题先尝试在动作指令面板中搜一下
工作目录图标修改

接下来我们需要调整一下工作目录的图标, 先来看一下vscode默认的目录树长啥样:

是不是立马让人感到崩溃, 哪个文件在哪个包下面, 估计得费劲辨别半天

这个要改的话, 需要在安装图标插件, 我们直接在插件市场搜索关键字icon就行, 可以找到很多:

每个都尝试一下, 选一种自己喜欢的就行
颜色主题选择

最后我们对编辑器整体的配色进行调整, 可以直接选择现成的主题, 直接在插件市场搜索即可:

由于个人习惯, 最后我直接选择了JetBrains风格的主题和图标样式:

调整后我的编辑器样子如下:

配置的同步功能

官方自带云端同步

目前vscode编辑器自带了配置同步功能, 实现多端配置同步, 非常方便, 只需要在编辑器左下角进行登录, 然后打开同步功能即可:

这里支持Github或者微软账号登录

云端同步历史恢复

当我们不小心将编辑器还原出厂设置了, 由于我们开启了自动同步功能, 此时所有配置已经同步到了云端, 旧的配置直接被覆盖了, 那么我们想恢复之前的配置该怎么办呢?

不用担心

首先我们打开命令窗口显示已同步的数据记录:

然后选择对应时间下的历史配置文件, 将里面的内容拷贝至我们的当下的配置文件中即可:

手动拷贝有些繁琐, 不过我相信未来官方能实现一键恢复功能

除此之外我们还可以通过资源管理器的时间线进行文件内容的快速恢复, 不过这种方案仅支持短期时间的恢复, 如果要恢复几个月甚至一年前的配置, 那么只能使用云端同步方案了:

配置文件导出本地

如果你对于这种云端配置同步不是太放心, 还可以将配置文件导出到本地进行存储:

官方默认支持导出到Git和本地

配置文件同步到自己的云端

如果你有更多的同步需求, 比如同步到云盘, 那么我推荐你安装Sync Settings这个插件, 它支持本地、本地Git仓库、远程Git仓库、服务器rsync甚至Webdav:

具体使用方法:

对仓库进行配置

动作面板输入:

1	Sync Settings: Open the repository settings

将配置文件上传同步至仓库:

动作面板输入:
1
Sync Settings: Download (repository -> user)
从仓库中同步配置文件到vscode:

动作面板输入:
1
Sync Settings: Download (repository -> user)

如果你觉得手动同步太累人, 还可以配合cron-tasks插件开启定时任务, 实现配置文件的自动同步功能

问题汇总

关于回车快捷键无法设置的问题

由于两个编辑器的差异性存在, 导致部分快捷键和预想中的不太一致, 此时我们需要手动修改, 这里我需要将acceptAlternativeSelectedSuggestion的快捷键设置为回车, 另外将acceptSelectedSuggestion的快捷键改为tab, 在设置的过程中, 我发现回车无法设置, 这应该是个编辑器bug, 好在可以直接修改json文件:

本文为作者原创转载时请注明出处谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

关于Web server failed to start. Port 8080 was already in use

发表于 2023-04-18

前言

Web开发时偶尔会碰到这种错误, 主要是上一次服务未关闭导致的

解决方案

Windows平台

打开cmd命令窗口,查看被占用端口号所对应的进程
1
netstat -aon|findstr "端口号"

终止对应进程

1	taskkill /pid 这里填查询到的pid /f

Mac平台

查看被占用端口号所对应的进程
1
lsof -i:端口号
终止对应进程
1
kill PID

本文为作者原创转载时请注明出处谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

ChatGPT于我而言有如神助如虎添翼

发表于 2023-04-18

前言

在ChatGPT诞生之前, 如果我们想获取信息一般是通过搜索引擎, 在鱼龙混杂的网页中筛选相对有用的信息, 光是信息筛选甄别就极其消耗时间和脑力

ChatGPT出来后, 大大地简化了这一操作, 它可以帮我们进行大部分的垃圾信息过滤, 从而使得知识的获取变得简单直接

以前的操作流程:

关键词搜索👉鱼龙混杂的信息👉筛选得到各种碎片化的可用信息👉对得到的碎片信息进行可用性验证👉总结归纳

借助ChatGPT的操作流程:

关键词询问👉得到相对合理可靠的信息👉可用性验证->总结归纳

尝试

周杰伦的主持水平如何😀
乱码三千这个博客你觉得怎么样👀
你觉得歌手十二越写的歌如何🌹
给码box这个平台写一句吸引人的宣传语🤩

本文为作者原创转载时请注明出处谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

关于POST请求的一些细节

发表于 2023-04-18

请求传递参数的方式

POST 请求传递参数有两种方式：

将数据放在请求体（body）中

一般用form-urlencoded格式进行编码传递，例如：
1
name=value&age=20&gender=male
这种方式的优点是可以传递大量的数据，安全性较高，传递的数据类型也比较灵活，可以传递文本、文件等。
将数据放在 URL 查询字符串中

例如：
1
https://www.example.com?name=value&age=20&gender=male
这种方式的优点是简单易用，实现比较容易，不需要对数据进行编码，对于一些小规模数据传输比较恰当。

以上两种方式在传递数据时都可能存在数据篡改、伪造等问题。一些安全敏感的数据（如密码等）应该采用更安全的传输方式（如加密传输）。

使用请求体传输，数据会按照具体的编码方式进行编码，而使用查询字符串进行传输，数据会经过 URL编码处理，因为URL中只能使用一部分 ASCII 字符，其他字符需要进行转义。

编码方式

POST常用的编码方式有三种, 分别为:

application/x-www-form-urlencoded

这是最常用的编码方式，也是默认的编码方式。它将请求参数编码成 key1=value1&key2=value2 的形式，并将每个键值对用 & 连接起来。参数会被URL 编码，以便在传输时能够正确地处理特殊字符，例如空格会被转换为加号 (+)。
multipart/form-data

这种编码方式适用于上传文件或二进制数据。它将请求参数分割成多个部分，每个部分都有一个Content-Disposition 头部和一个Content-Type 头部来描述它的内容类型。这个 Content-Disposition 通常包含一个表单字段的名称和一些其他的元数据，例如上传文件的名称。
application/json

这种编码方式适用于传输 JSON格式的数据。JSON格式是一种轻量且易于使用的数据表示格式，广泛用于 Web 应用程序中。请求参数将被作为 JSON对象发送，它们必须以正确的 JSON格式进行编码。需要根据具体的场景和需求选择合适的编码方式。

注意: 使用查询字符串进行传输的数据只能使用application/x-www-form-urlencoded的编码格式,而使用请求体传输则可以使用各种编码格式

GET请求和POST请求的区别

POST 请求和 GET 请求是HTTP 协议中常用的两种请求方法，它们之间的区别如下：

参数传递方式：GET请求只能通过 URL 中的查询字符串来传递参数，而 POST 请求不仅可以通过URL还可以将参数信息放在请求主体中。
请求参数长度：GET 请求传递参数的长度是有限制的，具体取决于浏览器和 Web 服务器的限制，而 POST 请求则没有这些限制。
对服务器数据的影响：GET请求不会改变服务器上的资源状态，只是请求该资源的数据，而 POST 请求可能会改变服务器上的资源状态，如在服务器上创建新的资源或更新已有资源。
安全性：GET请求会将参数暴露在 URL 中，比较容易被追踪和窃取，而 POST 请求的参数则放在请求主体中，安全性比 GET请求更高。
使用场景：GET 请求通常用于请求数据，如获取某个页面的内容，而 POST请求用于提交数据，如提交表单信息。

总的来说，GET 请求适合请求数据，而 POST请求适合提交数据。需要根据具体的业务场景和需求选择合适的请求方法。

本文为作者原创转载时请注明出处谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

去哪儿找好用的轮子

发表于 2023-04-17

开源大轮子聚集地

Dromara社区

官网: 点击进入
Gitee GVP

官网: 点击进入
Github 中文社区排行榜

官网: 点击进入

本文为作者原创转载时请注明出处谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

CURL的使用技巧

发表于 2023-04-17

前言

curl是一个命令行下工作的文件传输工具, 支持网络请求和文件的上传下载, 非常强大, 很多操作系统默认安装了curl, 比如macOS,Windows, Linux等

当我们在使用无界面的操作系统时, 如果想要模拟网络请求, 此时没有浏览器也没有Postman, 那么curl这个工具就能派上大用场

网络请求

GET请求
1
curl -X GET http://baidu.com
curl默认是GET请求, 所以可以简写成:
1
curl http://baidu.com
POST请求
1
curl -X POST http://baidu.com
同理, 如果是PUT, DELETE请求, 只需修改-X后面的参数即可

指定请求头

使用-H指令, 注意大小写:

1	curl -X POST -H "Accept:/" http://baidu.con

如果需要指定多个请求头, 那么需要填多次-H指令, 如:

1	curl -X POST -H "Accept:/" -H "Content-Type:multipart/form-data" http://baidu.com

请求时携带请求参数

使用-d指令, 注意大小写:
1
curl -X POST -d "password=11111111&username=3333" http://baidu.con
默认是以Content-Type:application/x-www-form-urlencoded的形式对参数进行编码

如果我们需要携带json格式的数据, 那么我们指定相应请求头即可, 如下:
1
curl -X POST -H "Content-Type:application/json" -d '{"content":"发送一条消息"}' http://baidu.con
文件上传

修改Content-Type为multipart/form-data, 使用-F指令指定需要上传的文件,注意大小写:
1
curl -X POST -H "Content-Type:multipart/form-data" -F "file=@文件名称.png" http://baidu.com
文件下载

使用-o指令保存请求到的文件, 注意大小写:
1
curl -o "baidu.html" http://www.baidu.com/index.html
如果使用大写的-O, 同样也能下载, 它会将URL 的最后部分当作文件名, 此时URL`必须写具体, 否则报错:
1
curl -O http://www.baidu.com/index.html

断点续传

使用-C指令, 一般我们会配合文件下载一起使用:
1
curl -C -o "baidu.html" http://www.baidu.com/index.html
请求跟随服务器的重定向

使用-L指令, 一般我们会配合文件下载一起使用:
1
curl -L -o "baidu.html" http://www.baidu.com/index.html

参考资料

Curl Cookbook

本文为作者原创转载时请注明出处谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

一些可视化的开发工具推荐

发表于 2023-04-17

工具推荐

Nginx可视化配置工具

官网: 点击进入
可视化表单生成工具

官网: 点击进入
正则可视化工具

官网: 点击进入
CSS动画可视化

官网: 点击进入

本文为作者原创转载时请注明出处谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

使用Vercel+Github免费部署国内可访问的ChatGPT网站（ChatGPT3.5版本API）

发表于 2023-04-16

前言

总所周知，Chat GPT不管是注册、登录还是使用，都需要国外科学环境，且国内、香港、俄罗斯等IP无法使用，本文介绍使用Vercel+Github免费部署国内可访问的ChatGPT网站，APi采用Chat GPT3.5版本

工具介绍

Chat GPT API KEY（SK）获取方法：获取ChatGPT账号的API KEY(sk)

Github账号

Github仓库，可参考本人仓库：Github仓库

vercel账号，可使用Github直接登录

Fork仓库

登录自己的Github账号，进入Github仓库，选择右上角第二个图标Fork

跳转后的页面可自行修改仓库名称，建议不修改

直接点击左下角Authorize Vercel

使用Vercel部署

入口：https://vercel.com/signup

登录前，请先注册，本次教程教学内容为注册

进入页面后，选择第一个Github账号登录

点击右下角Authorize Vercel

等待一会后，跳转至Vercel主页

选择Select a Git Namespace

在下拉框中选择Add GitHub Account

再次跳转至Github页面

点击左下角Install进行授权安装

等待授权完成，自动跳转至Vercel页面，在此可看到Github中的仓库

点击右边Import，进行部署

注：在此页面不建议修改其他参数，只需修改环境变量即可

点击Environment Variables

第一个空填入OPENAI_API_KEY

第二个空填入你的ChatGPT API KEY（sk-开头）

点击右边Add按钮

点击底部Deploy

进入这个页面即表明正在部署当中，一般耗时3-5分钟

部署成功后自动跳转至成功页面

点击右上角黑色Continue to Dashboard按钮

点击中间DOMAINS中的URL

即可跳转至你个人所有的Chat GPT国内版

自此，部署步骤全部完成，后续更新将Vercel域名更换为自有域名~

本文转载自: 速龙博客

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

基于Algolia实现网站全文搜索

发表于 2023-04-15

前言

目前，我的个人网站是基于 VuePress 搭建的，其中 VuePress 内置的搜索只会提取文档的标题（h1、h2、h3）构建搜索索引，我个人觉得不太好用，因此想借助第三方提供的免费搜索服务 Algolia DocSearch 来实现个人网站的全文搜索。

Algolia

Algolia 是一个数据库实时搜索服务，能够提供毫秒级的数据库搜索服务，并且其服务能以 API 的形式方便地布局到网页、客户端、APP 等多种场景。

VuePress 的官方文档就是使用的 Algolia 搜索，使用 Algolia 搜索最大的好处就是方便，它会自动爬取网站的页面内容并构建索引，你只用申请一个 Algolia 服务，在网站上添加一些代码，就像添加统计代码一样，然后就可以实现一个全文搜索功能。

Algolia DocSearch

Algolia DocSearch 是 Algolia 提供的自动化的全文搜索服务，DocSearch 会定时爬取指定网站（通常就是我们的文档网站）上的内容，自动构建搜索索引，不需要繁琐的配置，操作简单，用户只需要用相关的 API 直接调用就行了。

基本原理

Algolia 服务器会定期抓取我们指定的文档地址中的内容进行分析并建立索引，这样在网站搜索框中输入关键词后，前端会调用 Algolia DocSearch 的接口并显示搜索结果。这些请求、结果显示的相关逻辑都封装好了，我们要做的就是按要求插入代码、配置好网站样式以及搜索框。

备注：根据 Algolia DocSearch 的官方文档，默认情况下它通常一周爬取一次网站内容，用户也可自行触发爬取，详见：DocSearch 的快速描述。

使用要求

Algolia DocSearch 提供的免费服务是需要申请的，当我们的网站满足下列条件时，Algolia 那边的工作人员才会让我们的申请通过：

我们必须是云文档网站的所有者，网站必须是公开的。
网站内容必须是开源项目的技术文档或技术博客。
网站申请服务时必须有完整稳定的设计和内容，即确认网站做好生产准备。

实现全文搜索

申请Algolia DocSearch服务

前往 Algolia DocSearch Apply 网站，填写网站地址、邮箱、仓库地址等信息，然后提交申请。

备注：这里填写的网站地址必须是公开的、且设计完整、内容稳定。如果网站还处于测试阶段，申请通过的概率很小。

回复确认邮件

申请通过后，Algolia DocSearch 官方会发送确认邮件到上一个步骤中填写的邮箱，收到后需要回复一下这个网站是我们负责开发维护的，并且可以修改网站代码。

回复邮件内容：

1
2
3

Thanks!

I am the maintatiner of the website, I can modify the code.

启动搜索服务

通过确认后，Algolia DocSearch 会再发一封使用邮件，其中包含 appId、apiKey 和 indexName，用于在网站生成框架中配置使用，例如在 VuePress 中配置如下，其他框架类似：

module.exports = {
    themeConfig: {
        algolia: {
            appId: '请看邮件',
            apiKey: '请看邮件',
            indexName: '请看邮件'
        }
    }
}

并且该邮件还会提供接受邀请的链接，前往该链接重新设置密码后（账号是申请时填的邮箱），即可登录 Algolia。

后台管理数据

申请 Algolia DocSearch 成功后，我们也可以前往 Algolia 管理自己的后台数据。步骤如下：

步骤一：登录账号后，点击右上角的 “Dashboard” 按钮前往后台。

步骤二：点击左侧列表里的”Search”，可以查看对应的 “indexName” 数据，如果 “Browse” 里面没有显示数据，那么说明 DocSearch 的爬虫有点问题，导致没有生成对应的 Records：

步骤三：前往 Algolia 的爬虫后台，同样需要登录。在首页进入我们需要修改的爬虫，可以看到右侧的 Records 数据为 0 条，很明显爬虫有问题：

步骤四：点击左侧菜单中的”Editor”查看并编辑爬虫代码，注意看代码中的 pathsToMatch 路径，很明显是不对的，后面多了个 docs，将它改成正确的网站路径 https://rainmic1019.github.io/**：

修改前：

new Crawler({
  actions: [{
      ...
      pathsToMatch: ["https://rainmic1019.github.io/docs/**"],
      ...
    }],
  ...
});

修改后：

new Crawler({
  actions: [{
      ...
      pathsToMatch: ["https://rainmic1019.github.io/**"],
      ...
    }],
  ...
});

步骤五：修改完成后，进行测试，如果能成功提取到数据则表示没问题，点击右上角的”Save”按钮保存代码：

步骤六：切换回”Overview”，点击右上角的 “Restart crawling” 重新爬取数据即可。

添加CSS和JavaScript

如果使用的是 VuePress 的默认主题，那么按照 VuePress 官方文档中的方法直接配置好 appId、apiKey 和 indexName 就可以了。但在其他主题中，比如 vuepress-theme-rec，它是自己实现的搜索框，所以按 VuePress 官方文档进行配置是没有效果的，此时就需要按照 Algolia 发给我们的邮件里的方法，给网站添加 CSS 和 JavaScript，然后在加载完毕的时候调用提供的 API。

修改config.js

.vuepress/config.js 是 VuePress 中最重要的文件，它是 VuePress 项目的配置文件入口，导出一个 JavaScript 对象，其中设置 head 属性可以指定额外需要被注入到当前页面的 HTML 中的标签，每个标签都可以以 [tagName, { attrName: attrValue }, innerHTML?] 的格式指定，比如这里我们把 Algolia 邮件中指定的 HTML 标记添加进去：

module.exports = {
    head: [
        ......
        /* 添加 Algolia 搜索框的 CSS 和 JavaScript 文件*/
        ['link', { href: "https://cdn.jsdelivr.net/npm/@docsearch/css@3", rel: "stylesheet" }],
        ['script', { src: "https://cdn.jsdelivr.net/npm/@docsearch/js@3" }],
    ]
}

修改enhanceApp.js

.vuepress/enhanceApp.js 文件是 VuePress 中仅次于 config.js 的第二重要的文件，我们可以通过修改该文件来对 VuePress 应用进行拓展配置。这个文件应当 export default 一个钩子函数，并接受一个包含了一些应用级别属性的对象作为参数。我们可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件，或者增加额外的路由钩子等，比如这里我们把 Algolia 邮件中的代码添加进去：

export default ({
    Vue,      /* VuePress 正在使用的 Vue 构造函数*/
    options,  /* 附加到根实例的一些选项 */
    router,   /* 当前应用的路由实例 */
    siteData  /* 站点元数据 */
}) => {
    /* 应用级别的拓展优化 */
    Vue.mixin({
        mounted() {
            setTimeout(() => {  /* 添加 setTimeout 避免报错（该报错不影响效果） */
                try {
                    docsearch({  /* 添加 Algolia DocSearch 提供的代码 */
                        appId: "请看邮件",
                        apiKey: "请看邮件",
                        indexName: "请看邮件",
                        container: '.search-box',
                        debug: false
                    });
                } catch (e) {
                    console.log(e);
                }
            }, 100)
        },
    });
};

注意：其中的 container，参考 docsearch 的官方仓库，这里提供的不是 input 输入框的选择器，而是一个挂载节点，比如 div 的选择器。

修改搜索框样式

VuePress 提供了一种添加额外样式的简便方法。我们可以创建一个 .vuepress/styles/index.styl文件。这是一个Stylus文件，但也可以使用正常的CSS 语法。

此处我们通过该文件来设置一下 Algolia 搜索框的样式：

.search-box .DocSearch.DocSearch-Button {
    cursor: text;
    width: 10rem;
    height: 2rem;
    color: #5b5b5b;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    font-size: 0.9rem;
    padding: 0 0.5rem 0 0rem;
    outline: none;
    transition: all 0.2s ease;
    background: transparent;
    background-size: 1rem;
}

.search-box .DocSearch-Button-Container {
    margin-left: 0.4rem;
}

.search-box .DocSearch-Button .DocSearch-Search-Icon {
    width: 16px;
    height: 16px;
    position: relative;
    top: 0.1rem;
}

.search-box .DocSearch-Button-Placeholder {
    font-size: 0.8rem;
}

.search-box .DocSearch-Button-Keys {
    display: flex;
    position: absolute;
    right: 0.1rem;
}

.search-box .DocSearch-Button-Key {
    font-size: 12px;
    line-height: 20px;
}

最终显示的效果如下图所示：

总结

Algolia DocSearch 可以说真的跟官网描述一样，算是目前构建可在线搜索文档的最简单的方式之一了。我们只需要关注文档本身，进行少量的配置，其它的 Algolia 全包了。另外，Algolia 还有一些其它优秀产品及服务，感兴趣的也可以前往官网自行探索。

本文以自己的个人网站为例，但 Algolia DocSearch适合很多类型的网站，更方便的是许多网站构建器本身就内置了对Algolia 的支持，比如 Hexo、 VuePress、Docusaurus 等等。

本文转载自: CSDN

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

问题与解决方案

前言

vscode配置剖析

对vscode进行改造

第一步 对快捷键进行改造

第二步 对vscode外观进行改造

配置的同步功能

官方自带云端同步

云端同步历史恢复

配置文件导出本地

配置文件同步到自己的云端

问题汇总

关于回车快捷键无法设置的问题

前言

解决方案

Windows平台

Mac平台

前言

尝试

请求传递参数的方式

编码方式

GET请求和POST请求的区别

开源大轮子聚集地

前言

网络请求

参考资料

工具推荐

前言

工具介绍

Fork仓库

使用Vercel部署

自此，部署步骤全部完成，后续更新将Vercel域名更换为自有域名~

前言

Algolia

Algolia DocSearch

基本原理

使用要求

实现全文搜索

申请Algolia DocSearch服务

回复确认邮件

启动搜索服务

后台管理数据

添加CSS和JavaScript

修改config.js

修改enhanceApp.js

修改搜索框样式

总结

第一步对快捷键进行改造

第二步对vscode外观进行改造