pref: 优化归档页面并默认展示所有文章 (#525)

LIlGG · May 30, 2024 · e4e986f · e4e986f
1 parent 2f712af
commit e4e986f
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 4 deletions.
diff --git a/src/css/theme/archives/content.css b/src/css/theme/archives/content.css
@@ -7,7 +7,7 @@
     &::before {
       content: "";
       position: absolute;
-      height: 75%;
+      height: calc(100% - 65px);
       border-left: 1px dashed #fff;
       left: 17px;
       top: 30px;

diff --git a/src/page/archives.ts b/src/page/archives.ts
@@ -3,6 +3,17 @@ import { documentFunction } from "../main";
 //TODO 尝试使用 animate 来重构动画，去掉 jquery 某些过渡动画比较不方便。
 
 export default class Archives {
+
+  @documentFunction()
+  public initArchiveHeight() {
+    const archiveActiveElements = document.querySelectorAll(".archive-item.active");
+    archiveActiveElements.forEach((element) => {
+      const posts = element.querySelector(".archive-posts") as HTMLElement;
+      var height = posts?.scrollHeight;
+      posts.style.maxHeight = height + 'px';
+    });
+  }
+
   @documentFunction()
   public registerArchiveEvent() {
     const archiveTitleElements = document.querySelectorAll(".archives-article .archive-title h3");
@@ -11,6 +22,8 @@ export default class Archives {
         const archiveElement = element.parentElement?.parentElement;
         const posts = archiveElement?.querySelector(".archive-posts") as HTMLElement;
         if (archiveElement?.classList.contains("active")) {
+          var height = posts?.scrollHeight;
+          posts.style.maxHeight = height + 'px';
           posts.style.maxHeight = '0';
           archiveElement.classList.remove("active");
         } else {

diff --git a/templates/archives.html b/templates/archives.html
@@ -17,7 +17,7 @@ <h1 data-i18n="page.archives.title"></h1>
     <article class="archives-article">
       <div id="archives-temp" class="archives-inner">
         <div class="archives-content">
-          <th:block th:each="archive, archiveStat : ${archives.items}">
+          <th:block th:each="archive, archiveStat : ${postFinder.archives(1, 0).items}">
             <th:block th:each="month, monthStat : ${archive.months}">
               <div class="archive-item" th:classappend="${archiveStat.index == 0 ? 'active' : ''}" th:id="|arti-${archive.year}-${month.month}|">
                 <div class="archive-title">

diff --git a/templates/assets/dist/css/main.min.css b/templates/assets/dist/css/main.min.css
diff --git a/templates/assets/dist/page/archives.min.js b/templates/assets/dist/page/archives.min.js