根据官方的说明，在你通过申请后，其服务器会定期抓取（免费用户抓取周期是 24 小时）你的网站内容并分析，对文档的各级标题、段落等内容建立索引，这样，在网站中加入搜索框之后，用户输入关键时是便可以请求 DocSearch...的接口并显示搜索结果了。...这些请求、结果显示相关的逻辑都封装好了，你要做的只是要按要求插入代码、样式以及那个搜索框。 实现步骤 1....邮件内容大致如下： 4. 根据第 3 步里收到的邮件提示，修改网站代码 可以看到，邮件主要包括 apiKey 等配置信息，而且对于如何使用也描述得非常清楚了。...本文以自己的项目为例，但 Aloglia DocSearch 适合很多类型的网站，使用 Vue.js 官网这类用 HEXO 构建的静态站，又或者像 Easywechat 一样用 Laravel 开发的动态网站
起初本站的文章搜索功能使用是本地搜索支持，但后来发现有众多网友（包括 Hugo 官网文档搜索）都使用的是 Algolia 在线搜索引擎，便顺手也给自己的站点移植到该搜索引擎上面。...索引内容 Algolia 采用较为松散的 JSON 数据结构支持，所以实现起来也相对比较轻松一些，也可以根据自己的需求进行个性化的设计。...这里只是把博文显示的页面进行索引化，并没有对分类、标签、列表等做索引支持，查询的内容只针对文章页面本身就足够用啦。...生成索引 Hugo 支持自定义文件的内容的输出，只需要几步简单的参数定义，比如在 config.yaml 配置文件中加入如下的设置： 1 2 3 4 5 6 7 8 9 10 11 outputFormats...经过一番亲自测试下来，觉得 algolia-uploader 和 Algolia-Upload-Records 两款比较好用一些，最终选择了后者集成到本站的 Github Action 步骤中，无他主要是觉得上传后有索引
社区插件：有丰富的社区插件，如 Algolia 搜索集成。3....选择哪一个取决于你的具体需求、团队技能和偏好。VuePress 自定义主题VuePress 允许通过创建自定义主题来扩展其功能。...Docusaurus 功能扩展：AlgoliaDocusaurus 提供了内置的 Algolia 搜索集成。...以下是如何配置的步骤：在 docusaurus.config.js 中添加 Algolia 的配置：module.exports = { // ......重新构建你的 Docusaurus 站点以应用更改：yarn build现在，你的 Docusaurus 站点应该已经有了一个功能完善的搜索框，由 Algolia 提供支持。
配置主题配置文件，开启algolia的搜索模式(关闭本地搜索) hexo-algolia 开发说明 安装hexo-algolia，按照文档做相应的配置 npm install hexo-algolia...--save 注册algolia，创建新建index Setting->打开API Keys 选择All API Keys，新建一个拥有CRUD权限的api key（指定相应的index...配置完成，随后执行hexo algolia，执行成功之后查看algolia中相关内容（如果提交失败，则先clean项目） 数据推送 上传数据到algolia（当添加了新文章，搜索不到的时候则需要刷新...: true hits: per_page: 6 测试结果 hexo-algoliasearch 开发说明：参考文档 algolia注册完成，配置参考上述内容，调整为 ...: 数据库加载中 algolia_search: input_placeholder: 搜索文章 hits_empty: '找不到您查询的内容：${query}' hits_stats
最关键的是，csdn上的文章质量也越来越差，我曾经不止一次听人说过-csdn能优化搜索结果的说法。因此我开始尝试在博客园、知乎、简书上连载，但感觉都很麻烦。...搜索设置 loveit支持两种搜索：lunr和algolia。...让博客被google等搜索引擎收录 Google等的SEO设置，让博客显示在这些页面上 首先可以在搜索引擎上输入site:wtysos11.github.io来检查是否被收录，一般刚放上去都是没有的。...可以按照以下步骤 注册SEO 选择放静态页面，并下载 把拿到的静态页面丢到/static文件夹下面 可以先hugo serve看一下能不能访问 更新 确认能访问后在SEO页面进行确认 一般是没什么问题的...展望 自定义SCSS：loveit主题美化 标签的进一步丰富：目前标签没有办法被归类，其实还挺麻烦的 最关键的还是内容。不是为了写博客而写博客，而是为了自身的积累而写博客。
什么是 Alogolia Algolia 是一个托管搜索引擎，提供全文，数字和多面搜索，能够从第一次击键中提供实时结果，它提供了一组工具，可简化制作完整搜索体验并将其集成到您的网站和应用程序中的过程。...这些包括： 支持多种不同语言的后端 API 客户端，用于索引、配置和管理数据 用于构建 Web 和移动搜索体验的前端小部件 与流行的框架和平台集成，进一步简化Algolia在现有项目中的集成 一个安全的分布式搜索网络...，可托管您的内容并快速将其提供给客户 透明、可自定义的相关性算法 一个经过大量优化的搜索引擎，从头开始构建，C++ 大量文档、实现指南和代码示例 透明、可自定义的相关性算法 简单来说，Algolia 是一个提供云搜素服务的第三方平台...，我们可以通过调用 Algolia 的API接口把我们自己站点的数据上传到 Algolia 中，实现我们自己站点的搜索功能。...10 labels: input_placeholder: Search for Posts hits_empty: "我们没有找到任何搜索结果: ${query}" hits_stats
以下是VuePress自带的一些配置选项，可以自由选择使用： 选项 写法示例 作用 title "title": "page1" 当前页面的标题。...a.内置搜索 通过设置 themeConfig.search: false 来禁用默认的搜索框，或是通过 themeConfig.searchMaxSuggestions 来调整默认搜索框显示的搜索结果数量...、h2 和 h3 构建搜索索引，如果你需要全文搜索，你可以使用 Algolia 搜索。...::: b.Algolia搜索 通过 themeConfig.algolia 选项来用 Algolia 搜索 替换内置的搜索框。...要启用 Algolia 搜索，你需要至少提供 apiKey 和 indexName，如下所示： module.exports = { themeConfig: { algolia: {
添加搜索功能 导航菜单栏 完成了上述菜单选项的添加后，读者们可以看到菜单栏中还有搜索一项，搜索的功能源于第三方服务——Algolia，接下来看看配置的步骤： 注册Algolia，创建...，进行Hexo Algolia的安装： npm install --save hexo-algolia 执行完指令后，读者们可能会发现安装失败，或发现安装成功后实现的搜索功能可以搜索但是不可以点击搜索到的文章...获取Key，修改站点配置 完成Hexo Algolia后，回到Algolia官网的Dashboard，在左侧导航栏选择API Keys一项，跳转到如下图所示的页面。...： 启用配置搜索功能 经过上述的操作后，部署Hexo，便可在博客中添加搜索功能，其效果图如下： 找到搜索结果 未找到搜索结果 添加阅读次数统计...，接下来了解一下社交链接如何添加： 添加链接 在主题配置文件中找到social属性，在其下方添加社交链接，其格式为： 社交平台名称：链接 笔者添加的内容如下图所示： 添加社交链接
异步函数是通过事件循环异步操作的函数，使用隐式的 Promise 返回结果然而，effect hook 不应该返回任何内容，或者清除功能。...缺少一件：当你尝试输入字段键入内容的时候，他是不会再去触发请求的。...但是，这样就会出现了另一个问题：每一次的query 的字段变动都会触发搜索。如何提供一个按钮来触发请求呢？...，组件加载的时候就要触发搜索，类似的查询和搜索状态易造成混淆，为什么不把实际的 URL 设置为状态而不是搜索状态呢？...该类型告诉reducer功能需要应用哪个状态转换，并且reducer可以另外使用有效负载来提取新状态。毕竟，我们只有三个状态转换：初始化提取过程，通知成功的数据提取结果，并通知错误的数据提取结果。
点击查看更新记录 更新记录 2021-01-24:内测版v0.07 实现SAO风格的右键菜单 添加了点击音效，默认使用本站同款，可以自定义配置 支持添加链接或者自定义脚本动作 添加Ctrl+右键转换原生菜单功能...，与link互斥，只能填写一个 自定义脚本拓展 点击查看脚本拓展内容 糖果屋出品的右键菜单提供了自定义js配置，读者可以通过封装自己的js脚本，直接通过菜单选项调用。...打开Algolia搜索按钮 打开Tidio 跳转评论区 关闭当前窗口 功能：针对gitee镜像站和当前站点的同篇文章跳转，记得更改链接。...搜索按钮（提取自Butterfly源码，其他主题可能不生效）。...SAO风格的右键菜单 二级菜单显隐逻辑适配 Ctrl+右键恢复原生菜单 适配pjax，站内跳转不打断全局音乐 补全左侧圆形列表；详见2.0 补全左侧角色属性栏样式；详见2.0 3D显示效果 添加浮动动态动画
如果不清楚根目录路径，请回到教程 基于 Hexo 从零开始搭建个人博客（二），查看你执行hexo init xxx这条命令时所选择的路径，例如我选择的路径是【G:/hexo-blog】，我的博客根目录即为...（推荐） 效果图 关于 Algolia 搜索功能，这里有两种插件，一个是 hexo-algolia ，一个是 hexo-algoliasearch。...第一种亲测只能对匹配文章title，不能匹配文章内容查询到结果，所以推荐第二种。下面分别对这两种插件做不同的说明。 获取 Algolia 账号 注册 Algolia。...: input_placeholder: Search for Posts hits_empty: "我们没有找到任何搜索结果: ${query}" hits_stats: "找到...: input_placeholder: Search for Posts hits_empty: "我们没有找到任何搜索结果: ${query}" hits_stats: "找到
不过自己又稍微折腾了一下，原因是之前的文章都是在 content\posts 一个目录中并没有做好分类管理，想通过此次的升级重新整理下文章的分类，而且新版本的主题中已经可以支持多个自定义目录。...但结果是草率了，修改后的文件导入居然失败了，然后尝试换成了 LeanCloud 官方的导入功能便成功，本以为迁移工作到此就结束了，结果又来了如下问题：图片真是无语至极呀，还好之前也处理过类似的情况，接着就又对数据一阵...在线搜索新版本的主题支持 Alogia 在线搜索引擎，观察过不少站点（特别是一些文档类的网站都在使用），开发主题时也体验了下它的功能，觉得还是蛮不错的，搜索和响应速度也挺快的。...s $ALGOLIA_INDEXFILE -a $ALGOLIA_APPID -k $ALGOLIA_ADMINKEY -n $ALGOLIA_INDEXNAME相比较于本地搜索功能，Algolia 还提供搜索分析的数据报告...除了主题的开发工作外，也会做好博客内容的打造。 在此也感谢 杜老师 的“引荐”，才知道原来还有个叫做 十年之约 的博客友人们组织。
之前一直无法成功注册登录 algolia 一直用的 hexo 本地搜索，搜索结果不准确，algolia 有一定的免费额度，对于小网站来说还是挺友好的，接入也很方便。...hits: per_page: 10 labels: input_placeholder: Search for Posts hits_empty: "我们没有找到任何搜索结果...: ${query}" hits_stats: "找到${hits}条结果（用时${time} ms）" 命令 hexo algolia 其他命令照常就可以 注意事项 虽然有很多博客已经写过如何添加这个插件...，如何使用，但是我在实际过程中还是遇到了很多奇怪的问题 账号无法正常登录 为什么我一直拖到现在才添加 Algolia 搜索呢？...（不知道是不是白嫖的人太多了，导致 Algolia 封锁了一些特殊邮箱的行为） 搜索没有内容 当我一开始安装配置完成之后，我发现 Algolia 上面没有上传我的内容，也就无法搜索到。
说起来我当初执意要选择软件工程专业的时候，有个动机就是被刀剑神域里的VRMMO吸引，想着能有一天可以真的体验上这种完全沉浸式的游戏。不过理想和现实还真的是差距鲜明啊。 于是开始尝试制作左半侧的UI。...因为右键菜单是动态出现的，故而我用的都是绝对长度，自然也不会去考虑和窗口整体大小比例自适应的问题。 一开始是在静态页面上写的纯静态效果，依靠hover动作控制显隐属性。但是这就导致我遇到了一系列问题。...，与link互斥，只能填写一个 自定义脚本拓展 点击查看脚本拓展内容 糖果屋出品的右键菜单提供了自定义js配置，读者可以通过封装自己的js脚本，直接通过菜单选项调用。...打开Algolia搜索按钮 打开Tidio 跳转评论区 关闭当前窗口 功能：针对gitee镜像站和当前站点的同篇文章跳转，记得更改链接。...搜索按钮（提取自Butterfly源码，其他主题可能不生效）。
设置半透明效果 插入半透明的CSS样式到_other.styl //博客内容透明化 //文章内容的透明度设置 .content-wrap { opacity: 0.9; } //侧边框的透明度设置...为Hexo增加algolia搜索功能 传送门：为Hexo增加algolia搜索功能 Next主题启用文章置顶功能 传送门：Hexo中next主题启用文章置顶功能 添加canvas-nest几何条纹动态背景...传送门：Hexo博客添加canvas-nest几何条纹动态背景 关于Hexo+next主题的SEO优化 Typora+Picgo+七牛云实现图片快速上传 Hexo+next主题自定义友情链接页面 hexo...设置所有边框为圆角 打开文件，路径：\themes\next\source\css_variables\Gemini.styl ，添加以下代码： ps：Gemini是我用的样式，用哪个样式修改哪个文件 // 修改主题页面布局为圆角...SEO优化：Hexo-abbrlink插件生成永久固定链接 Next7.8主题更换思源宋体 hexo删除algolia搜索增加本地搜索功能 Coding Studio实现hexo的云环境部署 给hexo
别说，机（无）智（聊）的人还是很多的，真的有人搞了CSS实现的搜索引擎[1]。 在该搜索引擎中输入员工姓名，会显示员工信息。 本文来聊聊他是如何实现的。...可以通过属性选择器 + 伪元素实现： input[value="tim" i] ~ #result:before { content: "Tim Carry"; } 其中属性选择器中的i代表忽略内容大小写...这就是本搜索引擎的核心原理，理论上只要选择器规则越多，搜索结果就越丰富。 多个搜索结果 让我们继续扩展。...比如，输入cle后，搜索结果姓名中cle是加粗显示的： 分为2步实现： 自定义字体 在UTF-8的私有区域，为每个字母定义对应的加粗字体，比如：m在该字体中对应\e64d。...将结果中的Mar替换为\e64d \e661 \e672，也就是自定义字体中对应Mar的粗体字母。 总结 按照这个设定，制约本搜索引擎的，只有作者的想象力了。
不着急的小伙伴可以看看今天的内容哈，给《Java 程序员进阶之路》加了文档搜索，顺带记录一下。如果以后有其他小伙伴在使用过程中也遇到了这个问题，可以参考这篇。...体验网址：https://tobebetterjavaer.com 点击，然后输入想要搜索的内容，就会在弹出框中看到搜索结果，点击可以跳转到对应的网页。 个人感觉还是挺方便和实用的。...至于 Algolia 实现 DocSearch 的原理，也非常的简单，它会根据你的网站内容定时爬虫，当输入关键字的时候就去取之前爬过的内容。...content: ".theme-hope-content p, .theme-hope-content li", }, indexHeadings: true, 这部分如果不替换的，DocSearch 是无法搜索到内容的...helpText: "你可能需要检查你的网络连接", }, footer: { selectText: "选择
每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。...同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。 #它是如何工作的?...网站和页面的元数据(opens new window) 内容摘抄(opens new window) 默认主题 Responsive layout 首页(opens new window) 内置的搜索...(opens new window) Algolia 搜索(opens new window) 可定制的 navbar (opens new window)and sidebar(opens new window...如果你并不关注 SEO，同时也不想安装大量依赖，它们仍然是非常好的选择！
内置搜索：默认集成Algolia搜索，提供快速准确的文档检索功能。 什么是VuePress？ VuePress是Vue.js团队开发的静态网站生成器，同样专注于文档编写。...Vue.js集成：所有页面都是Vue组件，可以利用Vue的生态系统进行扩展。 Markdown增强：支持扩展的Markdown语法，方便编写复杂的文档内容。...例如，你可以使用官方提供的经典主题，或是使用社区开发的自定义主题。此外，Docusaurus还支持React组件，使得页面的交互性和动态性更强。...VuePress VuePress生成的静态页面同样具备高性能，并且由于所有页面都是Vue组件，可以进行进一步的性能优化。VuePress也支持SEO优化，但需要手动配置，略显繁琐。 4....VuePress的轻量级和灵活性使得Vue.js文档（https://vuejs.org/）结构清晰，内容丰富，并且充分利用了Vue组件的优势，提供了极佳的用户体验。
本文将介绍如何在使用React Hook进行网络请求及注意事项。...使用useState创建js页面 首先创建一个hook的功能页面demoHooks.js, 功能比较简单使用flatlist展示一个文本列表页面 const demoHooks = () => {...这里我们在函数中调用了setData设置接口返回数据，触发页面的更新机制，就造成了死循环。...hook,包含initialData,error,initialState等；自定义hook也是一个函数，在其内部可以调用其他hook函数，使用“use”开头。...} },[url]); 总结 本文通过一个网络请求的demo讲述了react hooks部分API的使用及注意事项，这几个api也是平时开发工作中常见的，因此通过阅读本文，你应该可以收获如下内容
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
