完善文档最佳实践

2025-01-27 20:41:22 +08:00
parent 5153daf7da
commit feed91dcd0
4 changed files with 87 additions and 7 deletions
@@ -0,0 +1,79 @@
+前端页面编写
+========================
+
+Pear Admin Flask 并没有实现前后端分离，因为存在部分页面的数据是直接通过模板渲染的方式直接渲染在 HTML 中的。但我们将展示给用户浏览器里的页面都称为前端。
+
+公用模板文件
+--------------------
+
+项目使用 Flask 搭建，其所有模板文件均存放在 `templates` 文件夹中。公用模板文件保存在 `templates/system/common` ，分别是：
+
+* header.html  --  头部包含文件，包含了后台页面通用的 css 文件
+* footer.html  --  页脚包含文件，包含了后台页面通用的 js 文件
+
+在写后台内嵌页面时，可以参考下面的模板：
+
+.. code-block:: html
+
+    <!DOCTYPE html>
+    <html>
+    <head>
+        <title>这是标题</title>
+        {% include 'system/common/header.html' %}  <!-- 组件式嵌入不需要这行 -->
+        <!-- 这里可以包含其他文件 -->
+    </head>
+
+    <body class="pear-container">
+    <!-- 正文内容 -->
+    </body>
+
+    {% include 'system/common/footer.html' %}  <!-- 组件式嵌入不需要这行 -->
+    <script> // 你的脚本写这里 </script>
+    </html>
+
+.. note::
+
+    需要注意的是，`header.html` 和 `footer.html` 包含了主题色和夜间模式切换的脚本，如果不想包含这两个文件的话，
+    还想进行主题色和夜间模式切换可能需要自行添加脚本。（可以参考这两个文件中的内容）
+
+正确的后台页面嵌入方式
+-----------------------
+
+Pear Admin Layui 主项目更新之后，提供了 组件式嵌入（_component） 和 iframe嵌入（_iframe） 两种方式。在编写前端页面时，
+不同的嵌入方式有所不同，各有优劣。
+
+对于组件式嵌入，可以提供更良好的用户体验，如果页面不存在则会弹出 404 提示信息，对于iframe嵌入，则会直接打开（即使不存在）。
+
+.. important::
+    **使用组件式嵌入时，上述的参考模板不在需要包含 header.html 和 footer.html 文件，如果包含这两个文件会直接影响到后台框架页面的排版和脚本调用！**
+
+经过测试，组件式嵌入仅适合于唯一且静态的页面，不建议在其中 **添加事件绑定的脚本** ，因为组件式嵌入会将页面内容直接嵌入 div 元素中，
+并动态执行脚本，但是执行的脚本绑定的事件并不会因为页面关闭而销毁。简单说明就是，假设脚本中存在计时器，计时器不会在组件式嵌入的页面销毁之后而销毁。
+
+所以在 Pear Admin Flask 项目中，仅首页（后台数据统计页面）和个人资料页面使用组件式嵌入，其余均使用iframe嵌入。
+
+关于主题色和夜间模式
+-----------------------
+
+如果开发的是后台管理页面，主题色和夜间模式是必要的，这样可以增加观感。
+Pear Admin Layui 的控制主题色逻辑是通过设置全局的 css 属性：`--global-primary-color`
+
+比如对于 `.layui-btn` ：
+
+.. code-block:: css
+
+    .layui-btn {
+        background-color: var(--global-primary-color);
+    }
+
+所以，如果您添加了自定义元素，并想要其跟随主题色变化，请确保引用了 `--global-primary-color` 属性。
+
+对于夜间模式，本质上就是修改 body 的 class ，使其添加上 `pear-admin-dark` ，比如 `.layui-btn` 的夜间模式 css 为：
+
+.. code-block:: css
+
+    .pear-admin-dark .layui-btn {
+        color: #ffffff;
+        border-color: #4C4D4F;
+    }
+