halo-theme-dream2.0-plus/templates/main/article_list.html

<div xmlns:th="https://www.thymeleaf.org"
     th:fragment="articleList (posts, isFirstIndex)">
  <th:block th:each="post : ${posts}"
            th:with="thumbnail = ${#strings.isEmpty(post.spec.cover) ? #strings.isEmpty(theme.config.post.default_thumbnail) ? '' : theme.config.post.default_thumbnail + '?id=' + postStat.index : post.spec.cover},
            thumbnail_mode = ${(theme.config.post.top_thumbnail_mode == 'grid' || (!post.spec.pinned && theme.config.post.thumbnail_mode == 'grid'))? 'grid' : !#strings.isEmpty(post.metadata.annotations.get('thumbnail_mode'))? post.metadata.annotations.get('thumbnail_mode') : post.spec.pinned ? theme.config.post.top_thumbnail_mode : theme.config.post.thumbnail_mode}">
    <div th:if="${!#strings.isEmpty(thumbnail) && thumbnail_mode == 'back'}" class="card widget card-cover">
      <a th:href="${post.status.permalink}">
        <div class="cover-image" th:style="'background-image: url(' + ${thumbnail} + ')'"></div>
        <div class="details">
          <h2 class="title"><span class="top" th:if="${post.spec.pinned}">置顶</span>[[${post.spec.title}]]</h2>
          <ul class="breadcrumb">
            <li th:text="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd HH:mm')}"></li>
            <li><i class="fa fa-eye"></i>[[${post.stats.visit}]]</li>
            <li th:if="${post.spec.allowComment}" class="is-hidden-mobile"><i class="fa fa-comments-o"></i>[[${post.stats.comment}]]
            </li>
            <li><i class="fa fa-thumbs-o-up"></i>[[${post.stats.upvote}]]</li>
            <li
              th:with="heat= ${24+post.stats.visit*0.1+post.stats.upvote*2+post.stats.comment*3}, heatColor= '#'+${(heat < 37)? 'ffa87e' : (heat < 120)? 'fb734a' : 'e0081c'}"
              th:style="'color: ' + ${heatColor}">[[${heat}]]℃
            </li>
          </ul>
        </div>
      </a>
      <div th:if="${!#lists.isEmpty(post.categories)}" class="category">
        <a th:each="cy : ${post.categories}" th:href="${cy.status.permalink}" th:text="${cy.spec.displayName}"></a>&nbsp;
      </div>
    </div>

    <div
      th:if="${!#strings.isEmpty(thumbnail) && (thumbnail_mode == 'small' || (thumbnail_mode == 'small-alter' && postStat.index % 2 == 0))}"
      class="card widget card-small">
      <a th:href="${post.status.permalink}">
        <div class="small-image" th:style="'background-image: url(' + ${thumbnail} + ')'"></div>
      </a>
      <div class="card-content main">
        <h2 class="title">
          <span class="top" th:if="${post.spec.pinned}">置顶</span><a
          th:href="${post.status.permalink}" th:text="${post.spec.title}"></a>
        </h2>
        <div class="main-content" th:text="${post.spec.excerpt.raw}"></div>
        <hr/>
        <div class="meta">
          <ul class="breadcrumb">
            <li th:text="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd HH:mm')}"></li>
            <li><i class="fa fa-eye"></i>[[${post.stats.visit}]]</li>
            <li th:if="${post.spec.allowComment}" class="is-hidden-mobile"><i class="fa fa-comments-o"></i>[[${post.stats.comment}]]
            </li>
            <li><i class="fa fa-thumbs-o-up"></i>[[${post.stats.upvote}]]</li>
            <li
              th:with="heat= ${24+post.stats.visit*0.1+post.stats.upvote*2+post.stats.comment*3}, heatColor= '#'+${(heat < 37)? 'ffa87e' : (heat < 120)? 'fb734a' : 'e0081c'}"
              th:style="'color: ' + ${heatColor}">[[${heat}]]℃
            </li>
          </ul>
          <div th:if="${!#lists.isEmpty(post.categories)}" class="level-item is-hidden-mobile">
            <a th:each="cy : ${post.categories}" th:href="${cy.status.permalink}" th:text="${cy.spec.displayName}"></a>&nbsp;
          </div>
        </div>
      </div>
    </div>

    <div
      th:if="${!#strings.isEmpty(thumbnail) && (thumbnail_mode == 'small-right' || (thumbnail_mode == 'small-alter' && postStat.index % 2 == 1))}"
      class="card widget card-small">
      <div class="card-content main">
        <h2 class="title">
          <span class="top" th:if="${post.spec.pinned}">置顶</span><a
          th:href="${post.status.permalink}" th:text="${post.spec.title}"></a>
        </h2>
        <div class="main-content" th:text="${post.spec.excerpt.raw}"></div>
        <hr/>
        <div class="meta">
          <ul class="breadcrumb">
            <li th:text="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd HH:mm')}"></li>
            <li><i class="fa fa-eye"></i>[[${post.stats.visit}]]</li>
            <li th:if="${post.spec.allowComment}" class="is-hidden-mobile"><i class="fa fa-comments-o"></i>[[${post.stats.comment}]]
            </li>
            <li><i class="fa fa-thumbs-o-up"></i>[[${post.stats.upvote}]]</li>
            <li
              th:with="heat= ${24+post.stats.visit*0.1+post.stats.upvote*2+post.stats.comment*3}, heatColor= '#'+${(heat < 37)? 'ffa87e' : (heat < 120)? 'fb734a' : 'e0081c'}"
              th:style="'color: ' + ${heatColor}">[[${heat}]]℃
            </li>
          </ul>
          <div th:if="${!#lists.isEmpty(post.categories)}" class="level-item is-hidden-mobile">
            <a th:each="cy : ${post.categories}" th:href="${cy.status.permalink}" th:text="${cy.spec.displayName}"></a>&nbsp;
          </div>
        </div>
      </div>
      <a th:href="${post.status.permalink}">
        <div class="small-image" th:style="'background-image: url(' + ${thumbnail} + ')'"></div>
      </a>
    </div>

    <a th:if="${post.spec.pinned && thumbnail_mode == 'fold'}" class="card widget card-fold" href="${post.fullPath!}">
      <h2 class="title"><span class="top">置顶</span>
        <p th:text="${post.spec.title}"></p></h2>
      <p th:text="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd')}"></p>
    </a>

    <div th:if="${(#strings.isEmpty(thumbnail) && !(post.spec.pinned && thumbnail_mode == 'fold')) || #strings.isEmpty(thumbnail_mode) ||  thumbnail_mode == 'default'}" class="card widget">
      <a th:if="${!#strings.isEmpty(thumbnail)}" class="thumbnail" th:href="${post.status.permalink}">
        <div class="thumbnail-image" th:style="'background-image: url(' + ${thumbnail} + ')'">
        </div>
      </a>
      <div class="card-content main">
        <h2 class="title">
          <span class="top" th:if="${post.spec.pinned}">置顶</span><a
          th:href="${post.status.permalink}" th:text="${post.spec.title}"></a>
        </h2>
        <div class="meta">
          <ul class="breadcrumb">
            <li th:text="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd HH:mm')}"></li>
            <li><i class="fa fa-eye"></i>[[${post.stats.visit}]]</li>
            <li th:if="${post.spec.allowComment}" class="is-hidden-mobile"><i class="fa fa-comments-o"></i>[[${post.stats.comment}]]
            </li>
            <li class="is-hidden-mobile"><i class="fa fa-thumbs-o-up"></i>[[${post.stats.upvote}]]</li>
            <li
              th:with="heat= ${24+post.stats.visit*0.1+post.stats.upvote*2+post.stats.comment*3}, heatColor= '#'+${(heat < 37)? 'ffa87e' : (heat < 120)? 'fb734a' : 'e0081c'}"
              th:style="'color: ' + ${heatColor}">[[${heat}]]℃
            </li>
          </ul>
          <div th:if="${!#lists.isEmpty(post.categories)}" class="level-item">
            <a th:each="cy : ${post.categories}" th:href="${cy.status.permalink}" th:text="${cy.spec.displayName}"></a>&nbsp;
          </div>
        </div>
        <hr/>
        <div class="main-content" th:text="${post.spec.excerpt.raw}"></div>
      </div>
    </div>
  </th:block>
</div>
<!--</div>-->
<!--</div>-->
<!--<#elseif thumbnail_mode == "grid">-->
<!--<div class="column-main-grid">-->
<!--  <#list post_index..(posts?size-1) as i>-->
<!--  <#local gradPost=posts[i]>-->
<!--  <#local thumbnail = (gradPost.thumbnail?? && gradPost.thumbnail!='')?then(gradPost.thumbnail!,-->
<!--  (settings.default_thumbnail?? && settings.default_thumbnail!='')?then(settings.default_thumbnail +-->
<!--  settings.default_thumbnail?contains('?')?then("&","?") + "postId=" + gradPost.id?c, ''))>-->
<!--  <#if is_first_index?? && thumbnail != '' && !(gradPost.topPriority!=1 || !gradPost.metas?? ||-->
<!--  (gradPost.metas.index_carousel!'false')=='false')>-->
<!--  <#continue>-->
<!--</#if>-->
<!--<div class="card widget">-->
<!--  <a class="thumbnail" href="${gradPost.fullPath!}">-->
<!--    <div class="thumbnail-image" style="background-image: url(${thumbnail!})">-->
<!--    </div>-->
<!--  </a>-->
<!--  <ul class="breadcrumb">-->
<!--    <li><@global.timeline datetime=gradPost.createTime/></li>-->
<!--    <li><i class="fa fa-eye"></i>${gradPost.visits?c}</li>-->
<!--    <#if !gradPost.disallowComment!false>-->
<!--    <li class="is-hidden-mobile"><i class="fa fa-comments-o"></i>${gradPost.commentCount?c}</li>-->
<!--  </-->
<!--  #if>-->
<!--  <li class="is-hidden-mobile"><i class="fa fa-thumbs-o-up"></i>${gradPost.likes?c}</li>-->
<!--  <#local heat= (24+gradPost.visits*0.1+gradPost.likes*2+gradPost.commentCount*3) />-->
<!--  <#local heatColor= '#'+(heat < 37)?string('ffa87e',(heat < 120)?string('fb734a','e0081c')) />-->
<!--  <li style="color: ${heatColor}">${heat}℃</li>-->
<!--  </ul>-->
<!--  <h2 class="title">-->
<!--    <#if gradPost.topPriority==1><span class="top">置顶</span></#if><a-->
<!--  href="${gradPost.fullPath!}">${gradPost.title!}</a>-->
<!--  </h2>-->
<!--</div>-->
<!--</#list>-->
<!--</div>-->
<!--<#break/>-->
<!--<#else>-->
<!--</#if>-->
<!--</#list>-->
<!--</div>-->
<!--<#macro model_build content>-->
<!--    <#if content == ''>-->
<!--      <#return>-->
<!--    </#if>-->
<!--    <#local content_option=content?split('|')>-->
<!--    <#local tag=(content_option[0]!'')?trim>-->
<!--    <#local content=((content_option[1]!'')?trim != '')?then('<div class="title">${content_option[1]?trim}</div>', '')>-->
<!--    <#local target=((content_option[2]!'false')?trim == 'true')?then('target="_blank"', '')>-->
<!--    <#local imageUrl=((content_option[3]!'')?trim != '')?then('style="background-image: url(${content_option[3]?trim})"', '')>-->
<!--    <#local targetUrl=((content_option[4]!'')?trim != '')?then('href="${content_option[4]?trim}"', '')>-->
<!--  <a class="card widget brightness ${(content!='')?then('bg-shadow', '')}" ${target} ${imageUrl} ${targetUrl}>${content}<div class="tag">${tag}</div></a>-->
<!--</#macro>-->
<!--<#macro article_list posts>-->
<!--    <#if is_first_index!false>-->
<!--        <#local carousel_content>-->
<!--          <#list posts as post>-->
<!--              <#if post.topPriority!=1>-->
<!--                  <#break>-->
<!--              </#if>-->
<!--              <#if !post.metas?? || (post.metas.index_carousel!'false')=='false'>-->
<!--                  <#continue>-->
<!--              </#if>-->
<!--              <#local thumbnail = (post.thumbnail?? && post.thumbnail!='')?then(post.thumbnail!, (settings.default_thumbnail?? && settings.default_thumbnail!='')?then(settings.default_thumbnail + settings.default_thumbnail?contains('?')?then("&","?") + "postId=" + post.id?c, ''))>-->
<!--              <#if thumbnail != ''>-->
<!--                <a class="swiper-slide bg-shadow cover-image" style="background-image: url(${thumbnail})" href="${post.fullPath!}">-->
<!--                    <div class="swiper-slide-details" data-swiper-parallax="200" data-swiper-parallax-duration="600">-->
<!--                        <p class="swiper-slide-details-title">${post.title!}</p>-->
<!--                        <ul class="breadcrumb">-->
<!--                            <li><@global.timeline datetime=post.createTime/></li>-->
<!--                            <li><i class="fa fa-eye"></i>${post.visits?c}</li>-->
<!--                            <#if !post.disallowComment!false>-->
<!--                                <li><i class="fa fa-comments-o"></i>${post.commentCount?c}</li></#if>-->
<!--                            <li><i class="fa fa-thumbs-o-up"></i>${post.likes?c}</li>-->
<!--                            <#local heat= (24+post.visits*0.1+post.likes*2+post.commentCount*3) />-->
<!--                            <#local heatColor= '#'+(heat < 37)?string('ffa87e',(heat < 120)?string('fb734a','e0081c')) />-->
<!--                            <li style="color: ${heatColor}">${heat}℃</li>-->
<!--                        </ul>-->
<!--                    </div>-->
<!--                </a>-->
<!--              </#if>-->
<!--          </#list>-->
<!--        </#local>-->
<!--        <#if settings.sidebar_column=='module-left' || settings.sidebar_column=='module-right'>-->
<!--          <#if settings.module_links?? && settings.module_links?trim != ''>-->
<!--              <#local module_links=settings.module_links?split('\n')>-->
<!--          <#else>-->
<!--              <#local module_links=[]>-->
<!--              <#list 0..1 as i>-->
<!--                <#local post=posts[i]>-->
<!--                <#local module_links=module_links+["推荐|${post.title!}|false|${post.thumbnail!}|${post.fullPath!}"]>-->
<!--              </#list>-->
<!--          </#if>-->
<!--          <div class="model model-index">-->
<!--            <div class="card widget swiper">-->
<!--              <div class="swiper-wrapper">${carousel_content}</div>-->
<!--              <div class="swiper-pagination"></div>-->
<!--              <div class="swiper-button-prev"></div>-->
<!--              <div class="swiper-button-next"></div>-->
<!--            </div>-->
<!--            <div class="model model-index-side">-->
<!--              <#list 0..1 as i>-->
<!--                <#if i &lt; module_links?size >-->
<!--                    <@model_build module_links[i]/>-->
<!--                </#if>-->
<!--              </#list>-->
<!--            </div>-->
<!--          </div>-->
<!--            <#if module_links?size &gt; 2 && module_links?size&lt;=6>-->
<!--              <div class="model model-attach model-attach-${module_links?size-2}">-->
<!--                <#list 2..5 as i>-->
<!--                    <#if i &lt; module_links?size >-->
<!--                        <@model_build module_links[i]/>-->
<!--                    </#if>-->
<!--                </#list>-->
<!--              </div>-->
<!--            </#if>-->
<!--          <#assign is_carousel=true />-->
<!--        <#elseif carousel_content != ''>-->
<!--          <div class="card widget swiper">-->
<!--            <div class="swiper-wrapper">${carousel_content}</div>-->
<!--            <div class="swiper-pagination"></div>-->
<!--            <div class="swiper-button-prev"></div>-->
<!--            <div class="swiper-button-next"></div>-->
<!--          </div>-->
<!--          <#assign is_carousel=true />-->
<!--        </#if>-->
<!--        <#if settings.index_inform?? && settings.index_inform != ''>-->
<!--            <div class="card tips brightness">${settings.index_inform}</div>-->
<!--        </#if>-->
<!--    </#if>-->
<!--</#macro>-->