VuePress使用Algolia实现全文搜索

目录
  • 引言
  • 确认眼神
  • 申请授权
    • 实施部署
  • 调试爬取
  • 总结回顾

引言

Algolia 为构建者提供构建世界级体验所需的搜索和推荐服务。Algolia 是一个数据库实时搜索服务，能够提供毫秒级的数据库搜索服务，并且其服务能以 API 的形式方便地布局到网页、客户端、APP 等多种场景。

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

为了给网站再加点灵魂实现一个这样的全文搜索功能，刚好今天有空且申请的Algolia也已通过，官网已经将 AppID 等信息发邮件通知了，那说干就干吧，还得是撸起袖子加油干！

确认眼神

好不好用，那得上图，有图有真相，实实在在的效果出来了，坑还是有的但是帮大家走一下，避免了好些冤枉路，具体我也会在文中加以说明的。

先看导航图

再看搜索图

申请授权

已经确认过眼神

赞 (0)

相关推荐

  • 如何使用VuePress搭建一个类型element ui文档

    网站成果样式 项目书写步骤 github地址:https://github.com/xuhuihui/dataCom 官网:http://caibaojian.com/vuepress/guide/getting-started.html 参考文章:https://www.jb51.net/article/156259.htm 前言:我先git clone官方github,运行查看完整效果. 再根据官网介绍和参考文章,结合完整的代码,自己一步步配置内容.最后,参考element的设计样式,修改并

  • VuePress 快速踩坑小结

    VuePress 快速踩坑小结

    最近有个开源项目非常火,那就是尤小右开发的 VuePress,VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码,并且 VuePress 对编译后的 HTML 文件做了一些针对搜索引擎的优化.另外 VuePress 针对 Markdown 文件做了一些扩展使其功能更加强大,本文将围绕搭建一个 Github 的静态博客展开. 为项目加入 VuePress 第一步为您的项目安装 VuePress,如果您的项目代码中并没有 package.json文件,请先执行 npm

  • Hexo已经看腻了，来手把手教你使用VuePress搭建个人博客

    Hexo已经看腻了，来手把手教你使用VuePress搭建个人博客

    VuePress vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器,实际上就是一个vue的spa应用,内置webpack,可以用来写文档. 一个基于 Vue SSR 的静态站生成器,本来的目的是爽爽的写文档,但是我发现用来撸一个人博客也非常不错. 这是VuePress的官方文档 上手搭建 你可以跟着文档上的例子自己玩一玩,不过由于VuePress的文档也是用VuePress来实现的,所以我取巧直接拿VuePress仓库中的docs目录拿来玩耍. 1.首先安装VuePr

  • 如何正确解决VuePress本地访问出现资源报错404的问题

    背景 最近发现好多小伙伴刚用VuePress,然后一build完就直接用本地浏览器访问,结果出现黑块.仅仅出现那种问题还好,给项目安装 vuepress-plugin-serve 插件就行了, 但是如果有需求是需要离线查看 VuePress 生成后的文档呢?所以我特地研究了一下-- 解决办法 打开 .vuepress/config.js 文件,把 base 的值改成 ./,为了方便调试,最好这样写: //base: "/", base: "./", 写两个,一个用于

  • VuePress 中如何增加用户登录功能

    VuePress 中如何增加用户登录功能

    VuePress是什么? 先让我们看看 VuePress能干什么?有什么效果? 很像vue官网的文档页面,因为vuePress就是尤大大的一个力作 vuePress官网介绍介绍的很详细,这里只做搭建VuePress项目教程 在 VuePress 中增加用户登录 VuePress 是 Vuejs 官方提供的一个快速建设文档站点的工具,在简单配置好功能后,需要做的事情就剩下写好一个个 Markdown 文档. 因为 VuePress 提供了可以在 Markdown 中使用 Vue 的能力,所以有时候

  • Vuepress使用vue组件实现页面改造

    Vuepress使用vue组件实现页面改造

    目录 引言 前置环境 使用 vue 组件 安装插件 配置插件 创建 vue 组件 使用 vue 组件 引言 只是单纯的用 vuepress 写个 markdown 文档,的确会处处受限,满足不了定制化的样式和功能,有时只是简单的修改下某个页面,或者做些组件演示的内容,而不是开发一整套主题.所以研究下如何在项目中使用 vue 组件还有非常有必要的,毕竟也没那么难. 前置环境 node 环境 node v16.13.0 VuePress 版本 VuePress v2.0.0-beta.48 每个版本

  • VuePress使用Algolia实现全文搜索

    VuePress使用Algolia实现全文搜索

    目录 引言 确认眼神 申请授权 实施部署 调试爬取 总结回顾 引言 Algolia 为构建者提供构建世界级体验所需的搜索和推荐服务.Algolia 是一个数据库实时搜索服务,能够提供毫秒级的数据库搜索服务,并且其服务能以 API 的形式方便地布局到网页.客户端.APP 等多种场景. VuePress 官方文档就有 Algolia 搜索插件,可以直接安装使用,使用 Algolia 搜索最大的好处就是方便,它会自动爬取网站的页面内容并构建索引,你只用申请一个 Algolia 授权服务,在网站上添加一

  • Mongodb实战之全文搜索功能

    前言 众所周知在传统的关系型数据库中,我们通常将数据结构化,通过一系列表关联.聚合来查询我们所需的结果.而在非结构化的数据中,缺少这种预定义的结构,因而如何快速查询定位到我们所需要的结果,不是一件容易的事. Mongodb作为一种NoSQL数据库,非常适合存储和管理非结构化数据,例如互联网上的各种文本数据.假如我们用Mongodb存储了很多博客文章,那么如何快速找到所有关于"nodejs"这个主题的文章呢?Mongodb内建的全文搜索可以帮助我们完成这个功能.下面话不多说了,来一起看看

  • 详细讲解PostgreSQL中的全文搜索的用法

    开发Web应用时,你经常要加上搜索功能.甚至还不知能要搜什么,就在草图上画了一个放大镜. 搜索是项非常重要的功能,所以像elasticsearch和SOLR这样的基于lucene的工具变得很流行.它们都很棒.但使用这些大规模"杀伤性"的搜索武器前,你可能需要来点轻量级的,但又足够好的搜索工具. 所谓"足够好",我是指一个搜索引擎拥有下列的功能: 词根(Stemming) 排名/提升(Ranking / Boost) 支持多种语言 对拼写错误模糊搜索 方言的支持 幸运

  • 基于ASP.NET的lucene.net全文搜索实现步骤

    基于ASP.NET的lucene.net全文搜索实现步骤

    在做项目的时候,需求添加全文搜索,选择了lucene.net方向,调研了一下,基本实现了需求,现在将它分享给大家.理解不深请多多包涵. 在完成需求的时候,查看的大量的资料,本文不介绍详细的lucene.net工程建立,只介绍如何对文档进行全文搜索.对于如何建立lucene.net的工程请大家访问 使用lucene.net搜索分为两个部分,首先是创建索引,创建文本内容的索引,其次是根据创建的索引进行搜索.那么如何对文档进行索引呢,主要是对文档的内容进行索引,关键是提取出文档的内容,按照常规实现,由

  • mysql 全文搜索 技巧

    << Back to man.ChinaUnix.net MySQL Reference Manual for version 4.1.0-alpha. -------------------------------------------------------------------------------- 6.8 MySQL 全文搜索 到 3.23.23 时,MySQL 开始支持全文索引和搜索.全文索引在 MySQL 中是一个 FULLTEXT 类型索引.FULLTEXT 索引用于 M

  • PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】

    PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】

    本文实例讲述了PHP在innodb引擎下快速代建全文搜索功能的方法.分享给大家供大家参考,具体如下: 需要准备的设备:Liunx(Centos)操作系统(只支持Linux),PHP环境. 这里介绍一个国人开发的搜索引擎开源项目-讯搜(xunsearch),它分为:索引服务器和搜索服务器. 在CentOS下面愉快的代建服务器 wget http://www.xunsearch.com/download/xunsearch-full-latest.tar.bz2 tar -xjf xunsearch

  • php启用sphinx全文搜索的实现方法

    本文实例讲述了php启用sphinx全文搜索的实现方法.分享给大家供大家参考.具体分析如下: 在编译安装 sphinx 的时候出现很多中文乱码,最后抛出错误卡住了,我去到官方直接下载一个 rpm 包,安装就很爽,具体错误不想研究了,忙开发呢. 安装两个包,一个是 mmseg 这个是生成中文字典的程序,一个是  csft 也就是中国版的sphinx . rpm -ivh 安装完以后,很顺利~~不到半分钟就装完了. 中文字典库,我直接去 csft 官方下载了,挺好的想得很周到. unigram.tx

  • mysql全文搜索 sql命令的写法

    mysql全文搜索,sql的写法: MATCH (col1,col2,-) AGAINST (expr [IN BOOLEAN MODE | WITH QUERY EXPANSION]) 比如: SELECT * FROM articles WHERE MATCH (title,body) AGAINST ('database'); MATCH()函数对于一个字符串执行资料库内的自然语言搜索.一个资料库就是1套1个或2个包含在FULLTEXT内的列.搜索字符串作为对 AGAINST()的参数而被

  • 对JavaScript的全文搜索实现相关度评分的功能的方法

    全文搜索,与机器学习领域其他大多数问题不同,是一个 Web 程序员在日常工作中经常遇到的问题.客户可能要求你在某个地方提供一个搜索框,然后你会写一个类似 WHERE title LIKE %:query% 的 SQL 语句实现搜索功能.一开始,这是没问题,直到有一天,客户找到你跟你说,"搜索出错啦!" 当然,实际上搜索并没有"出错",只是搜索的结果并不是客户想要的.一般的用户并不清楚如何做精确匹配,所以得到的搜索结果质量很差.为了解决问题,你决定使用全文搜索.经过一

  • php利用scws实现mysql全文搜索功能的方法

    本文实例讲述了php利用scws实现mysql全文搜索功能的方法.分享给大家供大家参考.具体方法如下: scws这样的中文分词插件比较不错,简单的学习了一下,它包涵一些专有名称.人名.地名.数字年代等规则集合,可以直接将语句按这些规则分开成一个一个关键词,准确率在90%-95%之间,按照安装说明把scws的扩展放入php的扩展目录里,下载规则文件和词典文件,并在php配置文件中引用它们,就可以用scws进行分词了. 1) 修改 php 扩展代码以兼容支持 php 5.4.x 2) 修正 php

随机推荐