找英文例句？ELT search肯定够了！剑桥牛津朗文麦克米伦韦氏高阶都有了~

mikeee · 发表于 2021-10-30 23:35:00

本帖最后由 mikeee 于 2021-10-31 09:23 编辑

牛江浦发表于 2021-10-28 15:286 B/ i3 ]+ r0 P0 D6 J
你好，搜索结果中左侧的分红框是比较碍眼，是开源软件本身设定的，我不太懂前端，所以暂时没找到修改的方 ...

我搓了个 vue2 搜索模板 https://github.com/ffreemt/meilisearch-plaintext。计算机里装了 node 的话（需要用到 npm 或 yarn装包）照读我文件里的步骤就可以设置好。有什么问题可跟帖，我尽量解答——我也不是折腾前端的。

mikeee · 发表于 2021-10-31 11:10:51

mikeee 发表于 2021-10-30 23:358 [; Y) {5 N8 K/ G$ r
我搓了个 vue2 搜索模板 https://github.com/ffreemt/meilisearch-plaintext。计算机里装了 node 的话（ ...

加了一个纯 js 版，无需node环境。只需两个文件（index.html 和 app.js, 其实可以整成一个文件）。参看https://github.com/ffreemt/meilisearch-plaintext读我文件的最后一条。

index.html

<!DOCTYPE html>
/ S0 c7 z Y5 m& Y
<html lang="en">% u9 {. |% f2 K+ s) O% _5 L$ e
<head>
# ]; S9 d: m2 d1 m5 c3 ~1 n
<meta charset="utf-8" />
n O# e# j! L% o1 S( d6 o. L! z
</head>
- I/ G' d' s0 z& S% ?9 t$ u
/ q0 a) n5 e" R% D3 P2 D
<body>
4 J, L' Y! |' t/ b0 f# N! \4 p
<div>
: q9 G# d: ?- q/ m r6 p3 L
<div id="searchbox"></div>
5 C* y6 ]9 z) [. h$ u' Q0 j
<div id="hits"></div>
) u# j' M, N0 ]. ?% u& P# N2 L
</div>
" } e) l) ~# S V3 F; F, x9 G0 T
<script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>% T' N) p% E5 Z: [' [
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>. ]' S- t# }) b7 T
<script src="./app.js"></script>
7 o6 W6 B; J4 f$ S `- G
</body>
) }3 F, r# N4 e$ ^! _& v
</html>

复制代码

app.js

const search = instantsearch({5 E& G4 c% m% b" j1 l
// indexName: 'steam-video-games',
1 J, T a _, M) A5 e5 ~: y( F
indexName: 'movies',
0 ]% Q6 l6 B0 b( Z% m
searchClient: instantMeiliSearch(
( B: G! r+ B9 T3 c- S: ^6 v- {
// 'https://demos.meilisearch.com',. a6 o, r* B4 Z0 Y7 V8 _$ ]; M
'http://acone3:7700',2 h( j: T, \4 p S
'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25'
; P$ `+ c2 J) C# ?6 c
),
9 U. Q% C# x" `+ A
})
: L! [" v- {- ]* k) j9 M I& O
# l9 o2 |- o1 c! L f
search.addWidgets([
) z7 ?! E, G/ n9 B1 p
instantsearch.widgets.searchBox({; c. n1 p' Y8 y/ s. Q* I" g
container: '#searchbox',
% F; B9 [7 U {* x6 x0 T+ I
}),
3 ]; s; U1 o6 O$ z
instantsearch.widgets.hits({
8 K4 B5 j9 |4 n! \+ S7 P# W
container: '#hits',
5 @4 t7 Z3 G, b' H' k. |5 J; a
templates: {) L- E2 K% v0 A, s% Q* G# d
item: `- Z7 R- L: W0 p0 b- F! x
<div>
# A; z0 k' d& p- C
<div class="hit-name">5 u- r0 K2 `" j! M, r
1 u% G4 ?7 i9 {6 T8 m5 B
{{#helpers.highlight}}{ "attribute": "overview" }{{/helpers.highlight}}
5 Q7 D' C: \0 D# g; u
({{#helpers.highlight}}{ "attribute": "id" }{{/helpers.highlight}})
2 T! w8 X& i+ s; X' H
</div>! B3 M, W) }) R7 K0 W
</div>
9 ~- a8 T7 }0 O4 g0 O
`,
6 U {+ q1 u' R0 h. i6 }
},9 `" K# G7 B( \# O7 x3 S4 J
}),) c) D( p' O1 \- T3 }
])
; ^8 J0 @ W; P3 g: \! {; ?
/ F m+ y- ~7 r& x1 O1 E4 f" E9 @
search.start()

复制代码

搜索界面简陋一点

		自动登录	找回密码
密码			免费注册

[学习讨论] 找英文例句？ELT search肯定够了！剑桥牛津朗文麦克米伦韦氏高阶都有了~