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

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

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

牛江浦发表于 2021-10-28 15:28, Z- k7 C; t# L1 h: ^
你好，搜索结果中左侧的分红框是比较碍眼，是开源软件本身设定的，我不太懂前端，所以暂时没找到修改的方 ...

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

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

mikeee 发表于 2021-10-30 23:355 Y2 r3 U4 z& C" c( A7 z* M* ]
我搓了个 vue2 搜索模板 https://github.com/ffreemt/meilisearch-plaintext。计算机里装了 node 的话（ ...

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

index.html

<!DOCTYPE html>+ i0 g s x7 p. c% _
<html lang="en">& `. b& s8 O0 p, F8 P/ Z8 J5 k
<head>5 u: N- O1 \9 ]4 J
<meta charset="utf-8" />
: c# d2 m6 r! D1 ~: j
</head>
! y4 V& B; M# [% \
3 Z8 z# z3 z3 o6 s+ ?! ?, J" B
<body>+ G1 Y- S4 |4 L. K5 w
<div>- K$ x0 g4 j; t. D
<div id="searchbox"></div>* z& L! V3 X+ d# o: r
<div id="hits"></div>7 [9 {6 c. g' e3 u7 p n
</div>3 C# y1 l& y% v3 T$ a$ B3 ?
- `" C' E$ Y8 A! n3 X# v
<script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
4 ^4 N0 `3 X2 M. X/ L* Y
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>9 z( T# X* M# f0 W" Z
<script src="./app.js"></script>
: k" }+ X6 k& W' [7 ?( z7 l
</body>
# ?; o# {# S" g% I; w2 g# D2 g3 z% h
</html>

复制代码

app.js

const search = instantsearch({+ `; x6 k; U/ L8 X
// indexName: 'steam-video-games'," e2 G3 G6 z( y4 ?; c; `
indexName: 'movies',+ X3 p2 {' o1 Z. v1 r) J
searchClient: instantMeiliSearch( |9 R6 P0 I: N y, W
// 'https://demos.meilisearch.com',0 q O) u9 h$ |5 i- v
'http://acone3:7700',
7 Z# l& V' d; Y. e5 |
'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25'
E) k% F/ F5 }
),4 H q5 j, d5 p
})
: Z! r& _# c& R5 a4 q
! b* t+ `' z# I, [' {% |2 R* n' X
search.addWidgets([. V9 D' F' O* Q0 S7 D% P- ~ Q
instantsearch.widgets.searchBox({, u" Z7 d# i! \' G
container: '#searchbox',8 |! m: c+ ]' l7 Z
}),
2 Y* w& G4 \; @: y8 E2 m
instantsearch.widgets.hits({
) W& s3 c+ ^) `0 J2 G, H
container: '#hits',& {# \! w* y5 ~8 z0 z v
templates: {
* }( w7 x3 p( M' f
item: `( _- J x. S5 @1 r5 X
<div>
: E, [% G4 r: ^5 t+ f' m# D
<div class="hit-name">
+ p7 [; ?( s2 v9 ^2 z
7 v7 l) n- L, ?
{{#helpers.highlight}}{ "attribute": "overview" }{{/helpers.highlight}}/ U3 C- I6 [' C7 E! Z" W1 z* D: \
({{#helpers.highlight}}{ "attribute": "id" }{{/helpers.highlight}})# F! X% V/ S8 X) [, o1 Q
</div>
! ]7 O7 ^. }0 [$ z7 o
</div>
% j7 p/ d4 \9 W' |/ C
`,
) `3 a( l2 F" ?) E) g4 j9 y
},& \3 E/ e# v; }
}),
. o" ^1 w9 V; o
])
& t% A5 L" d- n
) w8 W% T9 z- b* l0 x" l& l
search.start()

复制代码

搜索界面简陋一点

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

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