homePage.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>gfast博客</title>
  6. <link href="${.domain}plugin/blog/css/base.css" rel="stylesheet">
  7. <link href="${.domain}css/swiper-6.1.1/swiper-bundle.min.css" rel="stylesheet">
  8. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  9. <script src="${.domain}js/jquery/jquery.js"></script>
  10. <script src="${.domain}plugin/blog/js/nav.js"></script>
  11. <script src="${.domain}js/swiper-6.1.1/swiper-bundle.min.js"></script>
  12. </head>
  13. <body>
  14. ${template "header" .}
  15. <!--header end-->
  16. <main>
  17. <article>
  18. <!-- 图片滑动 -->
  19. <div class="swiper-container">
  20. <div class="swiper-wrapper">
  21. ${range $index,$article := .slideList}
  22. <div class="swiper-slide"><a href="${$.domain}plugin/blog/content?logId=${$article.LogId}" target="_blank"><img src="${$.domain}${$article.LogThumbnail}"></a></div>
  23. ${end}
  24. </div>
  25. <!-- 分页器 -->
  26. <div class="swiper-pagination"></div>
  27. <!-- 导航按钮 -->
  28. <div class="swiper-button-prev"></div>
  29. <div class="swiper-button-next"></div>
  30. </div>
  31. <!--top_blog 置顶文章 begin-->
  32. <div class="top_blog">
  33. <ul class="blogs">
  34. ${range $index,$article := .topList}
  35. <li>
  36. <a href="${$.domain}plugin/blog/content?logId=${$article.LogId}" target="_blank">
  37. <i><img src="${$.domain}${$article.LogThumbnail}" alt="标题图片"></i>
  38. <h2>${$article.LogTitle}</h2>
  39. </a>
  40. <div class="blog_smalltext">${subStr $article.LogContent 23}</div>
  41. <p class="blog_info">
  42. <span>${timeFormatYear $article.CreatTime}</span>
  43. <span>${$article.LogAuthor}</span>
  44. <span>${$article.ClassificationName}</span>
  45. <span>${$article.LogHits}</span>
  46. </p>
  47. </li>
  48. ${end}
  49. </ul>
  50. </div>
  51. <!--top_blog 置顶文章 end-->
  52. <!--new_blog 最新文章 begin-->
  53. <div class="new_blog">
  54. <ul class="blogs">
  55. ${range $index,$article := .logList}
  56. ${if ne $article.LogSign 1}
  57. <li>
  58. <a href="${$.domain}plugin/blog/content?logId=${$article.LogId}" target="_blank">
  59. <i><img src="${$.domain}${$article.LogThumbnail}" alt="标题图片"></i>
  60. <h2>${$article.LogTitle}</h2>
  61. </a>
  62. <div class="blog_smalltext">${subStr $article.LogContent 23}</div>
  63. <p class="blog_info">
  64. <span>${timeFormatYear $article.CreatTime}</span>
  65. <span>${$article.LogAuthor}</span>
  66. <span>${$article.ClassificationName}</span>
  67. <span>${$article.LogHits}</span>
  68. </p>
  69. </li>
  70. ${end}
  71. ${end}
  72. </ul>
  73. </div>
  74. <!--new_blog 最新文章 end-->
  75. </article>
  76. <!--article end-->
  77. ${template "aside" .}
  78. <!--aside end-->
  79. </main>
  80. ${template "footer" .}
  81. <script>
  82. var mySwiper = new Swiper('.swiper-container', {
  83. loop: true, // 循环模式选项
  84. autoplay: {
  85. delay: 3500, // 3.5秒切换一次
  86. }, // 自动切换
  87. // 如果需要分页器
  88. pagination: {
  89. el: '.swiper-pagination',
  90. },
  91. // 如果需要前进后退按钮
  92. navigation: {
  93. nextEl: '.swiper-button-next',
  94. prevEl: '.swiper-button-prev',
  95. },
  96. })
  97. </script>
  98. </body>
  99. </html>