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

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

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

牛江浦发表于 2021-10-28 15:28
+ z% _4 J. |( ]4 n: p* y5 j你好，搜索结果中左侧的分红框是比较碍眼，是开源软件本身设定的，我不太懂前端，所以暂时没找到修改的方 ...

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

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

mikeee 发表于 2021-10-30 23:35
$ a9 ]- Z& o/ L/ 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>9 }4 A& K- v+ I
<html lang="en">9 U0 K) o+ k3 @. F4 u3 G- V. C# h6 _
<head>
, M9 Y. u* v8 ?8 G
<meta charset="utf-8" />( f N1 ~; s# q& j" Z# \9 F, [
</head>; g- w9 ]! j4 F, G( _- N+ S
) }) d/ ~4 I: X- x f( t
<body>- c6 e4 d' m3 I0 M+ J" h. B
<div>
- c3 F w8 T# W6 t
<div id="searchbox"></div>, a! E" l3 \4 X3 ~
<div id="hits"></div>/ a8 i3 X$ [: D6 ]" x9 }+ ]
</div>, A: W% m5 b1 _& t6 n1 L7 ?/ ^
/ x! a) w8 x* i7 V3 d V( h
<script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
9 g# L+ E( q) |% B" ~3 u
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>; o6 P, f# A' I: A
<script src="./app.js"></script>
* W+ w6 Q. p1 y1 P# l
</body>
) z/ d7 `- ]& s- t7 i6 x/ I7 `9 P
</html>

复制代码

app.js

const search = instantsearch({+ D9 M* k; f0 |! D) k8 i+ r% S- d
// indexName: 'steam-video-games',
0 Q% v; D0 n# K, V, a
indexName: 'movies',, H7 P0 A1 X4 I( o, U4 y
searchClient: instantMeiliSearch(3 M2 @- K5 g4 k8 W# \0 X
// 'https://demos.meilisearch.com',3 j/ ^/ u% m# U8 w% [. U
'http://acone3:7700',7 h% \% x( v+ x, G0 v7 W. J
'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25'/ J: [: }# a6 f
),
: q4 N0 v1 X8 a( a( M- d( O* r
})
) z, q# m+ d. g6 F! ?0 g# I5 h M
2 h p$ D1 X; X
search.addWidgets([3 l e& W1 J5 v4 g- z
instantsearch.widgets.searchBox({5 |1 i8 w, B) S h2 { l* V
container: '#searchbox',( C, \+ T w$ r4 [
}),5 i7 U/ E s; K8 A0 ^, L; d
instantsearch.widgets.hits({
8 [( g# y& C0 l9 W2 Y+ u
container: '#hits',
. Z! p1 e! d) t3 M2 R' n: A7 J
templates: {
5 i" d/ B8 U+ _
item: `: f4 `8 O" I* M" K3 c. W
<div>
, k' H d3 _2 c! }, t6 l
<div class="hit-name"> M5 C" `* U' `
3 f4 L( u1 k. p# Q+ d/ W6 m
{{#helpers.highlight}}{ "attribute": "overview" }{{/helpers.highlight}}
5 _" z7 S, n( h j
({{#helpers.highlight}}{ "attribute": "id" }{{/helpers.highlight}})
5 ?# d* Q# Y( E9 k# B t9 o4 V. g
</div>
; u! x3 a/ c8 T- k
</div> u9 P2 j9 m& h9 N! s
`,+ U" n/ e% |3 o
},
3 x6 O' K# [9 b) ~, F& F5 B) ~& B+ w
}),- q( v! q5 z8 @% h7 C$ E& R
])
* j- a" D1 ^3 |6 G3 f1 X8 J" ]1 F/ T
9 ^9 b: f0 ~: A8 z
search.start()

复制代码

搜索界面简陋一点

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

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