文章搜索功能

搜索框:

文章搜索功能 - 图1

搜索结果页:

文章搜索功能 - 图2

搜索框代码:

  1. <form id="searchform" action="#(CPATH)/article/search" class="input-group" method="GET" target="_blank">
  2. <input type="search" class="form-control" name="keyword" placeholder="输入关键字" autocomplete="off">
  3. <div class="input-group-addon">
  4. <span class="input-group-text"><i class="ti-search"></i></span>
  5. </div>
  6. </form>

搜索结果页命名:artsearch.html

搜索结果页代码:

  1. #articleSearchPage()
  2. <main class="main-content pt-7 bg-gray">
  3. <div class="section">
  4. <div class="container">
  5. <div class="row">
  6. <div class="col-md-8 col-xl-9">
  7. <p class="col-12 col-xl-12 mb-0 p-0 ml-2"><small>以下是根据您搜索的关键字 <span class="text-danger">#(keyword ??)</span> ,匹配出的内容:</small></p>
  8. #for(article : articlePage.list)
  9. <div class="card hover-shadow-7 my-4 overflow-hidden">
  10. <div class="row">
  11. <div class="col-md-3">
  12. <a href="#(article.url)"><img class="position-absolute artlist-img" src="#(article.showImage ?? 'images/nothumbnail.jpg')" alt="..."></a>
  13. </div>
  14. <div class="col-md-9">
  15. <div class="p-4">
  16. <h5><a href="#(article.url)">#(article.title)</a></h5>
  17. <p>#maxLength(article.text,70)</p>
  18. <div class="row mb-1 small-2 text-lighter">
  19. <div class="col-auto">
  20. <a class="text-inherit" href="#">#(article.user.username ??)</a>
  21. <span class="align-middle px-1">&bull;</span>
  22. <time datetime="2018-05-15T19:00">#date(article.created)</time>
  23. </div>
  24. <div class="col-auto ml-auto">
  25. <span><i class="fa fa-eye pr-1 opacity-60"></i> #(article.view_count)</span>
  26. <a class="text-inherit ml-5" href="#"><i class="fa fa-comments pr-1 opacity-60"></i> #(article.comment_count)</a>
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. #end
  34. #articlePaginate(previousText="←",nextText="→")
  35. <nav>
  36. <ul class="pagination justify-content-center">
  37. #for(page : pages)
  38. <li class="page-item #(page.style)">
  39. <a class="page-link" href="#(page.url ??)">#(page.text ??)</a>
  40. </li>
  41. #end
  42. </ul>
  43. </nav>
  44. #end
  45. </div>
  46. <div class="col-md-4 col-xl-3">
  47. <div class="sidebar px-4 py-md-0">
  48. ......
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. </main>
  55. #end