From 2fb658d08586695153e9bb5cd388e5c6ca0c6ca6 Mon Sep 17 00:00:00 2001 From: augushong Date: Wed, 7 Apr 2021 23:04:08 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E6=A0=91=E5=BD=A2=E7=BB=84?= =?UTF-8?q?=E4=BB=B6,=E4=BD=86=E6=98=AF=E9=80=BB=E8=BE=91=E5=92=8C?= =?UTF-8?q?=E7=BB=93=E6=9E=84=E4=B8=8D=E5=90=88=E9=80=82,=E9=87=8D?= =?UTF-8?q?=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/model/Post.php | 11 ++- demo/tree.html | 185 ++++++++++++++++++++++++++++++++++++ public/cdn/layui-ul.css | 59 +++++++++--- view/index/index/index.html | 28 ++++++ 4 files changed, 265 insertions(+), 18 deletions(-) create mode 100644 demo/tree.html diff --git a/app/model/Post.php b/app/model/Post.php index 238e27c..eb9b7ce 100644 --- a/app/model/Post.php +++ b/app/model/Post.php @@ -6,6 +6,7 @@ namespace app\model; use think\facade\App; use think\facade\Cache; +use think\facade\View; use think\Model; use think\model\concern\SoftDelete; @@ -157,7 +158,7 @@ class Post extends Model return ''; } - return file_get_contents($file_path); + return View::fetch($file_path); } public static function quickSelect($clear = false) @@ -179,15 +180,15 @@ class Post extends Model return $list_post; } - public static function quickFind($id,$clear = false) + public static function quickFind($id, $clear = false) { - $cache_key = 'post_'.$id; + $cache_key = 'post_' . $id; $model_post = Cache::get($cache_key); - if(empty($model_post) || $clear){ + if (empty($model_post) || $clear) { $model_post = Post::find($id); - Cache::set($cache_key,$model_post,600); + Cache::set($cache_key, $model_post, 600); } return $model_post; diff --git a/demo/tree.html b/demo/tree.html new file mode 100644 index 0000000..cd5ccda --- /dev/null +++ b/demo/tree.html @@ -0,0 +1,185 @@ +
+ 静态HTML目录 +
+
+ 直接复制html样式,需要给每个单位置顶level,然后使用js去整理一下样式 +
+ 需要自己写出目录收缩逻辑 +
+
+
+ + 读书笔记 +
+
+ 小说 +
+
+ + 技术笔记 +
+
+ Mysql +
+
+ + PHP +
+
+ 扩展 +
+
+ 框架 +
+
+ 库 +
+
+
+ 

+      
+    

+  

+

+

+  动态生成
+  

+    

+      其实在生成目录时,只需要一个简单地上下级关系和正确的level层级,很容易写出收缩逻辑.
+      

+      但是如果不愿意写更多的js逻辑,那么你可以生成一个多层级关系的json,然后把js的逻辑复制走,就像下面的代码一样
+    

+    

+
+    

+
+    

+      

+      
+    

+
+  

+

\ No newline at end of file
diff --git a/public/cdn/layui-ul.css b/public/cdn/layui-ul.css
index d8a4e00..250aa0e 100644
--- a/public/cdn/layui-ul.css
+++ b/public/cdn/layui-ul.css
@@ -251,6 +251,7 @@
   margin    : 15px;
   text-align: center;
   min-width : 220px;
+
 }
 
 .ul-photo-poster {
@@ -260,6 +261,7 @@
   background-size    : cover;
   background-position: center;
   margin             : 0 auto;
+  box-shadow         : 1px 1px 3px #999;
 }
 
 .ul-photo-info {
@@ -313,7 +315,7 @@
 
 .ul-info-tips {
   padding         : 15px;
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(255, 255, 255, 0.6);
 }
 
 .ul-card-status {
@@ -484,30 +486,61 @@
   height          : 120px;
   margin          : 5px;
   background-color: #ddd;
-  cursor    : pointer;
-  box-shadow: 0 3px 5px #999;
-  position  : relative;
+  cursor          : pointer;
+  box-shadow      : 0 3px 5px #999;
+  position        : relative;
 }
 
 .ul-upload-photo-main {
   background-size    : cover;
   background-position: center;
-  width: 100%;
-  height: 100%;
+  width              : 100%;
+  height             : 100%;
 }
 
 .ul-upload-photo-delete {
-  position: absolute;
-  right   : 5px;
-  top     : 5px;
-  z-index: 999;
-  font-size: 20px;
-  color: #fff;
+  position   : absolute;
+  right      : 5px;
+  top        : 5px;
+  z-index    : 999;
+  font-size  : 20px;
+  color      : #fff;
   text-shadow: 0 0 2px #000;
 }
 
 .ul-upload-photo-button {
-  background-image: url('img/upload.png');
+  background-image   : url('img/upload.png');
   background-size    : cover;
   background-position: center;
+}
+
+.ul-form-group-title {
+  color        : #999;
+  border-bottom: 1px solid #bbb;
+  padding      : 5px 0;
+  margin-bottom: 15px;
+}
+
+.ul-tree-item {
+  padding         : 8px;
+  background-color: #fbfbfb;
+  position        : relative;
+  border-left     : 3px solid transparent;
+  cursor          : pointer;
+}
+
+.ul-tree-item:hover,
+.ul-tree-item.current {
+  background-color: #9cf;
+  border-color    : #6699CC;
+}
+
+.ul-tree-item-title {
+  margin-left: 15px;
+}
+
+.ul-tree-item-icon {
+  position: absolute;
+  left    : 5px;
+  top     : 10px;
 }
\ No newline at end of file
diff --git a/view/index/index/index.html b/view/index/index/index.html
index 27778f1..ca5e924 100644
--- a/view/index/index/index.html
+++ b/view/index/index/index.html
@@ -84,8 +84,36 @@
       })
     }
     renderRepeat('body')
+
+    $('.demo-js-src').each(function () {
+      var html = $(this).html();
+      var htmlList = html.split(/[\n]/g);
+      var htmlListNew = []
+      var baseLineBlankNums = -1;
+      htmlList.forEach(function (htmlLine, htmlIndex) {
+        if (htmlIndex == 0 && htmlLine.length == 0) {
+          return true
+        }
+        if (baseLineBlankNums < 0) {
+          var kong = htmlLine.match(/^ */g) //筛选
+          if (kong != null) {
+            baseLineBlankNums = kong[0].length
+          } else {
+            baseLineBlankNums = 0
+          }
+        }
+
+        htmlListNew.push(htmlLine.slice(baseLineBlankNums))
+      });
+
+      $(this).siblings('pre.demo-js').html(htmlListNew.join("\n"))
+    })
     layui.form.render()
     layui.element.render()
+    layui.code({
+      encode: true
+    })
+