Merge pull request #250 from xzhuz/dev

Dev
xzhuz · Apr 10, 2022 · 976761f · 976761f
2 parents 741e309 + 2aebbad
commit 976761f
Show file tree

Hide file tree

Showing 24 changed files with 300 additions and 214 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@
 
 ![GitHub release (latest by date)](https://img.shields.io/github/v/release/halo-dev/halo?label=halo&style=flat-square)
 
-![](https://cdn.jsdelivr.net/gh/xzhuz/static@master/img/preview.png)
+![](./screenshot.png)
 
 ## 说明
 

diff --git a/category.ftl b/category.ftl
@@ -18,19 +18,17 @@
       </div>
     </header>
     <div class="mx-auto fade-up pt-4 <#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</#if>">
-        <#if settings.posts_style!true>
-            <#include "module/widget/post_cards.ftl">
-        <#else>
-            <#include "module/widget/post_list.ftl">
-        </#if>
+      <#if settings.posts_style!true>
+        <#include "module/widget/post_cards.ftl">
+      <#else>
+        <#include "module/widget/post_list.ftl">
+      </#if>
         <#-- 分页-->
-        <#if posts.totalPages gt 1>
-          <nav class="pagination flex flex-row justify-center my-8" role="navigation" aria-label="pagination">
-              <@paginationTag method="categoryPosts" page="${posts.number}" total="${posts.totalPages}" display="3" slug="${category.slug!}">                       
-                <#include "module/widget/pagination.ftl">
-              </@paginationTag>
-          </nav>
-        </#if>
+      <nav class="pagination flex flex-row justify-center my-8" role="navigation" aria-label="pagination">
+        <@paginationTag method="categoryPosts" page="${posts.number}" total="${posts.totalPages}" display="3" slug="${category.slug!}">
+          <#include "module/widget/pagination.ftl">
+        </@paginationTag>
+      </nav>
     </div>
   </main>
 </@layout>
diff --git a/dist/style.css b/dist/style.css
diff --git a/index.ftl b/index.ftl
@@ -1,7 +1,7 @@
 <#include "module/macro.ftl">
 <@layout title="${options.blog_title!}">
   <main class="mx-auto" id="container">
-    <header id="hero" class="bg-gray-900 table fade-down relative w-full opacity-95 z-10 <#if settings.enabled_index_cover_height!true>h-1/2 sm:h-1/2 md:h-screen <#else> h-1/2</#if>">
+    <header id="hero" class="bg-gray-900 table fade-down relative w-full opacity-95 z-10 <#if settings.enabled_index_cover_height!true>h-1/2 sm:h-1/2 md:h-screen full-screen<#else> h-1/2</#if>">
       <#if settings.home_cover?? && settings.home_cover!=''>
         <div class="cover-bg bottom-0 left-0 right-0 top-0 opacity-30 absolute">
           <img src="${settings.home_cover!}"
@@ -20,7 +20,7 @@
         <hr class="text-center bg-red-300 h-0.5 border-none w-20 mx-auto -mt-5 mb-3"/>
         <p class="slogan text-center text-white dark:text-gray-300 text-lg md:text-xl text-center" id="slogan">${settings.home_description!}</p>
         <#if settings.enabled_index_cover_height!true>
-          <p class=" w-full text-4xl absolute bottom-11 text-center">
+          <p class="w-full text-4xl absolute bottom-11 text-center">
             <a class="arrow-down z-50 <#if settings.enabled_index_cover_height!true>hidden sm:hidden md:block <#else>hidden</#if>" href="javascript:void(0)">
               <span class="iconfont icon-toBottom text-white dark:text-gray-300"></span>
             </a>
@@ -29,7 +29,6 @@
       </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>">
-
       <#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">

diff --git a/module/header.ftl b/module/header.ftl
@@ -1,4 +1,4 @@
-<header class="nav-wrapper -sticky bg-transparent transition-opacity duration-300" id="navHeader"
+<header class="nav-wrapper w-full -sticky bg-transparent transition-opacity duration-300 opacity-100" id="navHeader"
         style="flex: 0 0 auto;">
   <nav class="nav bg-white md:bg-transparent" id="nav">
     <label class="inline-grid select-none place-content-center cursor-pointer h-full swap swap-rotate nav-lines ">
@@ -25,32 +25,34 @@
         </#if>
         <@menuTag method="tree">
           <#list menus?sort_by('priority') as menu>
-            <li class="item p-0">
-              <a class="menu-item link md:text-base sm:text-sm text-gray-100" data-path="${menu.url!}"
-                 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 class="item p-0 <#if menu.children?? && menu.children?size gt 0>has-sub relative cursor-pointer</#if>">
+              <#if menu.children?? && menu.children?size gt 0>
+                  <span class="link text-gray-800 dark:text-gray-100 md:text-base sm:text-sm text-gray-100">${menu.name}</span>
+                  <ul class="sub-menu-item bg-white dark:bg-gray-800 block md:hidden md:absolute z-50 w-auto md:text-center rounded-md md:shadow-lx">
+                    <#list menu.children?sort_by('priority') as child>
+                    <li class="item pl-10 md:pl-0 h-8 w-full m-0 min-w-max">
+                      <a class="menu-item text-gray-800 dark:text-gray-100 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>
+                <#else>
+                  <a class="menu-item link text-gray-800 dark:text-gray-100 md:text-base sm:text-sm text-gray-100" data-path="${menu.url!}"
+                     href="${menu.url!}" target="${menu.target!}">
+                    ${menu.name}
+                  </a>
+              </#if>
             </li>
           </#list>
         </@menuTag>
 
         <li class="item p-0 flex flex-col md:flex-row" style="margin-left: auto;">
-           <span class="link fill-current" style="padding-top: 0.8rem;">
+           <span class="link text-gray-800 dark:text-gray-100 fill-current" style="padding-top: 0.8rem;">
             <#include "dark_mode.ftl"/>
           </span>
-          <span class="iconfont icon-search fill-current link search-btn ml-0 md:ml-4 cursor-pointer" style="padding-top: 1rem; font-size: 1.4rem"></span>
+          <span class="iconfont icon-search fill-current link text-gray-800 dark:text-gray-100 search-btn ml-0 md:ml-4 cursor-pointer" style="padding-top: 1rem; font-size: 1.4rem"></span>
         </li>
       </div>
       <div class="list -right">

diff --git a/module/pjax.ftl b/module/pjax.ftl
@@ -18,6 +18,8 @@
 
       xueContext.handleNavActive();
       
+      xueContext.handleNavTheme()
+      
       // 重新加载 评论
       $('script[data-pjax-comment]').each(function () {
         const commentParent = $(this).parent();
@@ -51,6 +53,11 @@
         xueContext.arrowDown()
       }
 
+      if ($("#container").find('.icon-Share').length > 0) {
+        xueContext.shareBtn()
+        xueContext.shareItem()
+      }
+
       // alipay
       if ($("#container").find('#alipay').length > 0) {
         xueContext.toggleAlipay()

diff --git a/module/widget/popular_posts.ftl b/module/widget/popular_posts.ftl
@@ -1,17 +1,16 @@
 <#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">
+  <div class="relative mt-1 md:mt-0 h-28 sm:h-24 md:h-36 dark:filter-60 shadow-lg rounded-md">
     <#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}"/>
+      <img class="object-cover w-full h-28 sm:h-24 md:h-36 rounded-md" 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}"
+      <img class="object-cover w-full img-random h-28 sm:h-24 md:h-36 dark:filter-60 rounded-md" 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>  
+      <span class="full-image placeholder-bg w-full h-28 sm:h-24 md:h-36 rounded-md" 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="absolute top-0 left-0 p-5 w-full h-full rounded-md 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>

diff --git a/module/widget/sponsor.ftl b/module/widget/sponsor.ftl
@@ -2,14 +2,14 @@
     <section class="donate inline-block text-center my-4 mx-auto w-56">
         <div class="icon relative inline-block border-gray-100 dark:border-gray-700 border bg-white dark:bg-gray-800 rounded-full py-3 px-6 z-20">
             <#if settings.QR_code_zfb??>
-                <a href="javascript:;" id="alipay" class="pr-3 border-gray-600 dark:border-gray-700 border-r text-xl" onClick="toggleAliPay()" 
+                <a href="javascript:;" id="alipay" class="text-xl"
                    style="text-decoration: none !important; box-shadow: none !important;">
-                  <i class="iconfont icon-yooxi text-xl dark:text-gray-300"></i></a>
+                  <i class="iconfont icon-yooxi hover:text-red-500 text-xl dark:text-gray-300 border-r border-gray-600 dark:border-gray-700 pr-3"></i></a>
             </#if>
             <#if settings.QR_code_wx??>
-                <a href="javascript:;" id="wechat" class="pl-3"  onClick="toggleWeChat()"
+                <a href="javascript:;" id="wechat" class="pl-3" 
                    style="text-decoration: none !important; box-shadow: none !important;">
-                  <i class="iconfont icon-wechat text-xl dark:text-gray-300"></i></a>
+                  <i class="iconfont icon-wechat hover:text-red-500 text-xl dark:text-gray-300"></i></a>
             </#if>
         </div>
         <#if settings.QR_code_zfb??>

diff --git a/post.ftl b/post.ftl
@@ -36,21 +36,44 @@
            id="lightGallery">
         ${post.content!}
         <hr class="bg-gray-100 dark:bg-gray-700 ">
-        <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="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}">
+        <div class="flex flex-row justify-between flex-wrap">
+          <div class="tag-list">
+            <#if post.tags?? && post.tags?size gt 0>
+              <#list post.tags as tag>
+                <a href="${tag.fullPath!}" class="relative inline-block badge shadow-none ml-2 post-tag"
+                   style="box-shadow: none !important;">
+                  <i class="bg-red-400 opacity-10 hover:opacity-20 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>
+          </div>
+          <#if settings.allow_share!true>
+            <div class="share-items ml-2 mt-2 md:mt-0 ">
+              <a class="share-link" href="javascript:;" data-clipboard-text="${post.fullPath!}"
+                 rel="noopener noreferrer" title="复制文章链接">
+                <span class="iconfont icon-round_link_fill text-3xl"></span>
+              </a>
+              <a class="share-item" href="http://service.weibo.com/share/share.php?sharesource=weibo&title=分享：${post.title!}，原文链接：{url}&pic=${post.thumbnail!}"
+                 target="_blank" rel="noopener noreferrer" title="分享到新浪微博">
+                <span class="iconfont icon-xinlang text-3xl" style="color:rgb(245, 100, 103);"></span>
+              </a>
+              <a class="share-item" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={url}&sharesource=qzone&title=${post.title!}&pics=${post.thumbnail!}"
+                 target="_blank" rel="noopener noreferrer" title="分享到QQ空间">
+                <span class="iconfont icon-Qzone text-3xl" style="color: rgb(245, 190, 63);"></span>
               </a>
-            </#list>
+              <a class="share-item" href="https://connect.qq.com/widget/shareqq/index.html?url={url}&title=${post.title!}&pics=${post.thumbnail!}"
+                 target="_blank" rel="noopener noreferrer" title="分享到QQ">
+                <span class="iconfont icon-QQ text-3xl" style=" color: rgb(104, 165, 225);"></span>
+              </a>
+            </div>
           </#if>
-        </p>
+        </div>
       </div>
       <div id="tocFlag"></div>
       <#if settings.post_toc!true>

diff --git a/screenshot.png b/screenshot.png