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

mikeee

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

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

mikeee

mikeee 发表于 2021-10-30 23:35
5 z" }# {# }9 d我搓了个 vue2 搜索模板 https://github.com/ffreemt/meilisearch-plaintext。计算机里装了 node 的话（ ...

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

index.html

1. <!DOCTYPE html>
   . ^- V1 M" b2 b8 {8 v
2. <html lang="en">
   - I+ E4 c; A( e: v/ d5 `
3.   <head>
   
4.     <meta charset="utf-8" />
   0 i8 V' j: H: S. V. V# n5 E
5.   </head>
   4 m8 v% D: `$ J* P: t
6. 
   
7.   <body>
   
8.     <div>
   : q% c( }! X& L1 r: Z$ e2 H
9.       <div id="searchbox"></div>
   
10.       <div id="hits"></div>
    9 j2 A$ m' y) q7 q3 O
11.     </div>
    
12. 
    
13.     <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
    
14.     <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
    , M) P: R5 O  i/ S+ \+ l% v, z* \
15.     <script src="./app.js"></script>
    . o; [, Z7 e6 t! G+ Q  Z8 }% O1 v* s
16.   </body>
    - T* v6 o0 Z  k* R# ?7 g
17. </html>

复制代码

; T8 S+ g+ }/ @5 g( [! F
) q; b6 i' U( F! e, Xapp.js

1. const search = instantsearch({
   , q% t0 L0 G/ ^* ?( N0 b
2.   // indexName: 'steam-video-games',
     j8 T' w: ]& h# z& T$ b2 c
3.   indexName: 'movies',
   
4.   searchClient: instantMeiliSearch(
   
5.     // 'https://demos.meilisearch.com',
   
6.     'http://acone3:7700',
   ! o# e- n+ ~# G3 `
7.     'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25'
   ( Y1 I& b8 C' V  I) _" f
8.   ),
   - v* I; q0 E7 o$ P% j' Q1 }
9. })
   . e! a  h& N1 P
10. 
    
11. search.addWidgets([
    
12.   instantsearch.widgets.searchBox({
    
13.     container: '#searchbox',
    - p( z% }! p  |$ x9 V& ]
14.   }),
    
15.   instantsearch.widgets.hits({
    
16.     container: '#hits',
    
17.     templates: {
    
18.       item: `
    $ _, l+ q5 T4 z* Y
19.         <div>
    7 C2 y7 J0 m6 e+ e
20.           <div class="hit-name">
    : S& B8 R% M4 Z4 n7 F, N( K
21.             <!--{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}-->
    
22.             {{#helpers.highlight}}{ "attribute": "overview" }{{/helpers.highlight}}
    ! S5 Q6 J9 m2 M
23.             ({{#helpers.highlight}}{ "attribute": "id" }{{/helpers.highlight}})
    ( J; s3 Q6 J, I; T
24.           </div>
    
25.         </div>
    
26.       `,
    
27.     },
    
28.   }),
    
29. ])
    
30. 
    
31. search.start()

复制代码

# G% e5 \' J2 B/ U
搜索界面简陋一点