Merge branch 'dev'

index.ftl

@@ -29,10 +29,20 @@
       </div>
     </header>
     <div id="postList" class="mx-auto fade-up <#if settings.posts_style!true>px-5 md:px-0 max-w-xl sm:max-w-2xl md:max-w-3xl lg:max-w-5xl <#else> px-5 max-w-4xl flex flex-col</#if>">
-      <h3 class="mb-4 mt-8 dark:text-gray-300 hidden md:block"><span class="iconfont icon-new text-red-600 mr-2 text-base "></span>最新文章</h3>
+
       <#if settings.posts_style!true>
+        <h3 class="mb-4 mt-8 dark:text-gray-300 hidden md:block"><span class="iconfont icon-new text-red-600 mr-2 text-base "></span>最新文章</h3>
         <#include "module/widget/post_cards.ftl">
       <#else>
+        <#if settings.show_popular!true>
+          <div class="popular-posts">
+            <h3 class="mb-4 mt-8 dark:text-gray-300"><span class="iconfont icon-hot text-red-600 mr-2 text-base "></span>热门文章</h3>
+            <div class="posts grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
+              <#include "module/widget/popular_posts.ftl">
+            </div>
+          </div>
+        </#if>
+        <h3 class="mb-4 mt-8 dark:text-gray-300"><span class="iconfont icon-new text-red-600 mr-2 text-base "></span>最新文章</h3>
         <#include "module/widget/post_list.ftl">
       </#if>
       <#-- 分页-->

module/footer.ftl

@@ -40,7 +40,7 @@
     </div>
     <#-- 社交信息 end -->
 
-    <div class="site-info flex flex-col justify-center">
+    <div class="site-info flex flex-col justify-center text-gray-800 dark:text-gray-500">
       <@global.footer />
       <#if settings.Icp??>
         <p class="leading-6"><a href="http://beian.miit.gov.cn" target="_blank" class="text-base text-gray-800 dark:text-gray-500">${settings.Icp!}</a></p>

module/header.ftl

@@ -30,6 +30,18 @@
                  href="${menu.url!}" target="${menu.target!}">
                 ${menu.name}
               </a>
+<#--              <#if menu.children?? && menu.children?size gt 0>-->
+<#--                  <ul class="sub-menu-item">-->
+<#--                    <#list menu.children?sort_by('priority') as child>-->
+<#--                    <li class="item p-0">-->
+<#--                      <a class="menu-item link md:text-base sm:text-sm text-gray-100" data-path="${child.url!}"-->
+<#--                         href="${child.url!}" target="${child.target!}">-->
+<#--                        ${child.name}-->
+<#--                      </a>-->
+<#--                    </li>-->
+<#--                    </#list>-->
+<#--                  </ul>-->
+<#--              </#if>-->
             </li>
           </#list>
         </@menuTag>

module/widget/popular_posts.ftl

@@ -0,0 +1,25 @@
+<#list posts.content?sort_by("visits")?reverse as post>
+  <#if post_index==4><#break></#if>
+  <div class="relative mt-1 md:mt-0 h-28 sm:h-24 md:h-36 dark:filter-60">
+    <#if post.thumbnail?? && post.thumbnail!=''>
+      <img class="object-cover w-full h-28 sm:h-24 md:h-36" src="${post.thumbnail}" alt="${post.title}"/>
+    <#elseif settings.card_random_cover_list?? && settings.card_random_cover_list != ''>
+      <img class="object-cover w-full img-random h-28 sm:h-24 md:h-36 dark:filter-60" index="${post_index}"
+           src="${theme_base!}/source/images/loading.gif" data-src="" alt="${post.title}"/>
+    <#else>
+      <span class="full-image placeholder-bg w-full h-28 sm:h-24 md:h-36" role="img" aria-label=""></span>  
+    </#if>
+    <a href="${post.fullPath!}">
+      <div class="absolute top-0 left-0 p-5 w-full h-full bg-white bg-opacity-90 text-center cursor-pointer opacity-0 hover:opacity-100 transition-all ease-out">
+
+        <div class="w-full h-full absolute top-5 left-0 p-5 text-center">
+          <h2 class="overflow-hidden mb-0.5 text-gray-600 whitespace-nowrap overflow-ellipsis text-sm md:text-base mt-0 font-bold">
+            <a href="${post.fullPath!}">${post.title}</a>
+          </h2>
+          <a href="${post.fullPath!}"><span class="text-center text-gray-400 hidden md:block text-sm">${post.createTime?string("yyyy年MM月dd日")}</span></a>
+          <a href="${post.fullPath!}"><span class="iconfont icon-yuedu"></span> </a>
+        </div>
+      </div>
+    </a>
+  </div>
+</#list>

