原文链接: 基于 Hexo 键入搜索功能
创新互联主要从事网站制作、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务保定,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
本站基于
Hexo
搭建,用的 ???? hexo-theme-butterfly 主题 v3.7.1,请注意最新的???? hexo-theme-butterfly 版本已经更新到 v4.2.2 。
如果你是 v3.7.1 之外的版本,可能有些地方会有出入,请留意。
注意:我的博客根目录路径为 【G:/hexo-blog/blog-demo】,下文所说的根目录都是此路径,将用
[BlogRoot]
代替。如果不清楚根目录路径,请回到教程 基于 Hexo 从零开始搭建个人博客(二),查看你执行hexo init xxx
这条命令时所选择的路径,例如我选择的路径是【G:/hexo-blog】,我的博客根目录即为【G:/hexo-blog/xxx】。
修改站点配置文件_config.yml
,路径为【BlogRoot/_config.yml】。
修改主题配置文件_config.butterfly.yml
,路径为【BlogRoot/_config.butterfly.yml】。
步骤如下:
npm install hexo-generator-search --save
。npm install hexo-generator-search --save
_config.yml
,添加如下代码:search:
path: search.xml
field: post
content: true
template: ./search.xml
_config.butterfly.yml
中修改以下内容:local_search:
- enable: false
+ enable: true
hexo cl && hexo generate
hexo s -p 8000
详情可参考 hexo-generator-search
关于 Algolia 搜索功能,这里有两种插件,一个是 hexo-algolia ,一个是 hexo-algoliasearch。第一种亲测只能对匹配文章title,不能匹配文章内容查询到结果,所以推荐第二种。下面分别对这两种插件做不同的说明。
注册 Algolia。
进入官网地址 注册,也可以直接用Github
授权登录。
新建 Index。
创建拥有一定权限的api key
(如果选择第二种插件,可忽略这一步)。
进入【Settings > API Keys】。
进入【All API Keys > API Keys】,点击【New API Key】。在ACL里面增加删除和新增Object的权限(按理说只用这两个权限就行,下图中我多加了几个),然后填上 indices 栏目中的 index name ,选刚才你创建的那个index,其余默认就行。
点击【Create】,这样就得到了一个 api key。注意一下,这个key将会在下面的步骤中用到。
npm install hexo-algoliasearch --save
。npm install hexo-algoliasearch --save
_config.yml
,添加如下代码:algolia:
applicationID: ''
apiKey: ''
indexName: ''
algolia:
appId: "your applicationID"
apiKey: "your Search-Only API Key"
adminApiKey: "your Admin API Key"
chunkSize: 5000
indexName: "your indexName"
fields:
- content:strip:truncate,0,500
- excerpt:strip
- gallery
- permalink
- photos
- slug
- tags
- title
【applicationID】填入图中位置的 Applicaiton ID,【apiKey】填入图中位置的 Search-Only API Key ,【Admin API Key】填入图中位置的 Admin API Key ,【indexName】填入前面创建的索引名称。
3. 执行hexo algolia
。
前往博客根目录,打开cmd命令窗口执行hexo algolia
。
hexo algolia
到如下信息,证明成功了,可以去 Algolia 网站上查看,索引已经上传成功了。
INFO 128 files generated in 2.33 s
INFO Clearing index on Algolia...
INFO Index cleared.
INFO Indexing posts on Algolia...
INFO 65 posts indexed.
_config.butterfly.yml
中修改以下内容:algolia_search:
enable: true
hits:
per_page: 10
labels:
input_placeholder: Search for Posts
hits_empty: "我们没有找到任何搜索结果: ${query}"
hits_stats: "找到${hits}条结果(用时${time} ms)"
hexo cl && hexo generate
hexo s -p 8000
npm install hexo-algolia --save
。npm install hexo-algolia --save
_config.yml
,添加如下代码:algolia:
applicationID: 'your applicationID'
apiKey: 'your Search-Only API Key'
indexName: 'your indexName'
【applicationID】填入图中位置的 Applicaiton ID,【apiKey】填入图中位置的 Search-Only API Key,
【indexName】填入前面创建的索引名称。
3. 上传数据到 Algolia。
前往博客根目录,打开Git
,依次执行如下命令:
【your apiKey】替换为刚才自己创建拥有权限的api key
。
export HEXO_ALGOLIA_INDEXING_KEY=your apiKey
hexo algolia
到如下信息,证明成功了,可以去 Algolia 网站上查看,索引已经上传成功了。
INFO [hexo-algolia] Testing HEXO_ALGOLIA_INDEXING_KEY permissions.
INFO Start processing
INFO [hexo-algolia] 7 records to index (post, page).
INFO [hexo-algolia] Indexing chunk 1 of 1 (7 records)
INFO [hexo-algolia] Indexing done.
_config.butterfly.yml
中修改以下内容:algolia_search:
enable: true
hits:
per_page: 10
labels:
input_placeholder: Search for Posts
hits_empty: "我们没有找到任何搜索结果: ${query}"
hits_stats: "找到${hits}条结果(用时${time} ms)"
hexo cl && hexo generate
hexo s -p 8000
网站题目:基于 Hexo 键入搜索功能
当前URL:https://www.cdcxhl.com/article28/dsojsjp.html
成都网站建设公司_创新互联,为您提供响应式网站、标签优化、ChatGPT、网站设计公司、外贸建站、动态网站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联