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

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

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

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

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

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

mikeee 发表于 2021-10-30 23:35
8 @# i' r( N( _我搓了个 vue2 搜索模板 https://github.com/ffreemt/meilisearch-plaintext。计算机里装了 node 的话（ ...

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

index.html

<!DOCTYPE html>% z4 U3 P" x- l C
<html lang="en">! F' a3 R: T( m+ ?* Q
<head>4 T& u# X/ r; D6 A) z
<meta charset="utf-8" />
c- i0 U. H9 S$ g
</head>, Z* z4 |: e" A/ D+ S/ K1 }0 _: Z
$ M! {, w, l- B- s! S0 `/ u0 ~8 q
<body>
' B E+ ]) C3 d' u0 ~( o( q
<div>3 t7 ?, @6 K6 @8 }1 E
<div id="searchbox"></div>0 L5 D+ Z0 s) @" T1 y2 T' }: U
<div id="hits"></div>7 Y- J# }, m8 d" Y) ~! G% F
</div>
+ K6 Q. T2 M" T. J. t- C& b# n6 r
& _5 C& H$ i. p3 ]* |; F
<script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>4 V& C; O6 m$ q( [. T5 _
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script># b1 o+ `% U4 b4 I- q, I
<script src="./app.js"></script>& l* [6 S1 K! d" \ A2 D; _
</body>
M( A, {& O) @
</html>

复制代码

app.js

const search = instantsearch({
7 Z/ }1 y) j6 q% z5 s* b
// indexName: 'steam-video-games',
* ~ A$ g6 [0 C" D* e" s5 a! J/ n
indexName: 'movies',
8 M# ?/ \3 N V2 L6 d/ w! c% ^: w
searchClient: instantMeiliSearch(
6 g; m3 s* _2 T7 Z
// 'https://demos.meilisearch.com',
2 c$ _, J3 T. p. {& z/ \
'http://acone3:7700',+ M% ^0 B) k2 `* D- @" j7 ]' l; g3 s
'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25'& K1 p8 I/ L$ ]
),4 }% y, {( u4 }" ~, E' V
})
( t7 C6 ~8 ]7 U0 j- Z7 v- ~
# D; T- X6 t$ f! |6 O3 Y; n
search.addWidgets([
9 u. |- }3 b. V' ?
instantsearch.widgets.searchBox({4 i' N/ b' m3 t) d
container: '#searchbox',7 M5 y: M6 U S( d) ~6 V# O8 ?8 R4 y
}),
4 C5 r5 F3 J2 Y* J; b: E8 Q
instantsearch.widgets.hits({
$ u, H6 c# T1 F; ]) p; q( v8 y) Y
container: '#hits',
6 A& x5 X$ t: W% {) z% p! k# s
templates: {0 {3 w3 Q% f/ ]2 n& l6 B
item: `
* I+ U; n* }7 \ I' I& ]' h
<div>
<div class="hit-name">5 `8 N/ \# \6 q; n) i/ F* j$ H9 n9 u4 b
; j1 a( N( R7 i1 z
{{#helpers.highlight}}{ "attribute": "overview" }{{/helpers.highlight}}
3 I9 r8 D7 Q0 X9 b; D; `& Z9 B
({{#helpers.highlight}}{ "attribute": "id" }{{/helpers.highlight}})
5 G* u3 j4 I+ U0 D$ h% @9 z u
</div>0 v$ h. @; j$ }) q f4 n
</div>
8 v- j/ M4 p, Y1 c1 h( Z
`,
- U9 b. y) j4 Q7 ~) i
},; ~0 z( a W! A7 ^
}),
. L: g1 u7 V5 M- g3 h
])$ k- [" U* _/ H6 E
- A" {1 W& r0 u5 K8 c K9 t
search.start()

复制代码

搜索界面简陋一点

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

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