hexo站内搜索功能实现

本文介绍了如何在Hexo博客中实现站内搜索功能,包括在Swiftype注册并创建引擎,设置搜索字段,以及在Hexo主题中进行配置。详细步骤包括创建索引、获取内部代码、修改配置文件,最终实现在博客中展示搜索结果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

推荐文章:http://www.jerryfu.net
自己的个人博客:http://www.dongyj.xyz/
1.注册https://swiftype.com/
首先说明一下,注册需要企业邮箱,我是在腾讯注册了一个免费的企业邮箱。大家也可以尝试,别的都是收费的,也是找了很多才搞定。
注册后,需要在添加成员功能给自己添加一个邮箱。
然后就可以在sw注册了。
2.Create an engine
这里写图片描述
3.创建索引
这里写图片描述

4.输入网址
这里写图片描述
5.起名字
这里写图片描述

成功后就开始抓取数据,我这里刚开始出了点问题,强制创建,结果没有数据。所以这里必须4个选项全部成功才行。
6.数据抓取成功
这里写图片描述
这里写图片描述
7.安装配置
这里写图片描述
特别注意
内部的代码需要保存,后面用到。

### 添加GitHub搜索功能到基于Hexo的个人博客 为了向由Hexo驱动的个人博客添加GitHub搜索功能,可以采用集成第三方服务的方式实现这一目标。一种常见方法是利用GitHub API来获取仓库信息并将其展示在博客页面上。 #### 使用JavaScript调用GitHub API 通过编写自定义JavaScript脚本,在网页加载时自动请求特定用户的公共仓库列表,并显示于前端界面中。下面是一个简单的例子: ```javascript async function fetchRepos(username) { const response = await fetch(`https://api.github.com/users/${username}/repos`); const data = await response.json(); let repoListHtml = '<ul>'; for (const item of data) { repoListHtml += `<li><a href="${item.html_url}" target="_blank">${item.name}</a></li>`; } repoListHtml += '</ul>'; document.getElementById('github-repos').innerHTML = repoListHtml; } ``` 此代码片段会创建一个函数`fetchRepos()`接收用户名作为参数,随后发起HTTP GET请求至GitHub RESTful Web Service接口以检索该账户下的所有公开存储库。最后遍历返回的数据对象数组构建HTML无序列表结构用于呈现链接集合[^1]。 #### 将上述逻辑嵌入Hexo模板文件内 编辑主题目录下对应的布局文件(如layout/default.ejs),找到适当位置插入如下代码段以便渲染出包含GitHub项目的区域: ```html <div id="github-section"> <h2>My GitHub Repositories</h2> <div id="github-repos"></div> <!-- 调用之前定义好的JS函数 --> <script type="text/javascript">fetchRepos('your-github-username');</script> </div> ``` 注意替换 `'your-github-username'` 成实际使用的GitHub账号名称即可完成初步配置工作[^2]。 对于更高级的需求比如支持关键词过滤等功能,则可能涉及到引入额外插件或框架辅助开发;此外还需考虑跨域资源共享(CORS)策略的影响以及API速率限制等问题[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值