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

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

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

牛江浦发表于 2021-10-28 15:288 _! c9 U2 U+ g, m0 M
你好，搜索结果中左侧的分红框是比较碍眼，是开源软件本身设定的，我不太懂前端，所以暂时没找到修改的方 ...

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

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

mikeee 发表于 2021-10-30 23:358 E( J; m* ]9 r- g1 g: p2 A
我搓了个 vue2 搜索模板 https://github.com/ffreemt/meilisearch-plaintext。计算机里装了 node 的话（ ...

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

index.html

<!DOCTYPE html>1 K: P: ~& v( w4 _" M
<html lang="en">* Y7 K( l( o* }: J. Y r! c% W
<head>- S. I% b( G/ H0 K# ~
<meta charset="utf-8" />
</head>
! m, }+ ]" M4 R5 I4 B6 y
; |. n) \ V; v; N
<body>
) \! a* e3 [: `4 M3 F7 w$ ?5 s& ]7 ?& i
<div>
4 o1 ~3 ~% L2 Y' T
<div id="searchbox"></div>7 F( Z* _5 R+ d9 z m+ `$ e
<div id="hits"></div>% E: d9 m5 o. b% v, c6 T1 g
</div>1 {3 F$ c' j5 ^3 l
1 a6 w8 k% x7 y& {7 c& S
<script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
" }( M9 J: n7 k2 ?. v* c2 ^% P/ X
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
+ y7 B- a) u. X
<script src="./app.js"></script>
o+ V$ n0 w5 l) U4 W
</body>) G( M4 F- U$ B% l2 h/ [
</html>

复制代码

app.js

const search = instantsearch({
@; w. e. ^8 e7 U( }
// indexName: 'steam-video-games',
' o- g7 W/ d: w+ Q8 q s4 G. [
indexName: 'movies',7 O, ^% ^ V r: }% y3 n; z! Q
searchClient: instantMeiliSearch( ~3 b1 W0 @4 x8 Y4 B
// 'https://demos.meilisearch.com',
0 D2 h+ g" b) J! c
'http://acone3:7700',1 U; u7 r- D! m0 H: N
'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25'+ e2 k, _- W# ~: G
),8 B' q4 o B. `6 G
}); t5 W/ _* Z) x/ e& Q8 o
* |/ L9 g" ]# t- Q4 |0 m; {* k
search.addWidgets([ A" s. e% o+ a5 G4 k' y5 Y* S
instantsearch.widgets.searchBox({
: j# v( x" u/ |7 N8 F& r
container: '#searchbox',! x- l$ Y& }3 z% b% e% w: O
}),5 g1 d$ j4 I* N
instantsearch.widgets.hits({
* c" t( T# F+ m, B1 g9 B
container: '#hits',
' Q1 u% F" r! `9 g0 V' Y
templates: {" v& Q) ?- v7 {1 h" ]) V
item: `
. S) H6 T7 A! @" Q
<div>$ ]1 W+ y) P1 x6 i
<div class="hit-name">
- U; y7 D3 Z9 L4 ~% o! _
5 b: a6 ~* ^5 l; T5 G
{{#helpers.highlight}}{ "attribute": "overview" }{{/helpers.highlight}}/ G% a2 ^& j9 Z( h( D: y% M
({{#helpers.highlight}}{ "attribute": "id" }{{/helpers.highlight}})
5 V) s& v9 v1 M8 Y! L
</div>
; {7 e2 X" K0 y+ _: E6 S
</div>
- |0 v/ ]9 `, {8 S, z3 |( Z
`,: N# _+ b0 q, j# L$ l
},
: C4 c% @" u+ F5 R' P- Z9 z
}),2 U/ {1 i! t' d6 r1 [2 A7 q
])
* n( W- f3 Z- |; f; R
) X" s! N& c, `8 x* P
search.start()

复制代码

搜索界面简陋一点

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

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