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

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

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

牛江浦发表于 2021-10-28 15:28
3 v1 ~( V a7 S7 |3 G你好，搜索结果中左侧的分红框是比较碍眼，是开源软件本身设定的，我不太懂前端，所以暂时没找到修改的方 ...

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

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

mikeee 发表于 2021-10-30 23:35
5 i# V M3 T! _- ]我搓了个 vue2 搜索模板 https://github.com/ffreemt/meilisearch-plaintext。计算机里装了 node 的话（ ...

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

index.html

<!DOCTYPE html>3 H# ~- W: x( s8 P4 r7 _6 x2 d
<html lang="en">
9 C, b7 ?& ]4 d
<head>, D4 d. A9 P8 i- S4 P8 X- m" @1 ~
<meta charset="utf-8" />
6 g% {; Y( j* p9 r w: w/ D
</head>
" D0 k. T6 | B7 q. ~! N
% u, a7 j2 w& Z' n9 s: |7 g
<body>* H$ C' a! Y' }+ n6 @
<div>: u$ l ]2 z! ~! [: n
<div id="searchbox"></div>( t1 J8 |- W4 ?3 I+ E
<div id="hits"></div>9 Q ~' X3 l5 j2 f$ b+ q1 J+ F3 x
</div>/ u6 E6 ~- X! z% e
2 s3 K% J6 |/ \3 O6 X# s0 N0 A
<script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
" q0 H, I$ N9 h
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>, ]- H4 b* r. B9 b
<script src="./app.js"></script> b9 e8 c3 W# _6 k S
</body>
- u- o4 |/ d# S% @/ J; c9 |( r8 d
</html>

复制代码

app.js

const search = instantsearch({
" Z" c7 ^. g1 |+ S. ~
// indexName: 'steam-video-games',) b5 W; G# v7 F( o2 i
indexName: 'movies',
9 N. I1 g0 P: k
searchClient: instantMeiliSearch(
6 v1 b* u/ q; f/ R- V( {1 Z
// 'https://demos.meilisearch.com',
: z v& q0 Z' l8 y1 U- Q* s
'http://acone3:7700',7 n V! A0 Y) D c
'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25'' c5 R+ x; S5 q4 [1 M6 B7 _
),3 K b; O4 }9 u( x
})
2 R$ j2 C& W0 y+ I1 R* c ^" K
" h9 _# N; z4 s) \6 w3 g- m
search.addWidgets([
) @8 d) t1 s3 H: v3 a* {
instantsearch.widgets.searchBox({( I) ~0 r1 Z: }" `7 o
container: '#searchbox',3 l* [; V; N: B0 I% k/ O
}),
6 u+ q0 z& u& v1 g, V
instantsearch.widgets.hits({! N% a. [; k+ U* ]0 z
container: '#hits',+ e6 f4 e! o! x( P
templates: {
d& u0 ]8 Y- }8 M
item: `
' s0 o5 M4 Y7 H6 T% a2 F
<div>( u& i' e) L+ ]* f& r1 o9 R8 J
<div class="hit-name">7 v/ j v1 w% ? T7 ^' c- ~! o
7 k3 K5 y1 ]1 t4 i) U
{{#helpers.highlight}}{ "attribute": "overview" }{{/helpers.highlight}}7 o4 f" J3 U- n
({{#helpers.highlight}}{ "attribute": "id" }{{/helpers.highlight}})4 S- D$ y/ G7 N1 d
</div>, v1 P, ?5 e5 L" @5 {# C
</div>
& E0 R9 i) H& E% w9 g" F
`,
/ d7 p. ?* z9 I8 k
},2 B3 w. ?& }5 P7 [. F% z# |- s
}),+ b" [- S0 i, t/ {5 B: }
])
- K' W9 \6 B1 r& b$ b7 F
0 ]( p4 M8 K. w& f9 \
search.start()

复制代码

搜索界面简陋一点

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

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