惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Know Your Adversary
Know Your Adversary
C
CERT Recently Published Vulnerability Notes
V
Vulnerabilities – Threatpost
N
News | PayPal Newsroom
O
OpenAI News
A
About on SuperTechFans
月光博客
月光博客
Martin Fowler
Martin Fowler
L
LangChain Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
aimingoo的专栏
aimingoo的专栏
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
V2EX - 技术
V2EX - 技术
博客园 - 司徒正美
大猫的无限游戏
大猫的无限游戏
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
人人都是产品经理
人人都是产品经理
T
Tor Project blog
D
DataBreaches.Net
Cloudbric
Cloudbric
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
云风的 BLOG
云风的 BLOG
F
Full Disclosure
S
SegmentFault 最新的问题
Vercel News
Vercel News
T
Tailwind CSS Blog
Schneier on Security
Schneier on Security
宝玉的分享
宝玉的分享
M
MIT News - Artificial intelligence
博客园 - 【当耐特】
P
Privacy International News Feed
美团技术团队
S
Secure Thoughts
P
Privacy & Cybersecurity Law Blog
Google DeepMind News
Google DeepMind News
F
Fortinet All Blogs
Scott Helme
Scott Helme
Forbes - Security
Forbes - Security
D
Darknet – Hacking Tools, Hacker News & Cyber Security
Recent Announcements
Recent Announcements
AWS News Blog
AWS News Blog
Stack Overflow Blog
Stack Overflow Blog
S
Security Affairs
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
The GitHub Blog
The GitHub Blog
T
Tenable Blog
Cyberwarzone
Cyberwarzone
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
J
Java Code Geeks
T
Threatpost

回忆中的明天

