牛江浦 发表于 2021-10-28 15:28
你好，搜索结果中左侧的分红框是比较碍眼，是开源软件本身设定的，我不太懂前端，所以暂时没找到修改的方 ...
我搓了个 vue2 搜索模板 https://github.com/ffreemt/meilisearch-plaintext。计算机里装了 node 的话（需要用到 npm 或 yarn装包）照读我文件里的步骤就可以设置好。有什么问题可跟帖，我尽量解答——我也不是折腾前端的。 mikeee 发表于 2021-10-30 23:35
我搓了个 vue2 搜索模板 https://github.com/ffreemt/meilisearch-plaintext。计算机里装了 node 的话（ ...
加了一个纯 js 版，无需node环境。只需两个文件（index.html 和 app.js, 其实可以整成一个文件）。参看https://github.com/ffreemt/meilisearch-plaintext读我文件的最后一条。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<div>
<div id="searchbox"></div>
<div id="hits"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
<script src="./app.js"></script>
</body>
</html>
app.js
const search = instantsearch({
// indexName: 'steam-video-games',
indexName: 'movies',
searchClient: instantMeiliSearch(
// 'https://demos.meilisearch.com',
'http://acone3:7700',
'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25'
),
})
search.addWidgets([
instantsearch.widgets.searchBox({
container: '#searchbox',
}),
instantsearch.widgets.hits({
container: '#hits',
templates: {
item: `
<div>
<div class="hit-name">
<!--{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}-->
{{#helpers.highlight}}{ "attribute": "overview" }{{/helpers.highlight}}
({{#helpers.highlight}}{ "attribute": "id" }{{/helpers.highlight}})
</div>
</div>
`,
},
}),
])
search.start()
搜索界面简陋一点
https://github.com/ffreemt/meilisearch-plaintext/raw/master/img/demo2.png
页:
1
[2]