TA的每日心情 | 开心 2019-8-21 08:44 |
|---|
签到天数: 163 天 [LV.7]常住居民III
|
发表于 2021-10-31 11:10:51
|
显示全部楼层
mikeee 发表于 2021-10-30 23:35
\% G: ^' ?3 r) [. {9 b! M6 s0 I我搓了个 vue2 搜索模板 https://github.com/ffreemt/meilisearch-plaintext。计算机里装了 node 的话( ... 2 _6 g( @5 C' p# t9 w
加了一个纯 js 版,无需node环境。只需两个文件(index.html 和 app.js, 其实可以整成一个文件)。参看https://github.com/ffreemt/meilisearch-plaintext读我文件的最后一条。4 z9 B. ]8 N, _) Z4 d' ^2 O! L
/ U; O/ ^; K7 g) j/ Tindex.html' R z; U$ \6 ]3 C
- <!DOCTYPE html>
) i! j" `; S8 I" r+ \( i1 _ - <html lang="en">. B+ J" e% o- X# r
- <head>
: m; `. K6 o5 L8 v i8 O% S( } - <meta charset="utf-8" />& V5 }4 n+ a) X$ P
- </head>6 s4 D9 R2 T M7 D
- % p. u; O/ \) J2 u
- <body>
' m$ X: I! o" G* n1 d - <div>
5 |5 J& T0 ~$ F# v - <div id="searchbox"></div>
% E/ R- X# O4 \0 `2 X - <div id="hits"></div>7 x, i1 R7 f% w
- </div>
& [: V# N8 q) W- n7 q - $ \- x" B: X" D" e9 h
- <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>8 s6 E7 C& {* S
- <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>6 Y3 K+ o9 R0 _1 N9 Q
- <script src="./app.js"></script>
4 I& e8 {2 n2 |1 X4 r - </body>
( x( `/ S% D" r - </html>
复制代码 5 Z, w! h" s9 Z" ?5 ^
0 n! j/ y, F y' ]( c: j$ n$ eapp.js
3 K7 W9 v& e2 [9 U9 I. I' |- const search = instantsearch({% q; j& p* B4 W/ q
- // indexName: 'steam-video-games',# b( G& ~, \* g! {& K( J% y" r
- indexName: 'movies',# t, [5 P$ @ m
- searchClient: instantMeiliSearch(
1 o) P* g( ^$ q. z" M - // 'https://demos.meilisearch.com',! C+ L) }- u8 o6 ~6 r2 l
- 'http://acone3:7700',. [. K4 x* ^, V m" J
- 'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25'
2 `* | s/ W) T# r& g. i$ o - ), v `7 e/ |* d" s# `% r8 H0 z! v
- })9 p( g2 Z; g( B2 C' e$ G, v$ E
! l% L- A9 v% x% u- search.addWidgets([
5 G W; d. p6 m8 P+ f q! A+ O! S- h% [ - instantsearch.widgets.searchBox({- L H4 b& p; k' ~% y4 N. G
- container: '#searchbox',
+ f& U# S/ Z. L7 h8 E2 [- W - }),
" ]/ m3 _4 d% k# e$ w4 B- D - instantsearch.widgets.hits({/ F7 w7 G4 \0 Z9 a$ C( D* R
- container: '#hits',
( ~2 g" }3 s! {3 u - templates: {/ Q5 d5 y: K% m# B5 F& x* W4 K
- item: `' `. R! u R( F6 w5 ^+ q
- <div>; \1 w5 z+ R. Y* x' @6 R
- <div class="hit-name">2 a6 [$ ^: _4 U
- <!--{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}-->
' p6 e& e9 _8 e& N- e - {{#helpers.highlight}}{ "attribute": "overview" }{{/helpers.highlight}}
) [8 {1 W8 R: k( F - ({{#helpers.highlight}}{ "attribute": "id" }{{/helpers.highlight}})
; x% e; K7 w2 Y" a - </div>+ z8 _6 X% [) Z2 x
- </div>5 p4 F$ f2 T& t7 Z( w/ t- a; ]; q
- `,! d/ _- }% Y: ]3 |. B
- },* V% t1 V% E# z2 J Z
- }),* V& l/ ] b( y3 P7 t& R+ X9 i
- ])4 v: i: V6 m; C: i# y- e2 y! ~, r5 N
$ E9 T* b+ X& N! v* P- search.start()
复制代码 5 D$ p0 a* ^+ w4 `8 C7 t O3 V
( q( V$ ]% {! y! `, K6 ]( S2 M搜索界面简陋一点: E9 h! z/ Z0 e
 |
|