post.ftl

@@ -10,7 +10,8 @@
       <#elseif settings.card_random_cover_list?? && settings.card_random_cover_list != ''>
         <div class="cover-bg bottom-0 left-0 right-0 top-0 opacity-30 absolute">
           <img src="${theme_base!}/source/images/loading.gif"
-               class="h-full w-full left-0 object-cover absolute top-0 img-random dark:filter-60 no-zoom" alt="${post.title}"/>
+               class="h-full w-full left-0 object-cover absolute top-0 img-random dark:filter-60 no-zoom"
+               alt="${post.title}"/>
         </div>
       <#else>
         <div class="placeholder-bg">
@@ -38,10 +39,14 @@
         <p class="flex flex-row justify-start flex-wrap">
           <#if post.tags?? && post.tags?size gt 0>
             <#list post.tags as tag>
-              <a href="${tag.fullPath!}"
-                 class="bg-gray-200 hover:shadow-md hover:text-white hover:bg-red-400 dark:bg-gray-600 dark:text-gray-300 dark:hover:bg-red-400 dark:hover:shadow-md dark:hover:text-white mt-2 mb-2 mr-2 block py-0 px-4 rounded leading-10 h-10 text-gray-800 no-underline "
-                 style="text-decoration: none !important; box-shadow: none !important;">
-                #&nbsp;${tag.name!}
+              <a href="${tag.fullPath!}" class="relative inline-block badge shadow-none"
+              style="box-shadow: none !important;">
+                <i class="bg-red-400 opacity-10 absolute top-0 left-0 w-full h-full" style="background-color: ${tag.color!'rgba(248,113,113,1)'}"></i>
+                <span class="badge-outline text-red-400 h-5 px-2 py-0.5 rounded-sm cursor-pointer"
+                      style="color: ${tag.color!'rgba(248,113,113,1)'}"
+                      data-value="${tag.name}">
+                        ${tag.name}
+                      </span>
               </a>
             </#list>
           </#if>
@@ -55,11 +60,11 @@
 
     <div class="mx-auto md-content mt-8 text-center max-w-4xl tracking-wider md:leading-relaxed sm:leading-normal">
       <#include "module/widget/sponsor.ftl">
-      <div class="inline-block text-center my-4  " >
-        <span role="button" class="iconfont icon-heart text-white relative inline-block bg-red-600 hover:bg-red-500 rounded-full py-3 z-50 w-28 h-full cursor-pointer like-btn" 
-             style=""
-             data-path="${blog_url!}/api/content/posts/${post.id}/likes"
-             data-count="${post.likes}"
+      <div class="inline-block text-center my-4  ">
+        <span role="button"
+              class="iconfont icon-heart text-white relative inline-block bg-red-600 hover:bg-red-500 rounded-full py-3 z-50 w-28 h-full cursor-pointer like-btn"
+              data-path="${blog_url!}/api/content/posts/${post.id}/likes"
+              data-count="${post.likes}"
         >
         </span>
       </div>

settings.yaml

@@ -63,7 +63,7 @@ genernal:
       label: 列表风格下是否展示热门文章
       type: radio
       data-type: bool
-      default: true
+      default: false
       options:
         - value: true
           label: 是

src/styles/index.less

@@ -10,25 +10,4 @@
   animation-name: blink;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
-}
-//
-//.arrow-down:before {
-//  transform: translateX(-7px) rotate(45deg);
-//}
-//
-//.arrow-down:after {
-//  transform: translateX(7px) rotate(-45deg);
-//}
-//
-//.arrow-down:after,
-//.arrow-down:before{
-//  background-color: #adabac;
-//  content: "";
-//  height: 2px;
-//  left: 50%;
-//  margin-left: -11px;
-//  margin-top: -1px;
-//  position: absolute;
-//  top: 50%;
-//  width: 22px;
-//}
+}