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

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

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

牛江浦发表于 2021-10-28 15:28* Z3 Y; P1 e# J. J, Q: ?
你好，搜索结果中左侧的分红框是比较碍眼，是开源软件本身设定的，我不太懂前端，所以暂时没找到修改的方 ...

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

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

mikeee 发表于 2021-10-30 23:35! B$ F" B9 y% U e8 D
我搓了个 vue2 搜索模板 https://github.com/ffreemt/meilisearch-plaintext。计算机里装了 node 的话（ ...

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

index.html

<!DOCTYPE html>
" T6 Q! W% L4 O- w
<html lang="en">4 @" [5 `' t v& S0 j; Z
<head>9 V# y* _4 o# O6 v( A' O, I
<meta charset="utf-8" />% a7 S9 a5 G/ C$ q2 C. w, u
</head>
4 Y5 r) {1 o. X0 G
+ U1 ]4 l& G: n2 a0 M9 H+ P5 V
<body>% r: f& r4 u6 S% m- _. w# L3 G
<div>1 S9 s6 @+ G- q3 ~9 A6 \1 i, x
<div id="searchbox"></div>8 k0 x( X1 z2 t) a. b
<div id="hits"></div>
. Z I6 E! M5 {. }
</div>1 x2 B& `* ?* d8 X7 C% P
5 S6 V7 q' x V3 K
<script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
$ f( v( u3 {3 W) D3 |/ V9 L
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
0 Q) y/ i0 {' ?; w# v, Z* z
<script src="./app.js"></script>
, E: N& f% }: t+ U1 y' u* l
</body>4 L7 Z5 r% ~3 ]: W& p
</html>

复制代码

app.js

const search = instantsearch({
. L o: T4 n9 m# g* U. s+ I* ` Z
// indexName: 'steam-video-games',$ \. Y6 ~5 z$ w0 o
indexName: 'movies',
. K9 e! b8 K4 L, X0 b8 g, ~0 m0 M& S
searchClient: instantMeiliSearch(
. R7 J6 h6 O# T5 \5 M1 F, x
// 'https://demos.meilisearch.com',
3 b: x8 _# E$ N+ U) K+ ]& [
'http://acone3:7700',
: a( {5 J3 n3 K6 r' M9 k0 G" @
'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25'
2 [6 e8 H: n$ b( I
),4 q- g1 r# E# t/ c5 u/ `' X( S
})
" ]5 Y7 V1 e) Q% \
0 Q# {6 D g7 S4 \+ ~4 [
search.addWidgets([
5 E; b$ p2 A# l9 _7 p6 k
instantsearch.widgets.searchBox({, S, _) `) |- H c, G7 P2 ?
container: '#searchbox',, v( e3 [$ q9 O. ?+ j5 p; U
}),9 n) h; `2 e6 b5 |3 J8 I6 a5 x
instantsearch.widgets.hits({! g; a2 v9 y, A. t8 e( v
container: '#hits',
. O9 N( g1 |& A6 k: Z J, |; O
templates: {
7 M% b6 @. s. U; E; r: J
item: `
& I! j) Z: Y' m! W
<div>
5 E4 ^% \) s+ `5 {( b7 X
<div class="hit-name">
7 d9 I, ]2 }! n& E5 W
! K! ?2 Q0 [0 H5 E4 ]% t3 r% n4 b
{{#helpers.highlight}}{ "attribute": "overview" }{{/helpers.highlight}}" a. M2 [# j. B+ H2 v+ d
({{#helpers.highlight}}{ "attribute": "id" }{{/helpers.highlight}})
6 t5 v" Y8 G4 m
</div>& B: ]: _* R" ~! Q! E$ {$ X
</div>& B! U1 p; {4 `9 x
`,: J8 q% H3 A8 S# j% Q% A7 M
},$ M2 A U5 n* _' Q, ^6 D6 Z
}),
3 Z$ \( j1 r# x+ o; B' Q$ X
])
) v) u5 N( w0 A
3 T- Q9 |0 l8 `( T8 q L! `% E6 A# K
search.start()

复制代码

搜索界面简陋一点

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

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