diff --git a/README.md b/README.md
index 11934ded89858c017e0cb37cd6c7927622d1f970..f9e97ddc06c3f5561713bc94c127e2244300ee92 100644
--- a/README.md
+++ b/README.md
@@ -49,6 +49,7 @@ au run build --env prod
 - https://github.com/kpdecker/jsdiff  
 - https://github.com/myliang/x-spreadsheet  
 - https://github.com/ssshooter/mind-elixir-core  
+- http://www.sortablejs.com/index.html  
 
 ## 优秀产品
 
diff --git a/blog.html b/blog.html
index 5a71129abfb3e0a565a49445246a730b521e5376..79bab4afd3a661496d79e039800a8ea833edfce1 100644
--- a/blog.html
+++ b/blog.html
@@ -626,6 +626,7 @@
                     var content = $('#edit').froalaEditor('html.get', true);
                     var spaceId = url('?spaceId');
                     var dirId = url('?dirId');
+                    var pid = url('?pid');
 
                     if (!title || !$.trim(title)) {
                         toastr && toastr.error('博文标题不能为空！');
@@ -639,8 +640,8 @@
 
                     if (blog == null) {
 
-                        if (spaceId) { // 基于空间或者目录创建博文场景
-                            createBlog(spaceId, dirId);
+                        if (spaceId || pid) { // 基于空间或者目录创建博文场景
+                            createBlog(spaceId, dirId, pid);
                         } else {
                             $.get('/admin/space/listMy', function (data) {
                                 if (data.success) {
@@ -727,7 +728,7 @@
             }
         });
 
-        function createBlog(spaceId, dirId) {
+        function createBlog(spaceId, dirId, pid) {
 
             var title = $('#title').val();
             var content = $('#edit').froalaEditor('html.get', true);
@@ -744,7 +745,7 @@
 
             if (blog == null) {
 
-                if (!spaceId) {
+                if (!spaceId && !pid) {
 
                     $.modal.close();
 
@@ -766,6 +767,7 @@
                     spaceId: spaceId ? spaceId : $('#saveFrm select[name="space"]').val(),
                     dirId: dirId ? dirId : (spaceId ? '' : $('#saveFrm select[name="dir"]')
                         .val()), // 如果只是基于空间，目录设置为空
+                    pid: pid ? pid : '',
                     title: title,
                     content: content,
                     editor: 'Html',
diff --git a/excel.html b/excel.html
index 4b8c28dc8607b655c10d8edb04d6316bf10699b5..bc5f8d6bc70ec339a5fad99b133daf88fad30245 100644
--- a/excel.html
+++ b/excel.html
@@ -276,6 +276,7 @@
             var cid = url('?cid');
             var spaceId = url('?spaceId');
             var dirId = url('?dirId');
+            var pid = url('?pid');
 
             var readonly = typeof url('?readonly') !== 'undefined';
             !readonly && $('#editor').removeClass('readonly');
@@ -578,8 +579,8 @@
 
                     if (blog == null) {
 
-                        if (spaceId) {
-                            createBlog(spaceId, dirId);
+                        if (spaceId || pid) {
+                            createBlog(spaceId, dirId, pid);
                         } else {
                             $.get('/admin/space/listMy', function (data) {
                                 if (data.success) {
@@ -657,7 +658,7 @@
                 });
             }
 
-            function createBlog(spaceId, dirId) {
+            function createBlog(spaceId, dirId, pid) {
                 var title = $('#title').val();
                 var content = JSON.stringify(excel.getData());
 
@@ -673,7 +674,7 @@
 
                 if (blog == null) {
 
-                    if (!spaceId) {
+                    if (!spaceId && !pid) {
                         $.modal.close();
 
                         localStorage && localStorage.setItem('tms-blog-html-space', $(
@@ -690,6 +691,7 @@
                             '/page/index.html',
                         spaceId: spaceId ? spaceId : $('#saveFrm select[name="space"]').val(),
                         dirId: dirId ? dirId : (spaceId ? '' : $('#saveFrm select[name="dir"]').val()),
+                        pid: pid ? pid : '',
                         title: title,
                         content: content,
                         editor: 'Excel',
diff --git a/mind.html b/mind.html
index afd6881c6af8e40609b9bac28bd25da3aa687dda..c50700c76e5e67942a0aac8ac6a6a8311a71c827 100644
--- a/mind.html
+++ b/mind.html
@@ -251,6 +251,7 @@
             var cid = url('?cid');
             var spaceId = url('?spaceId');
             var dirId = url('?dirId');
+            var pid = url('?pid');
 
             var readonly = typeof url('?readonly') !== 'undefined';
             !readonly && $('#editor').removeClass('readonly');
@@ -569,8 +570,8 @@
 
                     if (blog == null) {
 
-                        if (spaceId) {
-                            createBlog(spaceId, dirId)
+                        if (spaceId || pid) {
+                            createBlog(spaceId, dirId, pid)
                         } else {
                             $.get('/admin/space/listMy', function (data) {
                                 if (data.success) {
@@ -648,7 +649,7 @@
                 });
             }
 
-            function createBlog(spaceId, dirId) {
+            function createBlog(spaceId, dirId, pid) {
                 var title = $('#title').val();
 
                 mind.cancelFocus();
@@ -666,7 +667,7 @@
 
                 if (blog == null) {
 
-                    if (!spaceId) {
+                    if (!spaceId && !pid) {
                         $.modal.close();
 
                         localStorage && localStorage.setItem('tms-blog-html-space', $(
@@ -683,6 +684,7 @@
                             '/page/index.html',
                         spaceId: spaceId ? spaceId : $('#saveFrm select[name="space"]').val(),
                         dirId: dirId ? dirId : (spaceId ? '' : $('#saveFrm select[name="dir"]').val()),
+                        pid: pid ? pid : '',
                         title: title,
                         content: content,
                         editor: 'Mind',
diff --git a/src/environment.js b/src/environment.js
index da32a4b8736ba562799dc386e9e61a586c197be4..3495e9a9d2dc8567e56c399ed05f43c4a8ae2bec 100644
--- a/src/environment.js
+++ b/src/environment.js
@@ -1,4 +1,4 @@
 export default {
-  debug: false,
-  testing: false
+  debug: true,
+  testing: true
 };
diff --git a/src/resources/elements/em-blog-left-sidebar.html b/src/resources/elements/em-blog-left-sidebar.html
index 2bc3b1f27a7533acf8b0363d671e66e0b6251dc7..c5bf43dd4f66fb87dc6ea6de7002f73ce0a20220 100644
--- a/src/resources/elements/em-blog-left-sidebar.html
+++ b/src/resources/elements/em-blog-left-sidebar.html
@@ -16,7 +16,8 @@
                             <div show.bind="spaceStow.open" class="ui bulleted list">
                                 <template repeat.for="item of blogStows | sort:'blog.title'">
                                     <div if.bind="item.blog.status != 'Deleted'" show.bind="!item._hidden"
-                                        data-id="${item.blog.id}"
+                                        data-id="${item.blog.id}" data-pid="${item.blog.pid}"
+                                        data-has-child="${item.blog.hasChild}"
                                         class="item blog-item ${item.blog.id == $parent.blog.id ? 'active' : ''}">
                                         <a title="${item.blog.title}" href="#/blog/${item.blog.id}">
                                             <i class="icons">
@@ -41,7 +42,7 @@
                                 <template repeat.for="blog of blogs | hasProp:'_openTime' | sort:'_openTime':true | take:15 &
                                     signal:'sg-recent-open-refresh'">
                                     <div if.bind="blog.status != 'Deleted'" show.bind="!blog._hidden"
-                                        data-id="${blog.id}"
+                                        data-id="${blog.id}" data-pid="${blog.pid}" data-has-child="${blog.hasChild}"
                                         class="item blog-item ${blog.id == $parent.blog.id ? 'active' : ''}">
                                         <a title="${blog.title}" href="#/blog/${blog.id}">
                                             <i class="icons">
@@ -63,9 +64,10 @@
                                 ${spaceRecent.name}
                             </span>
                             <div show.bind="spaceRecent.open" class="ui bulleted list">
-                                <template repeat.for="blog of blogs | sort:'updateDate':true | take:20">
+                                <template repeat.for="blog of blogs | sort:'updateDate':true | take:20 &
+                                signal:'sg-recent-update-refresh'">
                                     <div if.bind="blog.status != 'Deleted'" show.bind="!blog._hidden"
-                                        data-id="${blog.id}"
+                                        data-id="${blog.id}" data-pid="${blog.pid}" data-has-child="${blog.hasChild}"
                                         class="item blog-item ${blog.id == $parent.blog.id ? 'active' : ''}">
                                         <a title="${blog.title}" href="#/blog/${blog.id}">
                                             <i class="icons">
@@ -112,19 +114,309 @@
                                                 </span>
                                                 <div show.bind="dir.open"
                                                     class="ui bulleted list tms-sortable-elem-blogs"
-                                                    data-id="${space.id}" data-dir-id=${dir.id}
+                                                    data-id="${space.id}" data-dir-id="${dir.id}"
                                                     style="padding-left: 0;">
                                                     <div repeat.for="item of dir.blogs | sortBlog" data-id="${item.id}"
+                                                        data-pid="${item.pid}" data-has-child="${item.hasChild}"
                                                         data-space-id="${space.id}" data-dir-id="${dir.id}"
                                                         data-sort="${item.sort}" show.bind="!item._hidden"
-                                                        class="item blog-item ${item.id == blog.id ? 'active' : ''}">
+                                                        class="item top blog-item ${item.id == blog.id ? 'active' : ''}">
                                                         <a title="${item.title}" href="#/blog/${item.id}">
-                                                            <i class="icons">
-                                                                <i class="file outline icon"></i>
+                                                            <i class="icons" click.delegate="loadChildBlogs(item)">
+                                                                <i if.bind="!item.hasChild"
+                                                                    class="file outline icon"></i>
+                                                                <i if.bind="item.hasChild"
+                                                                    class="${item._open ? 'minus' : 'plus'} square outline icon"></i>
                                                                 <i show.bind="item.privated"
                                                                     class="corner lock icon"></i>
                                                             </i>
                                                             ${item.title}</a>
+                                                        <div class="actions">
+                                                            <div if.bind="isSuper || item.creator.username == loginUser.username"
+                                                                ui-dropdown class="ui right pointing dropdown">
+                                                                <i class="large ellipsis horizontal icon"></i>
+                                                                <div class="left menu">
+                                                                    <div class="item">
+                                                                        <i class="dropdown icon"></i>
+                                                                        <span class="text"
+                                                                            click.delegate="createHandler(space, dir, item)">创建博文</span>
+                                                                        <div class="menu">
+                                                                            <div class="header">选择编辑器</div>
+                                                                            <a class="item"
+                                                                                click.delegate="createHtmlHandler(space, dir, item)">
+                                                                                HTML
+                                                                            </a>
+                                                                            <a class="item"
+                                                                                click.delegate="createHandler(space, dir, item)">
+                                                                                Markdown
+                                                                            </a>
+                                                                            <a class="item"
+                                                                                click.delegate="createExcelHandler(space, dir, item)">
+                                                                                电子表格
+                                                                            </a>
+                                                                            <a class="item"
+                                                                                click.delegate="createMindHandler(space, dir, item)">
+                                                                                思维导图
+                                                                            </a>
+                                                                            <div class="ui divider"></div>
+                                                                            <a click.delegate="selectTplHandler(space, dir, item)"
+                                                                                class="item">
+                                                                                基于模板
+                                                                            </a>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="item" style="color: red;"
+                                                                        click.delegate="delBlogHandler(item)"><i
+                                                                            class="trash outline icon"></i>删除博文</div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div show.bind="item.hasChild && item._open"
+                                                            class="ui bulleted list tms-sortable-elem-blogs"
+                                                            style="padding-left: 3px; padding-bottom: 0; padding-right: 0;"
+                                                            data-id="${space.id}" data-dir-id="${dir.id}">
+                                                            <div repeat.for="child of item._childs | sortBlog"
+                                                                data-id="${child.id}" data-sort="${child.sort}"
+                                                                data-pid="${child.pid}"
+                                                                data-has-child="${child.hasChild}"
+                                                                show.bind="!child._hidden"
+                                                                class="item child blog-item ${child.id == blog.id ? 'active' : ''}">
+                                                                <a title="${child.title}" href="#/blog/${child.id}">
+                                                                    <i class="icons"
+                                                                        click.delegate="loadChildBlogs(child)">
+                                                                        <i if.bind="!child.hasChild"
+                                                                            class="file outline icon"></i>
+                                                                        <i if.bind="child.hasChild"
+                                                                            class="${child._open ? 'minus' : 'plus'} square outline icon"></i>
+                                                                        <i show.bind="child.privated"
+                                                                            class="corner lock icon"></i>
+                                                                    </i>${child.title}</a>
+                                                                <div class="actions">
+                                                                    <div if.bind="isSuper || child.creator.username == loginUser.username"
+                                                                        ui-dropdown class="ui right pointing dropdown">
+                                                                        <i class="large ellipsis horizontal icon"></i>
+                                                                        <div class="left menu">
+                                                                            <div class="item">
+                                                                                <i class="dropdown icon"></i>
+                                                                                <span class="text"
+                                                                                    click.delegate="createHandler(space, dir, child)">创建博文</span>
+                                                                                <div class="menu">
+                                                                                    <div class="header">选择编辑器</div>
+                                                                                    <a class="item"
+                                                                                        click.delegate="createHtmlHandler(space, dir, child)">
+                                                                                        HTML
+                                                                                    </a>
+                                                                                    <a class="item"
+                                                                                        click.delegate="createHandler(space, dir, child)">
+                                                                                        Markdown
+                                                                                    </a>
+                                                                                    <a class="item"
+                                                                                        click.delegate="createExcelHandler(space, dir, child)">
+                                                                                        电子表格
+                                                                                    </a>
+                                                                                    <a class="item"
+                                                                                        click.delegate="createMindHandler(space, dir, child)">
+                                                                                        思维导图
+                                                                                    </a>
+                                                                                    <div class="ui divider"></div>
+                                                                                    <a click.delegate="selectTplHandler(space, dir, child)"
+                                                                                        class="item">
+                                                                                        基于模板
+                                                                                    </a>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div class="item" style="color: red;"
+                                                                                click.delegate="delBlogHandler(child)">
+                                                                                <i class="trash outline icon"></i>删除博文
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <div show.bind="child.hasChild && child._open"
+                                                                    class="ui bulleted list tms-sortable-elem-blogs"
+                                                                    style="padding-left: 3px; padding-bottom: 0; padding-right: 0;"
+                                                                    data-id="${space.id}" data-dir-id="${dir.id}">
+                                                                    <div repeat.for="child2 of child._childs | sortBlog"
+                                                                        data-id="${child2.id}" data-pid="${child2.pid}"
+                                                                        data-has-child="${child2.hasChild}"
+                                                                        data-sort="${child2.sort}"
+                                                                        show.bind="!child2._hidden"
+                                                                        class="item child2 blog-item ${child2.id == blog.id ? 'active' : ''}">
+                                                                        <a title="${child2.title}"
+                                                                            href="#/blog/${child2.id}">
+                                                                            <i class="icons"
+                                                                                click.delegate="loadChildBlogs(child2)">
+                                                                                <i if.bind="!child2.hasChild"
+                                                                                    class="file outline icon"></i>
+                                                                                <i if.bind="child2.hasChild"
+                                                                                    class="${child2._open ? 'minus' : 'plus'} square outline icon"></i>
+                                                                                <i show.bind="child2.privated"
+                                                                                    class="corner lock icon"></i>
+                                                                            </i>${child2.title}</a>
+                                                                        <div class="actions">
+                                                                            <div if.bind="isSuper || child2.creator.username == loginUser.username"
+                                                                                ui-dropdown
+                                                                                class="ui right pointing dropdown">
+                                                                                <i
+                                                                                    class="large ellipsis horizontal icon"></i>
+                                                                                <div class="left menu">
+                                                                                    <div class="item">
+                                                                                        <i class="dropdown icon"></i>
+                                                                                        <span class="text"
+                                                                                            click.delegate="createHandler(space, dir, child2)">创建博文</span>
+                                                                                        <div class="menu">
+                                                                                            <div class="header">选择编辑器
+                                                                                            </div>
+                                                                                            <a class="item"
+                                                                                                click.delegate="createHtmlHandler(space, dir, child2)">
+                                                                                                HTML
+                                                                                            </a>
+                                                                                            <a class="item"
+                                                                                                click.delegate="createHandler(space, dir, child2)">
+                                                                                                Markdown
+                                                                                            </a>
+                                                                                            <a class="item"
+                                                                                                click.delegate="createExcelHandler(space, dir, child2)">
+                                                                                                电子表格
+                                                                                            </a>
+                                                                                            <a class="item"
+                                                                                                click.delegate="createMindHandler(space, dir, child2)">
+                                                                                                思维导图
+                                                                                            </a>
+                                                                                            <div class="ui divider">
+                                                                                            </div>
+                                                                                            <a click.delegate="selectTplHandler(space, dir, child2)"
+                                                                                                class="item">
+                                                                                                基于模板
+                                                                                            </a>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                    <div class="item"
+                                                                                        style="color: red;"
+                                                                                        click.delegate="delBlogHandler(child2)">
+                                                                                        <i
+                                                                                            class="trash outline icon"></i>删除博文
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                        <div show.bind="child2.hasChild && child2._open"
+                                                                            class="ui bulleted list tms-sortable-elem-blogs"
+                                                                            style="padding-left: 3px; padding-bottom: 0; padding-right: 0;"
+                                                                            data-id="${space.id}"
+                                                                            data-dir-id="${dir.id}">
+                                                                            <div repeat.for="child3 of child2._childs | sortBlog"
+                                                                                data-id="${child3.id}"
+                                                                                data-pid="${child3.pid}"
+                                                                                data-has-child="${child3.hasChild}"
+                                                                                data-sort="${child3.sort}"
+                                                                                show.bind="!child3._hidden"
+                                                                                class="item child3 blog-item ${child3.id == blog.id ? 'active' : ''}">
+                                                                                <a title="${child3.title}"
+                                                                                    href="#/blog/${child3.id}">
+                                                                                    <i class="icons"
+                                                                                        click.delegate="loadChildBlogs(child3)">
+                                                                                        <i if.bind="!child3.hasChild"
+                                                                                            class="file outline icon"></i>
+                                                                                        <i if.bind="child3.hasChild"
+                                                                                            class="${child3._open ? 'minus' : 'plus'} square outline icon"></i>
+                                                                                        <i show.bind="child3.privated"
+                                                                                            class="corner lock icon"></i>
+                                                                                    </i>${child3.title}</a>
+                                                                                <div class="actions">
+                                                                                    <div if.bind="isSuper || child3.creator.username == loginUser.username"
+                                                                                        ui-dropdown
+                                                                                        class="ui right pointing dropdown">
+                                                                                        <i
+                                                                                            class="large ellipsis horizontal icon"></i>
+                                                                                        <div class="left menu">
+                                                                                            <div class="item">
+                                                                                                <i
+                                                                                                    class="dropdown icon"></i>
+                                                                                                <span class="text"
+                                                                                                    click.delegate="createHandler(space, dir, child3)">创建博文</span>
+                                                                                                <div class="menu">
+                                                                                                    <div class="header">
+                                                                                                        选择编辑器
+                                                                                                    </div>
+                                                                                                    <a class="item"
+                                                                                                        click.delegate="createHtmlHandler(space, dir, child3)">
+                                                                                                        HTML
+                                                                                                    </a>
+                                                                                                    <a class="item"
+                                                                                                        click.delegate="createHandler(space, dir, child3)">
+                                                                                                        Markdown
+                                                                                                    </a>
+                                                                                                    <a class="item"
+                                                                                                        click.delegate="createExcelHandler(space, dir, child3)">
+                                                                                                        电子表格
+                                                                                                    </a>
+                                                                                                    <a class="item"
+                                                                                                        click.delegate="createMindHandler(space, dir, child3)">
+                                                                                                        思维导图
+                                                                                                    </a>
+                                                                                                    <div
+                                                                                                        class="ui divider">
+                                                                                                    </div>
+                                                                                                    <a click.delegate="selectTplHandler(space, dir, child3)"
+                                                                                                        class="item">
+                                                                                                        基于模板
+                                                                                                    </a>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                            <div class="item"
+                                                                                                style="color: red;"
+                                                                                                click.delegate="delBlogHandler(child3)">
+                                                                                                <i
+                                                                                                    class="trash outline icon"></i>删除博文
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                                <div show.bind="child3.hasChild && child3._open"
+                                                                                    class="ui bulleted list tms-sortable-elem-blogs"
+                                                                                    style="padding-left: 3px; padding-bottom: 0; padding-right: 0;"
+                                                                                    data-id="${space.id}"
+                                                                                    data-dir-id="${dir.id}">
+                                                                                    <div repeat.for="child4 of child3._childs | sortBlog"
+                                                                                        data-id="${child4.id}"
+                                                                                        data-pid="${child4.pid}"
+                                                                                        data-has-child="${child4.hasChild}"
+                                                                                        data-sort="${child4.sort}"
+                                                                                        show.bind="!child4._hidden"
+                                                                                        class="item child4 blog-item ${child4.id == blog.id ? 'active' : ''}">
+                                                                                        <a title="${child4.title}"
+                                                                                            href="#/blog/${child4.id}">
+                                                                                            <i class="icons">
+                                                                                                <i
+                                                                                                    class="file outline icon"></i>
+                                                                                                <i show.bind="child4.privated"
+                                                                                                    class="corner lock icon"></i>
+                                                                                            </i>${child4.title}</a>
+                                                                                        <div class="actions">
+                                                                                            <div if.bind="isSuper || child4.creator.username == loginUser.username"
+                                                                                                ui-dropdown
+                                                                                                class="ui right pointing dropdown">
+                                                                                                <i
+                                                                                                    class="large ellipsis horizontal icon"></i>
+                                                                                                <div class="left menu">
+                                                                                                    <div class="item"
+                                                                                                        style="color: red;"
+                                                                                                        click.delegate="delBlogHandler(child4)">
+                                                                                                        <i
+                                                                                                            class="trash outline icon"></i>删除博文
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
                                                     </div>
                                                 </div>
                                             </div>
@@ -156,7 +448,8 @@
                                                                     思维导图
                                                                 </a>
                                                                 <div class="ui divider"></div>
-                                                                <a click.delegate="selectTplHandler(space, dir)" class="item">
+                                                                <a click.delegate="selectTplHandler(space, dir)"
+                                                                    class="item">
                                                                     基于模板
                                                                 </a>
                                                             </div>
@@ -177,15 +470,278 @@
                                 <div show.bind="space.open" class="ui bulleted list tms-sortable-elem-blogs"
                                     data-id="${space.id}">
                                     <div repeat.for="item of space.blogs | sortBlog" data-id="${item.id}"
-                                        data-space-id="" data-dir-id="" data-sort="${item.sort}"
-                                        show.bind="!item._hidden"
-                                        class="item blog-item ${item.id == blog.id ? 'active' : ''}">
+                                        data-pid="${item.pid}" data-has-child="${item.hasChild}" data-space-id=""
+                                        data-dir-id="" data-sort="${item.sort}" show.bind="!item._hidden"
+                                        class="item top blog-item ${item.id == blog.id ? 'active' : ''}">
                                         <a title="${item.title}" href="#/blog/${item.id}">
-                                            <i class="icons">
-                                                <i class="file outline icon"></i>
+                                            <i class="icons" click.delegate="loadChildBlogs(item)">
+                                                <i if.bind="!item.hasChild" class="file outline icon"></i>
+                                                <i if.bind="item.hasChild"
+                                                    class="${item._open ? 'minus' : 'plus'} square outline icon"></i>
                                                 <i show.bind="item.privated" class="corner lock icon"></i>
                                             </i>
                                             ${item.title}</a>
+                                        <div class="actions">
+                                            <div if.bind="isSuper || item.creator.username == loginUser.username"
+                                                ui-dropdown class="ui right pointing dropdown">
+                                                <i class="large ellipsis horizontal icon"></i>
+                                                <div class="left menu">
+                                                    <div class="item">
+                                                        <i class="dropdown icon"></i>
+                                                        <span class="text"
+                                                            click.delegate="createHandler(space, dir, item)">创建博文</span>
+                                                        <div class="menu">
+                                                            <div class="header">选择编辑器</div>
+                                                            <a class="item"
+                                                                click.delegate="createHtmlHandler(space, dir, item)">
+                                                                HTML
+                                                            </a>
+                                                            <a class="item"
+                                                                click.delegate="createHandler(space, dir, item)">
+                                                                Markdown
+                                                            </a>
+                                                            <a class="item"
+                                                                click.delegate="createExcelHandler(space, dir, item)">
+                                                                电子表格
+                                                            </a>
+                                                            <a class="item"
+                                                                click.delegate="createMindHandler(space, dir, item)">
+                                                                思维导图
+                                                            </a>
+                                                            <div class="ui divider"></div>
+                                                            <a click.delegate="selectTplHandler(space, dir, item)"
+                                                                class="item">
+                                                                基于模板
+                                                            </a>
+                                                        </div>
+                                                    </div>
+                                                    <div class="item" style="color: red;"
+                                                        click.delegate="delBlogHandler(item)"><i
+                                                            class="trash outline icon"></i>删除博文</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div show.bind="item.hasChild && item._open"
+                                            class="ui bulleted list tms-sortable-elem-blogs"
+                                            style="padding-left: 3px; padding-bottom: 0; padding-right: 0;"
+                                            data-id="${space.id}">
+                                            <div repeat.for="child of item._childs | sortBlog" data-id="${child.id}"
+                                                data-pid="${child.pid}" data-has-child="${child.hasChild}"
+                                                data-sort="${child.sort}" show.bind="!child._hidden"
+                                                class="item child blog-item ${child.id == blog.id ? 'active' : ''}">
+                                                <a title="${child.title}" href="#/blog/${child.id}">
+                                                    <i class="icons" click.delegate="loadChildBlogs(child)">
+                                                        <i if.bind="!child.hasChild" class="file outline icon"></i>
+                                                        <i if.bind="child.hasChild"
+                                                            class="${child._open ? 'minus' : 'plus'} square outline icon"></i>
+                                                        <i show.bind="child.privated" class="corner lock icon"></i>
+                                                    </i>${child.title}</a>
+                                                <div class="actions">
+                                                    <div if.bind="isSuper || child.creator.username == loginUser.username"
+                                                        ui-dropdown class="ui right pointing dropdown">
+                                                        <i class="large ellipsis horizontal icon"></i>
+                                                        <div class="left menu">
+                                                            <div class="item">
+                                                                <i class="dropdown icon"></i>
+                                                                <span class="text"
+                                                                    click.delegate="createHandler(space, dir, child)">创建博文</span>
+                                                                <div class="menu">
+                                                                    <div class="header">选择编辑器</div>
+                                                                    <a class="item"
+                                                                        click.delegate="createHtmlHandler(space, dir, child)">
+                                                                        HTML
+                                                                    </a>
+                                                                    <a class="item"
+                                                                        click.delegate="createHandler(space, dir, child)">
+                                                                        Markdown
+                                                                    </a>
+                                                                    <a class="item"
+                                                                        click.delegate="createExcelHandler(space, dir, child)">
+                                                                        电子表格
+                                                                    </a>
+                                                                    <a class="item"
+                                                                        click.delegate="createMindHandler(space, dir, child)">
+                                                                        思维导图
+                                                                    </a>
+                                                                    <div class="ui divider"></div>
+                                                                    <a click.delegate="selectTplHandler(space, dir, child)"
+                                                                        class="item">
+                                                                        基于模板
+                                                                    </a>
+                                                                </div>
+                                                            </div>
+                                                            <div class="item" style="color: red;"
+                                                                click.delegate="delBlogHandler(child)">
+                                                                <i class="trash outline icon"></i>删除博文
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div show.bind="child.hasChild && child._open"
+                                                    class="ui bulleted list tms-sortable-elem-blogs"
+                                                    style="padding-left: 3px; padding-bottom: 0; padding-right: 0;"
+                                                    data-id="${space.id}">
+                                                    <div repeat.for="child2 of child._childs | sortBlog"
+                                                        data-id="${child2.id}" data-sort="${child2.sort}"
+                                                        data-pid="${child2.pid}" data-has-child="${child2.hasChild}"
+                                                        show.bind="!child2._hidden"
+                                                        class="item child2 blog-item ${child2.id == blog.id ? 'active' : ''}">
+                                                        <a title="${child2.title}" href="#/blog/${child2.id}">
+                                                            <i class="icons" click.delegate="loadChildBlogs(child2)">
+                                                                <i if.bind="!child2.hasChild"
+                                                                    class="file outline icon"></i>
+                                                                <i if.bind="child2.hasChild"
+                                                                    class="${child2._open ? 'minus' : 'plus'} square outline icon"></i>
+                                                                <i show.bind="child2.privated"
+                                                                    class="corner lock icon"></i>
+                                                            </i>${child2.title}</a>
+                                                        <div class="actions">
+                                                            <div if.bind="isSuper || child2.creator.username == loginUser.username"
+                                                                ui-dropdown class="ui right pointing dropdown">
+                                                                <i class="large ellipsis horizontal icon"></i>
+                                                                <div class="left menu">
+                                                                    <div class="item">
+                                                                        <i class="dropdown icon"></i>
+                                                                        <span class="text"
+                                                                            click.delegate="createHandler(space, dir, child2)">创建博文</span>
+                                                                        <div class="menu">
+                                                                            <div class="header">选择编辑器
+                                                                            </div>
+                                                                            <a class="item"
+                                                                                click.delegate="createHtmlHandler(space, dir, child2)">
+                                                                                HTML
+                                                                            </a>
+                                                                            <a class="item"
+                                                                                click.delegate="createHandler(space, dir, child2)">
+                                                                                Markdown
+                                                                            </a>
+                                                                            <a class="item"
+                                                                                click.delegate="createExcelHandler(space, dir, child2)">
+                                                                                电子表格
+                                                                            </a>
+                                                                            <a class="item"
+                                                                                click.delegate="createMindHandler(space, dir, child2)">
+                                                                                思维导图
+                                                                            </a>
+                                                                            <div class="ui divider">
+                                                                            </div>
+                                                                            <a click.delegate="selectTplHandler(space, dir, child2)"
+                                                                                class="item">
+                                                                                基于模板
+                                                                            </a>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="item" style="color: red;"
+                                                                        click.delegate="delBlogHandler(child2)">
+                                                                        <i class="trash outline icon"></i>删除博文
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div show.bind="child2.hasChild && child2._open"
+                                                            class="ui bulleted list tms-sortable-elem-blogs"
+                                                            style="padding-left: 3px; padding-bottom: 0; padding-right: 0;"
+                                                            data-id="${space.id}" data-dir-id="${dir.id}">
+                                                            <div repeat.for="child3 of child2._childs | sortBlog"
+                                                                data-id="${child3.id}" data-pid="${child3.pid}"
+                                                                data-has-child="${child3.hasChild}"
+                                                                data-sort="${child3.sort}" show.bind="!child3._hidden"
+                                                                class="item child3 blog-item ${child3.id == blog.id ? 'active' : ''}">
+                                                                <a title="${child3.title}" href="#/blog/${child3.id}">
+                                                                    <i class="icons"
+                                                                        click.delegate="loadChildBlogs(child3)">
+                                                                        <i if.bind="!child3.hasChild"
+                                                                            class="file outline icon"></i>
+                                                                        <i if.bind="child3.hasChild"
+                                                                            class="${child3._open ? 'minus' : 'plus'} square outline icon"></i>
+                                                                        <i show.bind="child3.privated"
+                                                                            class="corner lock icon"></i>
+                                                                    </i>${child3.title}</a>
+                                                                <div class="actions">
+                                                                    <div if.bind="isSuper || child3.creator.username == loginUser.username"
+                                                                        ui-dropdown class="ui right pointing dropdown">
+                                                                        <i class="large ellipsis horizontal icon"></i>
+                                                                        <div class="left menu">
+                                                                            <div class="item">
+                                                                                <i class="dropdown icon"></i>
+                                                                                <span class="text"
+                                                                                    click.delegate="createHandler(space, dir, child3)">创建博文</span>
+                                                                                <div class="menu">
+                                                                                    <div class="header">
+                                                                                        选择编辑器
+                                                                                    </div>
+                                                                                    <a class="item"
+                                                                                        click.delegate="createHtmlHandler(space, dir, child3)">
+                                                                                        HTML
+                                                                                    </a>
+                                                                                    <a class="item"
+                                                                                        click.delegate="createHandler(space, dir, child3)">
+                                                                                        Markdown
+                                                                                    </a>
+                                                                                    <a class="item"
+                                                                                        click.delegate="createExcelHandler(space, dir, child3)">
+                                                                                        电子表格
+                                                                                    </a>
+                                                                                    <a class="item"
+                                                                                        click.delegate="createMindHandler(space, dir, child3)">
+                                                                                        思维导图
+                                                                                    </a>
+                                                                                    <div class="ui divider">
+                                                                                    </div>
+                                                                                    <a click.delegate="selectTplHandler(space, dir, child3)"
+                                                                                        class="item">
+                                                                                        基于模板
+                                                                                    </a>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div class="item" style="color: red;"
+                                                                                click.delegate="delBlogHandler(child3)">
+                                                                                <i class="trash outline icon"></i>删除博文
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <div show.bind="child3.hasChild && child3._open"
+                                                                    class="ui bulleted list tms-sortable-elem-blogs"
+                                                                    style="padding-left: 3px; padding-bottom: 0; padding-right: 0;"
+                                                                    data-id="${space.id}" data-dir-id="${dir.id}">
+                                                                    <div repeat.for="child4 of child3._childs | sortBlog"
+                                                                        data-id="${child4.id}" data-pid="${child4.pid}"
+                                                                        data-has-child="${child4.hasChild}"
+                                                                        data-sort="${child4.sort}"
+                                                                        show.bind="!child4._hidden"
+                                                                        class="item child4 blog-item ${child4.id == blog.id ? 'active' : ''}">
+                                                                        <a title="${child4.title}"
+                                                                            href="#/blog/${child4.id}">
+                                                                            <i class="icons">
+                                                                                <i class="file outline icon"></i>
+                                                                                <i show.bind="child4.privated"
+                                                                                    class="corner lock icon"></i>
+                                                                            </i>${child4.title}</a>
+                                                                        <div class="actions">
+                                                                            <div if.bind="isSuper || child4.creator.username == loginUser.username"
+                                                                                ui-dropdown
+                                                                                class="ui right pointing dropdown">
+                                                                                <i
+                                                                                    class="large ellipsis horizontal icon"></i>
+                                                                                <div class="left menu">
+                                                                                    <div class="item"
+                                                                                        style="color: red;"
+                                                                                        click.delegate="delBlogHandler(child4)">
+                                                                                        <i
+                                                                                            class="trash outline icon"></i>删除博文
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -236,13 +792,251 @@
                 </div>
                 <div class="ui bulleted list no-space tms-sortable-elem-blogs" data-id="">
                     <div repeat.for="item of noSpaceBlogs | sortBlog" data-id="${item.id}" data-sort="${item.sort}"
-                        show.bind="!item._hidden" class="item blog-item ${item.id == blog.id ? 'active' : ''}">
+                        data-pid="${item.pid}" data-has-child="${item.hasChild}" show.bind="!item._hidden && !item.pid"
+                        class="item top blog-item ${item.id == blog.id ? 'active' : ''}">
                         <a title="${item.title}" href="#/blog/${item.id}">
-                            <i class="icons">
-                                <i class="file outline icon"></i>
+                            <i class="icons" click.delegate="loadChildBlogs(item)">
+                                <i if.bind="!item.hasChild" class="file outline icon"></i>
+                                <i if.bind="item.hasChild"
+                                    class="${item._open ? 'minus' : 'plus'} square outline icon"></i>
                                 <i show.bind="item.privated" class="corner lock icon"></i>
-                            </i>
                             </i>${item.title}</a>
+                        <div class="actions">
+                            <div if.bind="isSuper || item.creator.username == loginUser.username" ui-dropdown
+                                class="ui right pointing dropdown">
+                                <i class="large ellipsis horizontal icon"></i>
+                                <div class="left menu">
+                                    <div class="item">
+                                        <i class="dropdown icon"></i>
+                                        <span class="text" click.delegate="createHandler(space, dir, item)">创建博文</span>
+                                        <div class="menu">
+                                            <div class="header">选择编辑器</div>
+                                            <a class="item" click.delegate="createHtmlHandler(space, dir, item)">
+                                                HTML
+                                            </a>
+                                            <a class="item" click.delegate="createHandler(space, dir, item)">
+                                                Markdown
+                                            </a>
+                                            <a class="item" click.delegate="createExcelHandler(space, dir, item)">
+                                                电子表格
+                                            </a>
+                                            <a class="item" click.delegate="createMindHandler(space, dir, item)">
+                                                思维导图
+                                            </a>
+                                            <div class="ui divider"></div>
+                                            <a click.delegate="selectTplHandler(space, dir, item)" class="item">
+                                                基于模板
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <div class="item" style="color: red;" click.delegate="delBlogHandler(item)"><i
+                                            class="trash outline icon"></i>删除博文</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div show.bind="item.hasChild && item._open" class="ui bulleted list tms-sortable-elem-blogs"
+                            style="padding-left: 3px; padding-bottom: 0; padding-right: 0;" data-id="">
+                            <div repeat.for="child of item._childs | sortBlog" data-id="${child.id}"
+                                data-pid="${child.pid}" data-has-child="${child.hasChild}" data-sort="${child.sort}"
+                                show.bind="!child._hidden"
+                                class="item child blog-item ${child.id == blog.id ? 'active' : ''}">
+                                <a title="${child.title}" href="#/blog/${child.id}">
+                                    <i class="icons" click.delegate="loadChildBlogs(child)">
+                                        <i if.bind="!child.hasChild" class="file outline icon"></i>
+                                        <i if.bind="child.hasChild"
+                                            class="${child._open ? 'minus' : 'plus'} square outline icon"></i>
+                                        <i show.bind="child.privated" class="corner lock icon"></i>
+                                    </i>${child.title}</a>
+                                <div class="actions">
+                                    <div if.bind="isSuper || child.creator.username == loginUser.username" ui-dropdown
+                                        class="ui right pointing dropdown">
+                                        <i class="large ellipsis horizontal icon"></i>
+                                        <div class="left menu">
+                                            <div class="item">
+                                                <i class="dropdown icon"></i>
+                                                <span class="text"
+                                                    click.delegate="createHandler(space, dir, child)">创建博文</span>
+                                                <div class="menu">
+                                                    <div class="header">选择编辑器</div>
+                                                    <a class="item"
+                                                        click.delegate="createHtmlHandler(space, dir, child)">
+                                                        HTML
+                                                    </a>
+                                                    <a class="item" click.delegate="createHandler(space, dir, child)">
+                                                        Markdown
+                                                    </a>
+                                                    <a class="item"
+                                                        click.delegate="createExcelHandler(space, dir, child)">
+                                                        电子表格
+                                                    </a>
+                                                    <a class="item"
+                                                        click.delegate="createMindHandler(space, dir, child)">
+                                                        思维导图
+                                                    </a>
+                                                    <div class="ui divider"></div>
+                                                    <a click.delegate="selectTplHandler(space, dir, child)"
+                                                        class="item">
+                                                        基于模板
+                                                    </a>
+                                                </div>
+                                            </div>
+                                            <div class="item" style="color: red;"
+                                                click.delegate="delBlogHandler(child)">
+                                                <i class="trash outline icon"></i>删除博文</div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div show.bind="child.hasChild && child._open"
+                                    class="ui bulleted list tms-sortable-elem-blogs"
+                                    style="padding-left: 3px; padding-bottom: 0; padding-right: 0;" data-id="">
+                                    <div repeat.for="child2 of child._childs | sortBlog" data-id="${child2.id}"
+                                        data-pid="${child2.pid}" data-has-child="${child2.hasChild}"
+                                        data-sort="${child2.sort}" show.bind="!child2._hidden"
+                                        class="item child2 blog-item ${child2.id == blog.id ? 'active' : ''}">
+                                        <a title="${child2.title}" href="#/blog/${child2.id}">
+                                            <i class="icons" click.delegate="loadChildBlogs(child2)">
+                                                <i if.bind="!child2.hasChild" class="file outline icon"></i>
+                                                <i if.bind="child2.hasChild"
+                                                    class="${child2._open ? 'minus' : 'plus'} square outline icon"></i>
+                                                <i show.bind="child2.privated" class="corner lock icon"></i>
+                                            </i>${child2.title}</a>
+                                        <div class="actions">
+                                            <div if.bind="isSuper || child2.creator.username == loginUser.username"
+                                                ui-dropdown class="ui right pointing dropdown">
+                                                <i class="large ellipsis horizontal icon"></i>
+                                                <div class="left menu">
+                                                    <div class="item">
+                                                        <i class="dropdown icon"></i>
+                                                        <span class="text"
+                                                            click.delegate="createHandler(space, dir, child2)">创建博文</span>
+                                                        <div class="menu">
+                                                            <div class="header">选择编辑器
+                                                            </div>
+                                                            <a class="item"
+                                                                click.delegate="createHtmlHandler(space, dir, child2)">
+                                                                HTML
+                                                            </a>
+                                                            <a class="item"
+                                                                click.delegate="createHandler(space, dir, child2)">
+                                                                Markdown
+                                                            </a>
+                                                            <a class="item"
+                                                                click.delegate="createExcelHandler(space, dir, child2)">
+                                                                电子表格
+                                                            </a>
+                                                            <a class="item"
+                                                                click.delegate="createMindHandler(space, dir, child2)">
+                                                                思维导图
+                                                            </a>
+                                                            <div class="ui divider">
+                                                            </div>
+                                                            <a click.delegate="selectTplHandler(space, dir, child2)"
+                                                                class="item">
+                                                                基于模板
+                                                            </a>
+                                                        </div>
+                                                    </div>
+                                                    <div class="item" style="color: red;"
+                                                        click.delegate="delBlogHandler(child2)">
+                                                        <i class="trash outline icon"></i>删除博文
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div show.bind="child2.hasChild && child2._open"
+                                            class="ui bulleted list tms-sortable-elem-blogs"
+                                            style="padding-left: 3px; padding-bottom: 0; padding-right: 0;"
+                                            data-id="${space.id}" data-dir-id="${dir.id}">
+                                            <div repeat.for="child3 of child2._childs | sortBlog" data-id="${child3.id}"
+                                                data-pid="${child3.pid}" data-has-child="${child3.hasChild}"
+                                                data-sort="${child3.sort}" show.bind="!child3._hidden"
+                                                class="item child3 blog-item ${child3.id == blog.id ? 'active' : ''}">
+                                                <a title="${child3.title}" href="#/blog/${child3.id}">
+                                                    <i class="icons" click.delegate="loadChildBlogs(child3)">
+                                                        <i if.bind="!child3.hasChild" class="file outline icon"></i>
+                                                        <i if.bind="child3.hasChild"
+                                                            class="${child3._open ? 'minus' : 'plus'} square outline icon"></i>
+                                                        <i show.bind="child3.privated" class="corner lock icon"></i>
+                                                    </i>${child3.title}</a>
+                                                <div class="actions">
+                                                    <div if.bind="isSuper || child3.creator.username == loginUser.username"
+                                                        ui-dropdown class="ui right pointing dropdown">
+                                                        <i class="large ellipsis horizontal icon"></i>
+                                                        <div class="left menu">
+                                                            <div class="item">
+                                                                <i class="dropdown icon"></i>
+                                                                <span class="text"
+                                                                    click.delegate="createHandler(space, dir, child3)">创建博文</span>
+                                                                <div class="menu">
+                                                                    <div class="header">
+                                                                        选择编辑器
+                                                                    </div>
+                                                                    <a class="item"
+                                                                        click.delegate="createHtmlHandler(space, dir, child3)">
+                                                                        HTML
+                                                                    </a>
+                                                                    <a class="item"
+                                                                        click.delegate="createHandler(space, dir, child3)">
+                                                                        Markdown
+                                                                    </a>
+                                                                    <a class="item"
+                                                                        click.delegate="createExcelHandler(space, dir, child3)">
+                                                                        电子表格
+                                                                    </a>
+                                                                    <a class="item"
+                                                                        click.delegate="createMindHandler(space, dir, child3)">
+                                                                        思维导图
+                                                                    </a>
+                                                                    <div class="ui divider">
+                                                                    </div>
+                                                                    <a click.delegate="selectTplHandler(space, dir, child3)"
+                                                                        class="item">
+                                                                        基于模板
+                                                                    </a>
+                                                                </div>
+                                                            </div>
+                                                            <div class="item" style="color: red;"
+                                                                click.delegate="delBlogHandler(child3)">
+                                                                <i class="trash outline icon"></i>删除博文
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div show.bind="child3.hasChild && child3._open"
+                                                    class="ui bulleted list tms-sortable-elem-blogs"
+                                                    style="padding-left: 3px; padding-bottom: 0; padding-right: 0;"
+                                                    data-id="${space.id}" data-dir-id="${dir.id}">
+                                                    <div repeat.for="child4 of child3._childs | sortBlog"
+                                                        data-id="${child4.id}" data-pid="${child4.pid}"
+                                                        data-has-child="${child4.hasChild}" data-sort="${child4.sort}"
+                                                        show.bind="!child4._hidden"
+                                                        class="item child4 blog-item ${child4.id == blog.id ? 'active' : ''}">
+                                                        <a title="${child4.title}" href="#/blog/${child4.id}">
+                                                            <i class="icons">
+                                                                <i class="file outline icon"></i>
+                                                                <i show.bind="child4.privated"
+                                                                    class="corner lock icon"></i>
+                                                            </i>${child4.title}</a>
+                                                        <div class="actions">
+                                                            <div if.bind="isSuper || child4.creator.username == loginUser.username"
+                                                                ui-dropdown class="ui right pointing dropdown">
+                                                                <i class="large ellipsis horizontal icon"></i>
+                                                                <div class="left menu">
+                                                                    <div class="item" style="color: red;"
+                                                                        click.delegate="delBlogHandler(child4)">
+                                                                        <i class="trash outline icon"></i>删除博文
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/src/resources/elements/em-blog-left-sidebar.js b/src/resources/elements/em-blog-left-sidebar.js
index 60bb144e476dd3a46a9e4df249181e3f7caa47cb..05a8206ac4a98b8108a95c334e8f39157f6bb2bf 100644
--- a/src/resources/elements/em-blog-left-sidebar.js
+++ b/src/resources/elements/em-blog-left-sidebar.js
@@ -2,7 +2,7 @@ import {
     bindable,
     containerless
 } from 'aurelia-framework';
-
+import _ from 'lodash';
 @containerless
 export class EmBlogLeftSidebar {
 
@@ -42,33 +42,70 @@ export class EmBlogLeftSidebar {
     constructor() {
         this.subscribe = ea.subscribe(nsCons.EVENT_BLOG_CHANGED, (payload) => {
             if (payload.action == 'created') {
-                this.blogs = [payload.blog, ...this.blogs];
+
+                this._recentUpdateSave(payload.blog);
+
                 nsCtx.blogId = payload.blog.id;
-                this.calcTree();
-                _.delay(() => this._scrollTo(payload.blog.id), 1000);
+
+                if (payload.blog.pid) {
+                    this._fixBlogSync(payload.blog.pid).then(blog => {
+                        if (blog) {
+                            if (blog._childs) {
+                                blog._childs.push(payload.blog);
+                            } else {
+                                blog._childs = [payload.blog];
+                            }
+
+                            this._fixChildParent([], +payload.blog.id, (ids) => {
+                                if (ids.length) {
+                                    _.reverse(ids);
+                                    this._openChildParent(ids, 0, true);
+                                } else {
+                                    _.delay(() => this._scrollTo(payload.blog.id), 1000);
+                                }
+                            });
+                        }
+                    });
+                } else {
+                    if (!_.find(this.blogs, {
+                            id: payload.blog.id
+                        })) {
+                        this.blogs = [payload.blog, ...this.blogs];
+                    }
+                    this.calcTree();
+                }
+
                 ea.publish(nsCons.EVENT_APP_ROUTER_NAVIGATE, {
                     to: `#/blog/${payload.blog.id}`
                 });
+
             } else if (payload.action == 'updated') {
-                let blog = _.find(this.blogs, {
-                    id: payload.blog.id
-                });
-                if (!payload.blog.dir) blog.dir = null;
-                _.extend(blog, payload.blog);
-                // 同步更新收藏博文
-                let bs = _.find(this.blogStows, item => item.blog.id === payload.blog.id);
-                if (bs) {
-                    if (!payload.blog.dir) bs.blog.dir = null;
-                    _.extend(bs.blog, payload.blog);
-                }
 
-                !payload.unCalcDir && this.calcTree();
+                this._recentUpdateSave(payload.blog);
+
+                this._fixBlogSync(+payload.blog.id).then(blog => {
 
+                    if (blog) {
+
+                        _.extend(blog, payload.blog);
+
+                        if (!payload.blog.dir) blog.dir = null;
+                        if (!payload.blog.space) blog.space = null;
+                        if (!payload.blog.pid) blog.pid = null;
+
+                        // 同步更新收藏博文
+                        let bs = _.find(this.blogStows, item => item.blog.id === payload.blog.id);
+                        if (bs) {
+                            if (!payload.blog.dir) bs.blog.dir = null;
+                            _.extend(bs.blog, payload.blog);
+                        }
+
+                        !payload.unCalcDir && this.calcTree();
+                    }
+                });
             } else if (payload.action == 'deleted') {
                 this.blogStows = _.reject(this.blogStows, bs => bs.blog.id == payload.blog.id);
-                this.blogs = _.reject(this.blogs, {
-                    id: payload.blog.id
-                });
+                this.blogs = this._delBlog(null, this.blogs, +payload.blog.id);
                 this.calcTree();
             }
         });
@@ -91,12 +128,27 @@ export class EmBlogLeftSidebar {
             }
         });
         this.subscribe2 = ea.subscribe(nsCons.EVENT_BLOG_SWITCH, (payload) => {
-            this.blog = _.find(this.blogs, {
-                id: +nsCtx.blogId
+            this._fixBlogSync(+nsCtx.blogId).then(b => {
+                if (b) {
+                    this.blog = b;
+                    payload.anchor && this.calcTree(); // TODO 这里存在bug,拖拽后重新计划目录，博文目录定位错乱，原因不明？？？
+                    // payload.anchor && this.refresh(); // TODO 这里存在bug,拖拽后重新计划目录，博文目录定位错乱，原因不明？？？
+
+                    if (!this.blog.pid) {
+                        !payload.anchor && (this.blog && _.delay(() => this._scrollTo(this.blog.id), 1000));
+                    } else {
+                        this._fixChildParent([], this.blog.id, (ids) => {
+                            if (ids.length) {
+                                _.reverse(ids);
+                                this._openChildParent(ids, 0, true);
+                            } else {
+                                _.delay(() => this._scrollTo(this.blog.id), 1000);
+                            }
+                        });
+                    }
+
+                }
             });
-            payload.anchor && this.calcTree(); // TODO 这里存在bug,拖拽后重新计划目录，博文目录定位错乱，原因不明？？？
-            // payload.anchor && this.refresh(); // TODO 这里存在bug,拖拽后重新计划目录，博文目录定位错乱，原因不明？？？
-            this.blog && _.delay(() => this._scrollTo(this.blog.id), 1000);
         });
         this.subscribe3 = ea.subscribe(nsCons.EVENT_BLOG_TOGGLE_SIDEBAR, (payload) => {
             this.isHide = payload;
@@ -213,8 +265,11 @@ export class EmBlogLeftSidebar {
                     id: +$(e).attr('data-id')
                 });
 
-                // 没有从属空间 || 空间创建者 || 系统管理员
-                if ((space && (space.creator.username == this.loginUser.username)) || this.isSuper) {
+                let bid = $(e).closest('.blog-item').attr('data-id');
+                let blog = this._fixBlogFromLocal(this.blogs, bid, true);
+
+                // 父博文创建者 || 空间创建者 || 系统管理员
+                if ((blog && blog.creator.username == this.loginUser.username) || (space && (space.creator.username == this.loginUser.username)) || this.isSuper) {
 
                     let sortObj = Sortable.create(e, {
                         group: {
@@ -222,6 +277,10 @@ export class EmBlogLeftSidebar {
                         },
                         onEnd: (evt) => {
 
+                            // console.log(evt);
+
+                            $(evt.item).css('transform', 'none');
+
                             if (evt.from === evt.to) {
 
                                 if (evt.newIndex === evt.oldIndex) return;
@@ -231,7 +290,7 @@ export class EmBlogLeftSidebar {
                             } else {
 
                                 let blogId = $(evt.item).attr('data-id');
-                                let spaceIdF = $(evt.from).attr('data-id');
+                                let pid = $(evt.to).closest('.blog-item').attr('data-id');
                                 let spaceIdT = $(evt.to).attr('data-id');
 
                                 let $dir = $(evt.item).closest('.dir-item');
@@ -239,6 +298,7 @@ export class EmBlogLeftSidebar {
 
                                 $.post('/admin/blog/space/update', {
                                     id: blogId,
+                                    pid: pid,
                                     sid: spaceIdT,
                                     did: dirId
                                 }, (data, textStatus, xhr) => {
@@ -249,6 +309,22 @@ export class EmBlogLeftSidebar {
 
                                         data.data.sort = evt.newIndex;
 
+                                        if ($(evt.from).children('.blog-item').size() == 0) {
+                                            let pidO = $(evt.from).closest('.blog-item').attr('data-id');
+                                            if (!pidO) return;
+                                            let b = this._fixBlogFromLocal(this.blogs, pidO, true);
+                                            if (b) {
+                                                b.hasChild = false;
+                                            }
+                                            $.post('/admin/blog/hasChild/update', {
+                                                id: pidO
+                                            }, (data, textStatus, xhr) => {
+                                                if (data.success) {
+                                                    // do nothings.
+                                                }
+                                            });
+                                        }
+
                                         ea.publish(nsCons.EVENT_BLOG_CHANGED, {
                                             action: 'updated',
                                             blog: data.data,
@@ -287,6 +363,8 @@ export class EmBlogLeftSidebar {
                         // },
                         onEnd: (evt) => {
 
+                            $(evt.item).css('transform', 'none');
+
                             if (evt.newIndex === evt.oldIndex) return;
 
                             var $all = $(evt.from).children('.dir-item');
@@ -330,6 +408,8 @@ export class EmBlogLeftSidebar {
                         draggable: '.space-item',
                         onEnd: (evt) => {
 
+                            $(evt.item).css('transform', 'none');
+
                             if (evt.newIndex === evt.oldIndex) return;
 
                             var $all = $(evt.from).children('.space-item');
@@ -405,6 +485,9 @@ export class EmBlogLeftSidebar {
                 }));
             }
 
+            // 删除标记删除的
+            _.remove(recentOpenBlogs, ['_deleted']);
+
             // 删除可能已经存在的
             _.remove(recentOpenBlogs, {
                 id: blog.id
@@ -422,14 +505,12 @@ export class EmBlogLeftSidebar {
 
             localStorage.setItem(`tms-blog-recent-open`, JSON.stringify(recentOpenBlogs));
 
-            let b = _.find(this.blogs, {
-                id: blog.id
+            this._getBlogs(blog.id).then(blog2 => {
+                if (blog2) {
+                    blog2._openTime = blog._openTime ? blog._openTime : new Date().getTime();
+                    bs.signal('sg-recent-open-refresh');
+                }
             });
-            if (b) {
-                b._openTime = blog._openTime;
-                bs.signal('sg-recent-open-refresh');
-            }
-
         }
     }
 
@@ -439,21 +520,89 @@ export class EmBlogLeftSidebar {
             if (robs) {
                 let recentOpenBlogs = JSON.parse(robs);
 
-                _.each(recentOpenBlogs, b => {
-                    let blog = _.find(blogs, {
-                        id: b.id
+                _.each(recentOpenBlogs, (b, index) => {
+                    this._getBlogs(+b.id, blogs).then(blog => {
+                        if (blog) {
+                            blog._openTime = b.openTime;
+                        } else {
+                            // TODO 如果不存在（可能被删除了）
+                            b._deleted = true;
+                        }
+                        // console.log(index, index == recentOpenBlogs.length);
+                        if (index == recentOpenBlogs.length - 1) {
+                            this.blogs = [...this.blogs];
+                        }
                     });
-                    if (blog) {
-                        blog._openTime = b.openTime;
-                    } else {
-                        // TODO 如果不存在（可能被删除了）
-                        b._deleted = true;
-                    }
                 });
+            }
+        }
+    }
+
+    _recentUpdateSave(blog) {
+        // 记忆更新博文
+        if (localStorage) {
+            let recentUpdateBlogs = [];
+            let rubs = localStorage.getItem(`tms-blog-recent-update`);
+            if (rubs) {
+                recentUpdateBlogs = JSON.parse(rubs);
+            }
+
+            // 删除已经删除的
+            if (this.blogs && this.blogs.length > 0) {
+                _.remove(recentUpdateBlogs, item => !_.some(this.blogs, {
+                    id: item.id
+                }));
+            }
+
+            // 删除标记删除的
+            _.remove(recentUpdateBlogs, ['_deleted']);
+
+            // 删除可能已经存在的
+            _.remove(recentUpdateBlogs, {
+                id: blog.id
+            });
 
+            // 头部追加新打开的
+            recentUpdateBlogs.unshift({
+                id: blog.id
+            });
+
+            if (recentUpdateBlogs.length > 20) { // 只记忆最新打开的20个
+                recentUpdateBlogs.splice(20, recentUpdateBlogs.length - 20);
             }
+
+            localStorage.setItem(`tms-blog-recent-update`, JSON.stringify(recentUpdateBlogs));
+
+            this._getBlogs(blog.id).then(blog2 => {
+                if (blog2) {
+                    _.extend(blog2, blog);
+                    // this.blogs = [...this.blogs];
+                    bs.signal('sg-recent-update-refresh');
+                }
+            });
         }
+    }
 
+    _recentUpdateHandle(blogs) {
+        if (localStorage) {
+            let rubs = localStorage.getItem(`tms-blog-recent-update`);
+            if (rubs) {
+                let recentUpdateBlogs = JSON.parse(rubs);
+
+                _.each(recentUpdateBlogs, (b, index) => {
+                    this._getBlogs(+b.id, blogs).then(blog => {
+                        if (!blog) {
+                            // 如果不存在（可能被删除了）
+                            b._deleted = true;
+                        }
+                        if (index == recentUpdateBlogs.length - 1) {
+                            // this.blogs = [...this.blogs];
+                            bs.signal('sg-recent-update-refresh');
+                        }
+                    });
+                });
+            }
+        }
     }
 
     _isBlogInView(id) {
@@ -518,7 +667,9 @@ export class EmBlogLeftSidebar {
                 dir.blogs = [];
             });
             $.each(this.blogs, (index, blog) => {
-                if (blog.space) {
+
+                // 只处理this.blogs中没有父博文的blog
+                if (!blog.pid && blog.space) {
                     if (blog.space.id === space.id) {
                         if (nsCtx.blogId == blog.id) {
                             space.open = true;
@@ -542,8 +693,22 @@ export class EmBlogLeftSidebar {
             });
         });
 
-        this.noSpaceBlogs = _.filter(this.blogs, b => !b.space);
+        this.noSpaceBlogs = _.filter(this.blogs, b => (!b.pid && !b.space));
+
+        this._fixChildParent([], +nsCtx.blogId, (ids) => {
+            if (ids.length) {
+                _.reverse(ids);
+                this._openChildParent(ids, 0, true, () => {
+                    this._reInitSortObjs();
+                });
+            } else {
+                this._reInitSortObjs();
+                _.delay(() => this._scrollTo(+nsCtx.blogId), 1000);
+            }
+        });
+    }
 
+    _reInitSortObjs() {
         if (this.sortObjs.length > 0) {
             _.each(this.sortObjs, sortObj => sortObj.destroy());
             this.sortObjs = [];
@@ -551,6 +716,88 @@ export class EmBlogLeftSidebar {
         this._initSortObjs();
     }
 
+    // 展开父博文层级定位到blog
+    _openChildParent(ids, index, useLocal, callback) {
+
+        // console.log(ids, index);
+
+        if (index >= ids.length) return;
+
+        let blog = this._fixBlogFromLocal(this.blogs, ids[index], true);
+
+        if (blog) {
+            if (!blog._open) {
+                blog._open = true;
+                blog.hasChild = true;
+            }
+
+            if (useLocal && blog._childs) {
+                if (index == ids.length - 1) {
+                    _.each(this.spaces, space => {
+                        if (blog.space && blog.space.id == space.id) {
+                            space.open = true;
+                            _.each(space.dirs, dir => {
+                                if (blog.dir && blog.dir.id == dir.id) {
+                                    dir.open = true;
+                                }
+                            });
+                        }
+                    });
+                    callback && callback();
+                    _.delay(() => this._scrollTo(+nsCtx.blogId), 1000);
+                }
+                this._openChildParent(ids, index + 1, useLocal, callback);
+            } else {
+                $.get('/admin/blog/list/by/pid', {
+                    pid: blog.id
+                }, (data) => {
+                    if (data.success) {
+                        blog._childs = data.data;
+                        if (index == ids.length - 1) {
+                            _.each(this.spaces, space => {
+                                if (blog.space && blog.space.id == space.id) {
+                                    space.open = true;
+                                    _.each(space.dirs, dir => {
+                                        if (blog.dir && blog.dir.id == dir.id) {
+                                            dir.open = true;
+                                        }
+                                    });
+                                }
+                            });
+                            callback && callback();
+                            _.delay(() => this._scrollTo(+nsCtx.blogId), 1000);
+                        }
+                        this._openChildParent(ids, index + 1, useLocal, callback);
+                    } else {
+                        toastr.error(data.data);
+                    }
+                });
+            }
+
+        } else {
+            console.log('_openChildParent !blog case.');
+        }
+    }
+
+    // 定位到博文的父级层级关系
+    _fixChildParent(ids, id, callback) {
+
+        this._fixBlogSync(id).then(blog => {
+            if (blog) {
+                let pid = blog.pid;
+                if (!pid) {
+                    callback && callback(ids);
+                    return;
+                }
+                ids.push(pid);
+
+                this._fixChildParent(ids, pid, callback);
+            } else {
+                console.log('_fixChildParent !blog case.');
+            }
+        });
+    }
+
     spaceToggleHandler(space) {
         space.open = !space.open;
     }
@@ -559,17 +806,125 @@ export class EmBlogLeftSidebar {
         dir.open = !dir.open;
     }
 
+    _delBlog(pblog, blogs, bid) {
+
+        let bs = _.reject(blogs, {
+            id: +bid
+        });
+
+        if (pblog != null) {
+            pblog._childs = bs;
+            pblog.hasChild = bs && bs.length > 0;
+        }
+        _.each(bs, blog => {
+            this._delBlog(blog, blog._childs, bid);
+        });
+
+        if (pblog == null) {
+            return bs;
+        }
+    }
+
+    // 从this.blogs和blog._childs中定位查找到指定id的blog
+    // this.blogs中放置的都是不含pid的blog，子级放在_childs中
+    _fixBlogFromLocal(blogs, bid, isTop) {
+
+        let _blog = null;
+        _.each(blogs, blog => {
+            if (isTop) {
+                if (!blog.pid && blog.id == bid) {
+                    _blog = blog;
+                    return false;
+                }
+            } else {
+                if (blog.pid && blog.id == bid) {
+                    _blog = blog;
+                    return false;
+                }
+            }
+            _blog = this._fixBlogFromLocal(blog._childs, bid, false);
+            if (_blog) {
+                return false;
+            }
+        });
+
+        return _blog;
+    }
+
+    // 定位查找blog，本地没有就从服务端获取，不会添加到this.blogs中
+    async _fixBlogSync(id) {
+
+        this.blogs = this.blogs ? this.blogs : [];
+
+        let blog = this._fixBlogFromLocal(this.blogs, id, true);
+
+        if (blog) return blog;
+
+        await this._getBlogs(id).then(b => {
+            if (b) {
+                blog = b;
+            }
+        });
+
+        return blog;
+    }
+
+    // 异步从服务端获取blog
+    async _getBlog(id) {
+        let blog = null;
+        if (id) {
+            await $.get('/admin/blog/get', {
+                id: id
+            }, (data) => {
+                if (data.success) {
+                    blog = data.data;
+                } else {
+                    console.warn(data.data);
+                }
+            });
+        }
+
+        return blog;
+    }
+
+    // 从本地查找blog，没找到从远端获取，并且添加到this.blogs中
+    async _getBlogs(id, blogs) {
+        this.blogs = blogs ? blogs : (this.blogs ? this.blogs : []);
+        let blog = _.find(this.blogs, {
+            id: +id
+        });
+        if (blog) return blog;
+
+        await this._getBlog(+id).then(b => {
+            if (b) {
+                blog = _.find(this.blogs, {
+                    id: +id
+                });
+                if (!blog) {
+                    blog = b;
+                    this.blogs.push(blog);
+                } else {
+                    console.log('_getBlogs blog case.');
+                }
+            }
+        });
+
+        return blog;
+    }
+
     getBlogTree() {
         return $.get('/admin/blog/listMy', (data) => {
             if (data.success) {
 
-                // 最近打开博文处理
-                this._recentOpenHandle(data.data);
-
                 this.blogs = data.data;
-                this.blog = _.find(this.blogs, {
-                    id: +nsCtx.blogId
+
+                this._fixBlogSync(+nsCtx.blogId).then(b => {
+                    this.blog = b;
+                    // 最近打开博文处理
+                    this._recentOpenHandle(this.blogs);
+                    this._recentUpdateHandle(this.blogs);
                 });
+
             }
         });
     }
@@ -640,15 +995,31 @@ export class EmBlogLeftSidebar {
         this._doFilerDebounce();
     }
 
-    _doFiler() {
-        _.each(this.blogs, b => {
+    _doChildsFilter(blogs) {
+        let hide = true;
+        _.each(blogs, b => {
             if (!_.includes(_.toLower(b.title), _.toLower(this.filter))) {
-                b._hidden = true;
+                if (b._childs) {
+                    b._hidden = this._doChildsFilter(b._childs);
+                    if (!b._hidden) {
+                        hide = false;
+                    }
+                } else {
+                    b._hidden = true;
+                }
             } else {
                 b._hidden = false;
+                hide = false;
             }
         });
 
+        return hide;
+    }
+
+    _doFiler() {
+
+        this._doChildsFilter(this.blogs);
+
         _.each(this.spaces, s => {
             if (!_.some(s.blogs, b => !b._hidden)) {
                 s._hidden = true;
@@ -664,7 +1035,8 @@ export class EmBlogLeftSidebar {
                 } else {
                     s.open = true;
                     d._hidden = false;
-                    d.open = true;
+                    d.open = !!this.filter;
+
                     spaceHidden = false;
                 }
             });
@@ -744,34 +1116,83 @@ export class EmBlogLeftSidebar {
         this.folded && $(this.leftBarRef).css('left', -$(this.leftBarRef).width());
     }
 
-    createHandler(space, dir) {
+    createHandler(space, dir, blog) {
         if (!nsCtx.isModaalOpening) {
             nsCtx.newBlogSpace = space;
             nsCtx.newBlogDir = dir;
-            // console.log(nsCtx.newBlogSpace);
+            nsCtx.newBlogBlog = blog;
             $('a[href="#modaal-blog-write"]').click();
         }
     }
 
-    createHtmlHandler(space, dir) {
-        $('.em-blog-write-html > iframe').attr('src', this.baseRes + 'blog.html' + '?_=' + new Date().getTime() + '&spaceId=' + (space ? space.id : '') + '&dirId=' + (dir ? dir.id : ''));
+    createHtmlHandler(space, dir, blog) {
+        $('.em-blog-write-html > iframe').attr('src', this.baseRes + 'blog.html' + '?_=' + new Date().getTime() + '&spaceId=' + (space ? space.id : '') + '&dirId=' + (dir ? dir.id : '') + '&pid=' + (blog ? blog.id : ''));
         $('a[href="#modaal-blog-write-html"]').click();
         return false;
     }
 
-    createMindHandler(space, dir) {
-        $('.em-blog-write-mind > iframe').attr('src', this.baseRes + 'mind.html' + '?_=' + new Date().getTime() + '&spaceId=' + (space ? space.id : '') + '&dirId=' + (dir ? dir.id : ''));
+    createMindHandler(space, dir, blog) {
+        $('.em-blog-write-mind > iframe').attr('src', this.baseRes + 'mind.html' + '?_=' + new Date().getTime() + '&spaceId=' + (space ? space.id : '') + '&dirId=' + (dir ? dir.id : '') + '&pid=' + (blog ? blog.id : ''));
         $('a[href="#modaal-blog-write-mind"]').click();
         return false;
     }
 
-    createExcelHandler(space, dir) {
-        $('.em-blog-write-excel > iframe').attr('src', this.baseRes + 'excel.html' + '?_=' + new Date().getTime() + '&spaceId=' + (space ? space.id : '') + '&dirId=' + (dir ? dir.id : ''));
+    createExcelHandler(space, dir, blog) {
+        $('.em-blog-write-excel > iframe').attr('src', this.baseRes + 'excel.html' + '?_=' + new Date().getTime() + '&spaceId=' + (space ? space.id : '') + '&dirId=' + (dir ? dir.id : '') + '&pid=' + (blog ? blog.id : ''));
         $('a[href="#modaal-blog-write-excel"]').click();
         return false;
     }
 
-    selectTplHandler(space, dir) {
-        this.blogTplSelectMd.show(space, dir);
+    selectTplHandler(space, dir, blog) {
+        this.blogTplSelectMd.show(space, dir, blog);
+    }
+
+    loadChildBlogs(blog) {
+
+        if (!blog.hasChild) return;
+
+        blog._open = !blog._open;
+        if (blog._open && !blog._childs) {
+            $.get('/admin/blog/list/by/pid', {
+                pid: blog.id
+            }, (data) => {
+                if (data.success) {
+                    blog._childs = data.data;
+                    blog.hasChild = blog._childs.length > 0;
+                    _.delay(() => {
+                        this._reInitSortObjs();
+                    }, 1000);
+                } else {
+                    toastr.error(data.data);
+                }
+            });
+        }
+    }
+
+    delBlogHandler(blog) {
+        if (this.isSuper || blog.creator.username == this.loginUser.username) {
+            this.confirmMd.show({
+                title: '删除确认',
+                content: '确认要删除该博文吗?',
+                onapprove: () => {
+                    $.post("/admin/blog/delete", {
+                        id: blog.id
+                    }, (data, textStatus, xhr) => {
+                        if (data.success) {
+                            toastr.success('删除博文成功!');
+                            ea.publish(nsCons.EVENT_BLOG_CHANGED, {
+                                action: 'deleted',
+                                blog: blog
+                            });
+                            ea.publish(nsCons.EVENT_APP_ROUTER_NAVIGATE, {
+                                to: '#/blog'
+                            });
+                        } else {
+                            toastr.error(data.data, '删除博文失败!');
+                        }
+                    });
+                }
+            });
+        }
     }
 }
diff --git a/src/resources/elements/em-blog-left-sidebar.less b/src/resources/elements/em-blog-left-sidebar.less
index 451a1bed0ced4f0bf05bd2c7e80a1a6c897a2fe1..e2448f470392ddf61c076ff510077446808ead90 100644
--- a/src/resources/elements/em-blog-left-sidebar.less
+++ b/src/resources/elements/em-blog-left-sidebar.less
@@ -1,79 +1,449 @@
 .em-blog-left-sidebar {
     &.ui.left.sidebar {
         transition: left 0.15s ease-out 0s;
+
         @media only screen and (max-width: 767px) {
             z-index: 104;
+
             &.mobile-hide {
                 // width: 0;
                 left: -300px;
             }
         }
+
         width: 300px;
         top: 55px;
         left: 0;
-        height: e("calc(100% - 55px)")!important;
+        height: e("calc(100% - 55px)") !important;
         background-color: #f5f5f5;
-        box-shadow: none!important;
+        box-shadow: none !important;
         overflow-x: hidden;
+
         .tms-body {
             .ui.space.list {
                 padding: 16px;
                 padding-left: 15px;
                 margin-bottom: 0px;
                 padding-bottom: 8px;
+
                 >.item>.content>.dirs>.list.dir {
                     margin-top: 3px; // padding-top: .25em;
                     padding-top: 5px; // padding-bottom: 0;
                     position: relative;
-                    padding-left: 5px;
-                    left: -5px; // height: 21px;
+                    padding-left: 3px;
+                    //left: -5px; // height: 21px;
+
                     &:hover {
                         box-shadow: 0px 0px 2px -1px #5791cb;
+
                         >.actions {
                             display: inline-block;
                         }
                     }
+
                     >.icon {
                         display: table-cell;
                         padding-right: 0;
                         position: relative;
                         left: -6px; // top: -4px;
                     }
+
                     >.content {
                         display: table-cell; // display: inline-block;
                         white-space: nowrap;
-                        overflow: hidden;
+                        // overflow: hidden;
                         text-overflow: ellipsis; // max-width: 200px;
                         width: 225px;
                         max-width: 225px;
+
                         // min-width: 225px;
+                        >span {
+                            display: block;
+                            white-space: nowrap;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                        }
                     }
+
                     >.actions {
                         display: none;
                         position: absolute;
                         right: 0;
-                        top: -2px;
+                        top: 3px;
+                    }
+
+                    .item.top {
+                        &:hover {
+                            >.actions {
+                                display: inline-block;
+                            }
+                        }
+
+                        .actions {
+                            display: none;
+                            position: absolute;
+                            top: 3px;
+                            right: 0;
+                        }
+
+                        >.list {
+                            >.item.child {
+                                padding-top: 5px;
+                                padding-bottom: 5px;
+                                font-weight: normal;
+
+                                >a {
+                                    display: block;
+                                    white-space: nowrap;
+                                    overflow: hidden;
+                                    text-overflow: ellipsis;
+                                }
+
+                                &.active {
+                                    font-weight: bold;
+
+                                    >a {
+                                        color: black;
+                                    }
+                                }
+
+                                &:hover {
+                                    .actions {
+                                        display: inline-block;
+                                    }
+                                }
+
+                                .actions {
+                                    display: none;
+                                    position: absolute;
+                                    top: 3px;
+                                    right: 0;
+                                }
+
+                                >.list {
+                                    >.item.child2 {
+                                        padding-top: 5px;
+                                        padding-bottom: 5px;
+                                        font-weight: normal;
+
+                                        >a {
+                                            display: block;
+                                            white-space: nowrap;
+                                            overflow: hidden;
+                                            text-overflow: ellipsis;
+                                        }
+
+                                        &.active {
+                                            font-weight: bold;
+
+                                            >a {
+                                                color: black;
+                                            }
+                                        }
+
+                                        &:hover {
+                                            .actions {
+                                                display: inline-block;
+                                            }
+                                        }
+
+                                        .actions {
+                                            display: none;
+                                            position: absolute;
+                                            top: 3px;
+                                            right: 0;
+                                        }
+
+                                        >.list {
+                                            >.item.child3 {
+                                                padding-top: 5px;
+                                                padding-bottom: 5px;
+                                                font-weight: normal;
+
+                                                >a {
+                                                    display: block;
+                                                    white-space: nowrap;
+                                                    overflow: hidden;
+                                                    text-overflow: ellipsis;
+                                                }
+
+                                                &.active {
+                                                    font-weight: bold;
+
+                                                    >a {
+                                                        color: black;
+                                                    }
+                                                }
+
+                                                &:hover {
+                                                    .actions {
+                                                        display: inline-block;
+                                                    }
+                                                }
+
+                                                .actions {
+                                                    display: none;
+                                                    position: absolute;
+                                                    top: 3px;
+                                                    right: 0;
+                                                }
+
+                                                >.list {
+                                                    >.item.child4 {
+                                                        padding-top: 5px;
+                                                        padding-bottom: 5px;
+                                                        font-weight: normal;
+
+                                                        >a {
+                                                            display: block;
+                                                            white-space: nowrap;
+                                                            overflow: hidden;
+                                                            text-overflow: ellipsis;
+                                                        }
+
+                                                        &.active {
+                                                            font-weight: bold;
+
+                                                            >a {
+                                                                color: black;
+                                                            }
+                                                        }
+
+                                                        &:hover {
+                                                            .actions {
+                                                                display: inline-block;
+                                                            }
+                                                        }
+
+                                                        .actions {
+                                                            display: none;
+                                                            position: absolute;
+                                                            top: 3px;
+                                                            right: 0;
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
                     }
                 }
+
+                >.item {
+                    &.space-item {
+                        .item.top {
+                            position: relative;
+
+                            &:hover {
+                                .actions {
+                                    display: inline-block;
+                                }
+                            }
+
+                            >.icon {
+                                padding-right: 0;
+                                position: relative;
+                                top: -1px;
+                            }
+
+                            >.content {
+                                white-space: nowrap;
+                                // overflow: hidden;
+                                text-overflow: ellipsis;
+                                width: 245px;
+                                max-width: 245px;
+
+                                >span {
+                                    overflow: hidden;
+                                    width: 100%;
+                                    // max-width: 245px;
+                                    display: inline-block;
+                                    text-overflow: ellipsis;
+                                }
+                            }
+
+                            .actions {
+                                display: none;
+                                position: absolute;
+                                right: 0;
+                                top: 3px;
+                            }
+
+                            >.list {
+                                >.item.child {
+                                    padding-top: 5px;
+                                    padding-bottom: 5px;
+                                    font-weight: normal;
+
+                                    >a {
+                                        display: block;
+                                        white-space: nowrap;
+                                        overflow: hidden;
+                                        text-overflow: ellipsis;
+                                    }
+
+                                    &.active {
+                                        font-weight: bold;
+
+                                        >a {
+                                            color: black;
+                                        }
+                                    }
+
+                                    &:hover {
+                                        .actions {
+                                            display: inline-block;
+                                        }
+                                    }
+
+                                    .actions {
+                                        display: none;
+                                        position: absolute;
+                                        top: 3px;
+                                        right: 0;
+                                    }
+
+                                    >.list {
+                                        >.item.child2 {
+                                            padding-top: 5px;
+                                            padding-bottom: 5px;
+                                            font-weight: normal;
+
+                                            >a {
+                                                display: block;
+                                                white-space: nowrap;
+                                                overflow: hidden;
+                                                text-overflow: ellipsis;
+                                            }
+
+                                            &.active {
+                                                font-weight: bold;
+
+                                                >a {
+                                                    color: black;
+                                                }
+                                            }
+
+                                            &:hover {
+                                                .actions {
+                                                    display: inline-block;
+                                                }
+                                            }
+
+                                            .actions {
+                                                display: none;
+                                                position: absolute;
+                                                top: 3px;
+                                                right: 0;
+                                            }
+
+                                            >.list {
+                                                >.item.child3 {
+                                                    padding-top: 5px;
+                                                    padding-bottom: 5px;
+                                                    font-weight: normal;
+
+                                                    >a {
+                                                        display: block;
+                                                        white-space: nowrap;
+                                                        overflow: hidden;
+                                                        text-overflow: ellipsis;
+                                                    }
+
+                                                    &.active {
+                                                        font-weight: bold;
+
+                                                        >a {
+                                                            color: black;
+                                                        }
+                                                    }
+
+                                                    &:hover {
+                                                        .actions {
+                                                            display: inline-block;
+                                                        }
+                                                    }
+
+                                                    .actions {
+                                                        display: none;
+                                                        position: absolute;
+                                                        top: 3px;
+                                                        right: 0;
+                                                    }
+
+                                                    >.list {
+                                                        >.item.child4 {
+                                                            padding-top: 5px;
+                                                            padding-bottom: 5px;
+                                                            font-weight: normal;
+
+                                                            >a {
+                                                                display: block;
+                                                                white-space: nowrap;
+                                                                overflow: hidden;
+                                                                text-overflow: ellipsis;
+                                                            }
+
+                                                            &.active {
+                                                                font-weight: bold;
+
+                                                                >a {
+                                                                    color: black;
+                                                                }
+                                                            }
+
+                                                            &:hover {
+                                                                .actions {
+                                                                    display: inline-block;
+                                                                }
+                                                            }
+
+                                                            .actions {
+                                                                display: none;
+                                                                position: absolute;
+                                                                top: 3px;
+                                                                right: 0;
+                                                            }
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
                 >.item {
                     position: relative;
+
                     &:hover {
                         box-shadow: 0px 0px 2px -1px #5791cb;
-                        >.actions {
+
+                        .actions {
                             display: inline-block;
                         }
                     }
+
                     >.icon {
                         padding-right: 0;
                         position: relative;
                         top: -1px;
                     }
+
                     >.content {
-                        white-space: nowrap; 
+                        white-space: nowrap;
                         // overflow: hidden;
                         text-overflow: ellipsis;
-                        width: 245px;;
+                        width: 245px;
+                        ;
                         max-width: 245px;
+
                         >span {
                             overflow: hidden;
                             width: 100%;
@@ -82,77 +452,277 @@
                             text-overflow: ellipsis;
                         }
                     }
-                    >.actions {
+
+                    .actions {
                         display: none;
                         position: absolute;
                         right: 0;
-                        top: -2px;
+                        top: 3px;
                     }
                 }
+
                 .ui.bulleted.list {
                     padding-left: 16px;
+
                     >div.item {
                         // max-width: 220px;
                         padding-top: 5px;
                         padding-bottom: 5px;
+
                         >a {
                             display: block;
                             white-space: nowrap;
                             overflow: hidden;
                             text-overflow: ellipsis;
-                            // min-width: 210px;
+
+                            &:hover {
+                                box-shadow: 0px 0px 2px -1px #5791cb;
+                                background-color: #e8e1e0;
+                            }
                         }
+
                         &:before {
                             color: #999;
                         }
+
                         &.active {
                             font-weight: bold;
+
                             >a {
                                 color: black;
                             }
                         }
+
                         &:hover {
-                            // box-shadow: 0px 0px 2px -1px #5791cb;
-                            background-color: rgba(232, 224, 224, 0.5);
+                            box-shadow: -1px 0px 1px -1px #838080;
                         }
+
                         &.aurelia-hide {
-                            display: none!important;
+                            display: none !important;
                         }
                     }
                 }
             }
+
             .ui.bulleted.list.no-space {
                 padding: 20px;
                 margin-top: 0px;
                 padding-top: 0px;
-                >div.item {
+
+                div.item {
+                    >a {
+                        &:hover {
+                            box-shadow: 0px 0px 2px -1px #5791cb;
+                            background-color: #e8e1e0;
+                        }
+                    }
+                    &:hover {
+                        box-shadow: -1px 0px 1px -1px #838080;
+                    }
+                }
+
+                >div.item.top {
                     padding-top: 5px;
                     padding-bottom: 5px;
+
                     >a {
                         display: block;
                         white-space: nowrap;
                         overflow: hidden;
                         text-overflow: ellipsis;
-                        // min-width: 242px;
                     }
+
                     &:before {
                         color: #999;
                     }
+
                     &.active {
-                        font-weight: bold;
                         >a {
+                            font-weight: bold;
                             color: black;
                         }
                     }
+
                     &:hover {
-                        // box-shadow: 0px 0px 2px -1px #5791cb;
-                        background-color: rgba(232, 224, 224, 0.5);
+                        .actions {
+                            display: inline-block;
+                        }
+                    }
+
+                    .actions {
+                        display: none;
+                        position: absolute;
+                        top: 3px;
+                        right: 0;
+                    }
+
+                    >.list {
+                        >.item.child {
+                            padding-top: 5px;
+                            padding-bottom: 5px;
+
+                            >a {
+                                display: block;
+                                white-space: nowrap;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                            }
+
+                            &.active {
+                                font-weight: bold;
+
+                                >a {
+                                    color: black;
+                                }
+                            }
+
+                            &:hover {
+                                .actions {
+                                    display: inline-block;
+                                }
+                            }
+
+                            .actions {
+                                display: none;
+                                position: absolute;
+                                top: 3px;
+                                right: 0;
+                            }
+
+                            >.list {
+                                >.item.child2 {
+                                    padding-top: 5px;
+                                    padding-bottom: 5px;
+                                    font-weight: normal;
+
+                                    >a {
+                                        display: block;
+                                        white-space: nowrap;
+                                        overflow: hidden;
+                                        text-overflow: ellipsis;
+                                    }
+
+                                    &.active {
+                                        font-weight: bold;
+
+                                        >a {
+                                            color: black;
+                                        }
+                                    }
+
+                                    &:hover {
+                                        .actions {
+                                            display: inline-block;
+                                        }
+                                    }
+
+                                    .actions {
+                                        display: none;
+                                        position: absolute;
+                                        top: 3px;
+                                        right: 0;
+                                    }
+
+                                    >.list {
+                                        >.item.child3 {
+                                            padding-top: 5px;
+                                            padding-bottom: 5px;
+                                            font-weight: normal;
+
+                                            >a {
+                                                display: block;
+                                                white-space: nowrap;
+                                                overflow: hidden;
+                                                text-overflow: ellipsis;
+                                            }
+
+                                            &.active {
+                                                font-weight: bold;
+
+                                                >a {
+                                                    color: black;
+                                                }
+                                            }
+
+                                            &:hover {
+                                                .actions {
+                                                    display: inline-block;
+                                                }
+                                            }
+
+                                            .actions {
+                                                display: none;
+                                                position: absolute;
+                                                top: 3px;
+                                                right: 0;
+                                            }
+
+                                            >.list {
+                                                >.item.child4 {
+                                                    padding-top: 5px;
+                                                    padding-bottom: 5px;
+                                                    font-weight: normal;
+
+                                                    >a {
+                                                        display: block;
+                                                        white-space: nowrap;
+                                                        overflow: hidden;
+                                                        text-overflow: ellipsis;
+                                                    }
+
+                                                    &.active {
+                                                        font-weight: bold;
+
+                                                        >a {
+                                                            color: black;
+                                                        }
+                                                    }
+
+                                                    &:hover {
+                                                        .actions {
+                                                            display: inline-block;
+                                                        }
+                                                    }
+
+                                                    .actions {
+                                                        display: none;
+                                                        position: absolute;
+                                                        top: 3px;
+                                                        right: 0;
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .ui.bulleted.list {
+
+                    >div.item {
+
+                        &.active {
+                            font-weight: bold;
+
+                            >a {
+                                color: black;
+                            }
+                        }
+
+                        &.aurelia-hide {
+                            display: none !important;
+                        }
                     }
                 }
             }
-            height: e("calc(100% - 40px)")!important;
+
+            height: e("calc(100% - 40px)") !important;
             overflow-y: auto; // fix firefix scrollbar issue
         }
+
         .tms-footer {
             position: absolute;
             width: 100%;
@@ -160,18 +730,22 @@
             left: 0;
             bottom: 0;
             background-color: #efe4e4;
+
             .ui.menu {
                 border: none;
                 border-radius: 0;
                 background-color: #e8e0e0;
+
                 >.item {
                     &.tms-search {
                         position: relative;
                         height: 40px;
                         width: 207px;
+
                         &:before {
                             width: 0;
                         }
+
                         >.remove.icon {
                             position: absolute;
                             right: 5px;
@@ -181,18 +755,28 @@
                 }
             }
         }
+
         .tms-split {
             width: 3px;
             height: e("calc(100% - 40px)");
             position: absolute;
             top: 0;
             right: 0;
-            // background-color: red;
             cursor: ew-resize;
+
             &:hover {
                 background-color: #e8e0e0;
             }
         }
+
+        .ui.dropdown .menu>.header {
+            margin-top: 1rem !important;
+            margin-bottom: 0.75rem !important;
+        }
+
+        .ui.list .list .item.aurelia-hide {
+            display: none !important;
+        }
     }
 
     .ui.button.fold {
@@ -202,18 +786,17 @@
         right: 8px;
         margin: 0;
         opacity: 0.6;
+
         &:hover {
             opacity: 1;
         }
     }
+
     &:hover {
         .ui.button.fold {
             display: block;
         }
     }
-    // &.bar-fold {
-    //     left: -300px!important;
-    // }
 }
 
 @media only screen and (max-width: 767px) {
diff --git a/src/resources/elements/em-blog-space-update.js b/src/resources/elements/em-blog-space-update.js
index 7312cf86adf4a569ab28f78c3b61e0a7c1dcb415..930851b7aaed17e39b8955f2e8e818ac2e306a9a 100644
--- a/src/resources/elements/em-blog-space-update.js
+++ b/src/resources/elements/em-blog-space-update.js
@@ -1,4 +1,7 @@
-import { bindable, containerless } from 'aurelia-framework';
+import {
+    bindable,
+    containerless
+} from 'aurelia-framework';
 
 @containerless
 export class EmBlogSpaceUpdate {
@@ -17,7 +20,10 @@ export class EmBlogSpaceUpdate {
 
     show(blog) {
         this.blog = blog;
-        this.emModal.show({ hideOnApprove: false, autoDimmer: true });
+        this.emModal.show({
+            hideOnApprove: false,
+            autoDimmer: true
+        });
     }
 
     showHandler() {
@@ -44,6 +50,7 @@ export class EmBlogSpaceUpdate {
                 }
                 ea.publish(nsCons.EVENT_BLOG_CHANGED, {
                     action: 'updated',
+                    pid: this.blog.pid,
                     blog: data.data
                 });
                 modal.hide();
@@ -59,7 +66,9 @@ export class EmBlogSpaceUpdate {
                 $(this.spacesRef).dropdown('clear').dropdown({
                     onChange: (value, text, $choice) => {
                         if (!!value) {
-                            this.space = _.find(this.spaces, { id: +value });
+                            this.space = _.find(this.spaces, {
+                                id: +value
+                            });
                         } else {
                             this.space = null;
                         }
diff --git a/src/resources/elements/em-blog-tpl-select.js b/src/resources/elements/em-blog-tpl-select.js
index f2d1d36815b0467a77c4cacfe079d66946925f62..beb09710947949f810577aab6305d643bfeb1ebe 100644
--- a/src/resources/elements/em-blog-tpl-select.js
+++ b/src/resources/elements/em-blog-tpl-select.js
@@ -40,16 +40,18 @@ export class EmBlogTplSelect {
     unbind() {
         this.space = null;
         this.dir = null;
+        this.blog = null;
     }
 
     approveHandler(modal) {
 
     }
 
-    show(space, dir) {
+    show(space, dir, blog) {
 
         this.space = space;
         this.dir = dir;
+        this.blog = blog;
 
         this.emModal.show({
             hideOnApprove: true,
@@ -59,17 +61,18 @@ export class EmBlogTplSelect {
 
     createHandler(item) {
         if (item.editor == 'Html') {
-            $('.em-blog-write-html > iframe').attr('src', utils.getResourceBase() + 'blog.html?id=' + item.id + '&copy' + '&_=' + new Date().getTime() + '&spaceId=' + (this.space ? this.space.id : '') + '&dirId=' + (this.dir ? this.dir.id : ''));
+            $('.em-blog-write-html > iframe').attr('src', utils.getResourceBase() + 'blog.html?id=' + item.id + '&copy' + '&_=' + new Date().getTime() + '&spaceId=' + (this.space ? this.space.id : '') + '&dirId=' + (this.dir ? this.dir.id : '') + '&pid=' + (this.blog ? this.blog.id : ''));
             $('a[href="#modaal-blog-write-html"]').click();
         } else if (item.editor == 'Mind') {
-            $('.em-blog-write-mind > iframe').attr('src', utils.getResourceBase() + 'mind.html?id=' + item.id + '&copy' + '&_=' + new Date().getTime() + '&spaceId=' + (this.space ? this.space.id : '') + '&dirId=' + (this.dir ? this.dir.id : ''));
+            $('.em-blog-write-mind > iframe').attr('src', utils.getResourceBase() + 'mind.html?id=' + item.id + '&copy' + '&_=' + new Date().getTime() + '&spaceId=' + (this.space ? this.space.id : '') + '&dirId=' + (this.dir ? this.dir.id : '') + (this.blog ? this.blog.id : ''));
             $('a[href="#modaal-blog-write-mind"]').click();
         } else if (item.editor == 'Excel') {
-            $('.em-blog-write-excel > iframe').attr('src', utils.getResourceBase() + 'excel.html?id=' + item.id + '&copy' + '&_=' + new Date().getTime() + '&spaceId=' + (this.space ? this.space.id : '') + '&dirId=' + (this.this.dir ? this.dir.id : ''));
+            $('.em-blog-write-excel > iframe').attr('src', utils.getResourceBase() + 'excel.html?id=' + item.id + '&copy' + '&_=' + new Date().getTime() + '&spaceId=' + (this.space ? this.space.id : '') + '&dirId=' + (this.this.dir ? this.dir.id : '') + (this.blog ? this.blog.id : ''));
             $('a[href="#modaal-blog-write-excel"]').click();
         } else if (!nsCtx.isModaalOpening) {
             nsCtx.newBlogSpace = this.space;
             nsCtx.newBlogDir = this.dir;
+            nsCtx.newBlogBlog = this.blog;
             ea.publish(nsCons.EVENT_BLOG_ACTION, {
                 action: 'copy',
                 id: item.id
diff --git a/src/resources/elements/em-blog-write.js b/src/resources/elements/em-blog-write.js
index f85cf7686081f0a21d327f0095207e30762ff99c..234af66e12e7d1d3f74d2793fde86a116932439c 100644
--- a/src/resources/elements/em-blog-write.js
+++ b/src/resources/elements/em-blog-write.js
@@ -99,6 +99,7 @@ export class EmBlogWrite {
                 nsCtx.isModaalOpening = false;
                 nsCtx.newBlogSpace = null;
                 nsCtx.newBlogDir = null;
+                nsCtx.newBlogBlog = null;
 
                 if (this.stompClient) {
                     this.stompClient.disconnect(() => {
@@ -767,7 +768,7 @@ export class EmBlogWrite {
         }
 
         if (!this.blog) {
-            if (event.ctrlKey || nsCtx.newBlogSpace) {
+            if (event.ctrlKey || nsCtx.newBlogSpace || nsCtx.newBlogBlog) {
                 // 给消息体增加uuid
                 nsCtx.b_uuid = nsCtx.b_uuid || utils.uuid();
                 $.post(`/admin/blog/create`, {
@@ -777,6 +778,7 @@ export class EmBlogWrite {
                     content: content,
                     spaceId: nsCtx.newBlogSpace ? nsCtx.newBlogSpace.id : '',
                     dirId: nsCtx.newBlogDir ? nsCtx.newBlogDir.id : '',
+                    pid: nsCtx.newBlogBlog ? nsCtx.newBlogBlog.id : '',
                     privated: false,
                     uuid: nsCtx.b_uuid,
                     contentHtml: utils.md2html(content, true)