说明

上节课我们把页面还有公共部分做了抽取，这节课就把首页展示的东西以及公共区域展示的东西处理一下

公共部分

• 定义IndexController公共返回Model

@ModelAttribute
private void indexModel(Model model) {
  // todo 可以在这里定义这个controller公用的model的属性
  
}

• 底部的友情链接

model.addAttribute("friendlies", friendlyService.list());

<div class="lw-container">
  <h2>友情链接</h2>
  <!--/*@thymesVar id="friendlies" type="java.util.List<cn.kevinlu98.pojo.Friendly>"*/-->
  <a th:each="friendly:${friendlies}" target="_blank" th:href="${friendly.link}" th:text="${friendly.title}">冷文学习者</a>
</div>

• 顶部导航条部分

// Mapper层 
List<Navigation> findAllByEnableOrderByOrderedAsc(Boolean enable);
//Service层
public List<Navigation> show() {
  return mapper.findAllByEnableOrderByOrderedAsc(true);
}
//IndexModel
model.addAttribute("navigations", navigationService.show());

<div class="lw-nav lw-posa">
  <a th:href="@{/}"><i class="fa fa-home" aria-hidden="true"></i>首页</a>
  <!--/*@thymesVar id="navigations" type="java.util.List<cn.kevinlu98.pojo.Navigation>"*/-->
  <a th:each="navigation:${navigations}" th:href="${navigation.link}"
     th:target="${navigation.linkMode}?'_blank':''">
    <i th:if="${navigation.icon.length()>0}" th:class="${'fa fa-'+navigation.icon}"></i>
    <th:block th:text="${navigation.name}"></th:block>
  </a>
  <a href="javascript:void(0)" class="lw-fr lw-search-btn" style="padding: 0;">
    <i class="fa fa-search" aria-hidden="true"></i>
  </a>
</div>

• 右侧标签部分：我们希望这里可以随机展示30个标签，所以这里可以利用数据库的order by rand() 来进行排序

//Mapper
@Query(value = "select * from blog_tag order by rand() limit ?1", nativeQuery = true)
List<Tag> findRandom(int length);
//Service
public List<Tag> list(int length) {
  return mapper.findRandom(length);
}
//IndexModel
model.addAttribute("tags", tagService.list(30));

<div class="lw-right-item lw-tag-cloud">
  <h4><i class="fa fa-tags lw-mr5" aria-hidden="true"></i>标签云</h4>
  <!--/*@thymesVar id="tags" type="java.util.List<cn.kevinlu98.pojo.Tag>"*/-->
  <a th:each="tag:${tags}" href="#" th:title="${tag.name}" th:text="${tag.name}"></a>
</div>

• 定义默认图片处理类：因为我们的文章有可能是没有封面的，所以我们来定义一个处理类处理一下封面为空的文章封面，给其一个默认图片，当然，默认图片我们也是要做成可配置的，我们可以自定义默认图片列表

package cn.kevinlu98.common;

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;
import org.thymeleaf.util.StringUtils;

import java.util.List;

/**
 * Author: Mr丶冷文
 * Date: 2022/10/11 11:54
 * Email: kevinlu98@qq.com
 * Description:
 */
@Component
@Data
@ConfigurationProperties(prefix = "default-image")
public class DefaultImage {

    private List<String> images;

    public String cover(String imgUrl) {
        if (StringUtils.isEmptyOrWhitespace(imgUrl)) {
            return images.get((int) (Math.random() * images.size()));
        }
        return imgUrl;
    }
}

default-image:
  images:
    - /static/image/1.jpg
    - /static/image/2.jpg
    - /static/image/3.jpg
    - /static/image/4.jpg
    - /static/image/5.jpg

• 右侧的热门文章

// Mapper
@Query(value = "select * from blog_article where type = 1 and status = 1 order by views limit ?1", nativeQuery = true)
List<Article> hotList(int length);
//Service
public List<Article> hotList(int length) {
  return mapper.hotList(length);
}
//IndexModel
model.addAttribute("hots", articleService.hotList(5));

<li th:each="hot,it:${hots}">
  <a th:href="@{/{id}.html(id=${hot.id})}">
    <div class="lw-hot-img">
      <span class="label label-danger lw-posa" th:if="${it.index eq 0}">1</span>
      <span class="label label-warning lw-posa" th:if="${it.index eq 1}">2</span>
      <span class="label label-info lw-posa" th:if="${it.index eq 2}">3</span>
      <span class="label label-default lw-posa" th:if="${it.index > 2}" th:text="${it.index+1}"></span>
      <img th:src="${@defaultImage.cover(hot.cover)}" alt="">
    </div>
    <p class="lw-hot-title" th:text="${hot.title}"></p>
    <p class="lw-hot-info"><i class="fa fa-eye lw-mr5"></i>
      <th:block th:text="${hot.views}"></th:block>
    </p>
  </a>
</li>

• 轮播图的展示

@GetMapping("/")
public String index(Model model) {
  model.addAttribute("banners",bannerService.list());
  return "index";
}

<div th:each="banner:${banners}" class="swiper-slide lw-posr">
  <img th:src="${banner.cover}" alt="" srcset="">
  <div class="lw-banner-info lw-posa">
    <a th:href="${banner.link}" target="_blank">
      <h2 class="lw-text-hidden"><span class="label label-danger lw-mr5">站长推荐</span>
        <th:block th:text="${banner.title}"></th:block>
      </h2>
    </a>
    <p th:text="${banner.summary}"></p>
  </div>
</div>