🤪解决pjax开启后跳出页面模态框不消失的问题，解决页面宽度问题，固定限制作者文章卡片仅显示五个

index.html

@@ -21,8 +21,8 @@
         }
     }
 </script>
-<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/willow-god/Friend-Circle-Lite/main/fclite.min.css">
+<link rel="stylesheet" href="./main/fclite.min.css">
-<script src="https://fastly.jsdelivr.net/gh/willow-god/Friend-Circle-Lite/main/fclite.min.js"></script>
+<script src="./main/fclite.min.js"></script>
 </body>
 
 </html>

main/fclite.css

@@ -136,18 +136,18 @@ body {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 400px;
+    width: 350px;
     background-color: var(--modal-content-bg-color);
     padding: 20px;
     border: 1px solid var(--border-color);
     z-index: 1000;
-    max-height: 95%;
+    max-height: 85%;
     overflow-y: auto;
     border-radius: 20px;
     transition: opacity 0.3s;
 }
 
-@media screen and (max-width: 400px) {
+@media screen and (max-width: 440px) {
     .modal-content {
         width: 80%;
     }
@@ -194,6 +194,7 @@ body {
 }
 
 .modal-article .modal-article-title {
+    color: var(--text-color);
     font-size: 18px;
     line-height: 1.2;
     cursor: pointer;

main/fclite.js

@@ -20,19 +20,6 @@ function initialize_fc_lite() {
     loadMoreBtn.innerText = '显示更多';
     root.appendChild(loadMoreBtn);
 
-    // 创建模态框结构
-    const modal = document.createElement('div');
-    modal.id = 'modal';
-    modal.className = 'modal';
-    modal.innerHTML = `
-        <div class="modal-content">
-            <img id="modal-author-avatar" src="" alt="">
-            <a id="modal-author-name-link"></a>
-            <div id="modal-articles-container"></div>
-        </div>
-    `;
-    document.body.appendChild(modal); // this.body 改为 document.body
-
     // 创建统计信息容器
     const statsContainer = document.createElement('div');
     statsContainer.id = 'stats-container';
@@ -117,7 +104,7 @@ function initialize_fc_lite() {
 
             const date = document.createElement('div');
             date.className = 'card-date';
-            date.innerText = article.created.substring(0, 10);
+            date.innerText = "🗓️" + article.created.substring(0, 10);
             card.appendChild(date);
 
             const bgImg = document.createElement('img');
@@ -137,6 +124,21 @@ function initialize_fc_lite() {
     }
 
     function showAuthorArticles(author, avatar, link) {
+        // 如果不存在，则创建模态框结构
+        if (!document.getElementById('modal')) {
+            const modal = document.createElement('div');
+            modal.id = 'modal';
+            modal.className = 'modal';
+            modal.innerHTML = `
+            <div class="modal-content">
+                <img id="modal-author-avatar" src="" alt="">
+                <a id="modal-author-name-link"></a>
+                <div id="modal-articles-container"></div>
+            </div>
+            `;
+            document.body.appendChild(modal);
+        }
+
         const modal = document.getElementById('modal');
         const modalArticlesContainer = document.getElementById('modal-articles-container');
         const modalAuthorAvatar = document.getElementById('modal-author-avatar');
@@ -149,7 +151,8 @@ function initialize_fc_lite() {
         modalAuthorNameLink.href = new URL(link).origin;
 
         const authorArticles = allArticles.filter(article => article.author === author);
-        authorArticles.forEach(article => {
+        // 仅仅取前五个，防止文章过多导致模态框过长，如果不够五个则全部取出
+        authorArticles.slice(0, 5).forEach(article => {
             const articleDiv = document.createElement('div');
             articleDiv.className = 'modal-article';
 
@@ -162,7 +165,7 @@ function initialize_fc_lite() {
 
             const date = document.createElement('div');
             date.className = 'modal-article-date';
-            date.innerText = "--" + article.created.substring(0, 10);
+            date.innerText = "📅" + article.created.substring(0, 10);
             articleDiv.appendChild(date);
 
             modalArticlesContainer.appendChild(articleDiv);
@@ -181,6 +184,7 @@ function initialize_fc_lite() {
         modal.classList.remove('modal-open');
         modal.addEventListener('transitionend', () => {
             modal.style.display = 'none';
+            document.body.removeChild(modal);
         }, { once: true });
     }