修复了开启 PJAX 的情况下，从其它页面进入文章页不显示移动设备目录的问题

1. post.php 调整了插入移动设备目录的位置 2. assets/js/app.js 加入了移动设备目录状态判断和状态重置 3. functions.php 调整了一些选项的默认值和说明 4. assets/js/options-panel.js 给主题设置的选项分组加入了分隔线 5. README.md 更新了主题说明
changbin1997 · Jul 30, 2024 · 79d2261 · 79d2261
1 parent ccf06ee
commit 79d2261
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -38,16 +38,18 @@ Facile 相比 [MWordStar](https://github.com/changbin1997/MWordStar) 来说，
 
 * 响应式设计
 * 无障碍适配（Accessibility）
-* 包含浅色和深色两套配色
+* 包含浅色和深色两套配色（可根据系统主题配色自动调节）
 * 代码高亮
 * 自带点赞功能
 * 支持根据文章内插入的标题生成章节目录
 * 支持图片懒加载
 * 支持文章分页
+* 文章列表支持多种排版方式
 * 丰富的侧边栏组件
 * 丰富的设置选项
 * 详细的图表统计
 * 评论区自带 Emoji 表情面板
+* 支持 PJAX 无刷新跳转
 * 详细的 [帮助文档](https://facile.misterma.com/) （必看）
 * 长期维护
 
@@ -66,6 +68,7 @@ Facile 相比 [MWordStar](https://github.com/changbin1997/MWordStar) 来说，
 * [qrious](https://github.com/neocotic/qrious) 生成二维码的 JS 库
 * [highlight.js](https://highlightjs.org/) 代码高亮
 * [ECharts](https://github.com/apache/echarts) 百度开源的图表库，用于 [统计页](https://www.misterma.com/data.html) 生成统计图
+* [jquery-pjax](https://github.com/defunkt/jquery-pjax) 用于页面无刷新跳转
 
 后端没有用到任何库。
 

diff --git a/assets/js/app.js b/assets/js/app.js
@@ -698,25 +698,30 @@ $(function () {
       return false;
     });
 
-    // 移动设备的目录按钮点击
-    $('#directory-btn').on('click', () => {
-      if (!directory) {
-        $('#directory-mobile').css('display', 'flex');
-        $('#directory-mobile').animate({opacity: 1}, 250);
-        directory = true;
-      }else {
-        $('#directory-mobile').animate({opacity: 0}, 250, () => {
-          $('#directory-mobile').hide();
-        });
-        directory = false;
-      }
-      $('#directory-btn').attr('aria-expanded', directory);
-    });
+    // 如果开启了移动设备文章目录就给目录添加事件
+    if ($('#directory-mobile').length) {
+      // 重置目录状态
+      if (directory) directory = false;
+      // 移动设备的目录按钮点击
+      $('#directory-btn').on('click', () => {
+        if (!directory) {
+          $('#directory-mobile').css('display', 'flex');
+          $('#directory-mobile').animate({opacity: 1}, 250);
+          directory = true;
+        }else {
+          $('#directory-mobile').animate({opacity: 0}, 250, () => {
+            $('#directory-mobile').hide();
+          });
+          directory = false;
+        }
+        $('#directory-btn').attr('aria-expanded', directory);
+      });
 
-    // 移动设备的关闭目录按钮点击
-    $('#directory-mobile .close-btn').on('click', () => {
-      $('#directory-btn').click();
-    });
+      // 移动设备的关闭目录按钮点击
+      $('#directory-mobile .close-btn').on('click', () => {
+        $('#directory-btn').click();
+      });
+    }
   }
 
   // 调整侧边栏章节目录的尺寸

diff --git a/assets/js/options-panel.js b/assets/js/options-panel.js
@@ -28,6 +28,11 @@ window.addEventListener('load', function() {
   form.insertBefore(titleEl[7], ul[40]);  // PJAX
   form.insertBefore(titleEl[8], ul[43]);  // 开发者
 
+  // 插入分隔线
+  titleEl.forEach(function(el) {
+    form.insertBefore(document.createElement('hr'), el);
+  });
+
   // 导出配置按钮点击
   document.querySelector('#export-btn').addEventListener('click', function() {
     var input = document.querySelectorAll('form input');  // 获取所有 input

diff --git a/functions.php b/functions.php
@@ -91,7 +91,7 @@ function themeConfig($form) {
     ), 'off', _t('面包屑导航'), _t('开启后会在导航栏下方显示路劲导航。')));
 
     // 自定义导航栏链接
-    $form->addInput(new Typecho_Widget_Helper_Form_Element_Textarea('navLinks', null, null, _t('自定义导航栏链接'), _t('您可以在导航栏添加自定义链接，链接的名称和 URL 都可以自定义，导航栏链接需要使用 JSON 配置，格式为 <b style="color: #C7254E;"><code>[{"name": "链接名称1", "url": "http"}, {"name": "链接名称2", "url": "http"}]</code></b> 。')));
+    $form->addInput(new Typecho_Widget_Helper_Form_Element_Textarea('navLinks', null, null, _t('自定义导航栏链接'), _t('您可以在导航栏添加自定义链接，链接的名称和 URL 都可以自定义，导航栏链接需要使用 JSON 配置 <a href="https://facile.misterma.com/%E4%B8%BB%E9%A2%98%E8%AE%BE%E7%BD%AE.html#%E8%BF%9B%E5%85%A5%E4%B8%BB%E9%A2%98%E8%AE%BE%E7%BD%AE" target="_blank">点击查看配置说明</a>。')));
 
     // 导航栏图片 logo
     $form->addInput(new Typecho_Widget_Helper_Form_Element_Text('navLogoUrl', null, null, _t('站点 Logo 图片地址'), _t('站点 Logo 图片会显示在顶部导航栏的左侧，支持常见的图片格式，包括 SVG，只要能在 img 标签显示的图片都可以，留空会使用站点名称作为 Logo。')));
@@ -198,7 +198,7 @@ function themeConfig($form) {
     $form->addInput(new Typecho_Widget_Helper_Form_Element_Textarea('headerImageUrl', null, null, _t('默认文章头图'), _t('这里可以填写默认的文章头图 URL，一行一个，系统会在默认文章头图地址中随机选择一个来加载文章头图。要使用默认文章头图，文章编辑页的文章头图来源需要设置为 使用系统设置。')));
 
     // 文章底部的交互功能配置
-    $form->addInput(new Typecho_Widget_Helper_Form_Element_Text('engagementSection', null, '点赞,打赏,分享', _t('文章底部的交互功能'), _t('文章底部要使用的交互功能，支持 <b style="color: #C7254E;">点赞,打赏,分享</b>，功能名称之间用英文逗号分隔，逗号之间不需要空格，结尾不需要逗号，功能按钮的顺序会根据这里设置的名称顺序排序。')));
+    $form->addInput(new Typecho_Widget_Helper_Form_Element_Text('engagementSection', null, '点赞,分享', _t('文章底部的交互功能'), _t('文章底部要使用的交互功能，支持 <b style="color: #C7254E;">点赞,打赏,分享</b>，功能名称之间用英文逗号分隔，逗号之间不需要空格，结尾不需要逗号，功能按钮的顺序会根据这里设置的名称顺序排序。')));
 
     // 打赏二维码地址
     $form->addInput(new Typecho_Widget_Helper_Form_Element_Text('rewardQr', null, '', _t('打赏二维码图片地址'), _t('文章下方的打赏按钮点击后可以显示一个二维码图片，你可以在这里设置图片地址，图片的最大宽度就是文章区域的宽度，高度不限制，图片会居中显示。')));

diff --git a/post.php b/post.php
@@ -192,21 +192,21 @@
         </div>
         <?php $this->need('components/sidebar.php'); ?>
     </div>
-</div>
-<?php if ($this->options->directoryMobile == 'enable'): ?>
-    <button type="button" id="directory-btn" class="btn text-primary rounded-circle border d-block d-sm-block d-md-block d-lg-none d-xl-none" aria-expanded="false" aria-label="目录" title="目录">
-        <i class="icon-list-ol"></i>
-    </button>
-    <div id="directory-mobile" class="border rounded shadow" style="display: none;">
-        <div class="title-bar border-bottom">
-            <h5 class="m-0">目录</h5>
-            <button type="button" class="btn btn-sm close-btn" aria-label="关闭目录" title="关闭目录">
-                <i class="icon-cancel-circle"></i>
-            </button>
-        </div>
-        <div class="p-3 directory-list">
-            <?php echo $GLOBALS['post']['directory']; ?>
+    <?php if ($this->options->directoryMobile == 'enable'): ?>
+        <button type="button" id="directory-btn" class="btn text-primary rounded-circle border d-block d-sm-block d-md-block d-lg-none d-xl-none" aria-expanded="false" aria-label="目录" title="目录">
+            <i class="icon-list-ol"></i>
+        </button>
+        <div id="directory-mobile" class="border rounded shadow" style="display: none;">
+            <div class="title-bar border-bottom">
+                <h5 class="m-0">目录</h5>
+                <button type="button" class="btn btn-sm close-btn" aria-label="关闭目录" title="关闭目录">
+                    <i class="icon-cancel-circle"></i>
+                </button>
+            </div>
+            <div class="p-3 directory-list">
+                <?php echo $GLOBALS['post']['directory']; ?>
+            </div>
         </div>
-    </div>
-<?php endif; ?>
+    <?php endif; ?>
+</div>
 <?php $this->need('components/footer.php'); ?>