自己写一个Web 端的MiMo TTS Chat,方便实现文本转语音,API限免中 · 回忆中的明天 NVIDIA NIM 开发平台,提供超多免费大模型 · 回忆中的明天 iTranslation 简单快捷的翻译软件,支持数十种语言互译 · 回忆中的明天 国内外免费大模型平台,支持 API 调用的超多免费大模型 · 回忆中的明天 SiliconFlow 硅基流动一站式大模型云服务平台,提供超多免费大模型 · 回忆中的明天 Xiaomi MiMo 小米大模型团队开发的大语言模型,开源限免中…… · 回忆中的明天 BigModel 智谱大模型开放平台,提供超多自研免费大模型 · 回忆中的明天 OpenRouter 模型聚合平台,提供超多免费模型使用 · 回忆中的明天 iReader 英语点读学习系统,译林小学英语在线点读 · 回忆中的明天 ZenMux 企业级大模型聚合平台,提供免费试用模型 Gemini 3 Pro · 回忆中的明天 英语学习,新概念英语在线点读、全文朗读学习系统 · 回忆中的明天 iGSTT(Gemini STT) 开源免费的语音转文本(STT)的命令行工具 · 回忆中的明天 Python 项目打包,并上传到 PyPI,分享项目 · 回忆中的明天 iGTTS(Gemini TTS) 开源免费的文本转语音(TTS)的命令行工具 · 回忆中的明天 iChat(AI Chat) 智能聊天工具,支持 MiMo、DeepSeek、Gemini、Grok、OpenAI和自定义AI · 回忆中的明天 NanoPi R2S 安装 Debian 固件系统,旁路由网络代理内网转发,决解直连网络卡顿 nftables · 回忆中的明天 NanoPi R2S Armbian Linux 旁路由网络代理内网转发,决解直连网络卡顿 iptables · 回忆中的明天 sing-box rule-set · 回忆中的明天 Xcode 最全最实用的快捷键列表 · 回忆中的明天 SwiftUI 中的@State、@Bindable和@Binding · 回忆中的明天 免费的图床服务器-GitHub Pages · 回忆中的明天 A Free Native Image Uploading Tool for macOS · 回忆中的明天 免费的图床服务器-Cloudflare-R2 · 回忆中的明天 图传 (iUploader) - macOS 免费原生图床上传利器 · 回忆中的明天 本地无法加载托管到Cloudflare中的图片等资源,权限错误403 · 回忆中的明天 国内、外免费公共的DNS,支持的DoH,防止污染、篡改的问题 · 回忆中的明天 macOS 系统下载和安装 · 回忆中的明天 使用 CURL 命令调试和诊断网络问题,网站请求测速 · 回忆中的明天 WARP Beta for macOS 支持新协议 MASQUE · 回忆中的明天 2024年自用国外靠谱的 VPS 服务器推荐 · 回忆中的明天 使用 OpenCore,让你的旧 Mac 用上最新的 macOS 系统 · 回忆中的明天 给 Terminal 终端添加不一样的色彩,安装插件实现自动补全、高亮显示 · 回忆中的明天 玩转 Mac 截图,分享原生截图工具技巧,自定义截图名称和类型 · 回忆中的明天 美国 VPS 服务器,最低月费只要12元,优惠推荐 · 回忆中的明天 更新 idea 后不能打开文件夹文件,一直加载卡住假死状态 · 回忆中的明天 使用 certbot 申请 Let's Encrypt 免费证书,部署到 nginx 中,开启 https · 回忆中的明天 菲律宾 VPS 服务器,月均只要16.5元/月,优惠推荐 · 回忆中的明天 Mac launchctl 自定义服务启动 · 回忆中的明天 Mac 终端设置代理,设置一键开启和取消 · 回忆中的明天 Nginx 配置(Config)中遇到的错误(Error) · 回忆中的明天 香港 CN2 优化线路带宽低延迟 VPS 服务器推荐 · 回忆中的明天 菲律宾、马来西亚、泰国等多图 VPS 服务器便宜推荐 · 回忆中的明天 抗白之路-肺部感染发烧住院两个多月 · 回忆中的明天 12 个对新手最重要的 Linux 命令 · 回忆中的明天 第一次通过 SSH key 免密连接 GitHub 的完整过程 · 回忆中的明天 5 款适用于 Linux 的笔记应用 · 回忆中的明天 国内外免费公共 DNS 服务推荐 · 回忆中的明天 微软为 VS Code 推出 Markdown 语言服务器 · 回忆中的明天 抗白之路-每天在马桶上渡过,急性肠排…… · 回忆中的明天 抗白之路-舱内日常 · 回忆中的明天 抗白之路-移植用药 · 回忆中的明天 抗白之路-入舱 · 回忆中的明天 强!腾讯推出开源免费老照片修复工具! · 回忆中的明天 抗白之路-确诊 · 回忆中的明天 RIME 鼠须管输入法使用,免费开源还可以自定义词库 · 回忆中的明天 VIM 入门,学会必备的操作命令,模式选择、文本编辑 · 回忆中的明天 Spring Security 快速创建登录权限,安全管理资源权限 · 回忆中的明天 Spring 表单验证 Validating Form Input · 回忆中的明天 Spring 为 RESTful Web 服务启用跨域请求 · 回忆中的明天 快捷支付停车费,免去扫码操作,快捷指令快速支付 · 回忆中的明天 居家全屋无线 Wi-Fi 网络改造 · 回忆中的明天 Spring 调用 RESTful Web 服务 Hello World · 回忆中的明天 Spring 构建 RESTful Web 服务 Hello World · 回忆中的明天 使用 GitHub Actions 自动上传搜索记录到 Algolia · 回忆中的明天 Spring 文件上传,Uploading Files · 回忆中的明天 Spring 表单提交,Form Submission · 回忆中的明天 Spring 开篇,创建第一个 Web 项目 Hello World · 回忆中的明天 Elasticsearch, Kibana, Logstash, Filebeat 实现日志的自动采集、搜索和分析 · 回忆中的明天 Java 递归实例操作-查询层级菜单 · 回忆中的明天 Java JSON数据实战操作 · 回忆中的明天 MacOS 或 Linux 软件包管理器 Homebrew · 回忆中的明天 Java 正则表达式实例操作 · 回忆中的明天 简述 Cookie、Token、JWT、Session · 回忆中的明天 Java 方法代理实例操作,静态代理、JDK动态代理、CGLIB动态代理 · 回忆中的明天 Java 反射实例操作 · 回忆中的明天 Vercel 上自动部署你的个人博客 Hugo · 回忆中的明天 Java 中的重写(Override)与重载(Overload) · 回忆中的明天 免费申请 JetBrains 开源开发许可证,包含 IDEA · 回忆中的明天 重疾保险理赔的亲身经历,分享下流程和套路 · 回忆中的明天 Java 开发环境的搭建,开启你的编程之旅 · 回忆中的明天 HUGO 目录详解,创建自己的网站系统 · 回忆中的明天 了解 JS 的加载顺序和方式,实现 Ready 方法 · 回忆中的明天 免费创建属于自己的博客,Hugo+Github Pages · 回忆中的明天 Elastic Stack 实现日志的自动采集、搜索和分析 · 回忆中的明天 个人站长的加速器 - 百度云加速 · 回忆中的明天 Office 批量激活的命令工具 slmgr · 回忆中的明天 Office 批量激活的命令工具 ospp · 回忆中的明天 KMS 激活 Office 批量许可证密钥 KEY · 回忆中的明天 移植物抗宿主病详解 · 回忆中的明天 慢性髓系白血病(CML)的临床分期 · 回忆中的明天 急性髓系白血病(AML)的治疗 · 回忆中的明天 骨髓增生异常综合征(MDS)的病程与预后 · 回忆中的明天 急性白血病的临床表现 · 回忆中的明天 慢性粒单核细胞白血病(CMML) · 回忆中的明天 白血病的分类:髓系肿瘤和淋系肿瘤 · 回忆中的明天 mysql 使用 source/mysqldump 命令导入/导出文件信息 · 回忆中的明天 Docker 中运行 ElasticSearch 和 Kibana · 回忆中的明天 初识 Docker · 回忆中的明天 Mac 无密码 SSH 登录服务器 · 回忆中的明天 Spring Cloud Alibaba Nacos Discovery 实战 · 回忆中的明天
使用 Algolia 云引擎,实现个人博客 Hugo 本地智能搜索 · 回忆中的明天
2021-05-22 · via 回忆中的明天

