TA的每日心情 | 开心 2019-8-21 08:44 |
|---|
签到天数: 163 天 [LV.7]常住居民III
|
发表于 2021-10-31 11:10:51
|
显示全部楼层
mikeee 发表于 2021-10-30 23:35
. ~' p& ]4 S( d0 i# }, t我搓了个 vue2 搜索模板 https://github.com/ffreemt/meilisearch-plaintext。计算机里装了 node 的话( ... " \9 |4 \6 f$ n H
加了一个纯 js 版,无需node环境。只需两个文件(index.html 和 app.js, 其实可以整成一个文件)。参看https://github.com/ffreemt/meilisearch-plaintext读我文件的最后一条。4 m( O& N' `+ b j% P+ W& W3 s
' W. g) k8 ~9 tindex.html
. ?, M7 P3 m9 e, s( j% r- <!DOCTYPE html>( f' P5 m/ @6 f6 j( `
- <html lang="en">& F. }2 H M( q7 [% P
- <head>
6 Y% _$ Y% }! e. x9 d* l( L; j - <meta charset="utf-8" />
1 q& @4 _. a6 k F% W" ^) J9 y - </head>
( P/ Y% Z3 i$ |4 Q6 b m' O
& a1 Z& v& K9 A- <body>/ |2 i2 h* ^) g4 \
- <div># x# O r @* N7 m- }
- <div id="searchbox"></div>
) f0 r5 k J- { - <div id="hits"></div>8 X% P% r# b) {6 `0 \
- </div>" z; Q, e* ]: C' n
* J% c- D0 F' v- <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>) b p' w* \) \" p. i1 u
- <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>! Q4 B3 j' }: ~" R' k2 A) K
- <script src="./app.js"></script>3 D0 B: `2 i0 v; B; p1 p4 w) \
- </body>
, M- @, ?7 M" R( d - </html>
复制代码 , f' [# q* i7 N; j; b7 g
' D5 P7 z2 K4 Qapp.js+ Y0 X2 j _! ]" J
- const search = instantsearch({5 v# Z5 w8 m- y0 k* ~% u
- // indexName: 'steam-video-games',
3 i" ]. h# [# V, S$ D3 L- U - indexName: 'movies',
8 w8 j, L# ^" D - searchClient: instantMeiliSearch(8 j) q' z6 i8 j* Q
- // 'https://demos.meilisearch.com',
* E. y) C, X" d4 V - 'http://acone3:7700',
9 u, \* x9 b3 ]* k/ ~4 b/ P0 E - 'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25'' }( ~! E9 z: C+ n. H ~6 n0 K3 U
- ),
6 N8 g4 @% w' e0 V - })0 y( E q- ^4 _0 `3 \ w" t
4 v4 a; b. m, \2 G# X- search.addWidgets([' f. M J" z$ e- y6 o% \
- instantsearch.widgets.searchBox({
0 \, a+ S: a' U3 t* \" ?6 b; k6 [6 @ - container: '#searchbox',+ Q& Y, D0 t* O* |
- }),+ {8 f9 S4 M: J+ t7 |" o) P
- instantsearch.widgets.hits({
( z! F, m; w( i1 s2 D/ q( i0 @ - container: '#hits',+ ^, W" `( j0 |2 C/ \- B" k" ^
- templates: {
% \$ x/ q( U& n2 Q% N9 Z - item: `
0 ?4 V2 k s6 L1 G - <div>
4 V. J$ n( t2 ~! P& e# _) T - <div class="hit-name">, G4 [" ?- }" r- z
- <!--{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}-->
) _, }: e. Z& s3 S3 F - {{#helpers.highlight}}{ "attribute": "overview" }{{/helpers.highlight}}
1 t- m$ T+ v/ X) s3 Q: } - ({{#helpers.highlight}}{ "attribute": "id" }{{/helpers.highlight}})' k% ]3 f3 d5 _" ~" _; F# X. [
- </div>
u* {5 y0 y$ h5 n - </div>
$ Q5 w( {; O& I" } - `,) N3 t8 e$ U5 W
- },
/ O2 w, _. J- q - }),
! d% Y" ]5 Y9 o |# V; { - ]): q0 G8 z. k' x0 c
& h7 H$ z5 V$ q- search.start()
复制代码
+ R, f% J0 B0 K- v8 J6 R
/ H4 g' N O8 b% R4 c7 k搜索界面简陋一点
" ]7 i+ _' U' n1 j) T |
|