原文:https://ichochy.com/posts/blog/20210522.html


一直想实现博客的本地搜索,没有找到好的实现方式。尝试了好几个方案,现在使用 Algolia 实现本地搜索。实现方式简单,每月可搜索 10000 次,可以一直白票下去

构建数据

1、 修改配置文件

修改 config.toml,配置生成 algolia.json 文件

[outputs]
  home = ["HTML","RSS","TXT","Algolia"]
  section = ["HTML"]
  taxonomy = ["HTML"]
  term = ["HTML"]

[outputFormats.Algolia]
  mediaType = "application/json"
  baseName = "algolia"
  isPlainText = true

2、 添加模版文件

创建文件/layouts/_default/list.algolia.json

[
  {{- range $index, $entry := .Site.RegularPages }}
  {{- if $index }}, {{ end }}
  {
    "objectID": {{ .File.TranslationBaseName }},
    "url": {{ .Permalink | jsonify }},
    "title": {{ .Title | jsonify }},
    "summary": {{ .Summary | jsonify }},
    "content": {{ .Plain | jsonify }},
    "pubDate": {{ .PublishDate | jsonify }}
  }
  {{- end }}
]

注:objectIDalgolia中的数据ID,可以用此ID进行CURD操作

3、生成数据文件

运行hugo,生成数据文件algolia.json

[
  {
    "objectID": 20210522,
    "url": "https://ichochy.com/posts/20210522/",
    "title": "使用 Algolia 云引擎,实现个人博客 Hugo 本地智能搜索",
    "summary": "现在使用 Algolia 实现本地搜索。实现方式简单,每月可搜索 10000 次,可以一直白票下去",
    "content": "一直想实现博客的本地搜索,没有找到好的实现方式。尝试了好几个方案,现在使用 Algolia 实现本地搜索。实现方式简单,每月可搜索 10000 次…… ",
    "pubDate": "2021-05-22T10:22:45+08:00"
  }, 
  {
    "objectID": 20210418,
    "url": "https://ichochy.com/posts/20210418/",
    "title": "Elasticsearch, Kibana, Logstash, Filebeat 实现日志的自动采集、搜索和分析",
    "summary": "实时地对数据进行搜索、分析和可视化",
    "content": "Elastic Stack 包括 Elasticsearch、Kibana、Beats 和 Logstash(也称为 ELK Stack)……  ",
    "pubDate": "2021-04-18T10:22:45+08:00"
  }, 
  ……
]

构建索引数据

1、创建Algolia帐号

官网注册:https://www.algolia.com/

2、创建应用程序

新建Application,选择免费套餐 16219128774477541

3、创建索引

新建Index,存储要在Algolia中进行搜索的数据 16219130104334762

4、导入记录

可以通过API推送数据或直接上传记录 16219133464252913 手动上传 16219136774163445

5、配置搜索属性

配置可搜索的属性,通过属性搜索数据 16219137764131626

6、配置自定义排名

选择排序属性,对搜索结果进行排序 16219138124139937

构建搜索页面

1、创建搜索页面

<h3>搜索</h3>
<div id="searchbox"></div>
<hr>
<div id="hits"></div>
<div id="pagination"></div>

2、引入主题样式

<!-- Include only the reset 基本样式-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/reset-min.css" integrity="sha256-t2ATOGCtAIZNnzER679jwcFcKYfLlw01gli6F6oszk8=" crossorigin="anonymous">
<!-- or include the full Satellite theme 主题样式-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/satellite-min.css" integrity="sha256-TehzF/2QvNKhGQrrNpoOb2Ck4iGZ1J/DI4pkd2oUsBc=" crossorigin="anonymous">

3、引入搜索引擎 API

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js" integrity="sha256-EXPXz4W6pQgfYY3yTpnDa3OH8/EPn16ciVsPQ/ypsjk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.production.min.js" integrity="sha256-LAGhRRdtVoD6RLo2qDQsU2mp+XVSciKRC8XPOBWmofM=" crossorigin="anonymous"></script>

4、编写搜索 JS

// 构建搜索客户端
const searchClient = algoliasearch('Application_ID', 'Search-Only_API_Key');
// 构建索引搜索
const search = instantsearch({
  indexName: 'Index_Name',
  searchClient,
});

//展示数据模版
var hitTemplate =
  '<article class="post">' +
  '<h2 class="post-title"><a href="{{url}}">{{{_highlightResult.title.value}}}</a></h2>' +
  '{{{_highlightResult.summary.value}}}' +
  '</article>';

//无数据模版
var noResultsTemplate =
  '<div class="text-center">没有找到 <strong>{{query}}</strong> 相关的结果</div>';

//配置添加小部件
search.addWidgets([
  instantsearch.widgets.searchBox({
    container: '#searchbox',
    placeholder: '请输入搜索内容……',
    autofocus: true,
  }),

  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      empty: noResultsTemplate,
      item: hitTemplate
    }
  }),
  instantsearch.widgets.pagination({
    container: '#pagination',
  })
]);

//启动搜索
search.start();

API Keys 16219162613538278

查看成果

https://ichochy.com/search.html 162191690433953810

引用